@opencorestack/opengridx 1.0.7 → 1.1.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/CHANGELOG.md +18 -0
- package/dist/index.d.ts +40 -12
- package/dist/opengridx.css +1 -1
- package/dist/opengridx.es.js +2953 -2885
- package/dist/opengridx.es.js.map +1 -1
- package/dist/opengridx.umd.js +11 -11
- package/dist/opengridx.umd.js.map +1 -1
- package/docs/API_REFERENCE.md +35 -0
- package/docs/components/cell.md +14 -0
- package/docs/components/filter-panel.md +13 -0
- package/docs/components/pagination.md +26 -0
- package/docs/components/row.md +26 -0
- package/docs/roadmap.md +8 -0
- package/lib/components/Cell/Cell.tsx +44 -44
- package/lib/components/Cell/CellErrorBoundary.tsx +53 -0
- package/lib/components/DataGrid/DataGrid.css +11 -0
- package/lib/components/DataGrid/DataGrid.tsx +30 -6
- package/lib/components/DataGrid/GridListView.tsx +4 -0
- package/lib/components/DataGrid/GridPinnedRows.tsx +4 -0
- package/lib/components/DataGrid/GridVirtualRows.tsx +4 -0
- package/lib/components/Pagination/Pagination.test.tsx +64 -0
- package/lib/components/Pagination/Pagination.tsx +15 -4
- package/lib/components/Row/Row.tsx +6 -3
- package/lib/hooks/core/useGridColumns.tsx +11 -11
- package/lib/hooks/core/useGridControlledState.test.ts +86 -0
- package/lib/hooks/core/useGridKeyboardNavigation.test.ts +176 -0
- package/lib/hooks/core/useGridRowPipeline.test.ts +117 -0
- package/lib/hooks/useRowGrouping.test.ts +84 -0
- package/lib/hooks/useRowGrouping.ts +38 -13
- package/lib/hooks/useTreeData.ts +22 -2
- package/lib/index.ts +2 -0
- package/lib/types/index.ts +38 -12
- package/package.json +1 -1
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import { useState, useMemo, useEffect, useCallback } from 'react';
|
|
2
|
-
import type {
|
|
3
|
-
GridRowModel,
|
|
4
|
-
GridRowId,
|
|
5
|
-
GridRowGroupingModel,
|
|
6
|
-
GridAggregationModel,
|
|
2
|
+
import type {
|
|
3
|
+
GridRowModel,
|
|
4
|
+
GridRowId,
|
|
5
|
+
GridRowGroupingModel,
|
|
6
|
+
GridAggregationModel,
|
|
7
7
|
GridTreeNode,
|
|
8
8
|
GridFilterModel,
|
|
9
|
-
GridSortItem
|
|
9
|
+
GridSortItem,
|
|
10
|
+
GridRowMeta
|
|
10
11
|
} from '../types';
|
|
11
12
|
import { isRowMatchingFilter } from '../utils/filtering';
|
|
12
13
|
import { compareValues } from '../utils/sorting';
|
|
@@ -27,12 +28,18 @@ const defaultGetAggregationPosition = (groupNode: GridTreeNode | null): 'inline'
|
|
|
27
28
|
return groupNode?.depth === -1 ? 'footer' : 'inline';
|
|
28
29
|
};
|
|
29
30
|
|
|
31
|
+
// Stable empty defaults — module-level constants prevent new object identity
|
|
32
|
+
// on every render, which would otherwise invalidate useMemo deps and cause
|
|
33
|
+
// infinite re-render loops when callers omit optional params.
|
|
34
|
+
const EMPTY_ROW_GROUPING_MODEL: GridRowGroupingModel = [];
|
|
35
|
+
const EMPTY_AGGREGATION_MODEL: GridAggregationModel = {};
|
|
36
|
+
|
|
30
37
|
export function useRowGrouping<R extends GridRowModel>(params: UseRowGroupingParams<R>) {
|
|
31
|
-
const {
|
|
32
|
-
rows,
|
|
33
|
-
getRowId,
|
|
34
|
-
rowGroupingModel =
|
|
35
|
-
aggregationModel =
|
|
38
|
+
const {
|
|
39
|
+
rows,
|
|
40
|
+
getRowId,
|
|
41
|
+
rowGroupingModel = EMPTY_ROW_GROUPING_MODEL,
|
|
42
|
+
aggregationModel = EMPTY_AGGREGATION_MODEL,
|
|
36
43
|
defaultGroupingExpansionDepth = 0,
|
|
37
44
|
filterModel,
|
|
38
45
|
sortModel,
|
|
@@ -291,12 +298,30 @@ export function useRowGrouping<R extends GridRowModel>(params: UseRowGroupingPar
|
|
|
291
298
|
|
|
292
299
|
const getNode = useCallback((id: GridRowId) => treeNodes.get(id), [treeNodes]);
|
|
293
300
|
|
|
301
|
+
const rowMetaMap = useMemo<Map<GridRowId, GridRowMeta>>(() => {
|
|
302
|
+
const map = new Map<GridRowId, GridRowMeta>();
|
|
303
|
+
treeNodes.forEach((node, id) => {
|
|
304
|
+
const isGroup = Boolean(node.children && node.children.length > 0);
|
|
305
|
+
map.set(id, {
|
|
306
|
+
hasChildren: isGroup,
|
|
307
|
+
treeDepth: node.depth,
|
|
308
|
+
groupingField: node.groupingField,
|
|
309
|
+
groupingValue: node.groupingValue,
|
|
310
|
+
descendantCount: node.descendantCount,
|
|
311
|
+
isGroupRow: isGroup,
|
|
312
|
+
isExpanded: isGroup ? expandedGroupIds.has(id) : undefined,
|
|
313
|
+
});
|
|
314
|
+
});
|
|
315
|
+
return map;
|
|
316
|
+
}, [treeNodes, expandedGroupIds]);
|
|
317
|
+
|
|
294
318
|
return useMemo(() => ({
|
|
295
319
|
treeNodes,
|
|
296
320
|
groupingRows,
|
|
297
321
|
toggleExpansion,
|
|
298
322
|
isGroupExpanded,
|
|
299
323
|
getVisibleRows,
|
|
300
|
-
getNode
|
|
301
|
-
|
|
324
|
+
getNode,
|
|
325
|
+
rowMetaMap,
|
|
326
|
+
}), [treeNodes, groupingRows, toggleExpansion, isGroupExpanded, getVisibleRows, getNode, rowMetaMap]);
|
|
302
327
|
}
|
package/lib/hooks/useTreeData.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { useMemo, useState, useCallback, useEffect } from 'react';
|
|
2
2
|
import { GridRowModel, GridRowId, GridTreeNode, GridFilterModel, GridSortItem } from '../types';
|
|
3
|
+
import type { GridRowMeta } from '../types';
|
|
3
4
|
import { isRowMatchingFilter } from '../utils/filtering';
|
|
4
5
|
import { compareValues } from '../utils/sorting';
|
|
5
6
|
|
|
@@ -311,6 +312,24 @@ export function useTreeData<R extends GridRowModel>(props: UseTreeDataProps<R>)
|
|
|
311
312
|
return path;
|
|
312
313
|
}, [treeNodes]);
|
|
313
314
|
|
|
315
|
+
const rowMetaMap = useMemo<Map<GridRowId, GridRowMeta>>(() => {
|
|
316
|
+
const map = new Map<GridRowId, GridRowMeta>();
|
|
317
|
+
const groupRowIds = new Set(groupingRows.map(r => r.id));
|
|
318
|
+
treeNodes.forEach((node, id) => {
|
|
319
|
+
map.set(id, {
|
|
320
|
+
hasChildren: Boolean(
|
|
321
|
+
(node.children && node.children.length > 0) ||
|
|
322
|
+
(node.serverChildrenCount && node.serverChildrenCount > 0)
|
|
323
|
+
),
|
|
324
|
+
treeDepth: node.depth,
|
|
325
|
+
descendantCount: node.children ? node.children.length : undefined,
|
|
326
|
+
isGroupRow: groupRowIds.has(id),
|
|
327
|
+
isExpanded: expandedGroupIds.has(id),
|
|
328
|
+
});
|
|
329
|
+
});
|
|
330
|
+
return map;
|
|
331
|
+
}, [treeNodes, groupingRows, expandedGroupIds]);
|
|
332
|
+
|
|
314
333
|
return useMemo(() => ({
|
|
315
334
|
treeNodes,
|
|
316
335
|
groupingRows,
|
|
@@ -318,6 +337,7 @@ export function useTreeData<R extends GridRowModel>(props: UseTreeDataProps<R>)
|
|
|
318
337
|
isGroupExpanded,
|
|
319
338
|
getVisibleRows,
|
|
320
339
|
getNode,
|
|
321
|
-
getNodePath
|
|
322
|
-
|
|
340
|
+
getNodePath,
|
|
341
|
+
rowMetaMap,
|
|
342
|
+
}), [treeNodes, groupingRows, toggleExpansion, isGroupExpanded, getVisibleRows, getNode, getNodePath, rowMetaMap]);
|
|
323
343
|
}
|
package/lib/index.ts
CHANGED
package/lib/types/index.ts
CHANGED
|
@@ -7,26 +7,33 @@ export type GridRowId = string | number;
|
|
|
7
7
|
export interface GridRowModel {
|
|
8
8
|
/** Uniquely identifies the row. */
|
|
9
9
|
id: GridRowId;
|
|
10
|
-
/** Internal: row has child nodes (tree data / row grouping). */
|
|
11
|
-
_hasChildren?: boolean;
|
|
12
10
|
/** Internal: row is a skeleton placeholder during infinite-scroll loading. */
|
|
13
11
|
_isSkeleton?: boolean;
|
|
14
|
-
/** Internal: depth in the tree or grouping hierarchy. */
|
|
15
|
-
_treeDepth?: number;
|
|
16
|
-
/** Internal: whether the group/tree node is currently expanded. */
|
|
17
|
-
_isExpanded?: boolean;
|
|
18
|
-
/** Internal: field used for grouping at this level. */
|
|
19
|
-
_groupingField?: string;
|
|
20
|
-
/** Internal: grouping field value at this level. */
|
|
21
|
-
_groupingValue?: unknown;
|
|
22
|
-
/** Internal: total descendant count for tree/grouping nodes. */
|
|
23
|
-
_descendantCount?: number;
|
|
24
12
|
/** Internal: server-reported child count for lazy-loaded tree nodes. */
|
|
25
13
|
serverChildrenCount?: number;
|
|
26
14
|
/** Any other dynamic row properties. */
|
|
27
15
|
[key: string]: unknown;
|
|
28
16
|
}
|
|
29
17
|
|
|
18
|
+
/**
|
|
19
|
+
* Internal hierarchy metadata for a row. Exposed via `params.rowMeta` in `renderCell`.
|
|
20
|
+
* Not present (`undefined`) for flat rows with no active tree-data or row-grouping.
|
|
21
|
+
*
|
|
22
|
+
* @since v1.1 — replaces the `_hasChildren` / `_treeDepth` / `_groupingField` etc.
|
|
23
|
+
* properties that were previously (and incorrectly) typed on `GridRowModel`.
|
|
24
|
+
* Those underscore fields remain on the row object at runtime in v1.1 for
|
|
25
|
+
* backward compatibility; they will be removed from the runtime in v2.0.
|
|
26
|
+
*/
|
|
27
|
+
export interface GridRowMeta {
|
|
28
|
+
hasChildren?: boolean;
|
|
29
|
+
treeDepth?: number;
|
|
30
|
+
groupingField?: string;
|
|
31
|
+
groupingValue?: unknown;
|
|
32
|
+
descendantCount?: number;
|
|
33
|
+
isExpanded?: boolean;
|
|
34
|
+
isGroupRow?: boolean;
|
|
35
|
+
}
|
|
36
|
+
|
|
30
37
|
export type GridAlignment = 'left' | 'center' | 'right';
|
|
31
38
|
|
|
32
39
|
/** Represents a row node in the grid's hierarchical tree structure. */
|
|
@@ -231,6 +238,11 @@ export interface GridRenderCellParams<R extends GridRowModel = GridRowModel> {
|
|
|
231
238
|
rowIndex: number;
|
|
232
239
|
/** The index of the column. */
|
|
233
240
|
colIndex: number;
|
|
241
|
+
/**
|
|
242
|
+
* Hierarchy metadata for this row. `undefined` for flat rows (no tree-data or row-grouping active).
|
|
243
|
+
* @since v1.1
|
|
244
|
+
*/
|
|
245
|
+
rowMeta?: GridRowMeta;
|
|
234
246
|
}
|
|
235
247
|
|
|
236
248
|
export interface GridRenderHeaderParams {
|
|
@@ -463,6 +475,18 @@ export interface GridRowScrollEndParams {
|
|
|
463
475
|
viewportHeight: number;
|
|
464
476
|
}
|
|
465
477
|
|
|
478
|
+
/** Overrideable user-visible strings for internationalisation. All fields are optional; defaults match the built-in English strings. */
|
|
479
|
+
export interface GridLocaleText {
|
|
480
|
+
/** Label before the rows-per-page select. Default: `"Rows per page:"` */
|
|
481
|
+
paginationRowsPerPage?: string;
|
|
482
|
+
/** Range label. Receives (from, to, count). Default: `` (f, t, c) => `${f}–${t} of ${c}` `` */
|
|
483
|
+
paginationOf?: (from: number, to: number, count: number) => string;
|
|
484
|
+
/** Page counter label. Receives (page, pageCount). Default: `` (p, pc) => `Page ${p} of ${pc}` `` */
|
|
485
|
+
paginationPage?: (page: number, pageCount: number) => string;
|
|
486
|
+
/** Empty-state label. When set, overrides the `noRowsLabel` prop on DataGrid. Default: `"No Data"` */
|
|
487
|
+
noRowsLabel?: string;
|
|
488
|
+
}
|
|
489
|
+
|
|
466
490
|
/**
|
|
467
491
|
* Main properties for the DataGrid component.
|
|
468
492
|
*/
|
|
@@ -555,6 +579,8 @@ export interface DataGridProps<R extends GridRowModel = GridRowModel> {
|
|
|
555
579
|
ariaLabel?: string;
|
|
556
580
|
/** Message displayed when there are no rows to show. */
|
|
557
581
|
noRowsLabel?: string;
|
|
582
|
+
/** Overrides for user-visible strings (i18n). All fields are optional. */
|
|
583
|
+
localeText?: GridLocaleText;
|
|
558
584
|
|
|
559
585
|
/** Advanced: The starting internal state of the grid. */
|
|
560
586
|
initialState?: import('../state/types').GridInitialState;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@opencorestack/opengridx",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "OpenGridX: High-performance React data infrastructure. Unlock advanced Row Grouping, Excel Export, and Column Pinning without the usual \"Pro\" gatekeeping. Built for speed, scale, and complete architectural freedom. Fully open, virtualization-ready, and feature-complete.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/opengridx.umd.js",
|