@hpcc-js/dgrid2 2.1.1 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hpcc-js/dgrid2",
-    "version": "2.1.1",
+    "version": "2.3.0",
     "description": "hpcc-js - DGrid2",
     "main": "dist/index.js",
     "module": "dist/index.es6",
@@ -32,20 +32,20 @@
         "gen-legacy-types": "downlevel-dts ./types ./types-3.4",
         "build": "npm run compile-es6 && npm run bundle",
         "watch": "npm-run-all compile-es6 -p compile-es6-watch bundle-watch",
+        "serve-vite": "vite --config ../../vite.config.js",
         "stamp": "node ../../node_modules/@hpcc-js/bundle/src/stamp.js",
         "lint": "eslint src/**/*.ts",
         "docs": "typedoc --options tdoptions.json .",
         "update": "npx npm-check-updates -u -t minor"
     },
     "dependencies": {
-        "@hpcc-js/common": "^2.68.1",
-        "@hpcc-js/util": "^2.47.1"
+        "@hpcc-js/common": "^2.71.0",
+        "@hpcc-js/util": "^2.48.0"
     },
     "devDependencies": {
-        "@githubocto/flat-ui": "0.14.0",
         "@hpcc-js/bundle": "^2.11.1",
         "preact": "10.7.1",
-        "react-data-grid": "7.0.0-canary.49",
+        "react-data-grid": "7.0.0-beta.12",
         "tslib": "2.3.1"
     },
     "repository": {
@@ -59,5 +59,5 @@
         "url": "https://github.com/hpcc-systems/Visualization/issues"
     },
     "homepage": "https://github.com/hpcc-systems/Visualization",
-    "gitHead": "b7c5d9a853196b53078d665df4368629a1a87903"
+    "gitHead": "62cc2d8321326a26647c5ab7e408ece836bfe193"
 }

package/src/__package__.ts

@@ -1,3 +1,3 @@
 export const PKG_NAME = "@hpcc-js/dgrid2";
-export const PKG_VERSION = "2.1.1";
-export const BUILD_VERSION = "2.103.1";
+export const PKG_VERSION = "2.3.0";
+export const BUILD_VERSION = "2.104.0";

package/src/hooks.ts

