@hpcc-js/dgrid2 3.6.4 → 3.6.5

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hpcc-js/dgrid2",
-    "version": "3.6.4",
+    "version": "3.6.5",
     "description": "hpcc-js - DGrid2",
     "type": "module",
     "main": "./dist/index.umd.cjs",
@@ -23,10 +23,12 @@
     "scripts": {
         "clean": "rimraf --glob lib* types dist *.tsbuildinfo .turbo",
         "bundle": "vite build",
-        "bundle-watch": "vite --port 5507",
+        "bundle-watch": "vite build --watch",
+        "bundle-serve": "vite --port 5507",
         "gen-types": "tsc --project tsconfig.json",
         "gen-types-watch": "npm run gen-types -- --watch",
         "build": "run-p gen-types bundle",
+        "watch": "run-p gen-types-watch bundle-watch",
         "lint": "eslint ./src",
         "lint-fix": "eslint --fix src/**/*.ts",
         "docs": "typedoc --options tdoptions.json .",
@@ -37,17 +39,17 @@
         "update-major": "npx --yes npm-check-updates -u"
     },
     "dependencies": {
-        "@hpcc-js/common": "^3.7.5",
-        "@hpcc-js/util": "^3.5.4"
+        "@hpcc-js/common": "^3.7.7",
+        "@hpcc-js/util": "^3.5.6"
     },
     "devDependencies": {
-        "@hpcc-js/esbuild-plugins": "^1.8.7",
+        "@hpcc-js/esbuild-plugins": "^1.8.8",
         "@types/react": "19.2.14",
         "@types/react-dom": "19.2.3",
         "@vitejs/plugin-react": "4.7.0",
-        "react": "19.2.4",
+        "react": "19.2.5",
         "react-data-grid": "7.0.0-beta.59",
-        "react-dom": "19.2.4",
+        "react-dom": "19.2.5",
         "vite-plugin-html": "3.2.2"
     },
     "repository": {
@@ -61,5 +63,5 @@
         "url": "https://github.com/hpcc-systems/Visualization/issues"
     },
     "homepage": "https://github.com/hpcc-systems/Visualization",
-    "gitHead": "f8bdd58fc6914054a2313a87bbe1257dc9720545"
+    "gitHead": "630e839917f1cc38f6e3324db5a9ac991234599a"
 }

package/src/ErrorBoundary.tsx

@@ -1,56 +1,56 @@
-import React, { Component, ErrorInfo, ReactNode } from "react";
-
-interface Props {
-    children: ReactNode;
-    fallback?: ReactNode;
-}
-
-interface State {
-    hasError: boolean;
-    error: Error | null;
-}
-
-export class ErrorBoundary extends Component<Props, State> {
-    public state: State = {
-        hasError: false,
-        error: null
-    };
-
-    public static getDerivedStateFromError(error: Error): State {
-        return { hasError: true, error };
-    }
-
-    public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-        console.error("Error caught by boundary:", error);
-        console.error("Component stack:", errorInfo.componentStack);
-    }
-
-    private handleReset = () => {
-        this.setState({ hasError: false, error: null });
-    };
-
-    public render() {
-        if (this.state.hasError) {
-            if (this.props.fallback) {
-                return this.props.fallback;
-            }
-
-            return (
-                <div className="min-h-[200px] flex items-center justify-center p-8 bg-red-50 rounded-lg border border-red-100">
-                    <div className="text-center">
-                        <h2 className="text-xl font-semibold text-red-700 mb-2">Something went wrong</h2>
-                        <p className="text-red-600">{this.state.error?.message}</p>
-                        <button
-                            onClick={this.handleReset}
-                            className="mt-4 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors"
-                        >
-                            Try again
-                        </button>
-                    </div>
-                </div>
-            );
-        }
-
-        return this.props.children;
-    }
-}
+import React, { Component, ErrorInfo, ReactNode } from "react";
+
+interface Props {
+    children: ReactNode;
+    fallback?: ReactNode;
+}
+
+interface State {
+    hasError: boolean;
+    error: Error | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+    public state: State = {
+        hasError: false,
+        error: null
+    };
+
+    public static getDerivedStateFromError(error: Error): State {
+        return { hasError: true, error };
+    }
+
+    public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+        console.error("Error caught by boundary:", error);
+        console.error("Component stack:", errorInfo.componentStack);
+    }
+
+    private handleReset = () => {
+        this.setState({ hasError: false, error: null });
+    };
+
+    public render() {
+        if (this.state.hasError) {
+            if (this.props.fallback) {
+                return this.props.fallback;
+            }
+
+            return (
+                <div className="min-h-[200px] flex items-center justify-center p-8 bg-red-50 rounded-lg border border-red-100">
+                    <div className="text-center">
+                        <h2 className="text-xl font-semibold text-red-700 mb-2">Something went wrong</h2>
+                        <p className="text-red-600">{this.state.error?.message}</p>
+                        <button
+                            onClick={this.handleReset}
+                            className="mt-4 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors"
+                        >
+                            Try again
+                        </button>
+                    </div>
+                </div>
+            );
+        }
+
+        return this.props.children;
+    }
+}

