@guiexpert/react-table 0.0.1 → 1.0.2

package/.eslintrc.json

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

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/react-table.iml" filepath="$PROJECT_DIR$/.idea/react-table.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/react-table.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

package/README.md

@@ -0,0 +1,103 @@
+
+# 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/table-website/main/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 data 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 ReactTable component to a template:
+
+```
+return (
+    <>
+      <ReactTable
+        tableModel={tableModel}
+        tableOptions={new TableOptions}
+      />
+    </>
+  );
+```
+
+Import the following classes in your component:
+```
+import { ReactTable } from "@guiexpert/react-table";
+import {
+  GeMouseEvent,
+  TableApi
+  TableModelFactory,
+  TableModelIf,
+  TableOptions,
+  TableOptionsIf
+} from "@guiexpert/table";
+```
+
+
+Add a tableModel property and a onTableReady method to the component:
+
+```
+const tableModel: TableModelIf = TableModelFactory
+  .createByArrayOfArraysParams<any>(param: {
+    columnLabels: [
+      ['Header 1', 'Header 2']
+    ],
+    data: [
+      ['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/jest.config.ts

@@ -0,0 +1,11 @@
+/* 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/package.json

@@ -1,6 +1,9 @@
 {
   "name": "@guiexpert/react-table",
-  "version": "0.0.1",
+  "version": "1.0.2",
+  "scripts": {
+    "publish": "npm publish"
+  },
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {

package/project.json

@@ -0,0 +1,54 @@
+{
+  "name": "@guiexpert/react-table",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/react-table/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": [
+        "{options.outputFile}"
+      ],
+      "options": {
+        "lintFilePatterns": [
+          "libs/react-table/**/*.{ts,tsx,js,jsx}"
+        ]
+      }
+    },
+    "build": {
+      "executor": "@nrwl/vite:build",
+      "outputs": [
+        "{options.outputPath}"
+      ],
+      "defaultConfiguration": "production",
+      "options": {
+        "outputPath": "dist/libs/react-table"
+      },
+      "configurations": {
+        "development": {
+          "mode": "development"
+        },
+        "production": {
+          "mode": "production"
+        }
+      }
+    },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": [
+        "{workspaceRoot}/coverage/{projectRoot}"
+      ],
+      "options": {
+        "jestConfig": "libs/react-table/jest.config.ts",
+        "passWithNoTests": true
+      },
+      "configurations": {
+        "ci": {
+          "ci": true,
+          "codeCoverage": true
+        }
+      }
+    }
+  }
+}

package/{index.d.ts → src/index.ts}

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

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

@@ -0,0 +1,39 @@
+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

@@ -0,0 +1,126 @@
+import {
+  GeModelChangeEvent,
+  GeMouseEvent,
+  SimpleDomService,
+  TableApi,
+  TableModelIf,
+  TableOptions,
+  TableScope
+} from "@guiexpert/table";
+import React, { 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 interface GuiexpertTableProps {
+  tableModel: TableModelIf,
+  tableOptions?: TableOptions,
+  mouseMoved?: GeMouseEventFn,
+  contextmenu?: GeMouseEventFn,
+  mouseClicked?: GeMouseEventFn,
+  mouseDragging?: GeMouseEventFn,
+  mouseDraggingEnd?: GeMouseEventFn,
+  checkboxChanged?: GeCheckboxEventFn,
+  modelChanged?: GeModelChangeEventFn,
+  tableReady?: GeTableReadyEventFn
+}
+
+export function GuiexpertTable(
+  {
+    tableModel,
+    tableOptions = new TableOptions(),
+    mouseMoved,
+    checkboxChanged,
+    contextmenu,
+    modelChanged,
+    mouseClicked,
+    mouseDragging,
+    mouseDraggingEnd,
+    tableReady
+  }: 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 = {
+      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());
+    }
+  };
+
+  return (
+    <div
+      ref={myContainer}
+      className="container-div"
+      style={{
+        width: "100%",
+        height: "100%",
+        backgroundColor: "transparent",
+        padding: "0",
+        margin: "0"
+      }}></div>
+  );
+}
+
+export default GuiexpertTable;
+
+

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

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

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

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

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "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

@@ -0,0 +1,30 @@
+{
+  "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

@@ -0,0 +1,23 @@
+{
+  "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

@@ -0,0 +1,49 @@
+/// <reference types="vitest" />
+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";
+
+export default defineConfig({
+  cacheDir: "../../node_modules/.vite/react-table",
+
+  plugins: [
+    dts({
+      entryRoot: "src",
+      tsConfigFilePath: join(__dirname, "tsconfig.lib.json"),
+      skipDiagnostics: true
+    }),
+    react(),
+    viteTsConfigPaths({
+      root: "../../"
+    })
+  ],
+
+  // 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"]
+    }
+  }
+});