@@ -0,0 +1,12 @@
+import { Widget } from "@hpcc-js/common";
+import * as React from "react";
+
+export function useData(widget: Widget): [string[], Array<string | number>[]] {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const columns: string[] = React.useMemo(() => widget.columns(), [widget, widget.dataChecksum()]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const data: Array<string | number>[] = React.useMemo(() => widget.data(), [widget, widget.dataChecksum()]);
+
+    return [columns, data];
+}
+

package/src/reactTable.tsx

@@ -0,0 +1,161 @@
+import * as React from "react";
+import DataGrid, { Column, SelectColumn, SortColumn } from "react-data-grid";
+import { format, timeFormat, timeParse } from "@hpcc-js/common";
+import { useData } from "./hooks";
+import type { Table } from "./table";
+
+export type QuerySortItem = { attribute: string, descending: boolean };
+function copyAndSort<T>(items: T[], attribute: string, descending?: boolean): T[] {
+    const key = attribute as keyof T;
+    return [...items].sort((a: T, b: T) => {
+        if (a[key] < b[key]) {
+            return descending ? 1 : -1;
+        } else if (a[key] > b[key]) {
+            return descending ? -1 : 1;
+        }
+        return 0;
+    });
+}
+
+interface EmptyRowsRendererProps {
+    message: string
+}
+
+const EmptyRowsRenderer: React.FunctionComponent<EmptyRowsRendererProps> = ({
+    message
+}) => {
+
+    return <div style={{ textAlign: "center", gridColumn: "1/-1" }} >
+        {message}
+        <span>
+            --- * --- * ---
+        </span>
+    </div>;
+};
+
+interface ColumnEx<TRow, TSummaryRow = unknown> extends Column<TRow, TSummaryRow> {
+    __hpcc_pattern?: ReturnType<typeof timeParse>;
+    __hpcc_format?: ReturnType<typeof format> | ReturnType<typeof timeFormat>;
+}
+
+export interface ReactTableProps {
+    table: Table;
+    sort?: QuerySortItem,
+}
+
+export const ReactTable: React.FunctionComponent<ReactTableProps> = ({
+    table,
+    sort
+}) => {
+    const [columns, data] = useData(table);
+    const multiSelect = table.multiSelect();
+    const columnTypes = table.columnTypes();
+    const columnPatterns = table.columnPatterns();
+    const columnFormats = table.columnFormats();
+
+    const [listColumns, setListColumns] = React.useState<ColumnEx<any[]>[]>([]);
+    const [sortColumn, setSortColumn] = React.useState<SortColumn>();
+    const [rows, setRows] = React.useState<any[]>([]);
+    const [selectedRows, setSelectedRows] = React.useState<ReadonlySet<number>>(new Set());
+
+    //  Columns  ---
+    React.useEffect(() => {
+        setListColumns([
+            ...multiSelect ? [SelectColumn] : [],
+            ...columns.map((column): ColumnEx<any[]> => {
+                const type = columnTypes[column] ?? "string";
+                let formatter;
+                let __hpcc_pattern;
+                let __hpcc_format;
+                switch (type) {
+                    case "time":
+                        __hpcc_pattern = columnPatterns[column] !== undefined ? timeParse(columnPatterns[column]) : undefined;
+                        __hpcc_format = columnFormats[column] !== undefined ? timeFormat(columnFormats[column]) : undefined;
+                        break;
+                    case "number":
+                        formatter = (props) => {
+                            return <div style={{ textAlign: "right" }}>{props.row[props.column.key]}</div>;
+                        };
+                    // eslint-disable-next-line no-fallthrough
+                    default:
+                        __hpcc_format = columnFormats[column] !== undefined ? format(columnFormats[column]) : undefined;
+                }
+                return {
+                    key: column,
+                    name: column,
+                    resizable: true,
+                    sortable: true,
+                    minWidth: 80,
+                    formatter,
+                    __hpcc_pattern,
+                    __hpcc_format
+                };
+            })
+        ]);
+    }, [columnFormats, columnPatterns, columnTypes, columns, multiSelect]);
+
+    const onSortColumnsChange = React.useCallback((sortColumns: SortColumn[]) => {
+        const futureSortColumn = sortColumns.slice(-1)[0];
+        const sorted = futureSortColumn !== undefined;
+        const isSortedDescending: boolean = futureSortColumn?.direction === "DESC";
+        setSortColumn(futureSortColumn);
+        setRows(copyAndSort(rows, sorted ? futureSortColumn.columnKey : "key", sorted ? isSortedDescending : false));
+    }, [rows]);
+
+    const rowKeyGetter = React.useCallback((row: any) => {
+        return row.key;
+    }, []);
+
+    const onSelectedRowsChange = React.useCallback((selectedRows: Set<any>) => {
+        setSelectedRows(selectedRows);
+    }, []);
+
+    const onRowClick = React.useCallback((row, column) => {
+        table.onRowClickCallback(row, column.key);
+    }, [table]);
+
+    //  Rows  ---
+    React.useEffect(() => {
+        let items = data.map((row, index) => {
+            const retVal = {
+                key: index
+            };
+            listColumns.forEach((column, index) => {
+                let val = row[index] as string;
+                if (column.__hpcc_pattern && column.__hpcc_format) {
+                    val = column.__hpcc_format(column.__hpcc_pattern(val));
+                } else if (column.__hpcc_pattern) {
+                    val = column.__hpcc_pattern(val).toString();
+                } else if (column.__hpcc_format) {
+                    val = column.__hpcc_format(val as any);
+                }
+                retVal[column.key] = val;
+            });
+            return retVal;
+        });
+        if (sort?.attribute) {
+            items = copyAndSort(items, sort.attribute, sort.descending);
+        }
+        setRows(items);
+    }, [listColumns, data, sort]);
+
+    return <DataGrid
+        columns={listColumns}
+        headerRowHeight={24}
+        rows={rows}
+        rowKeyGetter={rowKeyGetter}
+        rowHeight={20}
+        components={{ noRowsFallback: <EmptyRowsRenderer message={table.noDataMessage()} /> }}
+        className={table.darkMode() ? "rdg-dark" : "rdg-light"}
+        sortColumns={sortColumn ? [sortColumn] : []}
+        onSortColumnsChange={onSortColumnsChange}
+        selectedRows={selectedRows}
+        onSelectedRowsChange={multiSelect ? onSelectedRowsChange : undefined}
+        onRowClick={multiSelect ? undefined : onRowClick}
+        aria-describedby={""}
+        aria-label={""}
+        aria-labelledby={""}
+        style={{ height: "100%" }}
+    />;
+};
+

package/src/table.ts

@@ -0,0 +1,92 @@
+import * as React from "react";
+import { HTMLWidget, publish } from "@hpcc-js/common";
+import { render, unmountComponentAtNode } from "react-dom";
+import { ReactTable } from "./reactTable";
+
+import "../src/table.css";
+
+export type ColumnType = "boolean" | "number" | "string" | "time";
+
+export class Table extends HTMLWidget {
+
+    protected _div;
+
+    constructor() {
+        super();
+    }
+
+    @publish("...empty...", "string", "No Data Message")
+    noDataMessage: publish<this, string>;
+    @publish(false, "boolean", "Dark Mode")
+    darkMode: publish<this, boolean>;
+    @publish(false, "boolean", "Multiple Selection")
+    multiSelect: publish<this, boolean>;
+    @publish({}, "object", "Column Types (\"boolean\" | \"number\" | \"string\" | \"time\"")
+    columnTypes: publish<this, { [column: string]: ColumnType }>;
+    @publish({}, "object", "Column Patterns")
+    columnPatterns: publish<this, { [column: string]: string }>;
+    @publish({}, "object", "Column Formats")
+    columnFormats: publish<this, { [column: string]: string }>;
+
+    columnType(column: string): ColumnType;
+    columnType(column: string, type: ColumnType): this;
+    columnType(column: string, type?: ColumnType): ColumnType | this {
+        if (arguments.length === 1) return this.columnTypes()[column];
+        this.columnTypes({ ...this.columnTypes(), [column]: type });
+        return this;
+    }
+
+    columnPattern(column: string): string;
+    columnPattern(column: string, pattern: string): this;
+    columnPattern(column: string, pattern?: string): string | this {
+        if (arguments.length === 1) return this.columnPatterns()[column];
+        this.columnPatterns({ ...this.columnPatterns(), [column]: pattern });
+        return this;
+    }
+
+    columnFormat(column: string): string;
+    columnFormat(column: string, format: string): this;
+    columnFormat(column: string, format?: string): string | this {
+        if (arguments.length === 1) return this.columnFormats()[column];
+        this.columnFormats({ ...this.columnFormats(), [column]: format });
+        return this;
+    }
+
+    private _prevRow;
+    private _prevColumn;
+    onRowClickCallback(row, column) {
+        if (this._prevRow && JSON.stringify(this._prevRow) !== JSON.stringify(row)) {
+            this.click(this._prevRow, this._prevColumn ?? "", false);
+        }
+        if (row) {
+            this.click(row, column, true);
+        }
+        this._prevRow = row;
+        this._prevColumn = column;
+    }
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+        this._div = element
+            .append("div")
+            ;
+    }
+
+    update(domNode, element) {
+        super.update(domNode, element);
+        this._div.style("width", this.width() + "px");
+        this._div.style("height", this.height() + "px");
+        render(React.createElement(ReactTable, { table: this }), this._div.node());
+    }
+
+    exit(domNode, element) {
+        unmountComponentAtNode(this._div.node());
+        this._div.remove();
+        super.exit(domNode, element);
+    }
+
+    //  Events  ---
+    click(row, col, sel) {
+    }
+}
+Table.prototype._class += " dgrid2_Table";

