@tipolox/litgrid-react 1.1.0 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/DataGrid.d.ts +11 -1
- package/dist/DataGrid.d.ts.map +1 -1
- package/dist/DataGrid.js +38 -2
- package/dist/DataGrid.js.map +1 -1
- package/dist/gridBindings.d.ts +2 -1
- package/dist/gridBindings.d.ts.map +1 -1
- package/dist/gridBindings.js +13 -4
- package/dist/gridBindings.js.map +1 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/DataGrid.tsx +54 -1
- package/src/gridBindings.ts +13 -4
- package/src/index.ts +4 -0
package/dist/DataGrid.d.ts
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import '@tipolox/litgrid-web';
|
|
2
|
-
import type { BestFitColumnWidth, ColumnReorderDetail, ColumnStateChangeDetail, ColumnVisibilityChangeDetail, DataGridElement, GridColumn, GridColumnState, GridConfig, GridFilter, GridPaginationState, GridSelection, GridTheme, SelectionIntent } from '@tipolox/litgrid-web';
|
|
2
|
+
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';
|
|
3
3
|
export type DataGridProps = {
|
|
4
|
+
externalState?: GridExternalState;
|
|
5
|
+
onQueryChange?: (detail: GridQueryChangeDetail) => void;
|
|
4
6
|
data: unknown[];
|
|
5
7
|
columns?: GridColumn[];
|
|
6
8
|
config?: GridConfig;
|
|
@@ -17,10 +19,16 @@ export type DataGridProps = {
|
|
|
17
19
|
quickSearchDebounceMs?: number;
|
|
18
20
|
columnStateStorageKey?: string;
|
|
19
21
|
onColumnStateChange?: (detail: ColumnStateChangeDetail) => void;
|
|
22
|
+
onSelectionChange?: (detail: SelectionChangeDetail) => void;
|
|
20
23
|
onColumnReorder?: (detail: ColumnReorderDetail) => void;
|
|
21
24
|
onColumnVisibilityChange?: (detail: ColumnVisibilityChangeDetail) => void;
|
|
22
25
|
};
|
|
23
26
|
export type DataGridRef = {
|
|
27
|
+
setExternalState(state: GridExternalState): boolean;
|
|
28
|
+
getQuery(): GridQuerySnapshot;
|
|
29
|
+
refreshQuery(): void;
|
|
30
|
+
sortBy(columnKey: string, direction: SortDirection): void;
|
|
31
|
+
clearSort(): void;
|
|
24
32
|
readonly gridElement: DataGridElement | null;
|
|
25
33
|
getRowHeight(rowIndex: number): number;
|
|
26
34
|
getColumnWidth(column: GridColumn): number;
|
|
@@ -59,6 +67,8 @@ export type DataGridRef = {
|
|
|
59
67
|
selectAllRows(): void;
|
|
60
68
|
clearSelection(): void;
|
|
61
69
|
getSelection(): GridSelection;
|
|
70
|
+
getSelectionSnapshot(): SelectionChangeDetail;
|
|
71
|
+
selectRowByKey(key: GridRowKey, intent?: SelectionIntent): boolean;
|
|
62
72
|
isRowSelected(rowIndex: number): boolean;
|
|
63
73
|
isCellSelected(rowIndex: number, columnKey: string): boolean;
|
|
64
74
|
};
|
package/dist/DataGrid.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../src/DataGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,KAAK,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;
|
|
1
|
+
{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../src/DataGrid.tsx"],"names":[],"mappings":"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"}
|
package/dist/DataGrid.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import '@tipolox/litgrid-web';
|
|
3
|
-
import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
|
|
3
|
+
import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef } from 'react';
|
|
4
4
|
import { syncGridInputs } from './gridBindings.js';
|
|
5
5
|
const GRID_UNAVAILABLE_MESSAGE = 'LitGrid is not available before the React component is mounted.';
|
|
6
|
-
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) {
|
|
6
|
+
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) {
|
|
7
7
|
const gridRef = useRef(null);
|
|
8
8
|
const requireGridElement = () => {
|
|
9
9
|
if (!gridRef.current)
|
|
@@ -11,6 +11,11 @@ export const DataGrid = forwardRef(function DataGrid({ data, columns = [], confi
|
|
|
11
11
|
return gridRef.current;
|
|
12
12
|
};
|
|
13
13
|
useImperativeHandle(forwardedRef, () => ({
|
|
14
|
+
setExternalState: (state) => requireGridElement().setExternalState(state),
|
|
15
|
+
getQuery: () => requireGridElement().getQuery(),
|
|
16
|
+
refreshQuery: () => requireGridElement().refreshQuery(),
|
|
17
|
+
sortBy: (key, direction) => requireGridElement().sortBy(key, direction),
|
|
18
|
+
clearSort: () => requireGridElement().clearSort(),
|
|
14
19
|
get gridElement() {
|
|
15
20
|
return gridRef.current;
|
|
16
21
|
},
|
|
@@ -51,6 +56,8 @@ export const DataGrid = forwardRef(function DataGrid({ data, columns = [], confi
|
|
|
51
56
|
selectAllRows: () => requireGridElement().selectAllRows(),
|
|
52
57
|
clearSelection: () => requireGridElement().clearSelection(),
|
|
53
58
|
getSelection: () => requireGridElement().getSelection(),
|
|
59
|
+
getSelectionSnapshot: () => requireGridElement().getSelectionSnapshot(),
|
|
60
|
+
selectRowByKey: (key, intent) => requireGridElement().selectRowByKey(key, intent),
|
|
54
61
|
isRowSelected(rowIndex) {
|
|
55
62
|
return requireGridElement().isRowSelected(rowIndex);
|
|
56
63
|
},
|
|
@@ -58,11 +65,39 @@ export const DataGrid = forwardRef(function DataGrid({ data, columns = [], confi
|
|
|
58
65
|
return requireGridElement().isCellSelected(rowIndex, columnKey);
|
|
59
66
|
}
|
|
60
67
|
}), []);
|
|
68
|
+
// Subscribe before input synchronization, which can synchronously clear selection.
|
|
69
|
+
const selectionCallback = useRef(onSelectionChange);
|
|
70
|
+
const queryCallback = useRef(onQueryChange);
|
|
71
|
+
useLayoutEffect(() => { queryCallback.current = onQueryChange; }, [onQueryChange]);
|
|
72
|
+
useEffect(() => {
|
|
73
|
+
const element = gridRef.current;
|
|
74
|
+
if (!element)
|
|
75
|
+
return;
|
|
76
|
+
const handler = (event) => {
|
|
77
|
+
if (event.target === element)
|
|
78
|
+
queryCallback.current?.(event.detail);
|
|
79
|
+
};
|
|
80
|
+
element.addEventListener('query-change', handler);
|
|
81
|
+
return () => element.removeEventListener('query-change', handler);
|
|
82
|
+
}, []);
|
|
83
|
+
useLayoutEffect(() => { selectionCallback.current = onSelectionChange; }, [onSelectionChange]);
|
|
84
|
+
useEffect(() => {
|
|
85
|
+
const element = gridRef.current;
|
|
86
|
+
if (!element)
|
|
87
|
+
return;
|
|
88
|
+
const handleSelectionChange = (event) => {
|
|
89
|
+
if (event.target === element)
|
|
90
|
+
selectionCallback.current?.(event.detail);
|
|
91
|
+
};
|
|
92
|
+
element.addEventListener('selection-change', handleSelectionChange);
|
|
93
|
+
return () => element.removeEventListener('selection-change', handleSelectionChange);
|
|
94
|
+
}, []);
|
|
61
95
|
useEffect(() => {
|
|
62
96
|
const grid = gridRef.current;
|
|
63
97
|
if (!grid)
|
|
64
98
|
return;
|
|
65
99
|
syncGridInputs(grid, {
|
|
100
|
+
externalState,
|
|
66
101
|
data,
|
|
67
102
|
columns,
|
|
68
103
|
config,
|
|
@@ -80,6 +115,7 @@ export const DataGrid = forwardRef(function DataGrid({ data, columns = [], confi
|
|
|
80
115
|
columnStateStorageKey
|
|
81
116
|
});
|
|
82
117
|
}, [
|
|
118
|
+
externalState,
|
|
83
119
|
data,
|
|
84
120
|
columns,
|
|
85
121
|
config,
|
package/dist/DataGrid.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataGrid.js","sourceRoot":"","sources":["../src/DataGrid.tsx"],"names":[],"mappings":";AAAA,OAAO,sBAAsB,CAAA;
|
|
1
|
+
{"version":3,"file":"DataGrid.js","sourceRoot":"","sources":["../src/DataGrid.tsx"],"names":[],"mappings":"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"}
|
package/dist/gridBindings.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import type { DataGridElement, GridColumn, GridConfig, GridTheme } from '@tipolox/litgrid-web';
|
|
1
|
+
import type { DataGridElement, GridColumn, GridConfig, GridExternalState, GridTheme } from '@tipolox/litgrid-web';
|
|
2
2
|
export type ReactGridInputs = {
|
|
3
|
+
externalState?: GridExternalState;
|
|
3
4
|
data: unknown[];
|
|
4
5
|
columns: GridColumn[];
|
|
5
6
|
config: GridConfig;
|
|
@@ -1 +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,
|
|
1
|
+
{"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
CHANGED
|
@@ -2,8 +2,10 @@ const synchronizedInputs = new WeakMap();
|
|
|
2
2
|
export function syncGridInputs(grid, inputs) {
|
|
3
3
|
// Keep the existing effect-triggered synchronization contract, including
|
|
4
4
|
// in-place mutations. Navigation is retained by the structural grid setters.
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
const previous = synchronizedInputs.get(grid);
|
|
6
|
+
const external = inputs.config.queryMode === 'external';
|
|
7
|
+
if (!external || !previous || previous.columns !== inputs.columns)
|
|
8
|
+
grid.columns = inputs.columns;
|
|
7
9
|
const values = {
|
|
8
10
|
config: inputs.config,
|
|
9
11
|
theme: inputs.theme, ariaLabel: inputs.ariaLabel, ariaDescription: inputs.ariaDescription,
|
|
@@ -18,18 +20,25 @@ export function syncGridInputs(grid, inputs) {
|
|
|
18
20
|
// Snapshot only the fixed-size configuration, never row data or column content.
|
|
19
21
|
const config = inputs.config;
|
|
20
22
|
const configKey = JSON.stringify([
|
|
23
|
+
config.queryMode ?? 'local',
|
|
21
24
|
config.selection?.mode ?? 'none', config.selection?.checkboxes ?? false,
|
|
25
|
+
config.selection?.rowKey, config.selection?.scopeKey,
|
|
22
26
|
config.rowHeader?.enabled ?? false, config.rowHeader?.width ?? 56,
|
|
23
27
|
config.pagination?.enabled ?? false,
|
|
24
28
|
Number.isFinite(config.pagination?.pageSize) && config.pagination.pageSize > 0 ? Math.max(1, Math.floor(config.pagination.pageSize)) : 50,
|
|
25
29
|
Number.isFinite(config.pagination?.pageIndex) && config.pagination.pageIndex >= 0 ? Math.floor(config.pagination.pageIndex) : 0
|
|
26
30
|
]);
|
|
27
|
-
const previous = synchronizedInputs.get(grid);
|
|
28
31
|
for (const [key, value] of Object.entries(values)) {
|
|
29
32
|
if (!previous || (key === 'config' ? previous.configKey !== configKey : previous[key] !== value)) {
|
|
30
33
|
Reflect.set(grid, key, value);
|
|
31
34
|
}
|
|
32
35
|
}
|
|
33
|
-
|
|
36
|
+
if (external && inputs.externalState && (!previous || previous.externalState !== inputs.externalState || previous.configKey !== configKey)) {
|
|
37
|
+
grid.externalState = inputs.externalState;
|
|
38
|
+
}
|
|
39
|
+
synchronizedInputs.set(grid, { ...values, configKey, columns: inputs.columns, externalState: inputs.externalState });
|
|
40
|
+
// Clear a changed scope before loading rows that may reuse the same keys.
|
|
41
|
+
if (!external)
|
|
42
|
+
grid.data = inputs.data;
|
|
34
43
|
}
|
|
35
44
|
//# sourceMappingURL=gridBindings.js.map
|
package/dist/gridBindings.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gridBindings.js","sourceRoot":"","sources":["../src/gridBindings.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"gridBindings.js","sourceRoot":"","sources":["../src/gridBindings.ts"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { DataGrid } from './DataGrid.js';
|
|
2
|
+
export type { GridQuery, GridQueryFilter, GridQueryReason, GridQueryChangeDetail, GridQuerySnapshot, GridExternalTotal, GridExternalState, SortDirection } from '@tipolox/litgrid-web';
|
|
2
3
|
export type { DataGridInstance, DataGridProps, DataGridRef } from './DataGrid.js';
|
|
3
|
-
export type { BestFitColumnWidth, ColumnReorderDetail, ColumnStateChangeDetail, ColumnVisibilityChangeDetail, DataGridElement, GridColumn, GridColumnState, GridConfig, GridFilter, GridPaginationState, GridSelection, GridTheme, SelectionIntent } from '@tipolox/litgrid-web';
|
|
4
|
+
export type { BestFitColumnWidth, ColumnReorderDetail, ColumnStateChangeDetail, ColumnVisibilityChangeDetail, DataGridElement, GridColumn, GridColumnState, GridConfig, GridFilter, GridPaginationState, GridSelection, GridRowKey, SelectedRowSnapshot, SelectionChangeDetail, GridTheme, SelectionIntent } from '@tipolox/litgrid-web';
|
|
4
5
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +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"}
|
|
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,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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tipolox/litgrid-react",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.0",
|
|
4
4
|
"description": "React integration for LitGrid.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"access": "public"
|
|
43
43
|
},
|
|
44
44
|
"dependencies": {
|
|
45
|
-
"@tipolox/litgrid-web": "^1.
|
|
45
|
+
"@tipolox/litgrid-web": "^1.2.0"
|
|
46
46
|
},
|
|
47
47
|
"peerDependencies": {
|
|
48
48
|
"react": "^19.2.5",
|
package/src/DataGrid.tsx
CHANGED
|
@@ -11,6 +11,12 @@ import type {
|
|
|
11
11
|
GridFilter,
|
|
12
12
|
GridPaginationState,
|
|
13
13
|
GridSelection,
|
|
14
|
+
GridRowKey,
|
|
15
|
+
SelectionChangeDetail,
|
|
16
|
+
GridExternalState,
|
|
17
|
+
GridQuerySnapshot,
|
|
18
|
+
GridQueryChangeDetail,
|
|
19
|
+
SortDirection,
|
|
14
20
|
GridTheme,
|
|
15
21
|
SelectionIntent
|
|
16
22
|
} from '@tipolox/litgrid-web'
|
|
@@ -18,11 +24,14 @@ import {
|
|
|
18
24
|
forwardRef,
|
|
19
25
|
useEffect,
|
|
20
26
|
useImperativeHandle,
|
|
27
|
+
useLayoutEffect,
|
|
21
28
|
useRef
|
|
22
29
|
} from 'react'
|
|
23
30
|
import { syncGridInputs } from './gridBindings.js'
|
|
24
31
|
|
|
25
32
|
export type DataGridProps = {
|
|
33
|
+
externalState?: GridExternalState
|
|
34
|
+
onQueryChange?: (detail: GridQueryChangeDetail) => void
|
|
26
35
|
data: unknown[]
|
|
27
36
|
columns?: GridColumn[]
|
|
28
37
|
config?: GridConfig
|
|
@@ -39,11 +48,17 @@ export type DataGridProps = {
|
|
|
39
48
|
quickSearchDebounceMs?: number
|
|
40
49
|
columnStateStorageKey?: string
|
|
41
50
|
onColumnStateChange?: (detail: ColumnStateChangeDetail) => void
|
|
51
|
+
onSelectionChange?: (detail: SelectionChangeDetail) => void
|
|
42
52
|
onColumnReorder?: (detail: ColumnReorderDetail) => void
|
|
43
53
|
onColumnVisibilityChange?: (detail: ColumnVisibilityChangeDetail) => void
|
|
44
54
|
}
|
|
45
55
|
|
|
46
56
|
export type DataGridRef = {
|
|
57
|
+
setExternalState(state: GridExternalState): boolean
|
|
58
|
+
getQuery(): GridQuerySnapshot
|
|
59
|
+
refreshQuery(): void
|
|
60
|
+
sortBy(columnKey: string, direction: SortDirection): void
|
|
61
|
+
clearSort(): void
|
|
47
62
|
readonly gridElement: DataGridElement | null
|
|
48
63
|
getRowHeight(rowIndex: number): number
|
|
49
64
|
getColumnWidth(column: GridColumn): number
|
|
@@ -82,6 +97,8 @@ export type DataGridRef = {
|
|
|
82
97
|
selectAllRows(): void
|
|
83
98
|
clearSelection(): void
|
|
84
99
|
getSelection(): GridSelection
|
|
100
|
+
getSelectionSnapshot(): SelectionChangeDetail
|
|
101
|
+
selectRowByKey(key: GridRowKey, intent?: SelectionIntent): boolean
|
|
85
102
|
isRowSelected(rowIndex: number): boolean
|
|
86
103
|
isCellSelected(rowIndex: number, columnKey: string): boolean
|
|
87
104
|
}
|
|
@@ -93,6 +110,8 @@ const GRID_UNAVAILABLE_MESSAGE = 'LitGrid is not available before the React comp
|
|
|
93
110
|
export const DataGrid = forwardRef<DataGridRef, DataGridProps>(function DataGrid(
|
|
94
111
|
{
|
|
95
112
|
data,
|
|
113
|
+
externalState,
|
|
114
|
+
onQueryChange,
|
|
96
115
|
columns = [],
|
|
97
116
|
config = {},
|
|
98
117
|
theme = 'light',
|
|
@@ -108,9 +127,10 @@ export const DataGrid = forwardRef<DataGridRef, DataGridProps>(function DataGrid
|
|
|
108
127
|
quickSearchDebounceMs = 150,
|
|
109
128
|
columnStateStorageKey,
|
|
110
129
|
onColumnStateChange,
|
|
130
|
+
onSelectionChange,
|
|
111
131
|
onColumnReorder,
|
|
112
132
|
onColumnVisibilityChange
|
|
113
|
-
},
|
|
133
|
+
}: DataGridProps,
|
|
114
134
|
forwardedRef
|
|
115
135
|
) {
|
|
116
136
|
const gridRef = useRef<DataGridElement | null>(null)
|
|
@@ -123,6 +143,11 @@ export const DataGrid = forwardRef<DataGridRef, DataGridProps>(function DataGrid
|
|
|
123
143
|
useImperativeHandle(
|
|
124
144
|
forwardedRef,
|
|
125
145
|
() => ({
|
|
146
|
+
setExternalState: (state: GridExternalState) => requireGridElement().setExternalState!(state),
|
|
147
|
+
getQuery: () => requireGridElement().getQuery!(),
|
|
148
|
+
refreshQuery: () => requireGridElement().refreshQuery!(),
|
|
149
|
+
sortBy: (key: string, direction: SortDirection) => requireGridElement().sortBy!(key, direction),
|
|
150
|
+
clearSort: () => requireGridElement().clearSort!(),
|
|
126
151
|
get gridElement() {
|
|
127
152
|
return gridRef.current
|
|
128
153
|
},
|
|
@@ -163,6 +188,8 @@ export const DataGrid = forwardRef<DataGridRef, DataGridProps>(function DataGrid
|
|
|
163
188
|
selectAllRows: () => requireGridElement().selectAllRows(),
|
|
164
189
|
clearSelection: () => requireGridElement().clearSelection(),
|
|
165
190
|
getSelection: () => requireGridElement().getSelection(),
|
|
191
|
+
getSelectionSnapshot: () => requireGridElement().getSelectionSnapshot(),
|
|
192
|
+
selectRowByKey: (key, intent) => requireGridElement().selectRowByKey(key, intent),
|
|
166
193
|
isRowSelected(rowIndex: number) {
|
|
167
194
|
return requireGridElement().isRowSelected(rowIndex)
|
|
168
195
|
},
|
|
@@ -173,11 +200,36 @@ export const DataGrid = forwardRef<DataGridRef, DataGridProps>(function DataGrid
|
|
|
173
200
|
[]
|
|
174
201
|
)
|
|
175
202
|
|
|
203
|
+
// Subscribe before input synchronization, which can synchronously clear selection.
|
|
204
|
+
const selectionCallback = useRef(onSelectionChange)
|
|
205
|
+
const queryCallback = useRef(onQueryChange)
|
|
206
|
+
useLayoutEffect(() => { queryCallback.current = onQueryChange }, [onQueryChange])
|
|
207
|
+
useEffect(() => {
|
|
208
|
+
const element = gridRef.current
|
|
209
|
+
if (!element) return
|
|
210
|
+
const handler = (event: Event) => {
|
|
211
|
+
if (event.target === element) queryCallback.current?.((event as CustomEvent<GridQueryChangeDetail>).detail)
|
|
212
|
+
}
|
|
213
|
+
element.addEventListener('query-change', handler)
|
|
214
|
+
return () => element.removeEventListener('query-change', handler)
|
|
215
|
+
}, [])
|
|
216
|
+
useLayoutEffect(() => { selectionCallback.current = onSelectionChange }, [onSelectionChange])
|
|
217
|
+
useEffect(() => {
|
|
218
|
+
const element = gridRef.current
|
|
219
|
+
if (!element) return
|
|
220
|
+
const handleSelectionChange = (event: Event) => {
|
|
221
|
+
if (event.target === element) selectionCallback.current?.((event as CustomEvent<SelectionChangeDetail>).detail)
|
|
222
|
+
}
|
|
223
|
+
element.addEventListener('selection-change', handleSelectionChange)
|
|
224
|
+
return () => element.removeEventListener('selection-change', handleSelectionChange)
|
|
225
|
+
}, [])
|
|
226
|
+
|
|
176
227
|
useEffect(() => {
|
|
177
228
|
const grid = gridRef.current
|
|
178
229
|
if (!grid) return
|
|
179
230
|
|
|
180
231
|
syncGridInputs(grid, {
|
|
232
|
+
externalState,
|
|
181
233
|
data,
|
|
182
234
|
columns,
|
|
183
235
|
config,
|
|
@@ -195,6 +247,7 @@ export const DataGrid = forwardRef<DataGridRef, DataGridProps>(function DataGrid
|
|
|
195
247
|
columnStateStorageKey
|
|
196
248
|
})
|
|
197
249
|
}, [
|
|
250
|
+
externalState,
|
|
198
251
|
data,
|
|
199
252
|
columns,
|
|
200
253
|
config,
|
package/src/gridBindings.ts
CHANGED
|
@@ -2,10 +2,12 @@ import type {
|
|
|
2
2
|
DataGridElement,
|
|
3
3
|
GridColumn,
|
|
4
4
|
GridConfig,
|
|
5
|
+
GridExternalState,
|
|
5
6
|
GridTheme
|
|
6
7
|
} from '@tipolox/litgrid-web'
|
|
7
8
|
|
|
8
9
|
export type ReactGridInputs = {
|
|
10
|
+
externalState?: GridExternalState
|
|
9
11
|
data: unknown[]
|
|
10
12
|
columns: GridColumn[]
|
|
11
13
|
config: GridConfig
|
|
@@ -31,8 +33,9 @@ export function syncGridInputs(
|
|
|
31
33
|
): void {
|
|
32
34
|
// Keep the existing effect-triggered synchronization contract, including
|
|
33
35
|
// in-place mutations. Navigation is retained by the structural grid setters.
|
|
34
|
-
|
|
35
|
-
|
|
36
|
+
const previous = synchronizedInputs.get(grid)
|
|
37
|
+
const external = inputs.config.queryMode === 'external'
|
|
38
|
+
if (!external || !previous || previous.columns !== inputs.columns) grid.columns = inputs.columns
|
|
36
39
|
const values = {
|
|
37
40
|
config: inputs.config,
|
|
38
41
|
theme: inputs.theme, ariaLabel: inputs.ariaLabel, ariaDescription: inputs.ariaDescription,
|
|
@@ -47,17 +50,23 @@ export function syncGridInputs(
|
|
|
47
50
|
// Snapshot only the fixed-size configuration, never row data or column content.
|
|
48
51
|
const config = inputs.config
|
|
49
52
|
const configKey = JSON.stringify([
|
|
53
|
+
config.queryMode ?? 'local',
|
|
50
54
|
config.selection?.mode ?? 'none', config.selection?.checkboxes ?? false,
|
|
55
|
+
config.selection?.rowKey, config.selection?.scopeKey,
|
|
51
56
|
config.rowHeader?.enabled ?? false, config.rowHeader?.width ?? 56,
|
|
52
57
|
config.pagination?.enabled ?? false,
|
|
53
58
|
Number.isFinite(config.pagination?.pageSize) && config.pagination!.pageSize! > 0 ? Math.max(1, Math.floor(config.pagination!.pageSize!)) : 50,
|
|
54
59
|
Number.isFinite(config.pagination?.pageIndex) && config.pagination!.pageIndex! >= 0 ? Math.floor(config.pagination!.pageIndex!) : 0
|
|
55
60
|
])
|
|
56
|
-
const previous = synchronizedInputs.get(grid)
|
|
57
61
|
for (const [key, value] of Object.entries(values)) {
|
|
58
62
|
if (!previous || (key === 'config' ? previous.configKey !== configKey : previous[key] !== value)) {
|
|
59
63
|
Reflect.set(grid, key, value)
|
|
60
64
|
}
|
|
61
65
|
}
|
|
62
|
-
|
|
66
|
+
if (external && inputs.externalState && (!previous || previous.externalState !== inputs.externalState || previous.configKey !== configKey)) {
|
|
67
|
+
grid.externalState = inputs.externalState
|
|
68
|
+
}
|
|
69
|
+
synchronizedInputs.set(grid, { ...values, configKey, columns: inputs.columns, externalState: inputs.externalState })
|
|
70
|
+
// Clear a changed scope before loading rows that may reuse the same keys.
|
|
71
|
+
if (!external) grid.data = inputs.data
|
|
63
72
|
}
|
package/src/index.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { DataGrid } from './DataGrid.js'
|
|
2
|
+
export type { GridQuery, GridQueryFilter, GridQueryReason, GridQueryChangeDetail, GridQuerySnapshot, GridExternalTotal, GridExternalState, SortDirection } from '@tipolox/litgrid-web'
|
|
2
3
|
export type { DataGridInstance, DataGridProps, DataGridRef } from './DataGrid.js'
|
|
3
4
|
export type {
|
|
4
5
|
BestFitColumnWidth,
|
|
@@ -12,6 +13,9 @@ export type {
|
|
|
12
13
|
GridFilter,
|
|
13
14
|
GridPaginationState,
|
|
14
15
|
GridSelection,
|
|
16
|
+
GridRowKey,
|
|
17
|
+
SelectedRowSnapshot,
|
|
18
|
+
SelectionChangeDetail,
|
|
15
19
|
GridTheme,
|
|
16
20
|
SelectionIntent
|
|
17
21
|
} from '@tipolox/litgrid-web'
|