@opencorestack/opengridx 2.0.2 → 2.0.3

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 CHANGED
@@ -5,6 +5,19 @@
5
5
 
6
6
  ---
7
7
 
8
+ ## [2.0.3] — 2026-09-10
9
+
10
+ ### Documentation
11
+
12
+ Comprehensive accuracy audit — 32 issues corrected across 19 files:
13
+
14
+ - **Wrong defaults corrected**: `pageSizeOptions` (`[10,25,50]` → `[10,25,50,100]`), `pinCheckboxColumn`/`pinExpandColumn` (`false` → `true`), `noRowsLabel` (`'No rows'` → `'No Data'`) — in `API_REFERENCE.md`, `components/datagrid.md`, `features/sorting-pagination.md`, `features/selection.md`, `components/empty-state.md`
15
+ - **Missing API surface added**: `getAllFilteredRows()` and `getGroupedExportRows()` added to `GridApi` table; `groupLabel` field added to `GridRowMeta`; `groupedRows` option added to `PdfExportOptions`; `'unique'` added to aggregation function type in `components/aggregation-footer.md`
16
+ - **Non-existent API removed or corrected**: `'both'` is not a valid `getAggregationPosition` return (valid: `'inline' | 'footer' | null`); `disableColumnResize` DataGrid prop, `columnResizeHandle`/`columnVisibilityPanel`/`columnGroupHeader`/`tooltip` slots, `onColumnWidthChange` callback, `disableReorder` on `GridColDef`, `showQuickFilter` in `GridToolbarProps`, `toolbar`/`toolbarProps` DataGrid props — all documented as real but never existed; corrected throughout
17
+ - **Stale content updated**: `use-grid-scroll-sync.md` and `use-grid-virtualization.md` params/returns updated from old `scrollPosRef`/`scrollTick` pattern to current `scrollTop`/`scrollLeft`; `grid-row-meta.md` updated from "will be removed in v2" to "was removed in v2"; `roadmap.md` column virtualization claim corrected; `virtualization.md` "Aui DataGrid" placeholder fixed and `density` prop section added; `upgrade-guide` version and slots API corrected
18
+
19
+ ---
20
+
8
21
  ## [2.0.2] — 2026-09-10
9
22
 
10
23
  ### Fixed
@@ -24,7 +24,7 @@ The main component for displaying and interacting with data.
24
24
  | `paginationMode` | `'client' \| 'server' \| 'infinite'` | `'client'` | How to handle paging. |
25
25
  | `paginationModel` | `GridPaginationModel` | — | Controlled pagination state (`{ page, pageSize }`). |
26
26
  | `onPaginationModelChange` | `(model: GridPaginationModel) => void` | — | Fired when page or page size changes. |
27
- | `pageSizeOptions` | `number[]` | `[10, 25, 50]` | Available page size options. |
27
+ | `pageSizeOptions` | `number[]` | `[10, 25, 50, 100]` | Available page size options. |
28
28
  | `rowCount` | `number` | — | Total rows (required for server-side paging). |
29
29
  | `height` | `number \| string` | `undefined` | Total height of the grid container. |
30
30
  | `density` | `'compact' \| 'standard' \| 'comfortable'` | `'standard'` | Visual row density. |