package/types/__package__.d.ts

@@ -1,4 +1,4 @@
 export declare const PKG_NAME = "@hpcc-js/dgrid2";
-export declare const PKG_VERSION = "2.1.1";
-export declare const BUILD_VERSION = "2.103.1";
+export declare const PKG_VERSION = "2.3.0";
+export declare const BUILD_VERSION = "2.104.0";
 //# sourceMappingURL=__package__.d.ts.map

package/types/hooks.d.ts

@@ -0,0 +1,3 @@
+import { Widget } from "@hpcc-js/common";
+export declare function useData(widget: Widget): [string[], Array<string | number>[]];
+//# sourceMappingURL=hooks.d.ts.map

package/types/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAGzC,wBAAgB,OAAO,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC,CAO5E"}

package/types/reactTable.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import type { Table } from "./table";
+export declare type QuerySortItem = {
+    attribute: string;
+    descending: boolean;
+};
+export interface ReactTableProps {
+    table: Table;
+    sort?: QuerySortItem;
+}
+export declare const ReactTable: React.FunctionComponent<ReactTableProps>;
+//# sourceMappingURL=reactTable.d.ts.map

package/types/reactTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reactTable.d.ts","sourceRoot":"","sources":["../src/reactTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAErC,oBAAY,aAAa,GAAG;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,OAAO,CAAA;CAAE,CAAC;AAkCvE,MAAM,WAAW,eAAe;IAC5B,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,aAAa,CAAC;CACxB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAkH/D,CAAC"}