package/src/__package__.ts

@@ -1,3 +1,3 @@
-export const PKG_NAME = "__PACKAGE_NAME__";
-export const PKG_VERSION = "__PACKAGE_VERSION__";
-export const BUILD_VERSION = "__BUILD_VERSION__";
+export const PKG_NAME = "__PACKAGE_NAME__";
+export const PKG_VERSION = "__PACKAGE_VERSION__";
+export const BUILD_VERSION = "__BUILD_VERSION__";

package/src/hooks.ts

@@ -1,10 +1,10 @@
-import React from "react";
-import { Widget } from "@hpcc-js/common";
-
-export function useData(widget: Widget): [string[], Array<string | number>[]] {
-    const columns: string[] = React.useMemo(() => widget.columns(), [widget, widget.dataChecksum()]);
-    const data: Array<string | number>[] = React.useMemo(() => widget.data(), [widget, widget.dataChecksum()]);
-
-    return [columns, data];
-}
-
+import React from "react";
+import { Widget } from "@hpcc-js/common";
+
+export function useData(widget: Widget): [string[], Array<string | number>[]] {
+    const columns: string[] = React.useMemo(() => widget.columns(), [widget, widget.dataChecksum()]);
+    const data: Array<string | number>[] = React.useMemo(() => widget.data(), [widget, widget.dataChecksum()]);
+
+    return [columns, data];
+}
+

package/src/index.ts

@@ -1,2 +1,2 @@
-export * from "./__package__.ts";
-export * from "./table.ts";
+export * from "./__package__.ts";
+export * from "./table.ts";

package/src/reactTable.tsx

@@ -1,163 +1,163 @@
-import React, { FunctionComponent, useCallback, useEffect, useState } from "react";
-import { DataGrid, Column, SelectColumn, SortColumn } from "react-data-grid";
-import { format, timeFormat, timeParse } from "@hpcc-js/common";
-import { ErrorBoundary } from "./ErrorBoundary.tsx";
-import { useData } from "./hooks.ts";
-import type { Table } from "./table.ts";
-
-import "react-data-grid/lib/styles.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 EmptyRowsRendererProps {
-    message: string
-}
-
-const EmptyRowsRenderer: FunctionComponent<EmptyRowsRendererProps> = ({
-    message
-}) => {
-
-    return <div style={{ textAlign: "center", gridColumn: "1/-1" }} >
-        {message}
-    </div>;
-};
-
-interface ColumnEx<TRow, TSummaryRow = unknown> extends Column<TRow, TSummaryRow> {
-    renderCell?: (props: any) => any;
-    __hpcc_pattern?: ReturnType<typeof timeParse>;
-    __hpcc_format?: ReturnType<typeof format> | ReturnType<typeof timeFormat>;
-}
-
-export interface ReactTableProps {
-    table: Table;
-    sort?: QuerySortItem,
-}
-
-export const ReactTable: 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] = useState<ColumnEx<any[]>[]>([]);
-    const [sortColumn, setSortColumn] = useState<SortColumn>();
-    const [rows, setRows] = useState<any[]>([]);
-    const [selectedRows, setSelectedRows] = useState<ReadonlySet<number>>(new Set());
-
-    //  Columns  ---
-    useEffect(() => {
-        setListColumns([
-            ...multiSelect ? [SelectColumn as ColumnEx<any[]>] : [],
-            ...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,
-                    renderCell: formatter,
-                    __hpcc_pattern,
-                    __hpcc_format
-                };
-            })
-        ]);
-    }, [columnFormats, columnPatterns, columnTypes, columns, multiSelect]);
-
-    const onSortColumnsChange = 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 = useCallback((row: any) => {
-        return row.key;
-    }, []);
-
-    const onSelectedRowsChange = useCallback((selectedRows: Set<any>) => {
-        setSelectedRows(selectedRows);
-    }, []);
-
-    const onCellClick = useCallback((row, column) => {
-        table.onRowClickCallback(row, column.key);
-    }, [table]);
-
-    //  Rows  ---
-    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 (
-        <ErrorBoundary fallback={<div>Error loading table</div>}>
-            <DataGrid
-                columns={listColumns}
-                headerRowHeight={24}
-                rows={rows}
-                rowKeyGetter={rowKeyGetter}
-                rowHeight={20}
-                renderers={{ noRowsFallback: <EmptyRowsRenderer message={table.noDataMessage()} /> as any }}
-                className={table.darkMode() ? "rdg-dark" : "rdg-light"}
-                sortColumns={sortColumn ? [sortColumn] : []}
-                onSortColumnsChange={onSortColumnsChange}
-                selectedRows={selectedRows}
-                onSelectedRowsChange={multiSelect ? onSelectedRowsChange : undefined}
-                onCellClick={multiSelect ? undefined : (args, event) => onCellClick(args.row, args.column)}
-                style={{ height: "100%" }}
-            />
-        </ErrorBoundary>
-    );
-};
-
+import React, { FunctionComponent, useCallback, useEffect, useState } from "react";
+import { DataGrid, Column, SelectColumn, SortColumn } from "react-data-grid";
+import { format, timeFormat, timeParse } from "@hpcc-js/common";
+import { ErrorBoundary } from "./ErrorBoundary.tsx";
+import { useData } from "./hooks.ts";
+import type { Table } from "./table.ts";
+
+import "react-data-grid/lib/styles.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 EmptyRowsRendererProps {
+    message: string
+}
+
+const EmptyRowsRenderer: FunctionComponent<EmptyRowsRendererProps> = ({
+    message
+}) => {
+
+    return <div style={{ textAlign: "center", gridColumn: "1/-1" }} >
+        {message}
+    </div>;
+};
+
+interface ColumnEx<TRow, TSummaryRow = unknown> extends Column<TRow, TSummaryRow> {
+    renderCell?: (props: any) => any;
+    __hpcc_pattern?: ReturnType<typeof timeParse>;
+    __hpcc_format?: ReturnType<typeof format> | ReturnType<typeof timeFormat>;
+}
+
+export interface ReactTableProps {
+    table: Table;
+    sort?: QuerySortItem,
+}
+
+export const ReactTable: 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] = useState<ColumnEx<any[]>[]>([]);
+    const [sortColumn, setSortColumn] = useState<SortColumn>();
+    const [rows, setRows] = useState<any[]>([]);
+    const [selectedRows, setSelectedRows] = useState<ReadonlySet<number>>(new Set());
+
+    //  Columns  ---
+    useEffect(() => {
+        setListColumns([
+            ...multiSelect ? [SelectColumn as ColumnEx<any[]>] : [],
+            ...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,
+                    renderCell: formatter,
+                    __hpcc_pattern,
+                    __hpcc_format
+                };
+            })
+        ]);
+    }, [columnFormats, columnPatterns, columnTypes, columns, multiSelect]);
+
+    const onSortColumnsChange = 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 = useCallback((row: any) => {
+        return row.key;
+    }, []);
+
+    const onSelectedRowsChange = useCallback((selectedRows: Set<any>) => {
+        setSelectedRows(selectedRows);
+    }, []);
+
+    const onCellClick = useCallback((row, column) => {
+        table.onRowClickCallback(row, column.key);
+    }, [table]);
+
+    //  Rows  ---
+    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 (
+        <ErrorBoundary fallback={<div>Error loading table</div>}>
+            <DataGrid
+                columns={listColumns}
+                headerRowHeight={24}
+                rows={rows}
+                rowKeyGetter={rowKeyGetter}
+                rowHeight={20}
+                renderers={{ noRowsFallback: <EmptyRowsRenderer message={table.noDataMessage()} /> as any }}
+                className={table.darkMode() ? "rdg-dark" : "rdg-light"}
+                sortColumns={sortColumn ? [sortColumn] : []}
+                onSortColumnsChange={onSortColumnsChange}
+                selectedRows={selectedRows}
+                onSelectedRowsChange={multiSelect ? onSelectedRowsChange : undefined}
+                onCellClick={multiSelect ? undefined : (args, event) => onCellClick(args.row, args.column)}
+                style={{ height: "100%" }}
+            />
+        </ErrorBoundary>
+    );
+};
+