@@ -82,8 +82,8 @@ The main component for displaying and interacting with data.
82
82
  | `pinnedColumns` | `GridColumnPinning` | — | Columns pinned to the left or right viewport edges. See [Column & Row Pinning](#-column--row-pinning). |
83
83
  | `onPinnedColumnsChange` | `(model: GridColumnPinning) => void` | — | Fired when column pinning changes. |
84
84
  | `pinnedRows` | `GridRowPinning` | — | Row IDs pinned to the top or bottom of the viewport. |
85
- | `pinCheckboxColumn` | `boolean` | `false` | Keeps the checkbox column visible during horizontal scrolling. |
86
- | `pinExpandColumn` | `boolean` | `false` | Keeps the Master-Detail expansion column visible during horizontal scrolling. |
85
+ | `pinCheckboxColumn` | `boolean` | `true` | Keeps the checkbox column visible during horizontal scrolling. |
86
+ | `pinExpandColumn` | `boolean` | `true` | Keeps the Master-Detail expansion column visible during horizontal scrolling. |
87
87
 
88
88
  #### Inline Editing
89
89
 
@@ -138,7 +138,7 @@ The main component for displaying and interacting with data.
138
138
  | Prop | Type | Default | Description |
139
139
  | :--- | :--- | :--- | :--- |
140
140
  | `ariaLabel` | `string` | — | ARIA label for the grid container element. |
141
- | `noRowsLabel` | `string` | `'No rows'` | Message shown in the empty-state overlay when there are no rows. |
141
+ | `noRowsLabel` | `string` | `'No Data'` | Message shown in the empty-state overlay when there are no rows. |
142
142
  | `className` | `string` | — | Additional CSS class applied to the outermost grid wrapper element. |
143
143
  | `style` | `React.CSSProperties` | — | Inline styles applied to the grid wrapper element. |
144
144
 
@@ -246,6 +246,8 @@ Access these methods via the `apiRef` prop.
246
246
  | `getAllColumns()` | `GridColDef[]` | Get all defined columns. |
247
247
  | `getAggregationResult()` | `Record<string, unknown> \| null` | Get current aggregation results. |
248
248
  | `getAggregationModel()` | `GridAggregationModel \| null` | Get the active aggregation configuration. |
249
+ | `getAllFilteredRows()` | `GridRowModel[]` | Get all filtered+sorted rows regardless of the current pagination window. Use for full-dataset exports. |
250
+ | `getGroupedExportRows()` | `GridGroupedExportRow[] \| null` | Get a flat ordered list reflecting the active row-grouping tree (group-header, leaf, subtotal, grand-total). Returns `null` when row grouping is not active. |
249
251
  | `copySelectedRows()` | `Promise<void>` | Copy selected rows to clipboard as TSV. |
250
252
 
251
253
  ---
@@ -593,6 +595,7 @@ interface GridRowMeta {
593
595
  treeDepth?: number;
594
596
  groupingField?: string;
595
597
  groupingValue?: unknown;
598
+ groupLabel?: string;
596
599
  descendantCount?: number;
597
600
  isExpanded?: boolean;
598
601
  isGroupRow?: boolean;
@@ -1245,6 +1248,7 @@ interface PdfExportOptions {
1245
1248
  aggregationResult?: Record<string, unknown> | null;
1246
1249
  aggregationModel?: GridAggregationModel | null;
1247
1250
  filterModel?: GridFilterModel | null;
1251
+ groupedRows?: GridGroupedExportRow[];
1248
1252
  alternateRowColor?: boolean;
1249
1253
  headerBackgroundColor?: string;
1250
1254
  headerTextColor?: string;
@@ -1262,6 +1266,7 @@ interface PdfExportOptions {
1262
1266
  | `aggregationResult` | `Record<string, unknown>` | — | From `apiRef.current.getAggregationResult()` |
1263
1267
  | `aggregationModel` | `GridAggregationModel` | — | From `apiRef.current.getAggregationModel()` |
1264
1268
  | `filterModel` | `GridFilterModel` | — | From `apiRef.current.getFilterModel()` |
1269
+ | `groupedRows` | `GridGroupedExportRow[]` | — | Pre-built grouped export rows from `apiRef.current.getGroupedExportRows()`. When provided, the PDF table reflects the grouping structure (group-header, indented leaves, subtotals, grand total). |
1265
1270
  | `alternateRowColor` | `boolean` | `true` | Alternating row background shading |
1266
1271
  | `headerBackgroundColor` | `string` | `'#4f46e5'` | Column header cell background (hex) |
1267
1272
  | `headerTextColor` | `string` | `'#ffffff'` | Column header cell text color (hex) |
@@ -7,7 +7,7 @@ Internal component that renders the sticky aggregation totals row pinned to the
7
7
  | Prop | Type | Description |
8
8
  | :--- | :--- | :--- |
9
9
  | `columns` | `GridColDef[]` | Ordered list of visible column definitions used to lay out cells. |
10
- | `aggregationModel` | `GridAggregationModel` | Maps field names to function names (`'sum' \| 'avg' \| 'count' \| 'min' \| 'max'`). |
10
+ | `aggregationModel` | `GridAggregationModel` | Maps field names to function names (`'sum' \| 'avg' \| 'count' \| 'min' \| 'max' \| 'unique'`). |
11
11
  | `aggregationResult` | `GridAggregationResult` | Computed values keyed by field name, produced by `useAggregation`. |
12
12
  | `columnWidths` | `Record<string, number>` | Runtime pixel widths for each field, kept in sync with user resize actions. |
13
13
  | `rowHeight` | `number` | Sets `min-height` on the footer row, matching the grid's configured row height. |
@@ -40,16 +40,9 @@ While the grid uses this component internally, you can customize its appearance
40
40
 
41
41
  ---
42
42
 
43
- ## 🎨 Slot Implementation
44
- Replace the system's group header with a custom one for specialized styling or interactions.
43
+ ## 🎨 Customization
45
44
 
46
- ```tsx
47
- <DataGrid
48
- slots={{
49
- columnGroupHeader: MyCustomGroupHeader
50
- }}
51
- />
52
- ```
45
+ Column group headers are rendered internally; they cannot be replaced via the slots API. Style them through CSS targeting `.ogx__column-group-header`, or use the `columnGroupingModel` to control grouping structure.
53
46
 
54
47
  ## 📝 Best Practices
55
48
  - **Logical Labels**: Use clear, concise labels for groups like `2024 Performance` or `Contact Info`.
@@ -22,15 +22,14 @@ const columns: GridColDef[] = [
22
22
  ];
23
23
  ```
24
24
 
25
- ### Grid-Wide Control
26
- Disable resizing globally via the `DataGrid` props.
25
+ ### Disabling Resize Per Column
26
+ There is no single grid-wide prop to disable all column resizing. Set `resizable: false` on each column definition individually:
27
27
 
28
28
  ```tsx
29
- <DataGrid
30
- rows={rows}
31
- columns={columns}
32
- disableColumnResize
33
- />
29
+ const columns: GridColDef[] = [
30
+ { field: 'id', headerName: 'ID', resizable: false },
31
+ { field: 'status', headerName: 'Status', resizable: false },
32
+ ];
34
33
  ```
35
34
 
36
35
  ---
@@ -46,18 +45,18 @@ Disable resizing globally via the `DataGrid` props.
46
45
 
47
46
  ---
48
47
 
49
- ## 🎨 Slot Implementation
50
- In the DataGrid, you can replace the default handle component for custom styling (e.g., a thicker line or different colors).
48
+ ## 🎨 Styling the Resize Handle
51
49
 
52
- ```tsx
53
- <DataGrid
54
- slots={{
55
- columnResizeHandle: MyCustomHandle
56
- }}
57
- />
50
+ The resize handle is not replaceable via the slots API. Style it through CSS:
51
+
52
+ ```css
53
+ .ogx__resize-handle {
54
+ width: 4px;
55
+ background: #6366f1;
56
+ }
58
57
  ```
59
58
 
60
59
  ## 📝 Best Practices
61
60
  - **Define Min Widths**: Always set a reasonable `minWidth` so columns don't accidentally become 0px wide.
62
- - **Persistence**: Listen to `onColumnWidthChange` to save the user's preferred layout for their next visit.
61
+ - **Persistence**: Use `onStateChange` to capture the current `columnWidths` from the state snapshot and save the user's preferred layout for their next visit.
63
62
  - **Content Fit**: Remember that large data values might hide behind narrow columns; use tooltips for overflow coverage.
@@ -45,14 +45,14 @@ You can also render it persistently beside the grid or within a custom modal.
45
45
 
46
46
  ---
47
47
 
48
- ## 🎨 Slot Implementation
49
- In advanced scenarios, you can replace the default panel with your own implementation using the `columnVisibilityPanel` slot.
48
+ ## 🎨 Controlling Visibility Programmatically
49
+
50
+ The column visibility panel is an internal component; it cannot be replaced via the slots API. Use the controlled props to drive visibility from outside:
50
51
 
51
52
  ```tsx
52
53
  <DataGrid
53
- slots={{
54
- columnVisibilityPanel: MyCustomVisibilityPanel
55
- }}
54
+ columnVisibilityModel={model}
55
+ onColumnVisibilityModelChange={setModel}
56
56
  />
57
57
  ```
58
58
 
@@ -33,7 +33,7 @@ function MyGrid() {
33
33
  | `disableMultipleRowSelection` | `boolean` | `false` | When `true`, at most one row can be selected at a time. |
34
34
  | `pagination` | `boolean` | `false` | Enable/Disable bottom pagination bar. |
35
35
  | `paginationModel` | `GridPaginationModel` | — | Controlled pagination state (`{ page, pageSize }`). Omit for uncontrolled; use `initialState` to set the initial page/pageSize. |
36
- | `pageSizeOptions` | `number[]` | `[10, 25, 50]` | Available page size options. |
36
+ | `pageSizeOptions` | `number[]` | `[10, 25, 50, 100]` | Available page size options. |
37
37
  | `initialState` | `GridInitialState` | `undefined` | Initial configuration (sorting, columns, pagination, etc). |
38
38
 
39
39
  ## 🔃 Sorting
@@ -43,7 +43,7 @@ To only change the message text without replacing the whole component, use `noRo
43
43
  />
44
44
  ```
45
45
 
46
- Default value: `"No rows"`
46
+ Default value: `"No Data"`
47
47
 
48
48
  ## 🔗 Related
49
49
  - [DataGrid](datagrid.md)
@@ -52,15 +52,12 @@ You can choose from four different placements: `top`, `bottom`, `left`, or `righ
52
52
 
53
53
  ---
54
54
 
55
- ## 🎨 Slot Implementation
56
- In the DataGrid, specialized components like the Toolbar often use tooltips within their built-in actions. These can be customized or replaced using the slots API.
55
+ ## 🎨 Customization
56
+
57
+ The internal tooltip component is not replaceable via the slots API. For column-header tooltips, set the `description` field on `GridColDef` — it renders as the native `title` attribute on the header cell (v2.0.0+):
57
58
 
58
59
  ```tsx
59
- <DataGrid
60
- slots={{
61
- tooltip: GridTooltip
62
- }}
63
- />
60
+ { field: 'revenue', headerName: 'Revenue', description: 'Total billed revenue for the period' }
64
61
  ```
65
62
 
66
63
  ## 📝 Accessibility
@@ -25,12 +25,12 @@ Aggregation allows you to calculate summary values (Sum, Avg, etc.) for groups o
25
25
  You can control where the aggregation results appear:
26
26
  - **`footer`**: A sticky row at the bottom of the grid.
27
27
  - **`inline`**: Values displayed within group headers (when Row Grouping is active).
28
- - **`both`**: Display in both locations.
28
+ - **`null`**: Skip aggregation for this group.
29
29
 
30
30
  ```tsx
31
31
  <DataGrid
32
32
  aggregationModel={model}
33
- getAggregationPosition={(groupNode) => 'both'}
33
+ getAggregationPosition={(groupNode) => groupNode ? 'inline' : 'footer'}
34
34
  />
35
35
  ```
36
36
 
@@ -53,7 +53,7 @@ const columns: GridColDef<Row>[] = [
53
53
  // Disable conflicting features
54
54
  sortable: false, // ✅ Disable sorting
55
55
  hideable: false, // ✅ Disable column hiding
56
- disableReorder: true, // ✅ Disable column reordering
56
+ // Column reorder is disabled grid-wide via disableColumnReorder on <DataGrid>
57
57
  // Note: Avoid pinning this column
58
58
  renderCell: (params) => {
59
59
  if (params.row.isTotal) {
@@ -44,14 +44,14 @@ Unlike infinite scroll which appends data to the end, Lazy Loading fetches speci
44
44
  Quickly filter the entire dataset across all visible columns. This is managed via the `GridToolbar`.
45
45
 
46
46
  ### Basic Setup
47
+
48
+ Add the toolbar and wire a filter model — the toolbar's search bar activates automatically when `onFilterModelChange` is wired:
49
+
47
50
  ```tsx
48
51
  <DataGrid
49
52
  slots={{ toolbar: GridToolbar }}
50
- slotProps={{
51
- toolbar: {
52
- showQuickFilter: true
53
- }
54
- }}
53
+ filterModel={filterModel}
54
+ onFilterModelChange={setFilterModel}
55
55
  />
56
56
  ```
57
57
 
@@ -70,7 +70,7 @@ Use `disableMultipleRowSelection` to cap selection to one row at a time. Clickin
70
70
  | `disableMultipleRowSelection` | `boolean` | `false` | Restricts selection to a single row. |
71
71
  | `rowSelectionModel` | `GridRowId[]` | `[]` | Controlled array of selected IDs. |
72
72
  | `onRowSelectionModelChange` | `(model: GridRowSelectionModel) => void` | — | Fired when the selection changes. |
73
- | `pinCheckboxColumn` | `boolean` | `false` | Keep the checkbox column visible during horizontal scroll. |
73
+ | `pinCheckboxColumn` | `boolean` | `true` | Keep the checkbox column visible during horizontal scroll. |
74
74
 
75
75
  ---
76
76
 
@@ -90,7 +90,7 @@ When using `paginationMode="server"`, you must provide the `rowCount` and handle
90
90
  | `paginationMode` | `'client' \| 'server' \| 'infinite'` | `'client'` | Location of the pagination logic. |
91
91
  | `paginationModel` | `GridPaginationModel` | — | Controlled pagination state (`{ page, pageSize }`). |
92
92
  | `onPaginationModelChange` | `(model: GridPaginationModel) => void` | — | Fired when page or page size changes. |
93
- | `pageSizeOptions` | `number[]` | `[10, 25, 50]` | Options for the rows-per-page selector. |
93
+ | `pageSizeOptions` | `number[]` | `[10, 25, 50, 100]` | Options for the rows-per-page selector. |
94
94
 
95
95
  ---
96
96
 
@@ -54,6 +54,18 @@ The grid supports both fixed and variable row heights:
54
54
  />
55
55
  ```
56
56
 
57
+ The `density` prop overrides `rowHeight` with preset values:
58
+
59
+ ```tsx
60
+ <DataGrid
61
+ rows={rows}
62
+ columns={columns}
63
+ density="compact" // 32px rows
64
+ // density="standard" // uses rowHeight (default 52px)
65
+ // density="comfortable" // 72px rows
66
+ />
67
+ ```
68
+
57
69
  ### Auto Height
58
70
 
59
71
  Disable virtualization for small datasets:
@@ -172,7 +184,7 @@ You should see console logs only for visible rows + overscan buffer.
172
184
 
173
185
  ## Comparison with MUI X DataGrid
174
186
 
175
- | Feature | Aui DataGrid | MUI X DataGrid |
187
+ | Feature | OpenGridX | MUI X DataGrid |
176
188
  |---------|--------------|----------------|
177
189
  | Row virtualization | ✅ Yes | ✅ Yes |
178
190
  | Column virtualization | ❌ Planned | ✅ Yes (Pro) |
package/docs/roadmap.md CHANGED
@@ -5,7 +5,7 @@ This document tracks the current status of features in `OpenGridX` and outlines
5
5
  ## ✅ Implemented Features
6
6
 
7
7
  ### Core
8
- * **Virtualization**: High-performance row and column virtualization for handling large datasets.
8
+ * **Virtualization**: High-performance row virtualization for handling large datasets. Column virtualization is planned (currently all columns are rendered).
9
9
  * **Sorting**: Client-side and server-side multi-column sorting.
10
10
  * **Filtering**: Client-side filtering with support for various operators.
11
11
  * **Pagination**: Client-side and server-side pagination with customizable page sizes.
package/llms.txt CHANGED
@@ -1,6 +1,6 @@
1
1
  # OpenGridX — AI Agent Context
2
2
  # Package: @opencorestack/opengridx
3
- # Version: 2.0.2
3
+ # Version: 2.0.3
4
4
  # Docs: https://opencorestack.github.io/OpenGridX/
5
5
  # This file is machine-readable. AI developers: start here.
6
6
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opencorestack/opengridx",
3
- "version": "2.0.2",
3
+ "version": "2.0.3",
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",