@guiexpert/react-table 18.0.7 → 18.0.9

package/README.md

@@ -7,7 +7,7 @@ This is the react component of the GuiExpert Table Project.
 
 This is the UI-agnostic table component for your next web app. 😊
 
-<img src="https://raw.githubusercontent.com/guiexperttable/ge-table/main/apps/table-website/src/assets/screens/heatmap.png" width="50%">
+<img src="https://raw.githubusercontent.com/guiexperttable/ge-table/main/apps/webpage-guiexpert/src/assets/screens/heatmap.png" width="50%">
 
 ### Features
 - Handle large datasets easily

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@guiexpert/react-table",
-  "version": "18.0.7",
+  "version": "18.0.9",
   "type": "module",
   "main": "./index.js",
   "types": "./index.d.ts",
   "lib": {
     "entryFile": "src/index.ts"
   },
+  "publishConfig": {
+    "directory": "dist"
+  },
   "exports": {
     ".": {
       "import": "./index.js",
@@ -17,7 +20,7 @@
     "tslib": "^2.3.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "@guiexpert/table": "^1.1.24"
+    "@guiexpert/table": "^1.1.26"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.1.1",

package/.eslintrc.json

@@ -1,34 +0,0 @@
-{
-  "extends": [
-    "plugin:@nrwl/nx/react",
-    "../../.eslintrc.json"
-  ],
-  "ignorePatterns": [
-    "!**/*"
-  ],
-  "overrides": [
-    {
-      "files": [
-        "*.ts",
-        "*.tsx",
-        "*.js",
-        "*.jsx"
-      ],
-      "rules": {}
-    },
-    {
-      "files": [
-        "*.ts",
-        "*.tsx"
-      ],
-      "rules": {}
-    },
-    {
-      "files": [
-        "*.js",
-        "*.jsx"
-      ],
-      "rules": {}
-    }
-  ]
-}

package/dist/README.md

@@ -1,102 +0,0 @@
-
-# ReactTable (GuiExpert Table)
-
-This is the react component of the GuiExpert Table Project.
-
-## Become a master at creating web applications with large tables
-
-This is the UI-agnostic table component for your next web app. 😊
-
-<img src="https://raw.githubusercontent.com/guiexperttable/ge-table/main/apps/table-website/src/assets/screens/heatmap.png" width="50%">
-
-### Features
-- Handle large datasets easily
-- Excellent performance for large tables by vertical and horizontal virtual scrolling
-- Fully-featured (advanced sorting and filtering)
-- Highly customizable orderData grid
-- Outstanding performance
-- No third-party dependencies
-- UI-agnostic
-- Column Interactions (resize, reorder)
-- Sorting Rows
-- Row, Column, and Range Selection
-- Single and Multi Selection
-- UI-agnostic
-- Row and Column Spanning
-- Fixed Columns (Left and Right)
-- Tree table (Hierarchical View)
-- Accessibility support: Keyboard Shortcuts
-- Custom Filtering
-- In-place Cell Editing
-- Userdefined Key and Mouse Events
-- Customizable Look & Feel (via CSS variables)
-- Row sorting
-- Column Reordering (Drag and Drop)
-- State Persistence (Row Sorting, Column Order, Selection)
-- Customizable Cell Contents via Renderer for Header, Body and Footer
-- Full control over the HTML structure and style
-
-
-## Links
-
-- [Demos](https://gui.expert/demos)
-- [Documentation](https://gui.expert/doc)
-- [API](https://gui.expert/api)
-
-## Get Started
-
-Add the following two NPM packages to your existing react project (run this in your project root directory):
-
-```
-npm install --save @guiexpert/table @guiexpert/react-table
-```
-
-Add GuiexpertTable component to a template:
-
-```
-return (
-    <>
-      <GuiexpertTable
-        tableModel={tableModel}
-        tableOptions={new TableOptions}
-      />
-    </>
-  );
-```
-
-Import the following classes in your component:
-```
-import { GuiexpertTable } from "@guiexpert/react-table";
-import {
-  GeMouseEvent,
-  TableApi
-  TableFactory,
-  TableModelIf,
-  TableOptions,
-  TableOptionsIf
-} from "@guiexpert/table";
-```
-
-
-Add a tableModel property and a onTableReady method to the component:
-
-```
-const tableModel: TableModelIf = TableFactory.createTableModel({
-  headerData: [
-    ['Header 1', 'Header 2']
-  ],
-  bodyData: [
-    ['Text 1a', 'Text 2a'],
-    ['Text 1b', 'Text 2b'],
-  ]
-});  
-
-function onTableReady(api: TableApi) {
-  console.info("onTableReady API:", api);
-}
-```
-
-There are numerous possibilities to create table models.
-Please refer to the [Documentation](https://gui.expert/doc) for further information or the [Demo](https://gui.expert/demos) section for examples.
-
-

package/dist/package.json

@@ -1,45 +0,0 @@
-{
-  "name": "@guiexpert/react-table",
-  "version": "18.0.7",
-  "type": "module",
-  "main": "./index.js",
-  "types": "./index.d.ts",
-  "lib": {
-    "entryFile": "src/index.ts"
-  },
-  "scripts": {
-    "i": "pnpm i",
-    "patch-version": "node patch.js",
-    "build": "vite build",
-    "npm-pub": "pnpm publish --no-git-checks --access public"
-  },
-  "exports": {
-    ".": {
-      "import": "./index.js",
-      "require": "./index.cjs"
-    }
-  },
-  "dependencies": {
-    "tslib": "^2.3.0",
-    "@guiexpert/table": "workspace:^",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-react": "^4.1.1",
-    "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.2.15",
-    "@testing-library/react": "^14.1.0",
-    "@types/node": "^20.11.17",
-    "vite": "^5.1.1",
-    "vite-plugin-dts": "^3.7.2",
-    "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-static-copy": "^0.17.0",
-    "vite-tsconfig-paths": "^4.2.1",
-    "vite-plugin-babel": "^1.2.0",
-    "react-test-renderer": "^18.2.0",
-    "ts-node": "10.9.1",
-    "tsconfig": "^7.0.0",
-    "typescript": "5.2.2"
-  }
-}

package/jest.config.ts

@@ -1,11 +0,0 @@
-/* eslint-disable */
-export default {
-  displayName: "react-table",
-  preset: "../../jest.preset.js",
-  transform: {
-    "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "@nrwl/react/plugins/jest",
-    "^.+\\.[tj]sx?$": ["babel-jest", { presets: ["@nrwl/react/babel"] }]
-  },
-  moduleFileExtensions: ["ts", "tsx", "js", "jsx"],
-  coverageDirectory: "../../coverage/libs/react-table"
-};

package/patch.js

@@ -1,16 +0,0 @@
-import fs from 'fs';
-
-const packageJsonPath = 'package.json';
-
-try {
-  const pack = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
-  const currentVersion = pack.version;
-  const [major, minor, patch] = currentVersion.split('.').map(Number);
-  const newPatchVersion = `${major}.${minor}.${patch + 1}`;
-  pack.version = newPatchVersion;
-  fs.writeFileSync(packageJsonPath, JSON.stringify(pack, null, 2));
-  console.log(`${pack.name} -> version patched to ${newPatchVersion}.`);
-
-} catch (error) {
-  console.error('Error:', error);
-}

package/src/index.ts

@@ -1,2 +0,0 @@
-export * from "./lib/guiexpert-table";
-export * from "./lib/component-renderer-wrapper";

package/src/lib/component-renderer-wrapper.ts

@@ -1,39 +0,0 @@
-import { AreaIdent, AreaModelIf, CellRendererIf, DomServiceIf, RendererCleanupFnType } from "@guiexpert/table";
-import { createRoot } from "react-dom/client";
-
-
-export class ComponentRendererWrapper implements CellRendererIf {
-
-  constructor(
-    private readonly Component: any
-  ) {
-    console.info(Component);
-  }
-
-  render(
-    cellDiv: HTMLDivElement,
-    rowIndex: number,
-    columnIndex: number,
-    areaIdent: AreaIdent,
-    areaModel: AreaModelIf,
-    cellValue: any,
-    domService: DomServiceIf): RendererCleanupFnType | undefined {
-
-    const props = {
-      cellDiv,
-      rowIndex,
-      columnIndex,
-      areaIdent,
-      areaModel,
-      cellValue
-    };
-    const root = createRoot(cellDiv, {});
-    root.render(this.Component(props));
-
-    return () => {
-      root.unmount();
-    };
-  }
-
-
-}

package/src/lib/guiexpert-table.tsx

@@ -1,168 +0,0 @@
-import {
-  EventListenerIf,
-  FocusModelIf,
-  GeModelChangeEvent,
-  GeMouseEvent, LicenseManager, SelectionModelIf,
-  SimpleDomService,
-  TableApi,
-  TableModelIf,
-  TableOptions,
-  TableScope
-} from '@guiexpert/table';
-import { useEffect, useRef } from "react";
-
-export type GeMouseEventFn = (evt: GeMouseEvent) => {};
-export type GeCheckboxEventFn = (evt: any[]) => {};
-export type GeTableReadyEventFn = (evt: TableApi) => {};
-export type GeModelChangeEventFn = (evt: GeModelChangeEvent) => {};
-export type GeSelectionChangeEventFn = (evt: SelectionModelIf) => {};
-export type GeFocusChangeEventFn = (evt: FocusModelIf) => {};
-
-export interface GuiexpertTableProps {
-  tableModel: TableModelIf,
-  tableOptions?: TableOptions,
-  mouseMoved?: GeMouseEventFn,
-  contextmenu?: GeMouseEventFn,
-  mouseClicked?: GeMouseEventFn,
-  mouseDragging?: GeMouseEventFn,
-  mouseDraggingEnd?: GeMouseEventFn,
-  checkboxChanged?: GeCheckboxEventFn,
-  modelChanged?: GeModelChangeEventFn,
-  selectionChanged?: GeSelectionChangeEventFn;
-  focusChanged?: GeFocusChangeEventFn;
-  tableReady?: GeTableReadyEventFn,
-  licenseKey?: string,
-}
-
-/**
- * Initialize and render the GuiexpertTable component.
- *
- * @param {Object} props - The properties of the GuiexpertTable component.
- * @param {TableModel} props.tableModel - The model for the table.
- * @param {TableOptions} [props.tableOptions=new TableOptions()] - The options for the table.
- * @param {Function} [props.mouseMoved] - The callback for mouse movement events.
- * @param {Function} [props.checkboxChanged] - The callback for checkbox change events.
- * @param {Function} [props.contextmenu] - The callback for context menu events.
- * @param {Function} [props.modelChanged] - The callback for model change events.
- * @param {Function} [props.mouseClicked] - The callback for mouse click events.
- * @param {Function} [props.mouseDragging] - The callback for mouse dragging events.
- * @param {Function} [props.mouseDraggingEnd] - The callback for mouse dragging end events.
- * @param {Function} [props.tableReady] - The callback for when the table is ready.
- * @param {string} [props.licenseKey] - The license key for the GuiexpertTable component.
- *
- * @returns {JSX.Element} - The rendered GuiexpertTable component.
- */
-export function GuiexpertTable(
-  {
-    tableModel,
-    tableOptions = new TableOptions(),
-    mouseMoved,
-    checkboxChanged,
-    contextmenu,
-    modelChanged,
-    mouseClicked,
-    mouseDragging,
-    mouseDraggingEnd,
-    selectionChanged,
-    focusChanged,
-    tableReady,
-    licenseKey
-  }: GuiexpertTableProps) {
-
-  const myContainer = useRef(null);
-  let initialized = false;
-
-  useEffect(() => {
-    if (myContainer.current && !initialized) {
-      initTable(myContainer.current);
-      initialized = true;
-    }
-  });
-
-  let root: HTMLDivElement | null;
-
-  const initTable = (ele: HTMLDivElement) => {
-    const listener: EventListenerIf = {
-
-      onSelectionChanged(model: SelectionModelIf): void {
-        if (selectionChanged) {
-          selectionChanged(model);
-        }
-      },
-
-      onFocusChanged(model: FocusModelIf): void{
-        if (focusChanged) {
-          focusChanged(model);
-        }
-      },
-
-      onCheckboxChanged: (evt: any[]) => {
-        if (checkboxChanged) {
-          checkboxChanged(evt);
-        }
-      },
-
-      onContextmenu: (evt: GeMouseEvent) => {
-        if (contextmenu) {
-          contextmenu(evt);
-        }
-      },
-
-      onModelChanged: (evt: GeModelChangeEvent) => {
-        if (modelChanged) {
-          modelChanged(evt);
-        }
-      },
-
-      onMouseClicked: (evt: GeMouseEvent) => {
-        if (mouseClicked) {
-          mouseClicked(evt);
-        }
-      },
-
-      onMouseDragging: (evt: GeMouseEvent) => {
-        if (mouseDragging) {
-          mouseDragging(evt);
-        }
-      },
-
-      onMouseDraggingEnd: (evt: GeMouseEvent) => {
-        if (mouseDraggingEnd) {
-          mouseDraggingEnd(evt);
-        }
-      },
-
-      onMouseMoved: (evt: GeMouseEvent) => {
-        if (mouseMoved) {
-          mouseMoved(evt);
-        }
-      }
-    };
-
-    const tableScope = new TableScope(
-      ele, tableModel, new SimpleDomService(), tableOptions, listener
-    );
-    tableScope.firstInit();
-    if (tableReady) {
-      tableReady(tableScope.getApi());
-    }
-    if (licenseKey) LicenseManager.getInstance().setLicenseKey(licenseKey);
-  };
-
-  return (
-    <div
-      ref={myContainer}
-      className="container-div"
-      style={{
-        width: "100%",
-        height: "100%",
-        background: "transparent",
-        padding: "0",
-        margin: "0"
-      }}></div>
-  );
-}
-
-export default GuiexpertTable;
-
-

package/src/lib/react-table.module.css

@@ -1,8 +0,0 @@
-/*
- * Replace this with your own classes
- *
- * e.g.
- * .container {
- * }
-*/
-

package/src/lib/react-table.spec.tsx

@@ -1,6 +0,0 @@
-describe("ReactTable", () => {
-  // it("should render successfully", () => {
-  //   const { baseElement } = render(<ReactTable />);
-  //   expect(baseElement).toBeTruthy();
-  // });
-});

package/tsconfig.json

@@ -1,23 +0,0 @@
-{
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "allowJs": false,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "types": [
-      "vite/client"
-    ]
-  },
-  "files": [],
-  "include": [],
-  "references": [
-    {
-      "path": "./tsconfig.lib.json"
-    },
-    {
-      "path": "./tsconfig.spec.json"
-    }
-  ],
-  "extends": "../../tsconfig.base.json"
-}

package/tsconfig.lib.json

@@ -1,30 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "types": [
-      "node",
-      "vite/client"
-    ]
-  },
-  "files": [
-    "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
-    "../../node_modules/@nrwl/react/typings/image.d.ts"
-  ],
-  "exclude": [
-    "**/*.spec.ts",
-    "**/*.test.ts",
-    "**/*.spec.tsx",
-    "**/*.test.tsx",
-    "**/*.spec.js",
-    "**/*.test.js",
-    "**/*.spec.jsx",
-    "**/*.test.jsx"
-  ],
-  "include": [
-    "**/*.js",
-    "**/*.jsx",
-    "**/*.ts",
-    "**/*.tsx"
-  ]
-}

package/tsconfig.spec.json

@@ -1,23 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "module": "commonjs",
-    "types": [
-      "jest",
-      "node"
-    ]
-  },
-  "include": [
-    "jest.config.ts",
-    "src/**/*.test.ts",
-    "src/**/*.spec.ts",
-    "src/**/*.test.tsx",
-    "src/**/*.spec.tsx",
-    "src/**/*.test.js",
-    "src/**/*.spec.js",
-    "src/**/*.test.jsx",
-    "src/**/*.spec.jsx",
-    "src/**/*.d.ts"
-  ]
-}

package/vite.config.ts

@@ -1,69 +0,0 @@
-
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import viteTsConfigPaths from "vite-tsconfig-paths";
-import dts from "vite-plugin-dts";
-import { join } from "path";
-import {viteStaticCopy} from "vite-plugin-static-copy";
-
-export default defineConfig({
-  cacheDir: "../../node_modules/.vite/react-table",
-
-  plugins: [
-    dts({
-      entryRoot: "src",
-      tsconfigPath: join(__dirname, "tsconfig.lib.json"),
-      
-    }),
-    react(),
-
-    viteStaticCopy({
-      targets: [
-        {
-          src: 'README.md',
-          dest: './'
-        },
-        {
-          src: 'package.json',
-          dest: './'
-        }
-      ]
-    })
-  ],
-
-  // Uncomment this if you are using workers.
-  // worker: {
-  //  plugins: [
-  //    viteTsConfigPaths({
-  //      root: '../../',
-  //    }),
-  //  ],
-  // },
-
-  // Configuration for building your library.
-  // See: https://vitejs.dev/guide/build.html#library-mode
-  build: {
-    lib: {
-      // Could also be a dictionary or array of multiple entry points.
-      entry: "src/index.ts",
-      name: "react-table",
-      fileName: "index",
-      // Change this to the formats you want to support.
-      // Don't forgot to update your package.json as well.
-      formats: ["es", "cjs"]
-    },
-    rollupOptions: {
-      // External packages that should not be bundled into your library.
-      external: ["react", "react-dom", "react/jsx-runtime"]
-    }
-  },
-  resolve: {
-    alias: [
-      {
-        find: /@guiexpert\/table/,
-        replacement: join(__dirname, '..', 'table', 'src'),
-      },
-    ],
-  }
-
-});