package/types/table.d.ts

@@ -1,17 +1,30 @@
 import { HTMLWidget, publish } from "@hpcc-js/common";
 import "../src/table.css";
-export declare type QuerySortItem = {
-    attribute: string;
-    descending: boolean;
-};
+export declare type ColumnType = "boolean" | "number" | "string" | "time";
 export declare class Table extends HTMLWidget {
     protected _div: any;
     constructor();
+    noDataMessage: publish<this, string>;
     darkMode: publish<this, boolean>;
     multiSelect: publish<this, boolean>;
-    _prevRow: any;
-    _prevColumn: any;
-    private renderTable;
+    columnTypes: publish<this, {
+        [column: string]: ColumnType;
+    }>;
+    columnPatterns: publish<this, {
+        [column: string]: string;
+    }>;
+    columnFormats: publish<this, {
+        [column: string]: string;
+    }>;
+    columnType(column: string): ColumnType;
+    columnType(column: string, type: ColumnType): this;
+    columnPattern(column: string): string;
+    columnPattern(column: string, pattern: string): this;
+    columnFormat(column: string): string;
+    columnFormat(column: string, format: string): this;
+    private _prevRow;
+    private _prevColumn;
+    onRowClickCallback(row: any, column: any): void;
     enter(domNode: any, element: any): void;
     update(domNode: any, element: any): void;
     exit(domNode: any, element: any): void;

package/types/table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../src/table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAKtD,OAAO,kBAAkB,CAAC;AAE1B,oBAAY,aAAa,GAAG;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,OAAO,CAAA;CAAE,CAAC;AA0GvE,qBAAa,KAAM,SAAQ,UAAU;IAEjC,SAAS,CAAC,IAAI,MAAC;;IAOf,QAAQ,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAEjC,WAAW,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAEpC,QAAQ,MAAC;IACT,WAAW,MAAC;IACZ,OAAO,CAAC,WAAW;IAanB,KAAK,CAAC,OAAO,KAAA,EAAE,OAAO,KAAA;IAOtB,MAAM,CAAC,OAAO,KAAA,EAAE,OAAO,KAAA;IAOvB,IAAI,CAAC,OAAO,KAAA,EAAE,OAAO,KAAA;IAOrB,KAAK,CAAC,GAAG,KAAA,EAAE,GAAG,KAAA,EAAE,GAAG,KAAA;CAEtB"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../src/table.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAItD,OAAO,kBAAkB,CAAC;AAE1B,oBAAY,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;AAElE,qBAAa,KAAM,SAAQ,UAAU;IAEjC,SAAS,CAAC,IAAI,MAAC;;IAOf,aAAa,EAAE,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;IAErC,QAAQ,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAEjC,WAAW,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAEpC,WAAW,EAAE,OAAO,CAAC,IAAI,EAAE;QAAE,CAAC,MAAM,EAAE,MAAM,GAAG,UAAU,CAAA;KAAE,CAAC,CAAC;IAE7D,cAAc,EAAE,OAAO,CAAC,IAAI,EAAE;QAAE,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC,CAAC;IAE5D,aAAa,EAAE,OAAO,CAAC,IAAI,EAAE;QAAE,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC,CAAC;IAE3D,UAAU,CAAC,MAAM,EAAE,MAAM,GAAG,UAAU;IACtC,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,GAAG,IAAI;IAOlD,aAAa,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;IACrC,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI;IAOpD,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;IACpC,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI;IAOlD,OAAO,CAAC,QAAQ,CAAC;IACjB,OAAO,CAAC,WAAW,CAAC;IACpB,kBAAkB,CAAC,GAAG,KAAA,EAAE,MAAM,KAAA;IAW9B,KAAK,CAAC,OAAO,KAAA,EAAE,OAAO,KAAA;IAOtB,MAAM,CAAC,OAAO,KAAA,EAAE,OAAO,KAAA;IAOvB,IAAI,CAAC,OAAO,KAAA,EAAE,OAAO,KAAA;IAOrB,KAAK,CAAC,GAAG,KAAA,EAAE,GAAG,KAAA,EAAE,GAAG,KAAA;CAEtB"}

