@tipolox/litgrid-react 1.0.3 → 1.2.0

package/README.md

@@ -35,6 +35,7 @@ Render `UsersGrid` in your React application. `height` defines the viewport used
 
 - [Live demo](https://tipolox.com/litgrid/demo)
 - [Repository](https://github.com/tipolox/litgrid)
+- [v1.1.0 upgrade guide](https://github.com/tipolox/litgrid/blob/main/docs/installation.md#upgrading-to-v110)
 - [React guide](https://github.com/tipolox/litgrid/blob/main/docs/react-guide.md)
 - [API reference](https://github.com/tipolox/litgrid/blob/main/docs/api-reference.md)
 

package/dist/DataGrid.d.ts

@@ -1,6 +1,8 @@
 import '@tipolox/litgrid-web';
-import type { BestFitColumnWidth, ColumnReorderDetail, ColumnStateChangeDetail, ColumnVisibilityChangeDetail, DataGridElement, GridColumn, GridColumnState, GridConfig, GridFilter, GridPaginationState, GridSelection, GridTheme, SelectionIntent } from '@tipolox/litgrid-web';
+import type { BestFitColumnWidth, ColumnReorderDetail, ColumnStateChangeDetail, ColumnVisibilityChangeDetail, DataGridElement, GridColumn, GridColumnState, GridConfig, GridFilter, GridPaginationState, GridSelection, GridRowKey, SelectionChangeDetail, GridExternalState, GridQuerySnapshot, GridQueryChangeDetail, SortDirection, GridTheme, SelectionIntent } from '@tipolox/litgrid-web';
 export type DataGridProps = {
+    externalState?: GridExternalState;
+    onQueryChange?: (detail: GridQueryChangeDetail) => void;
     data: unknown[];
     columns?: GridColumn[];
     config?: GridConfig;
@@ -17,10 +19,16 @@ export type DataGridProps = {
     quickSearchDebounceMs?: number;
     columnStateStorageKey?: string;
     onColumnStateChange?: (detail: ColumnStateChangeDetail) => void;
+    onSelectionChange?: (detail: SelectionChangeDetail) => void;
     onColumnReorder?: (detail: ColumnReorderDetail) => void;
     onColumnVisibilityChange?: (detail: ColumnVisibilityChangeDetail) => void;
 };
 export type DataGridRef = {
+    setExternalState(state: GridExternalState): boolean;
+    getQuery(): GridQuerySnapshot;
+    refreshQuery(): void;
+    sortBy(columnKey: string, direction: SortDirection): void;
+    clearSort(): void;
     readonly gridElement: DataGridElement | null;
     getRowHeight(rowIndex: number): number;
     getColumnWidth(column: GridColumn): number;
@@ -59,6 +67,8 @@ export type DataGridRef = {
     selectAllRows(): void;
     clearSelection(): void;
     getSelection(): GridSelection;
+    getSelectionSnapshot(): SelectionChangeDetail;
+    selectRowByKey(key: GridRowKey, intent?: SelectionIntent): boolean;
     isRowSelected(rowIndex: number): boolean;
     isCellSelected(rowIndex: number, columnKey: string): boolean;
 };

package/dist/DataGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../src/DataGrid.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../src/DataGrid.tsx"],"names":[],"mappings":"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"}

package/dist/DataGrid.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import '@tipolox/litgrid-web';
-import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef } from 'react';
 import { syncGridInputs } from './gridBindings.js';
 const GRID_UNAVAILABLE_MESSAGE = 'LitGrid is not available before the React component is mounted.';
-export const DataGrid = forwardRef(function DataGrid({ data, columns = [], config = {}, theme = 'light', ariaLabel = 'Data grid', ariaDescription = '', screenReaderAnnouncements = true, height = 320, rowHeight = 36, overscan = 4, columnOverscan = 2, bestFitSampleSize = 10, quickSearchDebounceThreshold = 10000, quickSearchDebounceMs = 150, columnStateStorageKey, onColumnStateChange, onColumnReorder, onColumnVisibilityChange }, forwardedRef) {
+export const DataGrid = forwardRef(function DataGrid({ data, externalState, onQueryChange, columns = [], config = {}, theme = 'light', ariaLabel = 'Data grid', ariaDescription = '', screenReaderAnnouncements = true, height = 320, rowHeight = 36, overscan = 4, columnOverscan = 2, bestFitSampleSize = 10, quickSearchDebounceThreshold = 10000, quickSearchDebounceMs = 150, columnStateStorageKey, onColumnStateChange, onSelectionChange, onColumnReorder, onColumnVisibilityChange }, forwardedRef) {
     const gridRef = useRef(null);
     const requireGridElement = () => {
         if (!gridRef.current)
@@ -11,6 +11,11 @@ export const DataGrid = forwardRef(function DataGrid({ data, columns = [], confi
         return gridRef.current;
     };
     useImperativeHandle(forwardedRef, () => ({
+        setExternalState: (state) => requireGridElement().setExternalState(state),
+        getQuery: () => requireGridElement().getQuery(),
+        refreshQuery: () => requireGridElement().refreshQuery(),
+        sortBy: (key, direction) => requireGridElement().sortBy(key, direction),
+        clearSort: () => requireGridElement().clearSort(),
         get gridElement() {
             return gridRef.current;
         },
@@ -51,6 +56,8 @@ export const DataGrid = forwardRef(function DataGrid({ data, columns = [], confi
         selectAllRows: () => requireGridElement().selectAllRows(),
         clearSelection: () => requireGridElement().clearSelection(),
         getSelection: () => requireGridElement().getSelection(),
+        getSelectionSnapshot: () => requireGridElement().getSelectionSnapshot(),
+        selectRowByKey: (key, intent) => requireGridElement().selectRowByKey(key, intent),
         isRowSelected(rowIndex) {
             return requireGridElement().isRowSelected(rowIndex);
         },
@@ -58,11 +65,39 @@ export const DataGrid = forwardRef(function DataGrid({ data, columns = [], confi
             return requireGridElement().isCellSelected(rowIndex, columnKey);
         }
     }), []);
+    // Subscribe before input synchronization, which can synchronously clear selection.
+    const selectionCallback = useRef(onSelectionChange);
+    const queryCallback = useRef(onQueryChange);
+    useLayoutEffect(() => { queryCallback.current = onQueryChange; }, [onQueryChange]);
+    useEffect(() => {
+        const element = gridRef.current;
+        if (!element)
+            return;
+        const handler = (event) => {
+            if (event.target === element)
+                queryCallback.current?.(event.detail);
+        };
+        element.addEventListener('query-change', handler);
+        return () => element.removeEventListener('query-change', handler);
+    }, []);
+    useLayoutEffect(() => { selectionCallback.current = onSelectionChange; }, [onSelectionChange]);
+    useEffect(() => {
+        const element = gridRef.current;
+        if (!element)
+            return;
+        const handleSelectionChange = (event) => {
+            if (event.target === element)
+                selectionCallback.current?.(event.detail);
+        };
+        element.addEventListener('selection-change', handleSelectionChange);
+        return () => element.removeEventListener('selection-change', handleSelectionChange);
+    }, []);
     useEffect(() => {
         const grid = gridRef.current;
         if (!grid)
             return;
         syncGridInputs(grid, {
+            externalState,
             data,
             columns,
             config,
@@ -80,6 +115,7 @@ export const DataGrid = forwardRef(function DataGrid({ data, columns = [], confi
             columnStateStorageKey
         });
     }, [
+        externalState,
         data,
         columns,
         config,

package/dist/DataGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataGrid.js","sourceRoot":"","sources":["../src/DataGrid.tsx"],"names":[],"mappings":";AAAA,OAAO,sBAAsB,CAAA;AAgB7B,OAAO,EACL,UAAU,EACV,SAAS,EACT,mBAAmB,EACnB,MAAM,EACP,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAoElD,MAAM,wBAAwB,GAAG,iEAAiE,CAAA;AAElG,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAA6B,SAAS,QAAQ,CAC9E,EACE,IAAI,EACJ,OAAO,GAAG,EAAE,EACZ,MAAM,GAAG,EAAE,EACX,KAAK,GAAG,OAAO,EACf,SAAS,GAAG,WAAW,EACvB,eAAe,GAAG,EAAE,EACpB,yBAAyB,GAAG,IAAI,EAChC,MAAM,GAAG,GAAG,EACZ,SAAS,GAAG,EAAE,EACd,QAAQ,GAAG,CAAC,EACZ,cAAc,GAAG,CAAC,EAClB,iBAAiB,GAAG,EAAE,EACtB,4BAA4B,GAAG,KAAK,EACpC,qBAAqB,GAAG,GAAG,EAC3B,qBAAqB,EACrB,mBAAmB,EACnB,eAAe,EACf,wBAAwB,EACzB,EACD,YAAY;IAEZ,MAAM,OAAO,GAAG,MAAM,CAAyB,IAAI,CAAC,CAAA;IAEpD,MAAM,kBAAkB,GAAG,GAAoB,EAAE;QAC/C,IAAI,CAAC,OAAO,CAAC,OAAO;YAAE,MAAM,IAAI,KAAK,CAAC,wBAAwB,CAAC,CAAA;QAC/D,OAAO,OAAO,CAAC,OAAO,CAAA;IACxB,CAAC,CAAA;IAED,mBAAmB,CACjB,YAAY,EACZ,GAAG,EAAE,CAAC,CAAC;QACL,IAAI,WAAW;YACb,OAAO,OAAO,CAAC,OAAO,CAAA;QACxB,CAAC;QACD,YAAY,EAAE,CAAC,QAAgB,EAAE,EAAE,CAAC,kBAAkB,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC;QAC/E,cAAc,EAAE,CAAC,MAAkB,EAAE,EAAE,CAAC,kBAAkB,EAAE,CAAC,cAAc,CAAC,MAAM,CAAC;QACnF,YAAY,EAAE,CAAC,QAAgB,EAAE,SAAiB,EAAE,EAAE,CAAC,kBAAkB,EAAE,CAAC,YAAY,CAAC,QAAQ,EAAE,SAAS,CAAC;QAC7G,cAAc,EAAE,CAAC,QAAgB,EAAE,EAAE,CAAC,kBAAkB,EAAE,CAAC,cAAc,CAAC,QAAQ,CAAC;QACnF,kBAAkB,EAAE,GAAG,EAAE,CAAC,kBAAkB,EAAE,CAAC,kBAAkB,EAAE;QACnE,cAAc,EAAE,CAAC,SAAiB,EAAE,KAAa,EAAE,EAAE,CAAC,kBAAkB,EAAE,CAAC,cAAc,CAAC,SAAS,EAAE,KAAK,CAAC;QAC3G,gBAAgB,EAAE,CAAC,SAAiB,EAAE,EAAE,CAAC,kBAAkB,EAAE,CAAC,gBAAgB,CAAC,SAAS,CAAC;QACzF,oBAAoB,EAAE,GAAG,EAAE,CAAC,kBAAkB,EAAE,CAAC,oBAAoB,EAAE;QACvE,UAAU,EAAE,CAAC,SAAiB,EAAE,WAAmB,EAAE,EAAE,CAAC,kBAAkB,EAAE,CAAC,UAAU,CAAC,SAAS,EAAE,WAAW,CAAC;QAC/G,cAAc,EAAE,GAAG,EAAE,CAAC,kBAAkB,EAAE,CAAC,cAAc,EAAE;QAC3D,cAAc,EAAE,CAAC,UAAoB,EAAE,EAAE,CAAC,kBAAkB,EAAE,CAAC,cAAc,CAAC,UAAU,CAAC;QACzF,gBAAgB,EAAE,GAAG,EAAE,CAAC,kBAAkB,EAAE,CAAC,gBAAgB,EAAE;QAC/D,gBAAgB,EAAE,CAAC,SAAiB,EAAE,OAAgB,EAAE,EAAE,CAAC,kBAAkB,EAAE,CAAC,gBAAgB,CAAC,SAAS,EAAE,OAAO,CAAC;QACpH,eAAe,EAAE,CAAC,SAAiB,EAAE,EAAE,CAAC,kBAAkB,EAAE,CAAC,eAAe,CAAC,SAAS,CAAC;QACvF,oBAAoB,EAAE,GAAG,EAAE,CAAC,kBAAkB,EAAE,CAAC,oBAAoB,EAAE;QACvE,qBAAqB,EAAE,GAAG,EAAE,CAAC,kBAAkB,EAAE,CAAC,qBAAqB,EAAE;QACzE,cAAc,EAAE,GAAG,EAAE,CAAC,kBAAkB,EAAE,CAAC,cAAc,EAAE;QAC3D,cAAc,EAAE,CAAC,KAAsB,EAAE,EAAE,CAAC,kBAAkB,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC;QACtF,gBAAgB,EAAE,GAAG,EAAE,CAAC,kBAAkB,EAAE,CAAC,gBAAgB,EAAE;QAC/D,aAAa,EAAE,CAAC,SAAiB,EAAE,EAAE,CAAC,kBAAkB,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC;QACnF,iBAAiB,EAAE,GAAG,EAAE,CAAC,kBAAkB,EAAE,CAAC,iBAAiB,EAAE;QACjE,iBAAiB,EAAE,GAAG,EAAE,CAAC,kBAAkB,EAAE,CAAC,iBAAiB,EAAE;QACjE,gBAAgB,EAAE,GAAG,EAAE,CAAC,kBAAkB,EAAE,CAAC,gBAAgB,EAAE;QAC/D,cAAc,EAAE,CAAC,KAAa,EAAE,EAAE,CAAC,kBAAkB,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC;QAC7E,gBAAgB,EAAE,GAAG,EAAE,CAAC,kBAAkB,EAAE,CAAC,gBAAgB,EAAE;QAC/D,cAAc,EAAE,GAAG,EAAE,CAAC,kBAAkB,EAAE,CAAC,cAAc,EAAE;QAC3D,SAAS,EAAE,CAAC,MAAkB,EAAE,EAAE,CAAC,kBAAkB,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC;QACzE,WAAW,EAAE,CAAC,SAAkB,EAAE,EAAE,CAAC,kBAAkB,EAAE,CAAC,WAAW,CAAC,SAAS,CAAC;QAChF,UAAU,EAAE,GAAG,EAAE,CAAC,kBAAkB,EAAE,CAAC,UAAU,EAAE;QACnD,OAAO,EAAE,CAAC,SAAiB,EAAE,EAAE,CAAC,kBAAkB,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC;QACvE,WAAW,EAAE,CAAC,QAAgB,EAAE,EAAE,CAAC,kBAAkB,EAAE,CAAC,WAAW,CAAC,QAAQ,CAAC;QAC7E,aAAa,EAAE,GAAG,EAAE,CAAC,kBAAkB,EAAE,CAAC,aAAa,EAAE;QACzD,gBAAgB,EAAE,GAAG,EAAE,CAAC,kBAAkB,EAAE,CAAC,gBAAgB,EAAE;QAC/D,SAAS,EAAE,CAAC,QAAgB,EAAE,MAAwB,EAAE,EAAE,CAAC,kBAAkB,EAAE,CAAC,SAAS,CAAC,QAAQ,EAAE,MAAM,CAAC;QAC3G,aAAa,EAAE,GAAG,EAAE,CAAC,kBAAkB,EAAE,CAAC,aAAa,EAAE;QACzD,cAAc,EAAE,GAAG,EAAE,CAAC,kBAAkB,EAAE,CAAC,cAAc,EAAE;QAC3D,YAAY,EAAE,GAAG,EAAE,CAAC,kBAAkB,EAAE,CAAC,YAAY,EAAE;QACvD,aAAa,CAAC,QAAgB;YAC5B,OAAO,kBAAkB,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;QACrD,CAAC;QACD,cAAc,CAAC,QAAgB,EAAE,SAAiB;YAChD,OAAO,kBAAkB,EAAE,CAAC,cAAc,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAA;QACjE,CAAC;KACF,CAAC,EACF,EAAE,CACH,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAA;QAC5B,IAAI,CAAC,IAAI;YAAE,OAAM;QAEjB,cAAc,CAAC,IAAI,EAAE;YACnB,IAAI;YACJ,OAAO;YACP,MAAM;YACN,KAAK;YACL,SAAS;YACT,eAAe;YACf,yBAAyB;YACzB,MAAM;YACN,SAAS;YACT,QAAQ;YACR,cAAc;YACd,iBAAiB;YACjB,4BAA4B;YAC5B,qBAAqB;YACrB,qBAAqB;SACtB,CAAC,CAAA;IACJ,CAAC,EAAE;QACD,IAAI;QACJ,OAAO;QACP,MAAM;QACN,KAAK;QACL,SAAS;QACT,eAAe;QACf,yBAAyB;QACzB,MAAM;QACN,SAAS;QACT,QAAQ;QACR,cAAc;QACd,iBAAiB;QACjB,4BAA4B;QAC5B,qBAAqB;QACrB,qBAAqB;KACtB,CAAC,CAAA;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAA;QAC/B,IAAI,CAAC,OAAO,IAAI,CAAC,mBAAmB;YAAE,OAAM;QAE5C,MAAM,uBAAuB,GAAG,CAAC,KAAY,EAAE,EAAE;YAC/C,mBAAmB,CAAE,KAA8C,CAAC,MAAM,CAAC,CAAA;QAC7E,CAAC,CAAA;QAED,OAAO,CAAC,gBAAgB,CAAC,qBAAqB,EAAE,uBAAuB,CAAC,CAAA;QACxE,OAAO,GAAG,EAAE,CAAC,OAAO,CAAC,mBAAmB,CAAC,qBAAqB,EAAE,uBAAuB,CAAC,CAAA;IAC1F,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAA;IAEzB,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAA;QAC/B,IAAI,CAAC,OAAO,IAAI,CAAC,eAAe;YAAE,OAAM;QAExC,MAAM,mBAAmB,GAAG,CAAC,KAAY,EAAE,EAAE;YAC3C,eAAe,CAAE,KAA0C,CAAC,MAAM,CAAC,CAAA;QACrE,CAAC,CAAA;QAED,OAAO,CAAC,gBAAgB,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,CAAA;QAC/D,OAAO,GAAG,EAAE,CAAC,OAAO,CAAC,mBAAmB,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,CAAA;IACjF,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAA;IAErB,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAA;QAC/B,IAAI,CAAC,OAAO,IAAI,CAAC,wBAAwB;YAAE,OAAM;QAEjD,MAAM,4BAA4B,GAAG,CAAC,KAAY,EAAE,EAAE;YACpD,wBAAwB,CAAE,KAAmD,CAAC,MAAM,CAAC,CAAA;QACvF,CAAC,CAAA;QAED,OAAO,CAAC,gBAAgB,CAAC,0BAA0B,EAAE,4BAA4B,CAAC,CAAA;QAClF,OAAO,GAAG,EAAE,CAAC,OAAO,CAAC,mBAAmB,CAAC,0BAA0B,EAAE,4BAA4B,CAAC,CAAA;IACpG,CAAC,EAAE,CAAC,wBAAwB,CAAC,CAAC,CAAA;IAE9B,OAAO,kBAAS,GAAG,EAAE,OAAO,GAAY,CAAA;AAC1C,CAAC,CAAC,CAAA"}
+{"version":3,"file":"DataGrid.js","sourceRoot":"","sources":["../src/DataGrid.tsx"],"names":[],"mappings":"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"}

package/dist/gridBindings.d.ts

@@ -1,5 +1,6 @@
-import type { DataGridElement, GridColumn, GridConfig, GridTheme } from '@tipolox/litgrid-web';
+import type { DataGridElement, GridColumn, GridConfig, GridExternalState, GridTheme } from '@tipolox/litgrid-web';
 export type ReactGridInputs = {
+    externalState?: GridExternalState;
     data: unknown[];
     columns: GridColumn[];
     config: GridConfig;

package/dist/gridBindings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"gridBindings.d.ts","sourceRoot":"","sources":["../src/gridBindings.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,eAAe,EACf,UAAU,EACV,UAAU,EACV,SAAS,EACV,MAAM,sBAAsB,CAAA;AAE7B,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,OAAO,EAAE,CAAA;IACf,OAAO,EAAE,UAAU,EAAE,CAAA;IACrB,MAAM,EAAE,UAAU,CAAA;IAClB,KAAK,EAAE,SAAS,CAAA;IAChB,SAAS,EAAE,MAAM,CAAA;IACjB,eAAe,EAAE,MAAM,CAAA;IACvB,yBAAyB,EAAE,OAAO,CAAA;IAClC,MAAM,EAAE,MAAM,CAAA;IACd,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,cAAc,EAAE,MAAM,CAAA;IACtB,iBAAiB,EAAE,MAAM,CAAA;IACzB,4BAA4B,EAAE,MAAM,CAAA;IACpC,qBAAqB,EAAE,MAAM,CAAA;IAC7B,qBAAqB,CAAC,EAAE,MAAM,CAAA;CAC/B,CAAA;AAID,wBAAgB,cAAc,CAC5B,IAAI,EAAE,eAAe,EACrB,MAAM,EAAE,eAAe,GACtB,IAAI,CAgCN"}
+{"version":3,"file":"gridBindings.d.ts","sourceRoot":"","sources":["../src/gridBindings.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,eAAe,EACf,UAAU,EACV,UAAU,EACV,iBAAiB,EACjB,SAAS,EACV,MAAM,sBAAsB,CAAA;AAE7B,MAAM,MAAM,eAAe,GAAG;IAC5B,aAAa,CAAC,EAAE,iBAAiB,CAAA;IACjC,IAAI,EAAE,OAAO,EAAE,CAAA;IACf,OAAO,EAAE,UAAU,EAAE,CAAA;IACrB,MAAM,EAAE,UAAU,CAAA;IAClB,KAAK,EAAE,SAAS,CAAA;IAChB,SAAS,EAAE,MAAM,CAAA;IACjB,eAAe,EAAE,MAAM,CAAA;IACvB,yBAAyB,EAAE,OAAO,CAAA;IAClC,MAAM,EAAE,MAAM,CAAA;IACd,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,cAAc,EAAE,MAAM,CAAA;IACtB,iBAAiB,EAAE,MAAM,CAAA;IACzB,4BAA4B,EAAE,MAAM,CAAA;IACpC,qBAAqB,EAAE,MAAM,CAAA;IAC7B,qBAAqB,CAAC,EAAE,MAAM,CAAA;CAC/B,CAAA;AAID,wBAAgB,cAAc,CAC5B,IAAI,EAAE,eAAe,EACrB,MAAM,EAAE,eAAe,GACtB,IAAI,CAuCN"}

package/dist/gridBindings.js

@@ -2,8 +2,10 @@ const synchronizedInputs = new WeakMap();
 export function syncGridInputs(grid, inputs) {
     // Keep the existing effect-triggered synchronization contract, including
     // in-place mutations. Navigation is retained by the structural grid setters.
-    grid.data = inputs.data;
-    grid.columns = inputs.columns;
+    const previous = synchronizedInputs.get(grid);
+    const external = inputs.config.queryMode === 'external';
+    if (!external || !previous || previous.columns !== inputs.columns)
+        grid.columns = inputs.columns;
     const values = {
         config: inputs.config,
         theme: inputs.theme, ariaLabel: inputs.ariaLabel, ariaDescription: inputs.ariaDescription,
@@ -18,18 +20,25 @@ export function syncGridInputs(grid, inputs) {
     // Snapshot only the fixed-size configuration, never row data or column content.
     const config = inputs.config;
     const configKey = JSON.stringify([
+        config.queryMode ?? 'local',
         config.selection?.mode ?? 'none', config.selection?.checkboxes ?? false,
+        config.selection?.rowKey, config.selection?.scopeKey,
         config.rowHeader?.enabled ?? false, config.rowHeader?.width ?? 56,
         config.pagination?.enabled ?? false,
         Number.isFinite(config.pagination?.pageSize) && config.pagination.pageSize > 0 ? Math.max(1, Math.floor(config.pagination.pageSize)) : 50,
         Number.isFinite(config.pagination?.pageIndex) && config.pagination.pageIndex >= 0 ? Math.floor(config.pagination.pageIndex) : 0
     ]);
-    const previous = synchronizedInputs.get(grid);
     for (const [key, value] of Object.entries(values)) {
         if (!previous || (key === 'config' ? previous.configKey !== configKey : previous[key] !== value)) {
             Reflect.set(grid, key, value);
         }
     }
-    synchronizedInputs.set(grid, { ...values, configKey });
+    if (external && inputs.externalState && (!previous || previous.externalState !== inputs.externalState || previous.configKey !== configKey)) {
+        grid.externalState = inputs.externalState;
+    }
+    synchronizedInputs.set(grid, { ...values, configKey, columns: inputs.columns, externalState: inputs.externalState });
+    // Clear a changed scope before loading rows that may reuse the same keys.
+    if (!external)
+        grid.data = inputs.data;
 }
 //# sourceMappingURL=gridBindings.js.map

package/dist/gridBindings.js.map

@@ -1 +1 @@
-{"version":3,"file":"gridBindings.js","sourceRoot":"","sources":["../src/gridBindings.ts"],"names":[],"mappings":"AAyBA,MAAM,kBAAkB,GAAG,IAAI,OAAO,EAA4C,CAAA;AAElF,MAAM,UAAU,cAAc,CAC5B,IAAqB,EACrB,MAAuB;IAEvB,yEAAyE;IACzE,6EAA6E;IAC7E,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;IACvB,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAA;IAC7B,MAAM,MAAM,GAAG;QACb,MAAM,EAAE,MAAM,CAAC,MAAM;QACrB,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,eAAe,EAAE,MAAM,CAAC,eAAe;QACzF,yBAAyB,EAAE,MAAM,CAAC,yBAAyB;QAC3D,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,EAAE,MAAM,CAAC,SAAS;QACjE,aAAa,EAAE,MAAM,CAAC,QAAQ,EAAE,mBAAmB,EAAE,MAAM,CAAC,cAAc;QAC1E,iBAAiB,EAAE,MAAM,CAAC,iBAAiB;QAC3C,4BAA4B,EAAE,MAAM,CAAC,4BAA4B;QACjE,qBAAqB,EAAE,MAAM,CAAC,qBAAqB;QACnD,qBAAqB,EAAE,MAAM,CAAC,qBAAqB,IAAI,IAAI;KAC5D,CAAA;IACD,gFAAgF;IAChF,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA;IAC5B,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;QAC/B,MAAM,CAAC,SAAS,EAAE,IAAI,IAAI,MAAM,EAAE,MAAM,CAAC,SAAS,EAAE,UAAU,IAAI,KAAK;QACvE,MAAM,CAAC,SAAS,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACjE,MAAM,CAAC,UAAU,EAAE,OAAO,IAAI,KAAK;QACnC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,UAAU,EAAE,QAAQ,CAAC,IAAI,MAAM,CAAC,UAAW,CAAC,QAAS,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,UAAW,CAAC,QAAS,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;QAC7I,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,UAAU,EAAE,SAAS,CAAC,IAAI,MAAM,CAAC,UAAW,CAAC,SAAU,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,UAAW,CAAC,SAAU,CAAC,CAAC,CAAC,CAAC,CAAC;KACpI,CAAC,CAAA;IACF,MAAM,QAAQ,GAAG,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;IAC7C,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;QAClD,IAAI,CAAC,QAAQ,IAAI,CAAC,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC,EAAE,CAAC;YACjG,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAA;QAC/B,CAAC;IACH,CAAC;IACD,kBAAkB,CAAC,GAAG,CAAC,IAAI,EAAE,EAAE,GAAG,MAAM,EAAE,SAAS,EAAE,CAAC,CAAA;AACxD,CAAC"}
+{"version":3,"file":"gridBindings.js","sourceRoot":"","sources":["../src/gridBindings.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { DataGrid } from './DataGrid.js';
+export type { GridQuery, GridQueryFilter, GridQueryReason, GridQueryChangeDetail, GridQuerySnapshot, GridExternalTotal, GridExternalState, SortDirection } from '@tipolox/litgrid-web';
 export type { DataGridInstance, DataGridProps, DataGridRef } from './DataGrid.js';
-export type { BestFitColumnWidth, ColumnReorderDetail, ColumnStateChangeDetail, ColumnVisibilityChangeDetail, DataGridElement, GridColumn, GridColumnState, GridConfig, GridFilter, GridPaginationState, GridSelection, GridTheme, SelectionIntent } from '@tipolox/litgrid-web';
+export type { BestFitColumnWidth, ColumnReorderDetail, ColumnStateChangeDetail, ColumnVisibilityChangeDetail, DataGridElement, GridColumn, GridColumnState, GridConfig, GridFilter, GridPaginationState, GridSelection, GridRowKey, SelectedRowSnapshot, SelectionChangeDetail, GridTheme, SelectionIntent } from '@tipolox/litgrid-web';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,YAAY,EAAE,gBAAgB,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AACjF,YAAY,EACV,kBAAkB,EAClB,mBAAmB,EACnB,uBAAuB,EACvB,4BAA4B,EAC5B,eAAe,EACf,UAAU,EACV,eAAe,EACf,UAAU,EACV,UAAU,EACV,mBAAmB,EACnB,aAAa,EACb,SAAS,EACT,eAAe,EAChB,MAAM,sBAAsB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,eAAe,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACtL,YAAY,EAAE,gBAAgB,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AACjF,YAAY,EACV,kBAAkB,EAClB,mBAAmB,EACnB,uBAAuB,EACvB,4BAA4B,EAC5B,eAAe,EACf,UAAU,EACV,eAAe,EACf,UAAU,EACV,UAAU,EACV,mBAAmB,EACnB,aAAa,EACb,UAAU,EACV,mBAAmB,EACnB,qBAAqB,EACrB,SAAS,EACT,eAAe,EAChB,MAAM,sBAAsB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tipolox/litgrid-react",
-  "version": "1.0.3",
+  "version": "1.2.0",
   "description": "React integration for LitGrid.",
   "type": "module",
   "main": "./dist/index.js",
@@ -15,7 +15,11 @@
     "./package.json": "./package.json"
   },
   "files": [
-    "dist"
+    "dist",
+    "src/**/*.{ts,tsx}",
+    "!src/**/*.d.ts",
+    "!src/**/*.test.{ts,tsx}",
+    "!src/**/*.bench.{ts,tsx}"
   ],
   "keywords": [
     "data-grid",
@@ -38,7 +42,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@tipolox/litgrid-web": "^1.0.3"
+    "@tipolox/litgrid-web": "^1.2.0"
   },
   "peerDependencies": {
     "react": "^19.2.5",

package/src/DataGrid.tsx

@@ -0,0 +1,305 @@
+import '@tipolox/litgrid-web'
+import type {
+  BestFitColumnWidth,
+  ColumnReorderDetail,
+  ColumnStateChangeDetail,
+  ColumnVisibilityChangeDetail,
+  DataGridElement,
+  GridColumn,
+  GridColumnState,
+  GridConfig,
+  GridFilter,
+  GridPaginationState,
+  GridSelection,
+  GridRowKey,
+  SelectionChangeDetail,
+  GridExternalState,
+  GridQuerySnapshot,
+  GridQueryChangeDetail,
+  SortDirection,
+  GridTheme,
+  SelectionIntent
+} from '@tipolox/litgrid-web'
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useRef
+} from 'react'
+import { syncGridInputs } from './gridBindings.js'
+
+export type DataGridProps = {
+  externalState?: GridExternalState
+  onQueryChange?: (detail: GridQueryChangeDetail) => void
+  data: unknown[]
+  columns?: GridColumn[]
+  config?: GridConfig
+  theme?: GridTheme
+  ariaLabel?: string
+  ariaDescription?: string
+  screenReaderAnnouncements?: boolean
+  height?: number
+  rowHeight?: number
+  overscan?: number
+  columnOverscan?: number
+  bestFitSampleSize?: number
+  quickSearchDebounceThreshold?: number
+  quickSearchDebounceMs?: number
+  columnStateStorageKey?: string
+  onColumnStateChange?: (detail: ColumnStateChangeDetail) => void
+  onSelectionChange?: (detail: SelectionChangeDetail) => void
+  onColumnReorder?: (detail: ColumnReorderDetail) => void
+  onColumnVisibilityChange?: (detail: ColumnVisibilityChangeDetail) => void
+}
+
+export type DataGridRef = {
+  setExternalState(state: GridExternalState): boolean
+  getQuery(): GridQuerySnapshot
+  refreshQuery(): void
+  sortBy(columnKey: string, direction: SortDirection): void
+  clearSort(): void
+  readonly gridElement: DataGridElement | null
+  getRowHeight(rowIndex: number): number
+  getColumnWidth(column: GridColumn): number
+  setRowHeight(rowIndex: number, height: number): void
+  resetRowHeight(rowIndex: number): void
+  resetAllRowHeights(): void
+  setColumnWidth(columnKey: string, width: number): void
+  resetColumnWidth(columnKey: string): void
+  resetAllColumnWidths(): void
+  moveColumn(columnKey: string, targetIndex: number): void
+  getColumnOrder(): string[]
+  setColumnOrder(columnKeys: string[]): void
+  resetColumnOrder(): void
+  setColumnVisible(columnKey: string, visible: boolean): void
+  isColumnVisible(columnKey: string): boolean
+  getVisibleColumnKeys(): string[]
+  resetColumnVisibility(): void
+  getColumnState(): GridColumnState
+  setColumnState(state: GridColumnState): void
+  resetColumnState(): void
+  bestFitColumn(columnKey: string): number | null
+  bestFitAllColumns(): BestFitColumnWidth[]
+  copySelectedCells(): Promise<boolean>
+  copySelectedRows(): Promise<boolean>
+  setQuickSearch(query: string): void
+  clearQuickSearch(): void
+  getQuickSearch(): string
+  setFilter(filter: GridFilter): void
+  clearFilter(columnKey?: string): void
+  getFilters(): GridFilter[]
+  setPage(pageIndex: number): void
+  setPageSize(pageSize: number): void
+  getPagination(): GridPaginationState
+  getTotalRowCount(): number
+  selectRow(rowIndex: number, intent?: SelectionIntent): void
+  selectAllRows(): void
+  clearSelection(): void
+  getSelection(): GridSelection
+  getSelectionSnapshot(): SelectionChangeDetail
+  selectRowByKey(key: GridRowKey, intent?: SelectionIntent): boolean
+  isRowSelected(rowIndex: number): boolean
+  isCellSelected(rowIndex: number, columnKey: string): boolean
+}
+
+export type DataGridInstance = DataGridRef
+
+const GRID_UNAVAILABLE_MESSAGE = 'LitGrid is not available before the React component is mounted.'
+
+export const DataGrid = forwardRef<DataGridRef, DataGridProps>(function DataGrid(
+  {
+    data,
+    externalState,
+    onQueryChange,
+    columns = [],
+    config = {},
+    theme = 'light',
+    ariaLabel = 'Data grid',
+    ariaDescription = '',
+    screenReaderAnnouncements = true,
+    height = 320,
+    rowHeight = 36,
+    overscan = 4,
+    columnOverscan = 2,
+    bestFitSampleSize = 10,
+    quickSearchDebounceThreshold = 10000,
+    quickSearchDebounceMs = 150,
+    columnStateStorageKey,
+    onColumnStateChange,
+    onSelectionChange,
+    onColumnReorder,
+    onColumnVisibilityChange
+  }: DataGridProps,
+  forwardedRef
+) {
+  const gridRef = useRef<DataGridElement | null>(null)
+
+  const requireGridElement = (): DataGridElement => {
+    if (!gridRef.current) throw new Error(GRID_UNAVAILABLE_MESSAGE)
+    return gridRef.current
+  }
+
+  useImperativeHandle(
+    forwardedRef,
+    () => ({
+      setExternalState: (state: GridExternalState) => requireGridElement().setExternalState!(state),
+      getQuery: () => requireGridElement().getQuery!(),
+      refreshQuery: () => requireGridElement().refreshQuery!(),
+      sortBy: (key: string, direction: SortDirection) => requireGridElement().sortBy!(key, direction),
+      clearSort: () => requireGridElement().clearSort!(),
+      get gridElement() {
+        return gridRef.current
+      },
+      getRowHeight: (rowIndex: number) => requireGridElement().getRowHeight(rowIndex),
+      getColumnWidth: (column: GridColumn) => requireGridElement().getColumnWidth(column),
+      setRowHeight: (rowIndex: number, heightVal: number) => requireGridElement().setRowHeight(rowIndex, heightVal),
+      resetRowHeight: (rowIndex: number) => requireGridElement().resetRowHeight(rowIndex),
+      resetAllRowHeights: () => requireGridElement().resetAllRowHeights(),
+      setColumnWidth: (columnKey: string, width: number) => requireGridElement().setColumnWidth(columnKey, width),
+      resetColumnWidth: (columnKey: string) => requireGridElement().resetColumnWidth(columnKey),
+      resetAllColumnWidths: () => requireGridElement().resetAllColumnWidths(),
+      moveColumn: (columnKey: string, targetIndex: number) => requireGridElement().moveColumn(columnKey, targetIndex),
+      getColumnOrder: () => requireGridElement().getColumnOrder(),
+      setColumnOrder: (columnKeys: string[]) => requireGridElement().setColumnOrder(columnKeys),
+      resetColumnOrder: () => requireGridElement().resetColumnOrder(),
+      setColumnVisible: (columnKey: string, visible: boolean) => requireGridElement().setColumnVisible(columnKey, visible),
+      isColumnVisible: (columnKey: string) => requireGridElement().isColumnVisible(columnKey),
+      getVisibleColumnKeys: () => requireGridElement().getVisibleColumnKeys(),
+      resetColumnVisibility: () => requireGridElement().resetColumnVisibility(),
+      getColumnState: () => requireGridElement().getColumnState(),
+      setColumnState: (state: GridColumnState) => requireGridElement().setColumnState(state),
+      resetColumnState: () => requireGridElement().resetColumnState(),
+      bestFitColumn: (columnKey: string) => requireGridElement().bestFitColumn(columnKey),
+      bestFitAllColumns: () => requireGridElement().bestFitAllColumns(),
+      copySelectedCells: () => requireGridElement().copySelectedCells(),
+      copySelectedRows: () => requireGridElement().copySelectedRows(),
+      setQuickSearch: (query: string) => requireGridElement().setQuickSearch(query),
+      clearQuickSearch: () => requireGridElement().clearQuickSearch(),
+      getQuickSearch: () => requireGridElement().getQuickSearch(),
+      setFilter: (filter: GridFilter) => requireGridElement().setFilter(filter),
+      clearFilter: (columnKey?: string) => requireGridElement().clearFilter(columnKey),
+      getFilters: () => requireGridElement().getFilters(),
+      setPage: (pageIndex: number) => requireGridElement().setPage(pageIndex),
+      setPageSize: (pageSize: number) => requireGridElement().setPageSize(pageSize),
+      getPagination: () => requireGridElement().getPagination(),
+      getTotalRowCount: () => requireGridElement().getTotalRowCount(),
+      selectRow: (rowIndex: number, intent?: SelectionIntent) => requireGridElement().selectRow(rowIndex, intent),
+      selectAllRows: () => requireGridElement().selectAllRows(),
+      clearSelection: () => requireGridElement().clearSelection(),
+      getSelection: () => requireGridElement().getSelection(),
+      getSelectionSnapshot: () => requireGridElement().getSelectionSnapshot(),
+      selectRowByKey: (key, intent) => requireGridElement().selectRowByKey(key, intent),
+      isRowSelected(rowIndex: number) {
+        return requireGridElement().isRowSelected(rowIndex)
+      },
+      isCellSelected(rowIndex: number, columnKey: string) {
+        return requireGridElement().isCellSelected(rowIndex, columnKey)
+      }
+    }),
+    []
+  )
+
+  // Subscribe before input synchronization, which can synchronously clear selection.
+  const selectionCallback = useRef(onSelectionChange)
+  const queryCallback = useRef(onQueryChange)
+  useLayoutEffect(() => { queryCallback.current = onQueryChange }, [onQueryChange])
+  useEffect(() => {
+    const element = gridRef.current
+    if (!element) return
+    const handler = (event: Event) => {
+      if (event.target === element) queryCallback.current?.((event as CustomEvent<GridQueryChangeDetail>).detail)
+    }
+    element.addEventListener('query-change', handler)
+    return () => element.removeEventListener('query-change', handler)
+  }, [])
+  useLayoutEffect(() => { selectionCallback.current = onSelectionChange }, [onSelectionChange])
+  useEffect(() => {
+    const element = gridRef.current
+    if (!element) return
+    const handleSelectionChange = (event: Event) => {
+      if (event.target === element) selectionCallback.current?.((event as CustomEvent<SelectionChangeDetail>).detail)
+    }
+    element.addEventListener('selection-change', handleSelectionChange)
+    return () => element.removeEventListener('selection-change', handleSelectionChange)
+  }, [])
+
+  useEffect(() => {
+    const grid = gridRef.current
+    if (!grid) return
+
+    syncGridInputs(grid, {
+      externalState,
+      data,
+      columns,
+      config,
+      theme,
+      ariaLabel,
+      ariaDescription,
+      screenReaderAnnouncements,
+      height,
+      rowHeight,
+      overscan,
+      columnOverscan,
+      bestFitSampleSize,
+      quickSearchDebounceThreshold,
+      quickSearchDebounceMs,
+      columnStateStorageKey
+    })
+  }, [
+    externalState,
+    data,
+    columns,
+    config,
+    theme,
+    ariaLabel,
+    ariaDescription,
+    screenReaderAnnouncements,
+    height,
+    rowHeight,
+    overscan,
+    columnOverscan,
+    bestFitSampleSize,
+    quickSearchDebounceThreshold,
+    quickSearchDebounceMs,
+    columnStateStorageKey
+  ])
+
+  useEffect(() => {
+    const element = gridRef.current
+    if (!element || !onColumnStateChange) return
+
+    const handleColumnStateChange = (event: Event) => {
+      onColumnStateChange((event as CustomEvent<ColumnStateChangeDetail>).detail)
+    }
+
+    element.addEventListener('column-state-change', handleColumnStateChange)
+    return () => element.removeEventListener('column-state-change', handleColumnStateChange)
+  }, [onColumnStateChange])
+
+  useEffect(() => {
+    const element = gridRef.current
+    if (!element || !onColumnReorder) return
+
+    const handleColumnReorder = (event: Event) => {
+      onColumnReorder((event as CustomEvent<ColumnReorderDetail>).detail)
+    }
+
+    element.addEventListener('column-reorder', handleColumnReorder)
+    return () => element.removeEventListener('column-reorder', handleColumnReorder)
+  }, [onColumnReorder])
+
+  useEffect(() => {
+    const element = gridRef.current
+    if (!element || !onColumnVisibilityChange) return
+
+    const handleColumnVisibilityChange = (event: Event) => {
+      onColumnVisibilityChange((event as CustomEvent<ColumnVisibilityChangeDetail>).detail)
+    }
+
+    element.addEventListener('column-visibility-change', handleColumnVisibilityChange)
+    return () => element.removeEventListener('column-visibility-change', handleColumnVisibilityChange)
+  }, [onColumnVisibilityChange])
+
+  return <yc-grid ref={gridRef}></yc-grid>
+})

package/src/gridBindings.ts

@@ -0,0 +1,72 @@
+import type {
+  DataGridElement,
+  GridColumn,
+  GridConfig,
+  GridExternalState,
+  GridTheme
+} from '@tipolox/litgrid-web'
+
+export type ReactGridInputs = {
+  externalState?: GridExternalState
+  data: unknown[]
+  columns: GridColumn[]
+  config: GridConfig
+  theme: GridTheme
+  ariaLabel: string
+  ariaDescription: string
+  screenReaderAnnouncements: boolean
+  height: number
+  rowHeight: number
+  overscan: number
+  columnOverscan: number
+  bestFitSampleSize: number
+  quickSearchDebounceThreshold: number
+  quickSearchDebounceMs: number
+  columnStateStorageKey?: string
+}
+
+const synchronizedInputs = new WeakMap<DataGridElement, Record<string, unknown>>()
+
+export function syncGridInputs(
+  grid: DataGridElement,
+  inputs: ReactGridInputs
+): void {
+  // Keep the existing effect-triggered synchronization contract, including
+  // in-place mutations. Navigation is retained by the structural grid setters.
+  const previous = synchronizedInputs.get(grid)
+  const external = inputs.config.queryMode === 'external'
+  if (!external || !previous || previous.columns !== inputs.columns) grid.columns = inputs.columns
+  const values = {
+    config: inputs.config,
+    theme: inputs.theme, ariaLabel: inputs.ariaLabel, ariaDescription: inputs.ariaDescription,
+    screenReaderAnnouncements: inputs.screenReaderAnnouncements,
+    viewportHeight: inputs.height, virtualRowHeight: inputs.rowHeight,
+    overscanCount: inputs.overscan, columnOverscanCount: inputs.columnOverscan,
+    bestFitSampleSize: inputs.bestFitSampleSize,
+    quickSearchDebounceThreshold: inputs.quickSearchDebounceThreshold,
+    quickSearchDebounceMs: inputs.quickSearchDebounceMs,
+    columnStateStorageKey: inputs.columnStateStorageKey ?? null
+  }
+  // Snapshot only the fixed-size configuration, never row data or column content.
+  const config = inputs.config
+  const configKey = JSON.stringify([
+    config.queryMode ?? 'local',
+    config.selection?.mode ?? 'none', config.selection?.checkboxes ?? false,
+    config.selection?.rowKey, config.selection?.scopeKey,
+    config.rowHeader?.enabled ?? false, config.rowHeader?.width ?? 56,
+    config.pagination?.enabled ?? false,
+    Number.isFinite(config.pagination?.pageSize) && config.pagination!.pageSize! > 0 ? Math.max(1, Math.floor(config.pagination!.pageSize!)) : 50,
+    Number.isFinite(config.pagination?.pageIndex) && config.pagination!.pageIndex! >= 0 ? Math.floor(config.pagination!.pageIndex!) : 0
+  ])
+  for (const [key, value] of Object.entries(values)) {
+    if (!previous || (key === 'config' ? previous.configKey !== configKey : previous[key] !== value)) {
+      Reflect.set(grid, key, value)
+    }
+  }
+  if (external && inputs.externalState && (!previous || previous.externalState !== inputs.externalState || previous.configKey !== configKey)) {
+    grid.externalState = inputs.externalState
+  }
+  synchronizedInputs.set(grid, { ...values, configKey, columns: inputs.columns, externalState: inputs.externalState })
+  // Clear a changed scope before loading rows that may reuse the same keys.
+  if (!external) grid.data = inputs.data
+}

package/src/index.ts

@@ -0,0 +1,21 @@
+export { DataGrid } from './DataGrid.js'
+export type { GridQuery, GridQueryFilter, GridQueryReason, GridQueryChangeDetail, GridQuerySnapshot, GridExternalTotal, GridExternalState, SortDirection } from '@tipolox/litgrid-web'
+export type { DataGridInstance, DataGridProps, DataGridRef } from './DataGrid.js'
+export type {
+  BestFitColumnWidth,
+  ColumnReorderDetail,
+  ColumnStateChangeDetail,
+  ColumnVisibilityChangeDetail,
+  DataGridElement,
+  GridColumn,
+  GridColumnState,
+  GridConfig,
+  GridFilter,
+  GridPaginationState,
+  GridSelection,
+  GridRowKey,
+  SelectedRowSnapshot,
+  SelectionChangeDetail,
+  GridTheme,
+  SelectionIntent
+} from '@tipolox/litgrid-web'