@jielga/tmdatagrid 2.0.0 → 2.0.1
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/docs/columns.md +2 -1
- package/package.json +1 -1
- package/skills/appearance/SKILL.md +1 -1
- package/skills/cell-selection/SKILL.md +5 -3
- package/skills/columns/SKILL.md +40 -41
- package/skills/columns/references/columns-api.md +59 -0
- package/skills/data/SKILL.md +27 -3
- package/skills/editing/SKILL.md +10 -3
- package/skills/editing/references/editing-api.md +5 -3
- package/skills/editing/references/editors-and-validation.md +56 -1
- package/skills/filtering/SKILL.md +11 -5
- package/skills/getting-started/SKILL.md +103 -5
- package/skills/grouping/SKILL.md +1 -1
- package/skills/migrating-to-2/SKILL.md +244 -0
- package/skills/options/SKILL.md +18 -6
- package/skills/rows/SKILL.md +1 -1
- package/skills/rows/references/rows-api.md +10 -6
- package/skills/server-side/SKILL.md +1 -1
- package/skills/testing/SKILL.md +1 -1
- package/skills/testing-components/SKILL.md +1 -1
- package/skills/testing-editing/SKILL.md +1 -1
package/docs/columns.md
CHANGED
|
@@ -263,6 +263,7 @@ column can be placed in front of it.
|
|
|
263
263
|
| `meta.edit` | Column meta | `TMDataGridColumnEditOptions` | – | How the column edits: `enabled`, `field`, `editor`, `validate`, `mapValue`. |
|
|
264
264
|
| `resolveColumnOptions` | Export | `({ table, column, row? }) => options` | – | Normalises all three `meta.options` forms. |
|
|
265
265
|
| `optionsToComboboxData` | Export | `(options) => ComboboxData` | – | Options as Mantine `Select` data. |
|
|
266
|
-
| `getColumnLabel` · `getColumnType`
|
|
266
|
+
| `getColumnLabel` · `getColumnType` | Exports | `(column) => …` | – | How the built-in controls read a column. |
|
|
267
|
+
| `isControlColumn` | Export | `(columnId) => boolean` | – | Whether a column id is one of the generated control lanes: checkbox, details, edit or row number. |
|
|
267
268
|
| `isGeneratedColumn` | Export | `(columnId) => boolean` | – | Whether the grid generated the column - the four control lanes plus the tree column. |
|
|
268
269
|
| `SELECT_COLUMN_ID` · `GROUP_COLUMN_ID` · `DETAILS_COLUMN_ID` · `EDIT_COLUMN_ID` · `ROW_NUMBER_COLUMN_ID` | Exports | `string` | – | Ids of the five generated lanes. |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jielga/tmdatagrid",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.1",
|
|
4
4
|
"description": "A React data grid built on TanStack Table v9 and Mantine - always virtualized, with resizable, reorderable, sortable, filterable, hideable and pinnable columns.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -18,7 +18,7 @@ description: >
|
|
|
18
18
|
metadata:
|
|
19
19
|
type: core
|
|
20
20
|
library: '@jielga/tmdatagrid'
|
|
21
|
-
library_version: '2.0.
|
|
21
|
+
library_version: '2.0.1'
|
|
22
22
|
sources:
|
|
23
23
|
- 'Jielga/TMDataGrid:packages/tmdatagrid/docs/styling.md'
|
|
24
24
|
- 'Jielga/TMDataGrid:packages/tmdatagrid/docs/toolbar.md'
|
|
@@ -14,7 +14,7 @@ description: >
|
|
|
14
14
|
metadata:
|
|
15
15
|
type: core
|
|
16
16
|
library: '@jielga/tmdatagrid'
|
|
17
|
-
library_version: '2.0.
|
|
17
|
+
library_version: '2.0.1'
|
|
18
18
|
sources:
|
|
19
19
|
- 'Jielga/TMDataGrid:packages/tmdatagrid/docs/cell-selection.md'
|
|
20
20
|
- 'Jielga/TMDataGrid:packages/tmdatagrid/src/core/cellNavigation.ts'
|
|
@@ -213,16 +213,18 @@ Source: `packages/tmdatagrid/docs/cell-selection.md` (Copy and export).
|
|
|
213
213
|
|
|
214
214
|
| Name | Kind | Type | Default | What it does |
|
|
215
215
|
| --- | --- | --- | --- | --- |
|
|
216
|
-
| `cellSelection` | Option | `"none" \| "single" \| "range"` | `"none"`, or `"single"` under `editing` | Turns the cursor, and the rectangle, on. |
|
|
216
|
+
| `cellSelection` | Option | `TMDataGridCellSelectionMode`: `"none" \| "single" \| "range"` | `"none"`, or `"single"` under `editing` | Turns the cursor, and the rectangle, on. |
|
|
217
217
|
| `onFocusedCellChange` | Callback | `(cell \| null) => void` | – | Follows the cursor. |
|
|
218
218
|
| `exportOptions` | Option | `TMDataGridExportOptions` | `DEFAULT_EXPORT_OPTIONS` | Format, file name and header row of the Export cells item. |
|
|
219
219
|
| `ui.state.focusedCell` | UI state | `{ rowId, columnId } \| null` | `null` | The cursor. |
|
|
220
220
|
| `ui.state.cellRange` | UI state | `{ anchor, focus } \| null` | `null` | The rectangle's two corners. |
|
|
221
221
|
| `ui.actions.setFocusedCell` · `setCellRange` | UI actions | – | – | Move either from your own code. |
|
|
222
222
|
| `buildExportData` | Export | `({ table, rows, bounds }) => TMDataGridExportData` | – | The rectangle's values, with `bounds`; the whole grid without. |
|
|
223
|
-
| `toClipboardText` · `writeClipboardText` | Exports |
|
|
223
|
+
| `toClipboardText` · `writeClipboardText` | Exports | `(data, options?) => string` · `(text) => Promise<boolean>` | – | The pieces behind Ctrl+C: the tab-separated text, and the write that reports whether it landed. |
|
|
224
|
+
| `TMDataGridClipboardTextOptions` | Type | `{ decimalComma?, escapeFormulas? }` | `true` · `true` | The options of `toClipboardText`. |
|
|
224
225
|
| `formatExportValue` | Export | `(value, options) => string` | – | One value, formatted as the text formats would. |
|
|
225
226
|
| `resolveRangeBounds` | Export | `({ range, rowIndexOf, columnIndexOf }) => TMDataGridRangeBounds \| null` | – | The range as row and column indices - the `bounds` for `buildExportData`, over `getDisplayedRows`. |
|
|
227
|
+
| `ResolveRangeBoundsArgs` · `TMDataGridRangeBounds` | Types | – · `{ top, bottom, left, right }` | – | What `resolveRangeBounds` takes, and what it returns. |
|
|
226
228
|
| `data-focused` | Data attribute | – | – | On the focused cell. |
|
|
227
229
|
| `data-edge-top` · `-bottom` · `-left` · `-right` | Data attributes | – | – | On cells at the rectangle's border. |
|
|
228
230
|
|
package/skills/columns/SKILL.md
CHANGED
|
@@ -16,7 +16,7 @@ description: >
|
|
|
16
16
|
metadata:
|
|
17
17
|
type: core
|
|
18
18
|
library: '@jielga/tmdatagrid'
|
|
19
|
-
library_version: '2.0.
|
|
19
|
+
library_version: '2.0.1'
|
|
20
20
|
sources:
|
|
21
21
|
- 'Jielga/TMDataGrid:packages/tmdatagrid/docs/columns.md'
|
|
22
22
|
- 'Jielga/TMDataGrid:packages/tmdatagrid/docs/column-layout.md'
|
|
@@ -93,23 +93,9 @@ What the column **is** stays flat; what the filter panel and the edit engine do
|
|
|
93
93
|
with it sits in their namespaces. `type` and `options` are read by both stages,
|
|
94
94
|
which is why they are in neither.
|
|
95
95
|
|
|
96
|
-
`meta.filter
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
| --- | --- | --- | --- |
|
|
100
|
-
| `operators` | `readonly TMDataGridFilterOperator[]` | The type's list | The operators this column offers, a subset of its type's. For a backend that answers only some. |
|
|
101
|
-
| `defaultOperator` | `TMDataGridFilterOperator` | The type's default, else the first offered | The operator a fresh filter on this column starts with. |
|
|
102
|
-
| `control` | `TMDataGridFilterControlComponent` | By `meta.type` | Replaces the value control in this column's filter row. Module scope. |
|
|
103
|
-
|
|
104
|
-
`meta.edit`:
|
|
105
|
-
|
|
106
|
-
| Field | Type | Default | What it does |
|
|
107
|
-
| --- | --- | --- | --- |
|
|
108
|
-
| `enabled` | `boolean \| ((row) => boolean)` | editable where a field maps | Whether this column's cells edit. |
|
|
109
|
-
| `field` | `string` | The `accessorKey` | The data path an edit writes to. The only way an `accessorFn` column edits. |
|
|
110
|
-
| `editor` | `TMDataGridEditorComponent` | By `meta.type` | Replaces the cell editor. Module scope. |
|
|
111
|
-
| `validate` | `TMDataGridFieldValidate` | – | Field-level validation. A bare schema means `onChange`. |
|
|
112
|
-
| `mapValue` | `TMDataGridEditValueMap` | – | Maps each value an editor writes, on every keystroke. |
|
|
96
|
+
`meta.filter` holds `operators`, `defaultOperator` and `control`; `meta.edit`
|
|
97
|
+
holds `enabled`, `field`, `editor`, `validate` and `mapValue`. Their fields are
|
|
98
|
+
in [references/columns-api.md](references/columns-api.md).
|
|
113
99
|
|
|
114
100
|
```tsx
|
|
115
101
|
meta: {
|
|
@@ -119,6 +105,14 @@ meta: {
|
|
|
119
105
|
}
|
|
120
106
|
```
|
|
121
107
|
|
|
108
|
+
The type of `meta` is `TMDataGridColumnMeta<TData>`. On a column declared with
|
|
109
|
+
`createTMDataGridColumnHelper<TData>()`, the `row` that a `meta.options`
|
|
110
|
+
function and a `meta.edit.enabled` function receive is
|
|
111
|
+
`Row<TMDataGridFeatures, TData>`, so `row.original` needs no cast and no
|
|
112
|
+
annotation. A column written without the helper keeps the untyped row,
|
|
113
|
+
`Row<TMDataGridFeatures, TMDataGridRowData>`, where `row.original` is
|
|
114
|
+
`Record<string, unknown>`.
|
|
115
|
+
|
|
122
116
|
`enableOrdering` lives in `meta` because column ordering is the one feature
|
|
123
117
|
TanStack defines no column option for. `meta.edit` only acts once `editing` is
|
|
124
118
|
set: see the `editing` skill. `meta.filter` belongs to the `filtering` skill.
|
|
@@ -141,6 +135,28 @@ columnHelper.accessor("department", {
|
|
|
141
135
|
Dates travel as ISO `YYYY-MM-DD` strings and booleans as `"true"` / `"false"`,
|
|
142
136
|
so the filter model stays plain JSON whatever the type.
|
|
143
137
|
|
|
138
|
+
### meta.options
|
|
139
|
+
|
|
140
|
+
`meta.options` is a list of `TMDataGridOption`s
|
|
141
|
+
(`{ value, label?, color?, disabled?, group? }`) or bare strings, `"faceted"`
|
|
142
|
+
for the distinct values in the data, or a function of `TMDataGridOptionsArgs`
|
|
143
|
+
(`{ table, column, row? }`). `row` is set when a cell editor asks and absent for
|
|
144
|
+
the filter panel:
|
|
145
|
+
|
|
146
|
+
```tsx
|
|
147
|
+
meta: {
|
|
148
|
+
type: "select",
|
|
149
|
+
options: ({ row }) => (row ? citiesFor(row.original.country) : allCities),
|
|
150
|
+
}
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
`resolveColumnOptions({ table, column, row? })` normalises all three forms into
|
|
154
|
+
`Array<TMDataGridOption>` for a custom control, and `optionsToComboboxData`
|
|
155
|
+
turns that list into Mantine `Select` / `MultiSelect` data. A select column with
|
|
156
|
+
no options still filters, on the faceted values.
|
|
157
|
+
|
|
158
|
+
Source: `packages/tmdatagrid/docs/columns.md` (Options).
|
|
159
|
+
|
|
144
160
|
## Sizing
|
|
145
161
|
|
|
146
162
|
Columns are fluid. Each track is `minmax(minSize, flex fr)`.
|
|
@@ -276,7 +292,7 @@ asks for it.
|
|
|
276
292
|
|
|
277
293
|
They are structural: fixed width, no column menu, and they cannot be sorted,
|
|
278
294
|
filtered, resized, re-pinned or moved. The checkbox lane anchors the left pinned
|
|
279
|
-
region, so no column can be placed in front of it. `isControlColumn(
|
|
295
|
+
region, so no column can be placed in front of it. `isControlColumn(columnId)`
|
|
280
296
|
identifies them.
|
|
281
297
|
|
|
282
298
|
## Common mistakes
|
|
@@ -466,28 +482,11 @@ columnHelper.accessor("pctOfTotal", { header: "Share" });
|
|
|
466
482
|
|
|
467
483
|
Source: `packages/tmdatagrid/docs/columns.md` (Columns derived from the other rows).
|
|
468
484
|
|
|
469
|
-
##
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
| `minSize` / `maxSize` / `size` | Column options | `number` | `80` / – / – | Width bounds, and the fixed width once one applies. |
|
|
475
|
-
| `enableSorting` · `enableColumnFilter` · `enableHiding` · `enablePinning` · `enableResizing` · `enableGrouping` | Column options | `boolean` | `true` | Per-column switches, each removing its interface. |
|
|
476
|
-
| `enableColumnOrdering` | Option | `boolean` | `true` | Header dragging and the move menu items. Grid-defined. |
|
|
477
|
-
| `enableMultiSort` · `maxMultiSortColCount` · `isMultiSortEvent` | Table options | – | Shift held | Multi-column sorting. |
|
|
478
|
-
| `sortFn` | Column option | name or `(rowA, rowB, columnId) => number` | `"auto"` | The comparator for one column. Not v8's `sortingFn`. |
|
|
479
|
-
| `initialState.columnOrder` · `.columnPinning` · `.columnVisibility` · `.columnSizing` | Table options | – | – | Layout at mount. Settings slices, persisted under `settingsKey`. |
|
|
480
|
-
| `initialState.sorting` | Table option | `Array<{ id, desc }>` | `[]` | Sort at mount. A data slice, persisted under `dataKey`. |
|
|
481
|
-
| `resetSettings` | Hook return | `() => void` | – | Clears visibility, order, pinning and widths. |
|
|
482
|
-
| `moveColumn` | Export | `({ table, columnId, targetId, side }) => void` | – | Moves a column beside another. |
|
|
483
|
-
| `moveColumnByStep` | Export | `({ table, columnId, direction }) => void` | – | Moves it one place. |
|
|
484
|
-
| `getStepTargetColumn` | Export | `(args) => Column \| null` | – | What a step would swap with, or `null` at a region edge. |
|
|
485
|
-
| `getColumnRegion` | Export | `(columnPinning, columnId) => "start" \| "center" \| "end"` | – | Which pinned region a column is in. |
|
|
486
|
-
| `getColumnCapabilities(column, features).canReorder` | Export | `boolean` | – | Whether this column may move at all. |
|
|
487
|
-
| `autosizeColumn` | Export | `({ table, columnId, container }) => void` | – | Fits a column to its mounted content. |
|
|
488
|
-
| `getColumnLabel` · `getColumnType` · `getColumnDefaultOperator` · `isControlColumn` | Exports | – | – | What the built-in controls read off a column. |
|
|
489
|
-
| `SELECT_COLUMN_ID` · `GROUP_COLUMN_ID` · `DETAILS_COLUMN_ID` · `EDIT_COLUMN_ID` · `ROW_NUMBER_COLUMN_ID` | Exports | ids | – | The generated lanes. |
|
|
490
|
-
| `TMDataGrid.Menu.Columns` · `TMDataGrid.ColumnsPanel` | Components | `searchable` · Mantine `BoxProps` | – | The column chooser, as menu items and as plain controls. Style props set on the panel. |
|
|
485
|
+
## References
|
|
486
|
+
|
|
487
|
+
- [Columns API](references/columns-api.md) - every column option, column meta
|
|
488
|
+
field, export and type belonging to defining, sizing, hiding, pinning,
|
|
489
|
+
ordering and sorting columns.
|
|
491
490
|
|
|
492
491
|
See also: the `filtering` skill for operators and filter controls, the `editing`
|
|
493
492
|
skill for the editing meta fields, and the `grouping` skill for what grouping
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
# Columns API
|
|
2
|
+
|
|
3
|
+
Reference for the `columns` skill.
|
|
4
|
+
|
|
5
|
+
## meta.filter and meta.edit
|
|
6
|
+
|
|
7
|
+
`meta.filter` belongs to the `filtering` skill:
|
|
8
|
+
|
|
9
|
+
| Field | Type | Default | What it does |
|
|
10
|
+
| --- | --- | --- | --- |
|
|
11
|
+
| `operators` | `readonly TMDataGridFilterOperator[]` | The type's list | The operators this column offers, a subset of its type's. For a backend that answers only some. |
|
|
12
|
+
| `defaultOperator` | `TMDataGridFilterOperator` | The type's default, else the first offered | The operator a fresh filter on this column starts with. |
|
|
13
|
+
| `control` | `TMDataGridFilterControlComponent` | By `meta.type` | Replaces the value control in this column's filter row. Module scope. |
|
|
14
|
+
|
|
15
|
+
`meta.edit` belongs to the `editing` skill, and only acts once `editing` is set:
|
|
16
|
+
|
|
17
|
+
| Field | Type | Default | What it does |
|
|
18
|
+
| --- | --- | --- | --- |
|
|
19
|
+
| `enabled` | `boolean \| ((row) => boolean)` | editable where a field maps | Whether this column's cells edit. `row` is typed by the column helper. |
|
|
20
|
+
| `field` | `string` | The `accessorKey` | The data path an edit writes to. The only way an `accessorFn` column edits. |
|
|
21
|
+
| `editor` | `TMDataGridEditorComponent` | By `meta.type` | Replaces the cell editor. Module scope. |
|
|
22
|
+
| `validate` | `TMDataGridFieldValidate` | – | Field-level validation. A bare schema means `onChange`. |
|
|
23
|
+
| `mapValue` | `TMDataGridEditValueMap` | – | Maps each value an editor writes, on every keystroke. |
|
|
24
|
+
|
|
25
|
+
## Exports and options
|
|
26
|
+
|
|
27
|
+
| Name | Kind | Type | Default | What it does |
|
|
28
|
+
| --- | --- | --- | --- | --- |
|
|
29
|
+
| `createTMDataGridColumnHelper` | Export | `<TData>() => TMDataGridColumnHelper<TData>` | – | The typed column helper. `meta` callbacks receive `Row<TMDataGridFeatures, TData>`. |
|
|
30
|
+
| `TMDataGridColumnHelper` | Type | – | – | The helper's type. |
|
|
31
|
+
| `TMDataGridColumnMeta` | Type | `TMDataGridColumnMeta<TData = TMDataGridRowData>` | – | The type of `meta`. Typed against the row when the column is declared with the helper. |
|
|
32
|
+
| `meta.options` | Column meta | `TMDataGridOptionsSource`: array \| `"faceted"` \| `(args: TMDataGridOptionsArgs) => …` | – | The choices of a `select` / `multiSelect` column. |
|
|
33
|
+
| `TMDataGridOption` | Type | `{ value, label?, color?, disabled?, group? }` | – | One choice. A bare string is shorthand for `{ value }`. |
|
|
34
|
+
| `TMDataGridOptionsArgs` | Type | `{ table, column, row? }` | – | What a `meta.options` function receives. `row` is absent when the filter panel asks. |
|
|
35
|
+
| `resolveColumnOptions` | Export | `({ table, column, row?, fallback? }) => Array<TMDataGridOption>` | – | Normalises all three `meta.options` forms. Empty when the column declares none. |
|
|
36
|
+
| `optionsToComboboxData` | Export | `(options) => ComboboxData` | – | Options as Mantine `Select` / `MultiSelect` data, groups folded in. |
|
|
37
|
+
| `minSize` / `maxSize` / `size` | Column options | `number` | `80` / – / – | Width bounds, and the fixed width once one applies. |
|
|
38
|
+
| `enableSorting` · `enableColumnFilter` · `enableHiding` · `enablePinning` · `enableResizing` · `enableGrouping` | Column options | `boolean` | `true` | Per-column switches, each removing its interface. |
|
|
39
|
+
| `enableColumnOrdering` | Option | `boolean` | `true` | Header dragging and the move menu items. Grid-defined. |
|
|
40
|
+
| `enableMultiSort` · `maxMultiSortColCount` · `isMultiSortEvent` | Table options | – | Shift held | Multi-column sorting. |
|
|
41
|
+
| `sortFn` | Column option | name or `(rowA, rowB, columnId) => number` | `"auto"` | The comparator for one column. Not v8's `sortingFn`. |
|
|
42
|
+
| `initialState.columnOrder` · `.columnPinning` · `.columnVisibility` · `.columnSizing` | Table options | – | – | Layout at mount. Settings slices, persisted under `settingsKey`. |
|
|
43
|
+
| `initialState.sorting` | Table option | `Array<{ id, desc }>` | `[]` | Sort at mount. A data slice, persisted under `dataKey`. |
|
|
44
|
+
| `resetSettings` | Hook return | `() => void` | – | Clears visibility, order, pinning and widths. |
|
|
45
|
+
| `moveColumn` | Export | `({ table, columnId, targetId, side }) => void` | – | Moves a column beside another. |
|
|
46
|
+
| `moveColumnByStep` | Export | `({ table, columnId, direction }) => void` | – | Moves it one place. `direction` is `-1` or `1`. |
|
|
47
|
+
| `MoveColumnArgs` · `ColumnStepArgs` | Types | – | – | What `moveColumn` takes, and what `moveColumnByStep` and `getStepTargetColumn` take. |
|
|
48
|
+
| `TMDataGridDropSide` | Type | `"before" \| "after"` | – | The `side` of `MoveColumnArgs`: which edge of the target column the moved column lands on. |
|
|
49
|
+
| `getStepTargetColumn` | Export | `(args) => Column \| null` | – | What a step would swap with, or `null` at a region edge. |
|
|
50
|
+
| `getColumnRegion` | Export | `(columnPinning, columnId) => TMDataGridColumnRegion` | – | Which pinned region a column is in. |
|
|
51
|
+
| `TMDataGridColumnRegion` | Type | `"start" \| "center" \| "end"` | – | What `getColumnRegion` returns. |
|
|
52
|
+
| `keepGeneratedColumnsOutermost` | Export | `(columnPinning) => ColumnPinningState` | – | Puts the generated lanes back on the outside of both pinned lanes. The grid runs it after every pin; call it on a `columnPinning` you write yourself. |
|
|
53
|
+
| `getColumnCapabilities(column, features).canReorder` | Export | `boolean` | – | Whether this column may move at all. |
|
|
54
|
+
| `autosizeColumn` | Export | `({ table, columnId, container }) => void` | – | Fits a column to its mounted content. |
|
|
55
|
+
| `getColumnLabel` · `getColumnType` · `getColumnDefaultOperator` · `isControlColumn` | Exports | – | – | What the built-in controls read off a column. |
|
|
56
|
+
| `isGeneratedColumn` | Export | `(columnId) => boolean` | – | Whether the grid generated the column - the four control lanes plus the tree column. |
|
|
57
|
+
| `SELECT_COLUMN_ID` · `GROUP_COLUMN_ID` · `DETAILS_COLUMN_ID` · `EDIT_COLUMN_ID` · `ROW_NUMBER_COLUMN_ID` | Exports | ids | – | The generated lanes. |
|
|
58
|
+
| `TMDataGrid.Menu.Columns` · `TMDataGrid.ColumnsPanel` | Components | `searchable` · Mantine `BoxProps` | – | The column chooser, as menu items and as plain controls. Style props set on the panel. |
|
|
59
|
+
| `TMDataGridColumnSearchable` | Type | `boolean \| "auto"` | `"auto"` | The `searchable` prop of both: a search box from six hideable columns under `"auto"`, `true` always, `false` never. |
|
package/skills/data/SKILL.md
CHANGED
|
@@ -18,7 +18,7 @@ description: >
|
|
|
18
18
|
metadata:
|
|
19
19
|
type: core
|
|
20
20
|
library: '@jielga/tmdatagrid'
|
|
21
|
-
library_version: '2.0.
|
|
21
|
+
library_version: '2.0.1'
|
|
22
22
|
sources:
|
|
23
23
|
- 'Jielga/TMDataGrid:packages/tmdatagrid/docs/pagination.md'
|
|
24
24
|
- 'Jielga/TMDataGrid:packages/tmdatagrid/docs/scrolling.md'
|
|
@@ -354,13 +354,17 @@ Source: `packages/tmdatagrid/docs/pagination.md` (Grouping suspends it).
|
|
|
354
354
|
| `initialState.pagination` | Table option | `{ pageIndex, pageSize }` | `{ 0, 25 }` | Where paging starts. A `data` slice, so it persists. |
|
|
355
355
|
| `onPaginationChange` | Table option | `OnChangeFn` | – | Controls the pagination state. |
|
|
356
356
|
| `TMDataGrid.Footer` | Component | `pageSizeOptions`, `renderPagination`, Mantine `BoxProps` | `[10, 25, 50, 100]` | The footer bar. Renders nothing when paging is off. Style props set on the bar. |
|
|
357
|
-
| `
|
|
358
|
-
| `
|
|
357
|
+
| `TMDataGridFooterProps` | Type | – | – | The props of `TMDataGrid.Footer`. |
|
|
358
|
+
| `Footer` `renderPagination` | Slot | `(args: TMDataGridPaginationSlotArgs) => ReactNode` | Built-in pager | Replaces the pager, and hands over its pieces. |
|
|
359
|
+
| `TMDataGridPaginationSlotArgs` | Type | `TMDataGridPaginationApi & { Controls }` | – | What `renderPagination` receives: `{ state, actions, Controls }`. |
|
|
360
|
+
| `getTMDataGridPaginationApi` | Export | `(table, isPaging?) => TMDataGridPaginationApi` | `isPaging`: `true` | The pager API, outside the Footer. |
|
|
361
|
+
| `TMDataGridPaginationApi` | Type | `{ state, actions }` | – | What `getTMDataGridPaginationApi` returns. |
|
|
359
362
|
| `TMDataGridPaginationState` · `TMDataGridPaginationActions` · `TMDataGridPaginationControls` | Exports | types | – | The three parts of the slot argument. |
|
|
360
363
|
| `isPagingActive` | Export | `(table, features) => boolean` | – | Whether the pager is slicing anything right now. |
|
|
361
364
|
| `overscan` | Option | `number` | `6` | Rows kept mounted beyond each edge of the viewport. |
|
|
362
365
|
| `meta.rowHeight` | Option | `number` | From `size` | Row height in pixels. The virtualizer needs a number. |
|
|
363
366
|
| `scrollToRow` | Hook return | `({ rowId, align? }) => boolean` | `align: "auto"` | Scrolls a row into view, mounted or not. |
|
|
367
|
+
| `TMDataGridScrollToRowArgs` | Export | `{ rowId, align? }` | – | What `scrollToRow` takes. |
|
|
364
368
|
| `onScrollToTop` · `onScrollToBottom` · `onScrollToLeft` · `onScrollToRight` | Table props | `() => void` | – | Fire once on arriving at that edge. |
|
|
365
369
|
| `TMDataGridScrollAlign` | Export | `"start" \| "center" \| "end" \| "auto"` | – | The `align` argument. |
|
|
366
370
|
| `meta.loading` | Option | `boolean` | `false` | A fetch is in flight. Takes precedence over every empty message. |
|
|
@@ -371,6 +375,26 @@ Source: `packages/tmdatagrid/docs/pagination.md` (Grouping suspends it).
|
|
|
371
375
|
| `TMDataGrid.SummaryCount` | Component | `children` replaces the text | – | Visible rows out of total. |
|
|
372
376
|
| `--dg-header-shadow-color` | CSS variable | colour | Themed | The shadow under the sticky header. |
|
|
373
377
|
| `--dg-sticky-edge-range` | CSS variable | length | `20px` | How far the pinned-lane band takes to fade in. |
|
|
378
|
+
| `exportOptions` | Option | `TMDataGridExportOptions` | `DEFAULT_EXPORT_OPTIONS` | Format, file name and header row for every export of the grid. |
|
|
379
|
+
| `meta.enableExport` | Column meta | `boolean` | `true` | `false` leaves the column out of every export and of Ctrl+C. |
|
|
380
|
+
| `meta.exportValue` | Column meta | `TMDataGridExportValueGetter`: `({ value, row, column }) => unknown` | – | The value written in place of `row.getValue`. |
|
|
381
|
+
| `TMDataGrid.Menu.Export` · `TMDataGrid.Menu.ExportSelected` | Components | `TMDataGridMenuExportProps` | – | Menu items: every filtered row, and the selected rows. `columns="custom"` opens the picker. |
|
|
382
|
+
| `ui.state.exportPicker` | UI state | `TMDataGridExportPickerRequest \| null` | `null` | The column picker while open: `{ rows, options }`. |
|
|
383
|
+
| `getExportableColumns` | Export | `(table) => Array<Column>` | – | Every column an export could take, hidden ones included. The list the picker shows. |
|
|
384
|
+
| `useTMDataGridExport` | Hook | `(overrides?) => TMDataGridExportApi` | – | `exportAll`, `exportSelected`, `selectedCount`, `canExportSelected`. |
|
|
385
|
+
| `exportGrid` | Export | `(args: ExportGridArgs) => Promise<void>` | – | Downloads the grid from outside a component. `ExportGridArgs` is `{ table, rows?, options? }`. |
|
|
386
|
+
| `buildExportData` | Export | `(args: BuildExportDataArgs) => TMDataGridExportData` | – | The columns, labels and values a format writes. `BuildExportDataArgs` is `{ table, rows?, columns?, bounds? }`. |
|
|
387
|
+
| `TMDataGridExportRows` · `TMDataGridExportColumns` | Types | `"all" \| "selected" \| rows` · `"visible" \| "all" \| ReadonlyArray<string>` | `"all"` · `"visible"` | Which rows and which columns an export takes. |
|
|
388
|
+
| `writeExportFile` | Export | `(data, settings) => Promise<void>` | – | Writes export data in a format and downloads it. |
|
|
389
|
+
| `downloadFile` | Export | `({ fileName, content, mimeType }) => void` | – | Downloads a string or a `Blob`. |
|
|
390
|
+
| `csvExcelFormat` · `csvFormat` · `tsvFormat` · `jsonFormat` | Exports | `(options?) => TMDataGridExportFormat` | – | The built-in formats. |
|
|
391
|
+
| `TMDataGridCsvFormatOptions` · `TMDataGridTsvFormatOptions` · `TMDataGridJsonFormatOptions` | Types | – | – | The options of `csvExcelFormat` and `csvFormat`, of `tsvFormat`, and of `jsonFormat`. |
|
|
392
|
+
| `TMDataGridExportWriteOptions` | Type | `{ includeHeaders }` | – | The second argument of a format's `write`. |
|
|
393
|
+
| `guardFormula` · `formatExportValue` | Exports | `(text) => string` · – | – | The formula guard and the text rule, for a format of your own. |
|
|
394
|
+
| `resolveExportOptions` | Export | `(...overrides) => TMDataGridExportSettings` | – | The defaults with overrides folded over, `undefined` fields skipped. |
|
|
395
|
+
| `countSelectedExportRows` | Export | `(table) => number` | – | How many rows `"selected"` would write. |
|
|
396
|
+
| `DEFAULT_EXPORT_OPTIONS` | Constant | `TMDataGridExportSettings` | – | The defaults `exportOptions` merges over. |
|
|
397
|
+
| `TMDataGridExportSettings` | Type | `Required<TMDataGridExportOptions>` | – | Export options with every field set. |
|
|
374
398
|
|
|
375
399
|
See also: the `server-side` skill for `manualPagination` and `onReachEnd`, and
|
|
376
400
|
the `grouping` skill for why the pager suspends.
|
package/skills/editing/SKILL.md
CHANGED
|
@@ -18,13 +18,14 @@ description: >
|
|
|
18
18
|
metadata:
|
|
19
19
|
type: core
|
|
20
20
|
library: '@jielga/tmdatagrid'
|
|
21
|
-
library_version: '2.0.
|
|
21
|
+
library_version: '2.0.1'
|
|
22
22
|
sources:
|
|
23
23
|
- 'Jielga/TMDataGrid:packages/tmdatagrid/docs/editing.md'
|
|
24
24
|
- 'Jielga/TMDataGrid:packages/tmdatagrid/docs/draft-store.md'
|
|
25
25
|
- 'Jielga/TMDataGrid:packages/tmdatagrid/docs/adding-rows.md'
|
|
26
26
|
- 'Jielga/TMDataGrid:packages/tmdatagrid/docs/query-builder.md'
|
|
27
27
|
- 'Jielga/TMDataGrid:packages/tmdatagrid/docs/editors.md'
|
|
28
|
+
- 'Jielga/TMDataGrid:packages/tmdatagrid/docs/portfolio-rebalancer.md'
|
|
28
29
|
- 'Jielga/TMDataGrid:packages/tmdatagrid/src/core/editEngine.ts'
|
|
29
30
|
- 'Jielga/TMDataGrid:packages/tmdatagrid/src/useTMDataGrid.tsx'
|
|
30
31
|
---
|
|
@@ -259,6 +260,11 @@ tableValidators: {
|
|
|
259
260
|
}
|
|
260
261
|
```
|
|
261
262
|
|
|
263
|
+
Columns derived from the other rows (a weight as a share of the total) plus a
|
|
264
|
+
table-wide rule (targets may not total more than 100%) are worked through in
|
|
265
|
+
[references/editors-and-validation.md](references/editors-and-validation.md),
|
|
266
|
+
from `packages/tmdatagrid/docs/portfolio-rebalancer.md`.
|
|
267
|
+
|
|
262
268
|
`meta.edit.mapValue` rewrites a value instead of rejecting it: uppercase a code,
|
|
263
269
|
strip spaces from an IBAN, clamp a number. It runs on every write an editor
|
|
264
270
|
makes, so a text input maps per keystroke, and what it returns is what the
|
|
@@ -468,8 +474,9 @@ are in [references/common-mistakes.md](references/common-mistakes.md).
|
|
|
468
474
|
## References
|
|
469
475
|
|
|
470
476
|
- [Editors and validation](references/editors-and-validation.md) - the editor
|
|
471
|
-
API, wrapping a built-in, what `mapValue` leaves alone, field and
|
|
472
|
-
validators, server-side
|
|
477
|
+
API, wrapping a built-in, what `mapValue` leaves alone, field, row and
|
|
478
|
+
cross-row validators, derived columns with a table-wide rule, server-side
|
|
479
|
+
errors.
|
|
473
480
|
- [Editing API](references/editing-api.md) - every option, callback, column meta
|
|
474
481
|
field, export, CSS variable and data attribute belonging to editing.
|
|
475
482
|
- [Common mistakes](references/common-mistakes.md) - the failure modes above,
|
|
@@ -28,7 +28,7 @@ the type.
|
|
|
28
28
|
| Name | Argument | What it does |
|
|
29
29
|
| --- | --- | --- |
|
|
30
30
|
| `editing.onCommit` | `{ rowId, value, original, changes, source }` | Applies one row's change. Reject to keep the draft and show the error. |
|
|
31
|
-
| `editing.onSaveDrafts` | `{ updated, created, deleted }` | `draft: true` only. One call for the whole draft store. May return a `TMDataGridSaveDraftsResponse` naming the ids that failed; they stay in the draft store. Without it, `saveDrafts` loops `editing.onCommit`, `editing.onRowAdd` and `editing.onRowDelete`. |
|
|
31
|
+
| `editing.onSaveDrafts` | `{ updated, created, deleted }` | `draft: true` only. One call for the whole draft store. May return a `TMDataGridSaveDraftsResponse` naming the ids that failed; they stay in the draft store. Each of its buckets is a `TMDataGridSaveOutcomes`: `boolean \| Record<string, boolean>`, where `false` keeps an entry's draft and an id the map does not name counts as saved. Without it, `saveDrafts` loops `editing.onCommit`, `editing.onRowAdd` and `editing.onRowDelete`. |
|
|
32
32
|
| `editing.onRowAdd` | `{ tempId, value }` | Commits an entry row. Mint the real id here. |
|
|
33
33
|
| `editing.onRowDelete` | `{ rowId, row }` | Deletes a row. Shows the trash; under `draft: true`, `onSaveDrafts` shows it too. |
|
|
34
34
|
|
|
@@ -63,7 +63,7 @@ path, which may be dotted.
|
|
|
63
63
|
| `setCellValue` | `(rowId, columnId, value) => Promise<boolean>` | Writes one cell and commits the row, with no editor - toolbar actions and bulk fills. The row need not be mounted; a row inside a collapsed group takes the write. `value` is the stored value, so `meta.edit.mapValue` does not run and `meta.edit.validate` does. Under `draft: true` the row is committed into the draft store like any hand-made edit. `false` when the cell takes no edit, or when validation refused the value and left the row open with its errors. |
|
|
64
64
|
| `setRowValues` | `(rowId, values) => Promise<boolean>` | `setCellValue` for several cells of one row in a single commit - one consumer call and one draft entry. Keys are column ids. All or nothing: if any named cell takes no edit, nothing is written and it resolves `false`. |
|
|
65
65
|
| `addRow` | `(values?) => string` | Opens an entry row, returns its `tempId`. `values` overrides `editing.newRowDefaults` key by key for that row; with no argument the row is `newRowDefaults` alone. |
|
|
66
|
-
| `addRows` | `(rows, options
|
|
66
|
+
| `addRows` | `(rows, options?: TMDataGridAddRowsOptions) => Promise<TMDataGridAddRowsResult>` | Opens a batch in one write, each row seeded as `addRow` seeds. `{ commit: true }` submits each as it lands - valid rows commit, invalid ones stay open with their errors. Resolves `{ ok, committed, open }`; `ok` is `false` when a row stayed open. |
|
|
67
67
|
| `deleteRow` | `(rowId) => void` | `editing.onRowDelete`, or a deletion mark under `draft: true`. Idempotent: a second call leaves the row marked; `restoreRow` is the undo. |
|
|
68
68
|
| `canEditCell` | `(row, column) => boolean` | The check the built-in controls use. Both halves: the column's and the row's. |
|
|
69
69
|
| `canEditRow` | `(row) => boolean` | The pencil's gate. |
|
|
@@ -131,7 +131,9 @@ Types: `TMDataGridEditMode`, `TMDataGridEditApi`, `TMDataGridEditState`,
|
|
|
131
131
|
`TMDataGridEditChange`, `TMDataGridEditorArgs`, `TMDataGridEditorComponent`,
|
|
132
132
|
`TMDataGridEditField`, `TMDataGridEditRowProjection`, `TMDataGridFieldValidate`,
|
|
133
133
|
`TMDataGridRowValidators`, `TMDataGridRowEditForm`, `TMDataGridRowAddArgs`,
|
|
134
|
-
`TMDataGridRowDeleteArgs`, `TMDataGridEditingOptions
|
|
134
|
+
`TMDataGridRowDeleteArgs`, `TMDataGridEditingOptions`,
|
|
135
|
+
`TMDataGridSaveOutcomes`, `TMDataGridAddRowsOptions`,
|
|
136
|
+
`TMDataGridEditValueMapArgs`, `TMDataGridTableValidateArgs`.
|
|
135
137
|
|
|
136
138
|
## The edit lane
|
|
137
139
|
|
|
@@ -157,6 +157,10 @@ meta: {
|
|
|
157
157
|
}
|
|
158
158
|
```
|
|
159
159
|
|
|
160
|
+
The map receives `TMDataGridEditValueMapArgs`: `{ value, previous, row, column, table }`.
|
|
161
|
+
Unlike `meta.edit.enabled`, its `row` is `Row<TMDataGridFeatures, TMDataGridRowData>`
|
|
162
|
+
with or without the column helper.
|
|
163
|
+
|
|
160
164
|
The grid applies it in the editor host, around the field every editor writes
|
|
161
165
|
through, so it covers the six built-ins, a custom `meta.edit.editor`, and the
|
|
162
166
|
type-to-edit seed character.
|
|
@@ -241,7 +245,8 @@ unedited value and cannot pass. Use `"row"`.
|
|
|
241
245
|
## Cross-row rules
|
|
242
246
|
|
|
243
247
|
`editing.tableValidators` holds the rules that need the other rows. Its
|
|
244
|
-
`onSubmit` / `onSubmitAsync` receive `
|
|
248
|
+
`onSubmit` / `onSubmitAsync` receive `TMDataGridTableValidateArgs`,
|
|
249
|
+
`{ value, rowId, isNew, rows }`:
|
|
245
250
|
`value` is the committing row as drafted, and `rows` is
|
|
246
251
|
`Array<{ rowId, value }>` - the collection as it would stand if the commit
|
|
247
252
|
landed, with every draft overlaid, entry rows appended and deletion-marked
|
|
@@ -270,6 +275,56 @@ row's - after the row's own validators, and again for every committed row during
|
|
|
270
275
|
`saveDrafts`, the only rules that run there: a committed row that a later edit
|
|
271
276
|
invalidated is reopened with its errors, and the save reports it in `reopened`.
|
|
272
277
|
|
|
278
|
+
## Derived columns and a table-wide rule
|
|
279
|
+
|
|
280
|
+
A column whose value depends on the other rows - a weight as a share of the
|
|
281
|
+
total - cannot be an `accessorFn`, which is handed one row. Derive the whole
|
|
282
|
+
collection with `useMemo` and pass the finished rows as `data`;
|
|
283
|
+
`editing.onCommit` writes back to the source array, and the derived rows arrive
|
|
284
|
+
on the next render. Under `mode: "cell"` with no draft store, every dependent
|
|
285
|
+
column follows the commit.
|
|
286
|
+
|
|
287
|
+
```tsx
|
|
288
|
+
const positions = useMemo(() => {
|
|
289
|
+
const valued = holdings.map((h) => ({ ...h, marketValue: h.price * h.shares }));
|
|
290
|
+
const total = valued.reduce((sum, h) => sum + h.marketValue, 0);
|
|
291
|
+
return valued.map((h) => ({
|
|
292
|
+
...h,
|
|
293
|
+
currentPct: (h.marketValue / total) * 100,
|
|
294
|
+
drift: h.targetPct - (h.marketValue / total) * 100,
|
|
295
|
+
}));
|
|
296
|
+
}, [holdings]);
|
|
297
|
+
```
|
|
298
|
+
|
|
299
|
+
A rule over the whole collection, such as targets that may not total more than
|
|
300
|
+
100%, is a `tableValidators` rule, while a bound on one cell (between 0 and 100)
|
|
301
|
+
stays on `meta.edit.validate`. `editing.columns` keeps every other column
|
|
302
|
+
read-only:
|
|
303
|
+
|
|
304
|
+
```tsx
|
|
305
|
+
editing: {
|
|
306
|
+
mode: "cell",
|
|
307
|
+
// Only the target weight takes edits; everything else is market data.
|
|
308
|
+
columns: ["targetPct"],
|
|
309
|
+
onCommit: ({ rowId, value }) =>
|
|
310
|
+
setHoldings((previous) =>
|
|
311
|
+
previous.map((h) => (h.id === rowId ? { ...h, targetPct: value.targetPct } : h)),
|
|
312
|
+
),
|
|
313
|
+
tableValidators: {
|
|
314
|
+
// `rows` already holds the committing row's drafted value.
|
|
315
|
+
onSubmit: ({ rows }) => {
|
|
316
|
+
const total = rows.reduce((sum, r) => sum + Number(r.value.targetPct ?? 0), 0);
|
|
317
|
+
return total > 100.005
|
|
318
|
+
? { fields: { targetPct: `Targets would total ${pct(total)}` } }
|
|
319
|
+
: undefined;
|
|
320
|
+
},
|
|
321
|
+
},
|
|
322
|
+
}
|
|
323
|
+
```
|
|
324
|
+
|
|
325
|
+
Source: `packages/tmdatagrid/docs/portfolio-rebalancer.md`, and the demo
|
|
326
|
+
`apps/docs/src/examples/demos/recipes/PortfolioRebalancer.tsx`.
|
|
327
|
+
|
|
273
328
|
## Server-side errors
|
|
274
329
|
|
|
275
330
|
`editing.rowValidators.onSubmitAsync` returns TanStack Form's `{ form, fields }`
|
|
@@ -18,7 +18,7 @@ description: >
|
|
|
18
18
|
metadata:
|
|
19
19
|
type: core
|
|
20
20
|
library: '@jielga/tmdatagrid'
|
|
21
|
-
library_version: '2.0.
|
|
21
|
+
library_version: '2.0.1'
|
|
22
22
|
sources:
|
|
23
23
|
- 'Jielga/TMDataGrid:packages/tmdatagrid/docs/filtering.md'
|
|
24
24
|
- 'Jielga/TMDataGrid:packages/tmdatagrid/docs/quick-search.md'
|
|
@@ -424,20 +424,26 @@ Source: `packages/tmdatagrid/docs/quick-search.md` (Fuzzy by default).
|
|
|
424
424
|
| `meta.filter.defaultOperator` | Column meta | `TMDataGridFilterOperator` | The type's default, else the first offered | The operator a fresh filter opens on. |
|
|
425
425
|
| `meta.filter.control` | Column meta | `TMDataGridFilterControlComponent` | By type and operator | Replaces the value control. Module scope. |
|
|
426
426
|
| `filterFn` | Column option | name or fn | `"tmDataGrid"` | Custom matching for one column. |
|
|
427
|
-
| `quickSearchMode` | Option | `"fuzzy" \| "contains"` | `"fuzzy"` | How the quick search matches. |
|
|
427
|
+
| `quickSearchMode` | Option | `TMDataGridQuickSearchMode`: `"fuzzy" \| "contains"` | `"fuzzy"` | How the quick search matches. |
|
|
428
428
|
| `enableMatchHighlighting` | Option | `boolean` | `false` | Mark matched text in default-rendered cells. |
|
|
429
429
|
| `enableGlobalFilter` | Table option | `boolean` | `true` | Also a column option. Removes the input, or one column's participation. |
|
|
430
430
|
| `globalFilterFn` | Table option | filter fn | fuzzy | Overrides the matching, and the ranking with it. |
|
|
431
431
|
| `TMDataGrid.FilterPanel` | Component | `layout: "row" \| "stacked"`, Mantine `BoxProps` | `"row"` | The panel of filter rows, as a plain block. Style props set on it. |
|
|
432
|
+
| `TMDataGridFilterPanelProps` · `TMDataGridFilterPanelLayout` | Types | – · `"row" \| "stacked"` | – | The props of `TMDataGrid.FilterPanel`, and the type of its `layout`. For wrapping the panel in a component of your own. |
|
|
432
433
|
| `filters` | Table option | `TMDataGridFiltersOptions` | `{ surface: "popup" }` | Which surface holds the filter controls. |
|
|
433
|
-
| `
|
|
434
|
-
| `
|
|
434
|
+
| `TMDataGridFiltersSettings` | Type | `Required<TMDataGridFiltersOptions>` | – | The `filters` option with its defaults filled in, as `api.filters`. |
|
|
435
|
+
| `TMDataGridFilterSurface` · `TMDataGridFilterSidebarSide` | Types | `"popup" \| "sidebar" \| "none"` · `"left" \| "right"` | – | The types of `filters.surface` and `filters.sidebarSide`. |
|
|
436
|
+
| `TMDataGridFilterControlArgs.layout` | Type | `TMDataGridFilterControlLayout` | – | How much room a value control has, and whether it names itself. |
|
|
437
|
+
| `TMDataGridFilterControlLayout` | Type | `"row" \| "stacked" \| "header"` | – | The type of `layout` on `TMDataGridFilterControlArgs`. `"header"` is the cell of the `inHeader` row. |
|
|
438
|
+
| `filterValueShape` | Export | `(operator) => TMDataGridFilterValueShape` | – | Which shape an operator's value takes. |
|
|
439
|
+
| `TMDataGridFilterValueShape` | Type | `"scalar" \| "set" \| "range"` | – | What `filterValueShape` returns. |
|
|
435
440
|
| `TMDataGrid.FilterButton` | Component | – | – | Toolbar button opening the panel, with an active count. |
|
|
436
441
|
| `TMDataGrid.FilterPills` | Component | `api`, `size`, `showClearAll`, `onPillClick`, Mantine `BoxProps` | – | Active filters as removable pills, renderable anywhere. Style props set on the wrapper. |
|
|
437
442
|
| `TMDataGrid.Search` | Component | `placeholder`, `debounce` (`250`), `w` (`220`) | – | The debounced quick-search input. |
|
|
438
443
|
| `openColumnFilter` | Export | `(api, columnId) => void` | – | Opens the panel on a column. |
|
|
439
444
|
| `isFilterActive` | Export | `(value) => boolean` | – | Whether a filter value narrows anything. |
|
|
440
|
-
| `activeColumnFilters` | Export | `(columnFilters \| table) => Array<
|
|
445
|
+
| `activeColumnFilters` | Export | `(columnFilters \| table) => Array<TMDataGridColumnFilter>` | – | The filters in the grid's own value shape that narrow anything, typed. |
|
|
446
|
+
| `TMDataGridColumnFilter` | Type | `{ id, value }` | – | One entry of `columnFilters`, with `value` typed as `TMDataGridFilterValue`. |
|
|
441
447
|
| `getOperatorsForType` | Export | `(type) => operators` | – | The operator list a type offers. |
|
|
442
448
|
| `getColumnOperators` · `getColumnDefaultOperator` | Exports | `(column) => operators` · `(column) => operator` | – | One column's list after `meta.filter.operators`, and the operator a fresh filter on it opens on. |
|
|
443
449
|
| `FILTER_OPERATOR_LABELS` | Export | record | – | The label shown for each operator. |
|
|
@@ -5,16 +5,20 @@ description: >
|
|
|
5
5
|
Mantine. Covers useTMDataGrid, the TMDataGrid root, context, the component
|
|
6
6
|
catalog (Table, Footer, Toolbar, Spacer, SummaryCount, Search,
|
|
7
7
|
LoadingIndicator, DraftActions, FilterButton, Menu, FilterPanel, FilterPills,
|
|
8
|
-
ColumnsPanel), the size scale
|
|
9
|
-
|
|
10
|
-
|
|
8
|
+
ColumnsPanel) with their props types, the size scale, the bounded-height
|
|
9
|
+
layout requirement, and rendering rows without TMDataGrid.Table through
|
|
10
|
+
getDisplayedRows (a card view). Load when adding a grid, choosing which parts
|
|
11
|
+
to render, replacing the Table with a renderer of your own, or when rows do
|
|
12
|
+
not appear.
|
|
11
13
|
metadata:
|
|
12
14
|
type: core
|
|
13
15
|
library: '@jielga/tmdatagrid'
|
|
14
|
-
library_version: '2.0.
|
|
16
|
+
library_version: '2.0.1'
|
|
15
17
|
sources:
|
|
16
18
|
- 'Jielga/TMDataGrid:packages/tmdatagrid/docs/getting-started.md'
|
|
17
19
|
- 'Jielga/TMDataGrid:packages/tmdatagrid/docs/anatomy.md'
|
|
20
|
+
- 'Jielga/TMDataGrid:packages/tmdatagrid/docs/components.md'
|
|
21
|
+
- 'Jielga/TMDataGrid:packages/tmdatagrid/docs/card-view.md'
|
|
18
22
|
- 'Jielga/TMDataGrid:packages/tmdatagrid/src/components/TMDataGrid.tsx'
|
|
19
23
|
- 'Jielga/TMDataGrid:packages/tmdatagrid/src/core/sizes.ts'
|
|
20
24
|
---
|
|
@@ -131,6 +135,7 @@ TanStack ships state and APIs for both but no `enable` option.
|
|
|
131
135
|
| Configure the hook, or persist state | `options` |
|
|
132
136
|
| Theme, size, compose the toolbar, translate | `appearance` |
|
|
133
137
|
| Write tests against a grid | `testing` |
|
|
138
|
+
| Upgrade code written against a 2.0 beta | `migrating-to-2` |
|
|
134
139
|
|
|
135
140
|
## Layout
|
|
136
141
|
|
|
@@ -156,7 +161,7 @@ flex column.
|
|
|
156
161
|
| `TMDataGrid.Toolbar` | `children` | Flex row above the grid. |
|
|
157
162
|
| `TMDataGrid.Spacer` | - | Pushes later toolbar items right. |
|
|
158
163
|
| `TMDataGrid.SummaryCount` | `children` | Visible rows out of total. |
|
|
159
|
-
| `TMDataGrid.Search` | `placeholder`, `debounce` (default `250`), `w` (default `220`) | Quick search over every column, debounced into `globalFilter`. Renders nothing under `enableGlobalFilter: false`. |
|
|
164
|
+
| `TMDataGrid.Search` | `placeholder`, `debounce` (default `250`), `w` (default `220`) | Quick search over every column, debounced into `globalFilter`. Renders nothing under `enableGlobalFilter: false`. Also exported as `TMDataGridSearch`. |
|
|
160
165
|
| `TMDataGrid.LoadingIndicator` | - | Small spinner while `meta.loading` is `true` and rows stay on screen. |
|
|
161
166
|
| `TMDataGrid.DraftActions` | `renderActions` | Save with the pending count, and Discard. Renders nothing while editing is off - see the `editing` skill. |
|
|
162
167
|
| `TMDataGrid.FilterButton` | - | Toggles the filter surface, seeding a filter row on the first filterable column. Renders nothing if no column is filterable, or under `filters.surface: "none"`. |
|
|
@@ -165,6 +170,29 @@ flex column.
|
|
|
165
170
|
| `TMDataGrid.ColumnsPanel` | - | The column chooser as plain controls, for a Popover or a Drawer. |
|
|
166
171
|
| `TMDataGrid.FilterPills` | `api`, `size` (default `"sm"`), `showClearAll` (default `true`), `onPillClick(columnId)`, `className` | One pill per active filter, ✕ to clear it. Takes the api as a prop, so it can be rendered outside the grid. Also exported as `TMDataGridFilterPills`. |
|
|
167
172
|
|
|
173
|
+
Each component's props type is exported, for wrapping a part in a component of
|
|
174
|
+
your own:
|
|
175
|
+
|
|
176
|
+
| Component | Props type |
|
|
177
|
+
| --- | --- |
|
|
178
|
+
| `TMDataGrid` | `TMDataGridProps<TData>`: the fields of `TMDataGridApi<TData>`, plus `children`, `size`, `className`, `style`, `id` and `data-testid` |
|
|
179
|
+
| `TMDataGrid.Table` | `TMDataGridTableProps<TData>` |
|
|
180
|
+
| `TMDataGrid.Toolbar` | `TMDataGridToolbarProps`: `children`, `withBottomBorder` (default `false`), Mantine `BoxProps` |
|
|
181
|
+
| `TMDataGrid.Search` · `TMDataGridSearch` | `TMDataGridSearchProps` |
|
|
182
|
+
| `TMDataGrid.Footer` | `TMDataGridFooterProps` |
|
|
183
|
+
| `TMDataGrid.Menu` | `TMDataGridMenuProps`: `children`, `icon`, `label`, Mantine `MenuProps` |
|
|
184
|
+
| `TMDataGrid.Menu.Columns` | `TMDataGridMenuColumnsProps`: `searchable` |
|
|
185
|
+
| `TMDataGrid.Menu.Export` · `.ExportSelected` | `TMDataGridMenuExportProps`: per-item `exportOptions` overrides, `columns` (which also takes `"custom"`), `label` |
|
|
186
|
+
| `TMDataGrid.ColumnsPanel` | `TMDataGridColumnsPanelProps`: `searchable`, Mantine `BoxProps` |
|
|
187
|
+
| `TMDataGrid.FilterPanel` | `TMDataGridFilterPanelProps`: `layout`, Mantine `BoxProps` |
|
|
188
|
+
| `TMDataGrid.FilterPills` · `TMDataGridFilterPills` | `TMDataGridFilterPillsProps<TData>` |
|
|
189
|
+
| `TMDataGrid.DraftActions` · `TMDataGridDraftActions` | `TMDataGridDraftActionsProps`: `renderActions` |
|
|
190
|
+
|
|
191
|
+
`renderActions` on `TMDataGrid.DraftActions` receives
|
|
192
|
+
`TMDataGridDraftActionsSlotArgs`, `{ state, actions, Controls }`, typed
|
|
193
|
+
`TMDataGridDraftActionsState`, `TMDataGridDraftActionsActions` and
|
|
194
|
+
`TMDataGridDraftActionsControls`. The fields are in the `editing` skill.
|
|
195
|
+
|
|
168
196
|
Pass the row type so `onRowClick` stays typed:
|
|
169
197
|
|
|
170
198
|
```tsx
|
|
@@ -249,6 +277,76 @@ The virtualizer needs row height as a number, so it cannot come from CSS alone.
|
|
|
249
277
|
`SIZE_ROW_HEIGHT` is the exported source of these values and the stylesheet
|
|
250
278
|
mirrors them. Set `meta.rowHeight` for a height outside the scale.
|
|
251
279
|
|
|
280
|
+
## Render rows without TMDataGrid.Table
|
|
281
|
+
|
|
282
|
+
To show the rows as something other than a table - cards, a list - keep
|
|
283
|
+
`useTMDataGrid` and `<TMDataGrid>`, and replace `TMDataGrid.Table` with a
|
|
284
|
+
renderer of your own. `TMDataGrid` renders no rows itself, and every other part
|
|
285
|
+
works without the Table, so the toolbar stays. Search, filters, sorting, column
|
|
286
|
+
visibility and row selection write the same table state the grid would.
|
|
287
|
+
|
|
288
|
+
```tsx
|
|
289
|
+
const grid = useTMDataGrid({
|
|
290
|
+
data,
|
|
291
|
+
columns,
|
|
292
|
+
getRowId: (row) => String(row.id),
|
|
293
|
+
// The popup and the sidebar belong to TMDataGrid.Table.
|
|
294
|
+
filters: { surface: "none" },
|
|
295
|
+
});
|
|
296
|
+
|
|
297
|
+
<TMDataGrid {...grid} style={{ flex: 1, minHeight: 0 }}>
|
|
298
|
+
<TMDataGrid.Toolbar>
|
|
299
|
+
<TMDataGrid.Search />
|
|
300
|
+
<TMDataGrid.SummaryCount />
|
|
301
|
+
<TMDataGrid.Menu>
|
|
302
|
+
<TMDataGrid.Menu.Columns />
|
|
303
|
+
</TMDataGrid.Menu>
|
|
304
|
+
</TMDataGrid.Toolbar>
|
|
305
|
+
<TMDataGrid.FilterPanel layout="stacked" />
|
|
306
|
+
<CardList table={grid.table} features={grid.features} />
|
|
307
|
+
</TMDataGrid>;
|
|
308
|
+
```
|
|
309
|
+
|
|
310
|
+
Read the rows with `getDisplayedRows(table, features)`: the rows the Table
|
|
311
|
+
would render, in render order - filtered, sorted, the current page when paging
|
|
312
|
+
is active, pinned rows left out. Call it inside a selector with a shallow
|
|
313
|
+
compare:
|
|
314
|
+
|
|
315
|
+
```tsx
|
|
316
|
+
import { useSelector } from "@tanstack/react-store";
|
|
317
|
+
import { shallow } from "@tanstack/store";
|
|
318
|
+
import { getDisplayedRows } from "@jielga/tmdatagrid";
|
|
319
|
+
|
|
320
|
+
const rows = useSelector(table.store, () => getDisplayedRows(table, features), {
|
|
321
|
+
compare: shallow,
|
|
322
|
+
});
|
|
323
|
+
```
|
|
324
|
+
|
|
325
|
+
The table identity never changes, so the React Compiler caches a bare
|
|
326
|
+
`getDisplayedRows(table, features)` call and the list stops following filters
|
|
327
|
+
and sorting. The shallow compare re-renders the list only when the rows change.
|
|
328
|
+
Read `row.getVisibleCells()` the same way, inside
|
|
329
|
+
`useSelector(table.store, () => row.getVisibleCells())`, and skip the generated
|
|
330
|
+
columns with `isGeneratedColumn(cell.column.id)` - the checkbox column is among
|
|
331
|
+
the visible cells while row selection is on. Render each value through the
|
|
332
|
+
column's own renderer: `flexRender(cell.column.columnDef.cell, cell.getContext())`.
|
|
333
|
+
|
|
334
|
+
The following belong to `TMDataGrid.Table` and are not available without it:
|
|
335
|
+
|
|
336
|
+
- the header, with click-to-sort, resizing, dragging and the column menus -
|
|
337
|
+
sort from a control of your own with `table.setSorting`
|
|
338
|
+
- the filter popup and sidebar - set `filters: { surface: "none" }` and place
|
|
339
|
+
`TMDataGrid.FilterPanel` yourself
|
|
340
|
+
- row details, row pinning, cell selection and editing in cells
|
|
341
|
+
- `scrollToRow`, which returns `false` while no Table is mounted
|
|
342
|
+
|
|
343
|
+
Virtualize the list yourself, for example with `useVirtualizer` from
|
|
344
|
+
`@tanstack/react-virtual`.
|
|
345
|
+
|
|
346
|
+
Source: `packages/tmdatagrid/docs/card-view.md`,
|
|
347
|
+
`packages/tmdatagrid/docs/anatomy.md` (Which rows it renders), and the demo
|
|
348
|
+
`apps/docs/src/examples/demos/recipes/CardView.tsx`.
|
|
349
|
+
|
|
252
350
|
## Helpers
|
|
253
351
|
|
|
254
352
|
| Export | Description |
|
package/skills/grouping/SKILL.md
CHANGED
|
@@ -14,7 +14,7 @@ description: >
|
|
|
14
14
|
metadata:
|
|
15
15
|
type: core
|
|
16
16
|
library: '@jielga/tmdatagrid'
|
|
17
|
-
library_version: '2.0.
|
|
17
|
+
library_version: '2.0.1'
|
|
18
18
|
sources:
|
|
19
19
|
- 'Jielga/TMDataGrid:packages/tmdatagrid/docs/grouping.md'
|
|
20
20
|
- 'Jielga/TMDataGrid:packages/tmdatagrid/docs/summary-row.md'
|
|
@@ -0,0 +1,244 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: migrating-to-2
|
|
3
|
+
description: >
|
|
4
|
+
Upgrade code written against a 2.0.0-beta release of TMDataGrid to 2.0.0, as a
|
|
5
|
+
checklist to run over a codebase. Covers the edit.commitAll / saveDrafts /
|
|
6
|
+
addRows result objects and the silent `if (await saveDrafts())` trap, the
|
|
7
|
+
onSaveDrafts return type renamed to TMDataGridSaveDraftsResponse, every
|
|
8
|
+
removed name with its replacement (submitAll, onCommitDrafts, rows / added,
|
|
9
|
+
pendingCount, cellExport, exportGridToCsv, the cell-matrix functions,
|
|
10
|
+
toExcelCsv, downloadTextFile, labels.exportCsv), the helpers no longer
|
|
11
|
+
exported, removing row annotations and casts from meta.options and
|
|
12
|
+
meta.edit.enabled callbacks, and the behaviour changes. Load when upgrading
|
|
13
|
+
@jielga/tmdatagrid from a 2.0 beta, or when an import or a property from the
|
|
14
|
+
beta no longer resolves.
|
|
15
|
+
metadata:
|
|
16
|
+
type: lifecycle
|
|
17
|
+
library: '@jielga/tmdatagrid'
|
|
18
|
+
library_version: '2.0.1'
|
|
19
|
+
sources:
|
|
20
|
+
- 'Jielga/TMDataGrid:packages/tmdatagrid/docs/migrating-to-2.md'
|
|
21
|
+
- 'Jielga/TMDataGrid:packages/tmdatagrid/src/index.ts'
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
# TMDataGrid - Migrating from the 2.0 beta to 2.0.0
|
|
25
|
+
|
|
26
|
+
2.0.0 removes every name deprecated during the 2.0 beta, stops exporting a set
|
|
27
|
+
of internal helpers, and changes what three edit calls resolve. Run the steps
|
|
28
|
+
below in order over the codebase. Step 1 finds code that still compiles but
|
|
29
|
+
behaves differently; the compiler finds most of the rest.
|
|
30
|
+
|
|
31
|
+
## 1. CRITICAL Read `ok` from commitAll and saveDrafts
|
|
32
|
+
|
|
33
|
+
`edit.commitAll()` and `edit.saveDrafts()` resolve an object instead of a
|
|
34
|
+
`boolean`. A truthiness check on the old `boolean` still compiles and is now
|
|
35
|
+
always true, so a failed save reports success with no error.
|
|
36
|
+
|
|
37
|
+
Search for: `commitAll(` and `saveDrafts(`, including the `actions.save` and
|
|
38
|
+
`actions.commitAll` of a `TMDataGrid.DraftActions` `renderActions` slot, which
|
|
39
|
+
resolve the same objects.
|
|
40
|
+
|
|
41
|
+
| Call | Resolves |
|
|
42
|
+
| --- | --- |
|
|
43
|
+
| `edit.commitAll()` · `actions.commitAll()` | `TMDataGridCommitAllResult`: `{ ok, committed, open }` |
|
|
44
|
+
| `edit.saveDrafts()` · `actions.save()` | `TMDataGridSaveDraftsResult`: `{ ok, saved, kept, reopened }` |
|
|
45
|
+
| `edit.addRows(rows, options)` | `TMDataGridAddRowsResult`: `{ ok, committed, open }` - `ok` is new |
|
|
46
|
+
| `edit.commit(rowId)` | `boolean`, unchanged |
|
|
47
|
+
|
|
48
|
+
Wrong (compiles, always true):
|
|
49
|
+
|
|
50
|
+
```tsx
|
|
51
|
+
if (await grid.edit.saveDrafts()) notify("Saved");
|
|
52
|
+
const done = await grid.edit.commitAll();
|
|
53
|
+
if (!done) return;
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
Correct:
|
|
57
|
+
|
|
58
|
+
```tsx
|
|
59
|
+
const { ok, kept, reopened } = await grid.edit.saveDrafts();
|
|
60
|
+
if (ok) notify("Saved");
|
|
61
|
+
else notify(`${kept.length + reopened.length} rows need attention`);
|
|
62
|
+
|
|
63
|
+
const { ok: committed } = await grid.edit.commitAll();
|
|
64
|
+
if (!committed) return;
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
Each list holds row ids, and temp ids for new rows. `ok` is `true` when `open`
|
|
68
|
+
is empty, or, for `saveDrafts()`, when `kept` and `reopened` are both empty.
|
|
69
|
+
Also check every other use of the result: `.then((saved) => ...)`, a `return`
|
|
70
|
+
of it from a `boolean` function, `!result`, `result ? ... : ...` and
|
|
71
|
+
`Boolean(result)`.
|
|
72
|
+
|
|
73
|
+
Source: `packages/tmdatagrid/docs/migrating-to-2.md` (Read the batch edit results).
|
|
74
|
+
|
|
75
|
+
## 2. Rename the onSaveDrafts return type
|
|
76
|
+
|
|
77
|
+
The type of what `editing.onSaveDrafts` may return is renamed
|
|
78
|
+
`TMDataGridSaveDraftsResponse`. `TMDataGridSaveDraftsResult` is now the type
|
|
79
|
+
`edit.saveDrafts()` resolves, so code that kept the old name for the callback
|
|
80
|
+
fails to compile.
|
|
81
|
+
|
|
82
|
+
Search for: `TMDataGridSaveDraftsResult`. Where it types an `onSaveDrafts`
|
|
83
|
+
callback or its return value, replace it:
|
|
84
|
+
|
|
85
|
+
```tsx
|
|
86
|
+
// beta
|
|
87
|
+
import type { TMDataGridSaveDraftsResult } from "@jielga/tmdatagrid";
|
|
88
|
+
|
|
89
|
+
// 2.0.0
|
|
90
|
+
import type { TMDataGridSaveDraftsResponse } from "@jielga/tmdatagrid";
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
Where it types the value of `await edit.saveDrafts()`, keep it.
|
|
94
|
+
|
|
95
|
+
Source: `packages/tmdatagrid/docs/migrating-to-2.md` (Rename the onSaveDrafts return type).
|
|
96
|
+
|
|
97
|
+
## 3. Replace removed names
|
|
98
|
+
|
|
99
|
+
Search for each name in the first column and replace it:
|
|
100
|
+
|
|
101
|
+
| Removed | Use instead |
|
|
102
|
+
| --- | --- |
|
|
103
|
+
| `edit.submitAll()` | `edit.commitAll()`, then `edit.saveDrafts()` |
|
|
104
|
+
| `editing.onCommitDrafts` | `editing.onSaveDrafts` |
|
|
105
|
+
| `rows` and `added` in the `onSaveDrafts` payload | `updated` and `created` |
|
|
106
|
+
| `TMDataGridEditCommitDraftsArgs` | `TMDataGridSaveDraftsArgs` |
|
|
107
|
+
| `state.pendingCount` in a `TMDataGrid.DraftActions` slot | `state.draftCount` or `state.openCount` |
|
|
108
|
+
| `cellExport` on `TMDataGrid.Table` | `exportOptions` on `useTMDataGrid` |
|
|
109
|
+
| `exportGridToCsv` | `exportGrid` |
|
|
110
|
+
| `TMDataGridCellExportOptions`, `DEFAULT_CELL_EXPORT_OPTIONS`, `fromCellExportOptions` | `TMDataGridExportOptions`, `DEFAULT_EXPORT_OPTIONS` |
|
|
111
|
+
| `buildCellMatrix`, `buildGridCellMatrix`, `BuildCellMatrixArgs`, `TMDataGridCellMatrix` | `buildExportData`, `BuildExportDataArgs`, `TMDataGridExportData` |
|
|
112
|
+
| `toExcelCsv` | `csvExcelFormat` |
|
|
113
|
+
| `downloadTextFile` | `downloadFile` |
|
|
114
|
+
| `labels.exportCsv` | `labels.exportCells` |
|
|
115
|
+
|
|
116
|
+
Search for `onSaveDrafts` as well, and check what each callback reads off its
|
|
117
|
+
payload.
|
|
118
|
+
|
|
119
|
+
### submitAll
|
|
120
|
+
|
|
121
|
+
`submitAll()` was `commitAll()` followed by `saveDrafts()`. Call both, and
|
|
122
|
+
combine the results where one answer is needed:
|
|
123
|
+
|
|
124
|
+
```tsx
|
|
125
|
+
const committed = await grid.edit.commitAll();
|
|
126
|
+
const saved = await grid.edit.saveDrafts();
|
|
127
|
+
const ok = committed.ok && saved.ok;
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
### The CSV export options
|
|
131
|
+
|
|
132
|
+
`separator` and `decimalComma` move into a format; `includeHeaders` and
|
|
133
|
+
`fileName` stay in the options. `exportOptions` on the hook applies to every
|
|
134
|
+
export the grid offers, the cell-range menu included.
|
|
135
|
+
|
|
136
|
+
```tsx
|
|
137
|
+
// beta
|
|
138
|
+
<TMDataGrid.Table cellExport={{ separator: ",", decimalComma: false, fileName: "orders" }} />;
|
|
139
|
+
exportGridToCsv({ table, options: { separator: ",", decimalComma: false } });
|
|
140
|
+
|
|
141
|
+
// 2.0.0
|
|
142
|
+
const exportOptions = {
|
|
143
|
+
format: csvExcelFormat({ separator: ",", decimalComma: false }),
|
|
144
|
+
fileName: "orders",
|
|
145
|
+
} satisfies TMDataGridExportOptions;
|
|
146
|
+
|
|
147
|
+
const grid = useTMDataGrid({ data, columns, exportOptions });
|
|
148
|
+
await exportGrid({ table: grid.table, options: exportOptions });
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
### The matrix functions
|
|
152
|
+
|
|
153
|
+
The export functions now return values, not text. A format writes the text:
|
|
154
|
+
|
|
155
|
+
```tsx
|
|
156
|
+
// beta
|
|
157
|
+
const csv = toExcelCsv(buildGridCellMatrix({ table }), { separator: ";" });
|
|
158
|
+
downloadTextFile({ fileName: "export.csv", text: csv });
|
|
159
|
+
|
|
160
|
+
// 2.0.0
|
|
161
|
+
const data = buildExportData({ table });
|
|
162
|
+
const csv = await csvExcelFormat().write(data, { includeHeaders: true });
|
|
163
|
+
downloadFile({ fileName: "export.csv", content: csv, mimeType: "text/csv;charset=utf-8" });
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
For a cell range, pass `rows` and `bounds` to `buildExportData` instead of
|
|
167
|
+
`rows`, `columns` and `bounds` to `buildCellMatrix`. `toClipboardText(data)`
|
|
168
|
+
writes the tab-separated text for the clipboard.
|
|
169
|
+
|
|
170
|
+
Source: `packages/tmdatagrid/docs/migrating-to-2.md` (Replace removed names).
|
|
171
|
+
|
|
172
|
+
## 4. Remove annotations and casts from meta callbacks
|
|
173
|
+
|
|
174
|
+
The `row` that `meta.options` and `meta.edit.enabled` callbacks receive is
|
|
175
|
+
typed with the row type of `createTMDataGridColumnHelper<TData>()`:
|
|
176
|
+
`Row<TMDataGridFeatures, TData>`. A callback whose parameter is annotated with
|
|
177
|
+
the untyped row no longer compiles.
|
|
178
|
+
|
|
179
|
+
Search for: `options:` and `enabled:` inside column `meta`, and
|
|
180
|
+
`Row<TMDataGridFeatures, TMDataGridRowData>` or `as ` casts on `row.original`
|
|
181
|
+
next to them. Remove the annotation and the cast:
|
|
182
|
+
|
|
183
|
+
```tsx
|
|
184
|
+
// beta
|
|
185
|
+
meta: {
|
|
186
|
+
edit: {
|
|
187
|
+
enabled: (row: Row<TMDataGridFeatures, TMDataGridRowData>) =>
|
|
188
|
+
(row.original as Employee).status !== "Terminated",
|
|
189
|
+
},
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
// 2.0.0
|
|
193
|
+
meta: {
|
|
194
|
+
edit: { enabled: (row) => row.original.status !== "Terminated" },
|
|
195
|
+
}
|
|
196
|
+
```
|
|
197
|
+
|
|
198
|
+
Columns built without the helper keep the untyped row,
|
|
199
|
+
`Row<TMDataGridFeatures, TMDataGridRowData>`; leave those as they are.
|
|
200
|
+
|
|
201
|
+
Source: `packages/tmdatagrid/docs/migrating-to-2.md` (Remove annotations from meta callbacks).
|
|
202
|
+
|
|
203
|
+
## 5. Replace helpers that are no longer exported
|
|
204
|
+
|
|
205
|
+
These names are internal to the grid and are no longer exported from
|
|
206
|
+
`@jielga/tmdatagrid`. An import of one fails to compile. Search the imports
|
|
207
|
+
from `@jielga/tmdatagrid` for each:
|
|
208
|
+
|
|
209
|
+
| Removed | Use instead |
|
|
210
|
+
| --- | --- |
|
|
211
|
+
| `getDefaultOperator` | `getColumnDefaultOperator(column)` |
|
|
212
|
+
| `isColumnEditableForRow` | `edit.canEditCell(row, column)` |
|
|
213
|
+
| `isColumnReorderable` | `getColumnCapabilities(column, features).canReorder` |
|
|
214
|
+
| `measureColumnContentWidth` | `autosizeColumn` |
|
|
215
|
+
| `tmDataGridFeatures` | The `TMDataGridFeatures` type |
|
|
216
|
+
| `isSameCell`, `resolveCellMove`, `ResolveCellMoveArgs`, `TMDataGridCellCoords`, `TMDataGridCellNav` | No public replacement; internal to the grid. |
|
|
217
|
+
| `boundsCellCount`, `boundsEdges`, `isWithinBounds` | No public replacement; internal to the grid. |
|
|
218
|
+
| `getColumnFilterControl` | No public replacement; internal to the grid. |
|
|
219
|
+
| `TMDataGridColumnLayout` | No public replacement; internal to the grid. |
|
|
220
|
+
|
|
221
|
+
Source: `packages/tmdatagrid/docs/migrating-to-2.md` (Replace un-exported helpers).
|
|
222
|
+
|
|
223
|
+
## 6. Check the behaviour changes
|
|
224
|
+
|
|
225
|
+
- Under `editing.draft` without `onSaveDrafts`, a deletion whose
|
|
226
|
+
`onRowDelete` throws keeps its deletion mark and is reported in `kept`. In
|
|
227
|
+
the beta, `saveDrafts()` rejected and the mark was lost. Search for a
|
|
228
|
+
`try` / `catch` around `saveDrafts()` that expected the rejection, and read
|
|
229
|
+
`kept` instead.
|
|
230
|
+
- The Swedish labels `TMDATAGRID_LABELS_SV` say "Välj" for selecting: "Välj
|
|
231
|
+
alla", "Välj alla rader", "Välj rad" and "Välj grupp". Update tests that find
|
|
232
|
+
these controls by their Swedish name.
|
|
233
|
+
|
|
234
|
+
Source: `packages/tmdatagrid/docs/migrating-to-2.md` (Behaviour changes).
|
|
235
|
+
|
|
236
|
+
## 7. Verify
|
|
237
|
+
|
|
238
|
+
Run the project's typecheck: an import of a removed or un-exported name, and a
|
|
239
|
+
meta callback annotated with the untyped row, fail there. Then run the tests
|
|
240
|
+
that save or commit edits, since the truthiness check of step 1 and the
|
|
241
|
+
behaviour changes of step 6 compile.
|
|
242
|
+
|
|
243
|
+
See also: the `editing` skill for the result objects and the draft store, and
|
|
244
|
+
the `data` skill for the export API.
|
package/skills/options/SKILL.md
CHANGED
|
@@ -14,9 +14,10 @@ description: >
|
|
|
14
14
|
metadata:
|
|
15
15
|
type: core
|
|
16
16
|
library: '@jielga/tmdatagrid'
|
|
17
|
-
library_version: '2.0.
|
|
17
|
+
library_version: '2.0.1'
|
|
18
18
|
sources:
|
|
19
19
|
- 'Jielga/TMDataGrid:packages/tmdatagrid/docs/use-tm-data-grid.md'
|
|
20
|
+
- 'Jielga/TMDataGrid:packages/tmdatagrid/docs/persistence.md'
|
|
20
21
|
- 'Jielga/TMDataGrid:packages/tmdatagrid/src/useTMDataGrid.tsx'
|
|
21
22
|
- 'Jielga/TMDataGrid:packages/tmdatagrid/src/core/persistence.ts'
|
|
22
23
|
---
|
|
@@ -30,6 +31,8 @@ const grid = useTMDataGrid<TData>(options);
|
|
|
30
31
|
// { table, ui, edit, features, labels, resetSettings, scrollToRow }
|
|
31
32
|
```
|
|
32
33
|
|
|
34
|
+
The signature is
|
|
35
|
+
`useTMDataGrid<TData>(options: UseTMDataGridOptions<TData>): TMDataGridApi<TData>`.
|
|
33
36
|
Spread the result onto `TMDataGrid`.
|
|
34
37
|
|
|
35
38
|
## Options
|
|
@@ -124,9 +127,9 @@ changes. Separate keys let one group be cleared without touching the other.
|
|
|
124
127
|
|
|
125
128
|
| Field | Type | Default | Description |
|
|
126
129
|
| --- | --- | --- | --- |
|
|
127
|
-
| `dataKey` | `string \| [string, DataSlice[]]` | – | Storage key for the data group. |
|
|
128
|
-
| `settingsKey` | `string \| [string, SettingsSlice[]]` | – | Storage key for the settings group. |
|
|
129
|
-
| `storageMode` | `"localStorage" \| "sessionStorage"` | `"localStorage"` | Storage area. |
|
|
130
|
+
| `dataKey` | `TMDataGridPersistKey<TMDataGridDataSlice>`: `string \| [string, DataSlice[]]` | – | Storage key for the data group. |
|
|
131
|
+
| `settingsKey` | `TMDataGridPersistKey<TMDataGridSettingsSlice>`: `string \| [string, SettingsSlice[]]` | – | Storage key for the settings group. |
|
|
132
|
+
| `storageMode` | `TMDataGridStorageMode`: `"localStorage" \| "sessionStorage"` | `"localStorage"` | Storage area. `"sessionStorage"` is per tab. |
|
|
130
133
|
| `serialize` | `(value) => string` | `JSON.stringify` | Serializes before storing. |
|
|
131
134
|
| `deserialize` | `(value: string) => unknown` | `JSON.parse` | Parses a stored payload. |
|
|
132
135
|
|
|
@@ -168,7 +171,8 @@ survives the data changing under it the way the column layout does. `expanded` i
|
|
|
168
171
|
a data slice for the opposite reason.
|
|
169
172
|
|
|
170
173
|
`DATA_STATE_SLICES` and `SETTINGS_STATE_SLICES` export the same values. Slice
|
|
171
|
-
names are typed per group,
|
|
174
|
+
names are typed per group, `TMDataGridDataSlice` and `TMDataGridSettingsSlice`,
|
|
175
|
+
so only valid names are accepted.
|
|
172
176
|
|
|
173
177
|
Restoring happens once on mount through `initialState`. Writing is a subscription
|
|
174
178
|
to the table store, so state changed directly through the table API is persisted
|
|
@@ -176,12 +180,20 @@ too. Only selected slices are read back, and unrecognised keys are ignored. All
|
|
|
176
180
|
storage access is guarded - if storage is unavailable, disabled or full,
|
|
177
181
|
persistence is skipped rather than throwing.
|
|
178
182
|
|
|
183
|
+
A payload from another version is dropped whole, not migrated. Payloads carry
|
|
184
|
+
the exported `PERSIST_PAYLOAD_VERSION`; anything else, including everything
|
|
185
|
+
written by a 0.x build, is discarded. Restored state is realigned against the
|
|
186
|
+
columns that exist: entries naming a column removed between deploys are
|
|
187
|
+
dropped.
|
|
188
|
+
|
|
189
|
+
Source: `packages/tmdatagrid/docs/persistence.md` (Behaviour).
|
|
190
|
+
|
|
179
191
|
## Return value
|
|
180
192
|
|
|
181
193
|
| Field | Type | Description |
|
|
182
194
|
| --- | --- | --- |
|
|
183
195
|
| `table` | `Table<TMDataGridFeatures, TData>` | The TanStack table instance. |
|
|
184
|
-
| `ui` | `Store<TMDataGridUiState, TMDataGridUiActions>` | State of the filter and column panels. |
|
|
196
|
+
| `ui` | `TMDataGridUiStore`: `Store<TMDataGridUiState, TMDataGridUiActions>` | State of the filter and column panels. |
|
|
185
197
|
| `edit` | `TMDataGridEditApi` | The edit engine, inert until `editing` is set. See the `editing` skill. |
|
|
186
198
|
| `features` | `TMDataGridFeatureFlags` | Table-level feature switches, re-read on each render. |
|
|
187
199
|
| `labels` | `TMDataGridLabels` | The resolved label set, overrides merged over English. |
|
package/skills/rows/SKILL.md
CHANGED
|
@@ -17,7 +17,7 @@ description: >
|
|
|
17
17
|
metadata:
|
|
18
18
|
type: core
|
|
19
19
|
library: '@jielga/tmdatagrid'
|
|
20
|
-
library_version: '2.0.
|
|
20
|
+
library_version: '2.0.1'
|
|
21
21
|
sources:
|
|
22
22
|
- 'Jielga/TMDataGrid:packages/tmdatagrid/docs/row-selection.md'
|
|
23
23
|
- 'Jielga/TMDataGrid:packages/tmdatagrid/docs/row-interaction.md'
|
|
@@ -6,7 +6,7 @@ Reference for the `rows` skill.
|
|
|
6
6
|
|
|
7
7
|
| Name | Kind | Type | Default | What it does |
|
|
8
8
|
| --- | --- | --- | --- | --- |
|
|
9
|
-
| `selectionMode` | Option | `"checkbox" \| "row" \| "checkboxAndHighlight" \| "highlight"` | `"checkbox"` | What selecting looks like and what a row click does. |
|
|
9
|
+
| `selectionMode` | Option | `TMDataGridSelectionMode`: `"checkbox" \| "row" \| "checkboxAndHighlight" \| "highlight"` | `"checkbox"` | What selecting looks like and what a row click does. |
|
|
10
10
|
| `enableRowSelection` | Table option | `boolean \| ((row) => boolean)` | `true` | `false` removes the checkbox column and row-click selection. |
|
|
11
11
|
| `enableMultiRowSelection` | Table option | `boolean` | `true` | `false` limits the selection to one row and drops group checkboxes. |
|
|
12
12
|
| `showSelectedBackground` | Option | `boolean` | Follows the mode | Whether selected rows take a background tint. |
|
|
@@ -14,7 +14,8 @@ Reference for the `rows` skill.
|
|
|
14
14
|
| `onHighlightedRowChange` | Callback | `(rowId: string \| null) => void` | – | Fires when the highlight moves. |
|
|
15
15
|
| `SELECT_COLUMN_ID` | Export | `"__select__"` | – | Id of the generated checkbox column. |
|
|
16
16
|
| `getSelectableRowIds` | Export | `(table) => string[]` | – | Ids the header checkbox would select. |
|
|
17
|
-
| `resolveRowSelectionClick` | Export | `(args) => ResolvedRowSelection` | – | The desktop-list click rules, for a custom surface. |
|
|
17
|
+
| `resolveRowSelectionClick` | Export | `(args: ResolveRowSelectionClickArgs) => ResolvedRowSelection` | – | The desktop-list click rules, for a custom surface. |
|
|
18
|
+
| `ResolveRowSelectionClickArgs` · `TMDataGridRowClickModifiers` | Types | `{ rows, rowId, anchorRowId, modifiers, selection }` · `{ toggle, extend }` | – | What `resolveRowSelectionClick` takes, and its `modifiers`. |
|
|
18
19
|
| `getDisplayedRows` | Export | `(table) => Row[]` | – | The rows currently on screen, paging respected. |
|
|
19
20
|
| `isPagingActive` | Export | `(table) => boolean` | – | Whether a pager is in play. |
|
|
20
21
|
|
|
@@ -31,11 +32,13 @@ All are props of `TMDataGrid.Table`, not hook options.
|
|
|
31
32
|
| `onCellClick` | `(args) => void` | Cell click. `args` is `TMDataGridCellEventArgs`. |
|
|
32
33
|
| `onCellDoubleClick` | `(args) => void` | Cell double-click. |
|
|
33
34
|
| `onCellContextMenu` | `(args) => void` | Cell right-click. |
|
|
34
|
-
| `renderRowContextMenu` | `(
|
|
35
|
-
| `renderColumnMenuItems` | `(
|
|
35
|
+
| `renderRowContextMenu` | `TMDataGridRowContextMenuRenderer`: `(args: TMDataGridRowContextMenuArgs) => ReactNode` | Contents of the row's context menu. `null` for no menu. Reading `internalItems` hands the composition over. |
|
|
36
|
+
| `renderColumnMenuItems` | `TMDataGridColumnMenuItemsRenderer`: `(args: TMDataGridColumnMenuItemsArgs) => ReactNode[]` | Contents of a column's menu. An empty list removes the button. |
|
|
36
37
|
| `rowContextMenuProps` | `MenuProps` | Passed to the Mantine `Menu` unchanged, apart from its open state. |
|
|
37
38
|
|
|
38
|
-
`TMDataGridCellEventArgs` is `{ cell, row, column, event }`.
|
|
39
|
+
`TMDataGridCellEventArgs` is `{ cell, row, column, event }`.
|
|
40
|
+
`TMDataGridRowContextMenuArgs` is `{ table, row, cell, close, internalItems }`,
|
|
41
|
+
and `TMDataGridColumnMenuItemsArgs` is `{ column, table, internalItems }`. The context-menu
|
|
39
42
|
slot's `cell` is `null` only when a custom cell renderer stopped the
|
|
40
43
|
event. One `Menu` serves the whole body rather than one per row: a closed
|
|
41
44
|
Mantine `Popover` still runs its hooks on every render, and the virtualized body
|
|
@@ -76,13 +79,14 @@ Row data attributes:
|
|
|
76
79
|
|
|
77
80
|
| Name | Kind | Type | Default | What it does |
|
|
78
81
|
| --- | --- | --- | --- | --- |
|
|
79
|
-
| `renderDetails` | Option | `(
|
|
82
|
+
| `renderDetails` | Option | `TMDataGridDetailsRenderer`: `(args: TMDataGridDetailsArgs) => ReactNode` | – | Contents of the panel. Setting it adds the lane. `TMDataGridDetailsArgs` is `{ row, table }`. |
|
|
80
83
|
| `renderDetailsEstHeight` | Option | `number` | `160` | Height the virtualizer assumes for an unmeasured panel. |
|
|
81
84
|
| `initialState.expanded` | Table option | `ExpandedState` | `{}` | Rows open at mount. A `data` slice, so it persists. |
|
|
82
85
|
| `autoResetExpanded` | Table option | `boolean` | `true` | `false` keeps panels open when `data` changes. |
|
|
83
86
|
| `DETAILS_COLUMN_ID` | Export | `"__details__"` | – | Id of the generated chevron column. |
|
|
84
87
|
| `resolveExpandAll` | Export | `(args) => ExpandedState` | – | Expand or collapse every group, or every panel, but not both. |
|
|
85
88
|
| `areAllRowsExpanded` | Export | `(args) => boolean` | – | Whether every row of one target is open. |
|
|
89
|
+
| `TMDataGridExpandAllArgs` · `TMDataGridExpandTarget` | Types | `{ rows, expanded, target }` · `"groups" \| "details"` | – | What `areAllRowsExpanded` takes (`resolveExpandAll` also takes `expand`), and its `target`. |
|
|
86
90
|
| `data-dg-part="details"` | Data attribute | – | – | The panel element, carrying the row's `data-row-id`. |
|
|
87
91
|
|
|
88
92
|
One `expanded` state opens two unrelated things - a group row into its children,
|
|
@@ -15,7 +15,7 @@ description: >
|
|
|
15
15
|
metadata:
|
|
16
16
|
type: core
|
|
17
17
|
library: '@jielga/tmdatagrid'
|
|
18
|
-
library_version: '2.0.
|
|
18
|
+
library_version: '2.0.1'
|
|
19
19
|
sources:
|
|
20
20
|
- 'Jielga/TMDataGrid:packages/tmdatagrid/docs/server-side.md'
|
|
21
21
|
- 'Jielga/TMDataGrid:packages/tmdatagrid/docs/server-query.md'
|
package/skills/testing/SKILL.md
CHANGED
|
@@ -12,7 +12,7 @@ description: >
|
|
|
12
12
|
metadata:
|
|
13
13
|
type: core
|
|
14
14
|
library: '@jielga/tmdatagrid'
|
|
15
|
-
library_version: '2.0.
|
|
15
|
+
library_version: '2.0.1'
|
|
16
16
|
sources:
|
|
17
17
|
- 'Jielga/TMDataGrid:packages/tmdatagrid/docs/testing.md'
|
|
18
18
|
- 'Jielga/TMDataGrid:packages/tmdatagrid/test/gallery/main.tsx'
|
|
@@ -12,7 +12,7 @@ description: >
|
|
|
12
12
|
metadata:
|
|
13
13
|
type: core
|
|
14
14
|
library: '@jielga/tmdatagrid'
|
|
15
|
-
library_version: '2.0.
|
|
15
|
+
library_version: '2.0.1'
|
|
16
16
|
sources:
|
|
17
17
|
- 'Jielga/TMDataGrid:packages/tmdatagrid/docs/testing.md'
|
|
18
18
|
- 'Jielga/TMDataGrid:packages/tmdatagrid/docs/editing.md'
|