package/types-3.4/__package__.d.ts

@@ -1,4 +1,4 @@
 export declare const PKG_NAME = "@hpcc-js/dgrid2";
-export declare const PKG_VERSION = "2.1.1";
-export declare const BUILD_VERSION = "2.103.1";
+export declare const PKG_VERSION = "2.3.0";
+export declare const BUILD_VERSION = "2.104.0";
 //# sourceMappingURL=__package__.d.ts.map

package/types-3.4/hooks.d.ts

@@ -0,0 +1,6 @@
+import { Widget } from "@hpcc-js/common";
+export declare function useData(widget: Widget): [
+    string[],
+    Array<string | number>[]
+];
+//# sourceMappingURL=hooks.d.ts.map

package/types-3.4/reactTable.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { Table } from "./table";
+export declare type QuerySortItem = {
+    attribute: string;
+    descending: boolean;
+};
+export interface ReactTableProps {
+    table: Table;
+    sort?: QuerySortItem;
+}
+export declare const ReactTable: React.FunctionComponent<ReactTableProps>;
+//# sourceMappingURL=reactTable.d.ts.map

package/types-3.4/table.d.ts

@@ -1,17 +1,30 @@
 import { HTMLWidget, publish } from "@hpcc-js/common";
 import "../src/table.css";