package/src/table.css

@@ -1,10 +1,10 @@
-.dgrid2_Table .rdg {
-    font-family: monospace, 'Courier New', Courier;
-}
-
-.dgrid2_Table .rdg-checkbox-label .rdg-checkbox {
-    block-size: 16px;
-    inline-size: 16px;
-    border-width: 2px;
-    box-shadow: inset 0 0 0 3px var(--rdg-background-color);
+.dgrid2_Table .rdg {
+    font-family: monospace, 'Courier New', Courier;
+}
+
+.dgrid2_Table .rdg-checkbox-label .rdg-checkbox {
+    block-size: 16px;
+    inline-size: 16px;
+    border-width: 2px;
+    box-shadow: inset 0 0 0 3px var(--rdg-background-color);
 }

package/src/table.md

@@ -1,57 +1,57 @@
-# Table
-
-**Class**: `Table`
-
-<ClientOnly>
-  <hpcc-vitepress preview_border="0px" style="width:100%;height:600px">
-    <div id="placeholder" style="height:400px">
-    </div>
-    <script type="module">
-        import { Table } from "@hpcc-js/dgrid2";
-        
-        new Table()
-            .target("placeholder")
-            .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]
-            ])
-            .render()
-            ;
-    </script>
-  </hpcc-vitepress>
-</ClientOnly>
-
-::: tip
-See [Getting Started](../README) for details on how to include @hpcc-js/dgrid2 in your application
-:::
-
-## `Table`
-
-## Events
-
-## Credits
+# Table
+
+**Class**: `Table`
+
+<ClientOnly>
+  <hpcc-vitepress preview_border="0px" style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+        import { Table } from "@hpcc-js/dgrid2";
+        
+        new Table()
+            .target("placeholder")
+            .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]
+            ])
+            .render()
+            ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+::: tip
+See [Getting Started](../README) for details on how to include @hpcc-js/dgrid2 in your application
+:::
+
+## `Table`
+
+## Events
+
+## Credits