@hpcc-js/dgrid2 3.2.1 → 3.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hpcc-js/dgrid2",
-    "version": "3.2.1",
+    "version": "3.2.3",
     "description": "hpcc-js - DGrid2",
     "type": "module",
     "main": "./dist/index.umd.cjs",
@@ -37,19 +37,17 @@
         "update-major": "npx --yes npm-check-updates -u"
     },
     "dependencies": {
-        "@hpcc-js/common": "^3.3.1",
-        "@hpcc-js/util": "^3.3.1"
-    },
-    "peerDependencies": {
-        "react": "^18.0.0",
-        "react-dom": "^18.0.0"
+        "@hpcc-js/common": "^3.3.3",
+        "@hpcc-js/util": "^3.3.3"
     },
     "devDependencies": {
-        "@hpcc-js/esbuild-plugins": "^1.4.1",
-        "@types/react": "^18.0.0",
-        "@types/react-dom": "^18.0.0",
+        "@hpcc-js/esbuild-plugins": "^1.4.3",
+        "@types/react": "19.1.0",
+        "@types/react-dom": "19.1.0",
         "@vitejs/plugin-react": "4.3.4",
-        "react-data-grid": "7.0.0-beta.47",
+        "react": "19.1.0",
+        "react-data-grid": "7.0.0-beta.51",
+        "react-dom": "19.1.0",
         "vite-plugin-html": "3.2.2"
     },
     "repository": {
@@ -63,5 +61,5 @@
         "url": "https://github.com/hpcc-systems/Visualization/issues"
     },
     "homepage": "https://github.com/hpcc-systems/Visualization",
-    "gitHead": "521692e7cfd01c274d5cfff0c54e79d1686d3dd6"
+    "gitHead": "8afa398a6246f7f913bc2cb88402b776d65deb00"
 }

package/src/ErrorBoundary.tsx

@@ -0,0 +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;
+    }
+}

package/src/reactTable.tsx

@@ -1,6 +1,7 @@
 import React, { FunctionComponent, useCallback, useEffect, useState } from "react";
-import DataGrid, { Column, SelectColumn, SortColumn } from "react-data-grid";
+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";
 
@@ -139,23 +140,24 @@ export const ReactTable: FunctionComponent<ReactTableProps> = ({
         setRows(items);
     }, [listColumns, data, sort]);
 
-    return <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)}
-        aria-describedby={""}
-        aria-label={""}
-        aria-labelledby={""}
-        style={{ height: "100%" }}
-    />;
+    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/types/ErrorBoundary.d.ts

@@ -0,0 +1,17 @@
+import React, { Component, ErrorInfo, ReactNode } from "react";
+interface Props {
+    children: ReactNode;
+    fallback?: ReactNode;
+}
+interface State {
+    hasError: boolean;
+    error: Error | null;
+}
+export declare class ErrorBoundary extends Component<Props, State> {
+    state: State;
+    static getDerivedStateFromError(error: Error): State;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    private handleReset;
+    render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>> | React.JSX.Element;
+}
+export {};