-export declare type QuerySortItem = {
-    attribute: string;
-    descending: boolean;
-};
+export declare type ColumnType = "boolean" | "number" | "string" | "time";
 export declare class Table extends HTMLWidget {
     protected _div: any;
     constructor();
+    noDataMessage: publish<this, string>;
     darkMode: publish<this, boolean>;
     multiSelect: publish<this, boolean>;
-    _prevRow: any;
-    _prevColumn: any;
-    private renderTable;
+    columnTypes: publish<this, {
+        [column: string]: ColumnType;
+    }>;
+    columnPatterns: publish<this, {
+        [column: string]: string;
+    }>;
+    columnFormats: publish<this, {
+        [column: string]: string;
+    }>;
+    columnType(column: string): ColumnType;
+    columnType(column: string, type: ColumnType): this;
+    columnPattern(column: string): string;
+    columnPattern(column: string, pattern: string): this;
+    columnFormat(column: string): string;
+    columnFormat(column: string, format: string): this;
+    private _prevRow;
+    private _prevColumn;
+    onRowClickCallback(row: any, column: any): void;
     enter(domNode: any, element: any): void;
     update(domNode: any, element: any): void;
     exit(domNode: any, element: any): void;

package/src/table.tsx

@@ -1,166 +0,0 @@
-import { HTMLWidget, publish } from "@hpcc-js/common";
-import * as React from "react";
-import { render, unmountComponentAtNode } from "react-dom";
-import DataGrid, { Column, SelectColumn, SortColumn } from "react-data-grid";
-
-import "../src/table.css";
-
-export type QuerySortItem = { attribute: string, descending: boolean };
-function copyAndSort<T>(items: T[], attribute: string, descending?: boolean): T[] {
-    const key = attribute as keyof T;
-    return [...items].sort((a: T, b: T) => {
-        if (a[key] < b[key]) {
-            return descending ? 1 : -1;
-        } else if (a[key] > b[key]) {
-            return descending ? -1 : 1;
-        }
-        return 0;
-    });
-}
-
-interface ReactTableProps {
-    columns: string[];
-    data: Array<string | number>[];
-    onRowClickCallback: (row: any) => void;
-    sort?: QuerySortItem,
-    darkMode?: boolean;
-    multiSelect?: boolean;
-}
-
-const ReactTable: React.FunctionComponent<ReactTableProps> = ({
-    columns,
-    data,
-    onRowClickCallback,
-    sort,
-    darkMode = false,
-    multiSelect = false
-}) => {
-    const [listColumns, setListColumns] = React.useState<Column<object>[]>([]);
-    const [sortColumn, setSortColumn] = React.useState<SortColumn>();
-    const [items, setItems] = React.useState<any[]>([]);
-    const [selectedRows, setSelectedRows] = React.useState<ReadonlySet<number>>(() => new Set());
-
-    //  Columns  ---
-    React.useEffect(() => {
-        setListColumns([
-            ...multiSelect ? [SelectColumn] : [],
-            ...columns.map(column => ({
-                key: column,
-                name: column,
-                resizable: true,
-                sortable: true,
-                minWidth: 80,
-            }))
-        ]);
-    }, [columns, multiSelect]);
-
-    const onSortColumnsChange = React.useCallback((sortColumns: SortColumn[]) => {
-        const futureSortColumn = sortColumns.slice(-1)[0];
-        const sorted = futureSortColumn !== undefined;
-        const isSortedDescending: boolean = futureSortColumn?.direction === "DESC";
-        setSortColumn(futureSortColumn);
-        setItems(copyAndSort(items, sorted ? futureSortColumn.columnKey : "key", sorted ? isSortedDescending : false));
-    }, [items]);
-
-    const rowKeyGetter = React.useCallback((row: any) => {
-        return row.key;
-    }, []);
-
-    const onSelectedRowsChange = React.useCallback((selectedRows: Set<any>) => {
-        setSelectedRows(selectedRows);
-        onRowClickCallback(items.filter(row => selectedRows.has(rowKeyGetter(row))));
-    }, [items, onRowClickCallback, rowKeyGetter]);
-
-    const onRowClick = React.useCallback((row, column) => {
-        onRowClickCallback(items.filter(item => rowKeyGetter(item) === rowKeyGetter(row)));
-    }, [items, onRowClickCallback, rowKeyGetter]);
-
-    //  Rows  ---
-    React.useEffect(() => {
-        let items = data.map((row, index) => {
-            const retVal = {
-                key: index
-            };
-            columns.forEach((column, index) => {
-                retVal[column] = row[index];
-            });
-            return retVal;
-        });
-        if (sort?.attribute) {
-            items = copyAndSort(items, sort.attribute, sort.descending);
-        }
-        setItems(items);
-    }, [columns, data, sort]);
-
-    return <DataGrid
-        columns={listColumns}
-        headerRowHeight={24}
-        rows={items}
-        rowKeyGetter={rowKeyGetter}
-        rowHeight={20}
-        className={darkMode ? "rdg-dark" : "rdg-light"}
-        sortColumns={sortColumn ? [sortColumn] : []}
-        onSortColumnsChange={onSortColumnsChange}
-        selectedRows={selectedRows}
-        onSelectedRowsChange={multiSelect ? onSelectedRowsChange : undefined}
-        onRowClick={multiSelect ? undefined : onRowClick}
-        aria-describedby={""}
-        aria-label={""}
-        aria-labelledby={""}
-        style={{ height: "100%" }}
-    />;
-};
-
-export class Table extends HTMLWidget {
-
-    protected _div;
-
-    constructor() {
-        super();
-    }
-
-    @publish(false, "boolean", "Dark Mode")
-    darkMode: publish<this, boolean>;
-    @publish(false, "boolean", "Multiple Selection")
-    multiSelect: publish<this, boolean>;
-
-    _prevRow;
-    _prevColumn;
-    private renderTable() {
-        return <ReactTable columns={this.columns()} data={this.data()} darkMode={this.darkMode()} onRowClickCallback={(row, column = "") => {
-            if (this._prevRow && JSON.stringify(this._prevRow) !== JSON.stringify(row)) {
-                this.click(this._prevRow, this._prevColumn ?? "", false);
-            }
-            if (row) {
-                this.click(row, column, true);
-            }
-            this._prevRow = row;
-            this._prevColumn = column;
-        }} />;
-    }
-
-    enter(domNode, element) {
-        super.enter(domNode, element);
-        this._div = element
-            .append("div")
-            ;
-    }
-
-    update(domNode, element) {
-        super.update(domNode, element);
-        this._div.style("width", this.width() + "px");
-        this._div.style("height", this.height() + "px");
-        render(this.renderTable(), this._div.node());
-    }
-
-    exit(domNode, element) {
-        unmountComponentAtNode(this._div.node());
-        this._div.remove();
-        super.exit(domNode, element);
-    }
-
-    //  Events  ---
-    click(row, col, sel) {
-    }
-}
-Table.prototype._class += " dgrid2_Table";

package/src/test.ts

@@ -1,41 +0,0 @@
-import { Table } from "./table";
-
-export { Test1 as Test };
-
-export class Test1 extends Table {
-
-    constructor() {
-        super();
-        this
-            .columns(["Category", "Series-1", "Series-2", "Series-3", "Series-4"])
-            .data([
-                ["A", -25, -23, -25, -22],
-                ["B", -20, -21, -25, -21],
-                ["C", -18, -20, -25, -19],
-                ["D", -17, -17, -25, -18],
-                ["E", -16, -15, -19, -18],
-                ["F", -15, -14, -16, -16],
-                ["G", -12, -10, -14, -15],
-                ["H", -12, -8, -13, -15],
-                ["I", -11, -6, -12, -12],
-                ["J", -11, -6, -8, -12],
-                ["K", -9, 0, -5, -10],
-                ["L", -5, 1, -5, -9],
-                ["M", -5, 2, -4, -8],
-                ["N", -1, 4, -2, -7],
-                ["O", 3, 7, 0, -5],
-                ["P", 3, 8, 0, -3],
-                ["Q", 4, 8, 7, 0],
-                ["R", 6, 9, 11, 1],
-                ["S", 9, 11, 11, 5],
-                ["T", 10, 20, 12, 6],
-                ["U", 12, 20, 16, 8],
-                ["V", 12, 21, 18, 14],
-                ["W", 14, 21, 18, 18],
-                ["X", 15, 23, 21, 18],
-                ["Y", 21, 23, 23, 21],
-                ["Z", 23, 24, 24, 24]
-            ])
-            ;
-    }
-}