@jielga/tmdatagrid 2.1.1 → 2.1.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/README.md +2 -2
- package/dist/index.js +743 -711
- package/dist/index.js.map +1 -1
- package/docs/column-menu.md +1 -1
- package/docs/localization.md +1 -1
- package/docs/row-details.md +15 -0
- package/docs/row-selection.md +5 -0
- package/docs/testing.md +6 -2
- package/docs/use-tm-data-grid.md +1 -1
- package/package.json +4 -4
- package/skills/appearance/SKILL.md +8 -8
- package/skills/cell-selection/SKILL.md +5 -5
- package/skills/columns/SKILL.md +7 -7
- package/skills/data/SKILL.md +8 -8
- package/skills/editing/SKILL.md +9 -9
- package/skills/filtering/SKILL.md +5 -5
- package/skills/getting-started/SKILL.md +7 -7
- package/skills/grouping/SKILL.md +5 -5
- package/skills/migrating-to-2/SKILL.md +3 -3
- package/skills/options/SKILL.md +5 -5
- package/skills/rows/SKILL.md +8 -8
- package/skills/server-side/SKILL.md +4 -4
- package/skills/testing/SKILL.md +5 -5
- package/skills/testing-components/SKILL.md +5 -5
- package/skills/testing-editing/SKILL.md +6 -6
- package/src/components/TMDataGridDetailsColumn.tsx +3 -0
- package/src/components/TMDataGridSelectColumn.tsx +15 -1
- package/src/components/TMDataGridTable.tsx +20 -1
- package/src/core/expanding.ts +4 -1
- package/src/core/labels.ts +3 -3
- package/src/core/labelsSv.ts +22 -22
- package/src/core/quickSearch.ts +52 -0
- package/src/useTMDataGrid.tsx +33 -18
package/docs/column-menu.md
CHANGED
|
@@ -14,7 +14,7 @@ The menu shows each group only when the column supports it:
|
|
|
14
14
|
|
|
15
15
|
| Item | Shown when |
|
|
16
16
|
| --- | --- |
|
|
17
|
-
| Sort
|
|
17
|
+
| Sort ascending · Sort descending | The column can sort. See [Sorting](/docs/sorting) |
|
|
18
18
|
| Filter | The column can filter and `filters.inHeader` is off. See [Filtering](/docs/filtering) |
|
|
19
19
|
| Group by · Ungroup | The column can group. See [Grouping](/docs/grouping) |
|
|
20
20
|
| Expand all groups · Collapse all groups | Grouping is active |
|
package/docs/localization.md
CHANGED
package/docs/row-details.md
CHANGED
|
@@ -44,6 +44,20 @@ every panel at once.
|
|
|
44
44
|
|
|
45
45
|
Group rows get no chevron: they expand into their children from the tree lane.
|
|
46
46
|
|
|
47
|
+
To give only some rows a panel, set `getRowCanExpand`:
|
|
48
|
+
|
|
49
|
+
```tsx
|
|
50
|
+
const grid = useTMDataGrid({
|
|
51
|
+
data,
|
|
52
|
+
columns,
|
|
53
|
+
renderDetails: ({ row }) => <Notes notes={row.original.notes} />,
|
|
54
|
+
getRowCanExpand: (row) => row.original.notes.length > 0,
|
|
55
|
+
});
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
A row it turns down gets no chevron, and the header control skips it.
|
|
59
|
+
It never applies to a group row.
|
|
60
|
+
|
|
47
61
|
## Opening a row from elsewhere
|
|
48
62
|
|
|
49
63
|
Which rows are open is TanStack's own `expanded` state, so anything can open
|
|
@@ -113,6 +127,7 @@ Group rows have no panel. Expanding one opens its children.
|
|
|
113
127
|
| --- | --- | --- | --- | --- |
|
|
114
128
|
| `renderDetails` | Option | `({ row, table }) => ReactNode` | – | Contents of the panel. Setting it adds the lane. |
|
|
115
129
|
| `TMDataGridDetailsArgs` | Type | `{ row, table }` | – | What `renderDetails` receives. |
|
|
130
|
+
| `getRowCanExpand` | Table option | `(row) => boolean` | – | Determines which data rows have a panel. If not set, every data row has one. Group rows always expand. |
|
|
116
131
|
| `renderDetailsEstHeight` | Option | `number` | `160` | Height the virtualizer assumes for an unmeasured panel. |
|
|
117
132
|
| `detailsColumnPosition` | Option | `"left" \| "right"` | `"left"` | Which edge the lane is pinned to. `"right"` places it after every column, inside the edit lane. |
|
|
118
133
|
| `initialState.expanded` | Table option | `ExpandedState` | `{}` | Rows open at mount. A data slice, so it persists. |
|
package/docs/row-selection.md
CHANGED
|
@@ -40,6 +40,11 @@ focusable in this mode, and Space or Enter toggles the focused row.
|
|
|
40
40
|
selection in any mode. It has no effect under `"highlight"`, which selects
|
|
41
41
|
nothing.
|
|
42
42
|
|
|
43
|
+
As a predicate, `enableRowSelection` decides row by row:
|
|
44
|
+
|
|
45
|
+
- a row it turns down has a disabled checkbox, and the header checkbox does not tick it
|
|
46
|
+
- unticking the header checkbox clears every row the filters show, including a turned-down row ticked through `initialState` or `setRowSelection`
|
|
47
|
+
|
|
43
48
|
## The highlighted row
|
|
44
49
|
|
|
45
50
|
The highlighted row is state of its own rather than a slice of `rowSelection`,
|
package/docs/testing.md
CHANGED
|
@@ -310,7 +310,11 @@ export class DataGrid {
|
|
|
310
310
|
await this.part("search").fill(text);
|
|
311
311
|
}
|
|
312
312
|
|
|
313
|
-
/**
|
|
313
|
+
/**
|
|
314
|
+
* Clicks a sortable header once. Each click steps the sort: off, first
|
|
315
|
+
* direction, the other direction, off. The first direction is ascending for
|
|
316
|
+
* text and descending for numbers, unless the column sets `sortDescFirst`.
|
|
317
|
+
*/
|
|
314
318
|
async sortBy(columnId: string): Promise<void> {
|
|
315
319
|
// The header, not its `header-sort` arrow: the arrow is display: none
|
|
316
320
|
// until the header is hovered, and a click on it also reaches the
|
|
@@ -724,7 +728,7 @@ declare module "@playwright/test" {
|
|
|
724
728
|
A clipboard test needs `cellSelection` on in the story and the `permissions` above in the project; it selects a range, presses `Control+C` and reads `navigator.clipboard.readText()` through `page.evaluate`.
|
|
725
729
|
The copied text separates cells with a tab and rows with `\r\n`.
|
|
726
730
|
|
|
727
|
-
The grid's own component suite is written this way: the stories, the gallery and the specs are in the [repository](https://github.com/Jielga/
|
|
731
|
+
The grid's own component suite is written this way: the stories, the gallery and the specs are in the [repository](https://github.com/Jielga/react/tree/main/playwright).
|
|
728
732
|
|
|
729
733
|
## React Testing Library
|
|
730
734
|
|
package/docs/use-tm-data-grid.md
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jielga/tmdatagrid",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.3",
|
|
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",
|
|
@@ -9,12 +9,12 @@
|
|
|
9
9
|
],
|
|
10
10
|
"repository": {
|
|
11
11
|
"type": "git",
|
|
12
|
-
"url": "git+https://github.com/Jielga/
|
|
12
|
+
"url": "git+https://github.com/Jielga/react.git",
|
|
13
13
|
"directory": "packages/tmdatagrid"
|
|
14
14
|
},
|
|
15
|
-
"homepage": "https://jielga.github.io/
|
|
15
|
+
"homepage": "https://jielga.github.io/react/",
|
|
16
16
|
"bugs": {
|
|
17
|
-
"url": "https://github.com/Jielga/
|
|
17
|
+
"url": "https://github.com/Jielga/react/issues"
|
|
18
18
|
},
|
|
19
19
|
"keywords": [
|
|
20
20
|
"react",
|
|
@@ -18,14 +18,14 @@ description: >
|
|
|
18
18
|
metadata:
|
|
19
19
|
type: core
|
|
20
20
|
library: '@jielga/tmdatagrid'
|
|
21
|
-
library_version: '2.1.
|
|
21
|
+
library_version: '2.1.3'
|
|
22
22
|
sources:
|
|
23
|
-
- 'Jielga/
|
|
24
|
-
- 'Jielga/
|
|
25
|
-
- 'Jielga/
|
|
26
|
-
- 'Jielga/
|
|
27
|
-
- 'Jielga/
|
|
28
|
-
- 'Jielga/
|
|
23
|
+
- 'Jielga/react:packages/tmdatagrid/docs/styling.md'
|
|
24
|
+
- 'Jielga/react:packages/tmdatagrid/docs/toolbar.md'
|
|
25
|
+
- 'Jielga/react:packages/tmdatagrid/docs/menu.md'
|
|
26
|
+
- 'Jielga/react:packages/tmdatagrid/docs/localization.md'
|
|
27
|
+
- 'Jielga/react:packages/tmdatagrid/src/core/capabilities.ts'
|
|
28
|
+
- 'Jielga/react:packages/tmdatagrid/src/core/labels.ts'
|
|
29
29
|
---
|
|
30
30
|
|
|
31
31
|
# TMDataGrid - Appearance, toolbar and labels
|
|
@@ -242,7 +242,7 @@ where its grammar requires:
|
|
|
242
242
|
|
|
243
243
|
```tsx
|
|
244
244
|
const labels = {
|
|
245
|
-
groupBy: (column) => `Gruppera
|
|
245
|
+
groupBy: (column) => `Gruppera efter ${column}`,
|
|
246
246
|
pageRange: ({ from, to, total }) => `${from}–${to} av ${total}`,
|
|
247
247
|
} satisfies TMDataGridLabelsOverride;
|
|
248
248
|
```
|
|
@@ -14,12 +14,12 @@ description: >
|
|
|
14
14
|
metadata:
|
|
15
15
|
type: core
|
|
16
16
|
library: '@jielga/tmdatagrid'
|
|
17
|
-
library_version: '2.1.
|
|
17
|
+
library_version: '2.1.3'
|
|
18
18
|
sources:
|
|
19
|
-
- 'Jielga/
|
|
20
|
-
- 'Jielga/
|
|
21
|
-
- 'Jielga/
|
|
22
|
-
- 'Jielga/
|
|
19
|
+
- 'Jielga/react:packages/tmdatagrid/docs/cell-selection.md'
|
|
20
|
+
- 'Jielga/react:packages/tmdatagrid/src/core/cellNavigation.ts'
|
|
21
|
+
- 'Jielga/react:packages/tmdatagrid/src/core/cellRange.ts'
|
|
22
|
+
- 'Jielga/react:packages/tmdatagrid/src/core/export.ts'
|
|
23
23
|
---
|
|
24
24
|
|
|
25
25
|
# TMDataGrid - Cell selection
|
package/skills/columns/SKILL.md
CHANGED
|
@@ -16,14 +16,14 @@ description: >
|
|
|
16
16
|
metadata:
|
|
17
17
|
type: core
|
|
18
18
|
library: '@jielga/tmdatagrid'
|
|
19
|
-
library_version: '2.1.
|
|
19
|
+
library_version: '2.1.3'
|
|
20
20
|
sources:
|
|
21
|
-
- 'Jielga/
|
|
22
|
-
- 'Jielga/
|
|
23
|
-
- 'Jielga/
|
|
24
|
-
- 'Jielga/
|
|
25
|
-
- 'Jielga/
|
|
26
|
-
- 'Jielga/
|
|
21
|
+
- 'Jielga/react:packages/tmdatagrid/docs/columns.md'
|
|
22
|
+
- 'Jielga/react:packages/tmdatagrid/docs/column-layout.md'
|
|
23
|
+
- 'Jielga/react:packages/tmdatagrid/docs/sorting.md'
|
|
24
|
+
- 'Jielga/react:packages/tmdatagrid/src/core/columnUtils.ts'
|
|
25
|
+
- 'Jielga/react:packages/tmdatagrid/src/core/columnOrdering.ts'
|
|
26
|
+
- 'Jielga/react:packages/tmdatagrid/src/core/autosize.ts'
|
|
27
27
|
---
|
|
28
28
|
|
|
29
29
|
# TMDataGrid - Columns
|
package/skills/data/SKILL.md
CHANGED
|
@@ -18,15 +18,15 @@ description: >
|
|
|
18
18
|
metadata:
|
|
19
19
|
type: core
|
|
20
20
|
library: '@jielga/tmdatagrid'
|
|
21
|
-
library_version: '2.1.
|
|
21
|
+
library_version: '2.1.3'
|
|
22
22
|
sources:
|
|
23
|
-
- 'Jielga/
|
|
24
|
-
- 'Jielga/
|
|
25
|
-
- 'Jielga/
|
|
26
|
-
- 'Jielga/
|
|
27
|
-
- 'Jielga/
|
|
28
|
-
- 'Jielga/
|
|
29
|
-
- 'Jielga/
|
|
23
|
+
- 'Jielga/react:packages/tmdatagrid/docs/pagination.md'
|
|
24
|
+
- 'Jielga/react:packages/tmdatagrid/docs/scrolling.md'
|
|
25
|
+
- 'Jielga/react:packages/tmdatagrid/docs/loading-and-empty.md'
|
|
26
|
+
- 'Jielga/react:packages/tmdatagrid/docs/export.md'
|
|
27
|
+
- 'Jielga/react:packages/tmdatagrid/src/components/TMDataGridFooter.tsx'
|
|
28
|
+
- 'Jielga/react:packages/tmdatagrid/src/core/pagination.ts'
|
|
29
|
+
- 'Jielga/react:packages/tmdatagrid/src/core/export.ts'
|
|
30
30
|
---
|
|
31
31
|
|
|
32
32
|
# TMDataGrid - Pagination, scrolling and empty states
|
package/skills/editing/SKILL.md
CHANGED
|
@@ -18,16 +18,16 @@ description: >
|
|
|
18
18
|
metadata:
|
|
19
19
|
type: core
|
|
20
20
|
library: '@jielga/tmdatagrid'
|
|
21
|
-
library_version: '2.1.
|
|
21
|
+
library_version: '2.1.3'
|
|
22
22
|
sources:
|
|
23
|
-
- 'Jielga/
|
|
24
|
-
- 'Jielga/
|
|
25
|
-
- 'Jielga/
|
|
26
|
-
- 'Jielga/
|
|
27
|
-
- 'Jielga/
|
|
28
|
-
- 'Jielga/
|
|
29
|
-
- 'Jielga/
|
|
30
|
-
- 'Jielga/
|
|
23
|
+
- 'Jielga/react:packages/tmdatagrid/docs/editing.md'
|
|
24
|
+
- 'Jielga/react:packages/tmdatagrid/docs/draft-store.md'
|
|
25
|
+
- 'Jielga/react:packages/tmdatagrid/docs/adding-rows.md'
|
|
26
|
+
- 'Jielga/react:packages/tmdatagrid/docs/query-builder.md'
|
|
27
|
+
- 'Jielga/react:packages/tmdatagrid/docs/editors.md'
|
|
28
|
+
- 'Jielga/react:packages/tmdatagrid/docs/portfolio-rebalancer.md'
|
|
29
|
+
- 'Jielga/react:packages/tmdatagrid/src/core/editEngine.ts'
|
|
30
|
+
- 'Jielga/react:packages/tmdatagrid/src/useTMDataGrid.tsx'
|
|
31
31
|
---
|
|
32
32
|
|
|
33
33
|
# TMDataGrid - Editing
|
|
@@ -18,12 +18,12 @@ description: >
|
|
|
18
18
|
metadata:
|
|
19
19
|
type: core
|
|
20
20
|
library: '@jielga/tmdatagrid'
|
|
21
|
-
library_version: '2.1.
|
|
21
|
+
library_version: '2.1.3'
|
|
22
22
|
sources:
|
|
23
|
-
- 'Jielga/
|
|
24
|
-
- 'Jielga/
|
|
25
|
-
- 'Jielga/
|
|
26
|
-
- 'Jielga/
|
|
23
|
+
- 'Jielga/react:packages/tmdatagrid/docs/filtering.md'
|
|
24
|
+
- 'Jielga/react:packages/tmdatagrid/docs/quick-search.md'
|
|
25
|
+
- 'Jielga/react:packages/tmdatagrid/src/core/filterOperators.ts'
|
|
26
|
+
- 'Jielga/react:packages/tmdatagrid/src/core/quickSearch.ts'
|
|
27
27
|
---
|
|
28
28
|
|
|
29
29
|
# TMDataGrid - Filtering
|
|
@@ -13,14 +13,14 @@ description: >
|
|
|
13
13
|
metadata:
|
|
14
14
|
type: core
|
|
15
15
|
library: '@jielga/tmdatagrid'
|
|
16
|
-
library_version: '2.1.
|
|
16
|
+
library_version: '2.1.3'
|
|
17
17
|
sources:
|
|
18
|
-
- 'Jielga/
|
|
19
|
-
- 'Jielga/
|
|
20
|
-
- 'Jielga/
|
|
21
|
-
- 'Jielga/
|
|
22
|
-
- 'Jielga/
|
|
23
|
-
- 'Jielga/
|
|
18
|
+
- 'Jielga/react:packages/tmdatagrid/docs/getting-started.md'
|
|
19
|
+
- 'Jielga/react:packages/tmdatagrid/docs/anatomy.md'
|
|
20
|
+
- 'Jielga/react:packages/tmdatagrid/docs/components.md'
|
|
21
|
+
- 'Jielga/react:packages/tmdatagrid/docs/card-view.md'
|
|
22
|
+
- 'Jielga/react:packages/tmdatagrid/src/components/TMDataGrid.tsx'
|
|
23
|
+
- 'Jielga/react:packages/tmdatagrid/src/core/sizes.ts'
|
|
24
24
|
---
|
|
25
25
|
|
|
26
26
|
# TMDataGrid - Getting started
|
package/skills/grouping/SKILL.md
CHANGED
|
@@ -14,12 +14,12 @@ description: >
|
|
|
14
14
|
metadata:
|
|
15
15
|
type: core
|
|
16
16
|
library: '@jielga/tmdatagrid'
|
|
17
|
-
library_version: '2.1.
|
|
17
|
+
library_version: '2.1.3'
|
|
18
18
|
sources:
|
|
19
|
-
- 'Jielga/
|
|
20
|
-
- 'Jielga/
|
|
21
|
-
- 'Jielga/
|
|
22
|
-
- 'Jielga/
|
|
19
|
+
- 'Jielga/react:packages/tmdatagrid/docs/grouping.md'
|
|
20
|
+
- 'Jielga/react:packages/tmdatagrid/docs/summary-row.md'
|
|
21
|
+
- 'Jielga/react:packages/tmdatagrid/src/core/grouping.ts'
|
|
22
|
+
- 'Jielga/react:packages/tmdatagrid/src/core/summary.ts'
|
|
23
23
|
---
|
|
24
24
|
|
|
25
25
|
# TMDataGrid - Grouping and totals
|
|
@@ -15,10 +15,10 @@ description: >
|
|
|
15
15
|
metadata:
|
|
16
16
|
type: lifecycle
|
|
17
17
|
library: '@jielga/tmdatagrid'
|
|
18
|
-
library_version: '2.1.
|
|
18
|
+
library_version: '2.1.3'
|
|
19
19
|
sources:
|
|
20
|
-
- 'Jielga/
|
|
21
|
-
- 'Jielga/
|
|
20
|
+
- 'Jielga/react:packages/tmdatagrid/docs/migrating-to-2.md'
|
|
21
|
+
- 'Jielga/react:packages/tmdatagrid/src/index.ts'
|
|
22
22
|
---
|
|
23
23
|
|
|
24
24
|
# TMDataGrid - Migrating from the 2.0 beta to 2.0.0
|
package/skills/options/SKILL.md
CHANGED
|
@@ -14,12 +14,12 @@ description: >
|
|
|
14
14
|
metadata:
|
|
15
15
|
type: core
|
|
16
16
|
library: '@jielga/tmdatagrid'
|
|
17
|
-
library_version: '2.1.
|
|
17
|
+
library_version: '2.1.3'
|
|
18
18
|
sources:
|
|
19
|
-
- 'Jielga/
|
|
20
|
-
- 'Jielga/
|
|
21
|
-
- 'Jielga/
|
|
22
|
-
- 'Jielga/
|
|
19
|
+
- 'Jielga/react:packages/tmdatagrid/docs/use-tm-data-grid.md'
|
|
20
|
+
- 'Jielga/react:packages/tmdatagrid/docs/persistence.md'
|
|
21
|
+
- 'Jielga/react:packages/tmdatagrid/src/useTMDataGrid.tsx'
|
|
22
|
+
- 'Jielga/react:packages/tmdatagrid/src/core/persistence.ts'
|
|
23
23
|
---
|
|
24
24
|
|
|
25
25
|
# TMDataGrid - useTMDataGrid
|
package/skills/rows/SKILL.md
CHANGED
|
@@ -17,15 +17,15 @@ description: >
|
|
|
17
17
|
metadata:
|
|
18
18
|
type: core
|
|
19
19
|
library: '@jielga/tmdatagrid'
|
|
20
|
-
library_version: '2.1.
|
|
20
|
+
library_version: '2.1.3'
|
|
21
21
|
sources:
|
|
22
|
-
- 'Jielga/
|
|
23
|
-
- 'Jielga/
|
|
24
|
-
- 'Jielga/
|
|
25
|
-
- 'Jielga/
|
|
26
|
-
- 'Jielga/
|
|
27
|
-
- 'Jielga/
|
|
28
|
-
- 'Jielga/
|
|
22
|
+
- 'Jielga/react:packages/tmdatagrid/docs/row-selection.md'
|
|
23
|
+
- 'Jielga/react:packages/tmdatagrid/docs/row-interaction.md'
|
|
24
|
+
- 'Jielga/react:packages/tmdatagrid/docs/column-menu.md'
|
|
25
|
+
- 'Jielga/react:packages/tmdatagrid/docs/row-styling.md'
|
|
26
|
+
- 'Jielga/react:packages/tmdatagrid/docs/row-details.md'
|
|
27
|
+
- 'Jielga/react:packages/tmdatagrid/docs/row-pinning.md'
|
|
28
|
+
- 'Jielga/react:packages/tmdatagrid/src/core/rowSelection.ts'
|
|
29
29
|
---
|
|
30
30
|
|
|
31
31
|
# TMDataGrid - Rows
|
|
@@ -15,11 +15,11 @@ description: >
|
|
|
15
15
|
metadata:
|
|
16
16
|
type: core
|
|
17
17
|
library: '@jielga/tmdatagrid'
|
|
18
|
-
library_version: '2.1.
|
|
18
|
+
library_version: '2.1.3'
|
|
19
19
|
sources:
|
|
20
|
-
- 'Jielga/
|
|
21
|
-
- 'Jielga/
|
|
22
|
-
- 'Jielga/
|
|
20
|
+
- 'Jielga/react:packages/tmdatagrid/docs/server-side.md'
|
|
21
|
+
- 'Jielga/react:packages/tmdatagrid/docs/server-query.md'
|
|
22
|
+
- 'Jielga/react:packages/tmdatagrid/src/useTMDataGrid.tsx'
|
|
23
23
|
---
|
|
24
24
|
|
|
25
25
|
# TMDataGrid - Server-side data
|
package/skills/testing/SKILL.md
CHANGED
|
@@ -13,12 +13,12 @@ description: >
|
|
|
13
13
|
metadata:
|
|
14
14
|
type: core
|
|
15
15
|
library: '@jielga/tmdatagrid'
|
|
16
|
-
library_version: '2.1.
|
|
16
|
+
library_version: '2.1.3'
|
|
17
17
|
sources:
|
|
18
|
-
- 'Jielga/
|
|
19
|
-
- 'Jielga/
|
|
20
|
-
- 'Jielga/
|
|
21
|
-
- 'Jielga/
|
|
18
|
+
- 'Jielga/react:packages/tmdatagrid/docs/testing.md'
|
|
19
|
+
- 'Jielga/react:playwright/support/DataGrid.ts'
|
|
20
|
+
- 'Jielga/react:packages/tmdatagrid/src/components/TMDataGrid.tsx'
|
|
21
|
+
- 'Jielga/react:packages/tmdatagrid/src/components/TMDataGridTable.tsx'
|
|
22
22
|
---
|
|
23
23
|
|
|
24
24
|
# TMDataGrid - Testing
|
|
@@ -12,12 +12,12 @@ description: >
|
|
|
12
12
|
metadata:
|
|
13
13
|
type: core
|
|
14
14
|
library: '@jielga/tmdatagrid'
|
|
15
|
-
library_version: '2.1.
|
|
15
|
+
library_version: '2.1.3'
|
|
16
16
|
sources:
|
|
17
|
-
- 'Jielga/
|
|
18
|
-
- 'Jielga/
|
|
19
|
-
- 'Jielga/
|
|
20
|
-
- 'Jielga/
|
|
17
|
+
- 'Jielga/react:packages/tmdatagrid/docs/testing.md'
|
|
18
|
+
- 'Jielga/react:packages/tmdatagrid/test/gallery/main.tsx'
|
|
19
|
+
- 'Jielga/react:packages/tmdatagrid/test/stories/Grid.story.tsx'
|
|
20
|
+
- 'Jielga/react:playwright/components/virtualization.spec.ts'
|
|
21
21
|
---
|
|
22
22
|
|
|
23
23
|
# TMDataGrid - Component tests in a browser
|
|
@@ -12,13 +12,13 @@ description: >
|
|
|
12
12
|
metadata:
|
|
13
13
|
type: core
|
|
14
14
|
library: '@jielga/tmdatagrid'
|
|
15
|
-
library_version: '2.1.
|
|
15
|
+
library_version: '2.1.3'
|
|
16
16
|
sources:
|
|
17
|
-
- 'Jielga/
|
|
18
|
-
- 'Jielga/
|
|
19
|
-
- 'Jielga/
|
|
20
|
-
- 'Jielga/
|
|
21
|
-
- 'Jielga/
|
|
17
|
+
- 'Jielga/react:packages/tmdatagrid/docs/testing.md'
|
|
18
|
+
- 'Jielga/react:packages/tmdatagrid/docs/editing.md'
|
|
19
|
+
- 'Jielga/react:packages/tmdatagrid/docs/draft-store.md'
|
|
20
|
+
- 'Jielga/react:packages/tmdatagrid/src/components/TMDataGridEntryRows.tsx'
|
|
21
|
+
- 'Jielga/react:packages/tmdatagrid/src/components/TMDataGridEditColumn.tsx'
|
|
22
22
|
---
|
|
23
23
|
|
|
24
24
|
# TMDataGrid - Testing editing
|
|
@@ -33,6 +33,9 @@ export function DetailsCell<TData extends RowData>({
|
|
|
33
33
|
// `showsDetails`. Their cells are aggregated, so this lane is already blank
|
|
34
34
|
// on them; the guard is what makes that a decision rather than a side effect.
|
|
35
35
|
if (row.getIsGrouped()) return null;
|
|
36
|
+
// A record the consumer's `getRowCanExpand` turns down has no panel, and
|
|
37
|
+
// TanStack refuses to expand it - a chevron here would do nothing.
|
|
38
|
+
if (!row.getCanExpand()) return null;
|
|
36
39
|
|
|
37
40
|
return (
|
|
38
41
|
<UnstyledButton
|
|
@@ -50,7 +50,21 @@ function SelectAllCheckbox<TData extends RowData>({
|
|
|
50
50
|
data-dg-part="select-all"
|
|
51
51
|
checked={allSelected}
|
|
52
52
|
indeterminate={someSelected && !allSelected}
|
|
53
|
-
onChange={
|
|
53
|
+
onChange={(event) => {
|
|
54
|
+
if (event.currentTarget.checked) {
|
|
55
|
+
table.toggleAllRowsSelected(true);
|
|
56
|
+
return;
|
|
57
|
+
}
|
|
58
|
+
// Not `toggleAllRowsSelected(false)`: since TanStack 9.2 it keeps a
|
|
59
|
+
// ticked row that `enableRowSelection` turns down, so the box could
|
|
60
|
+
// never clear. Every row the filters show is unticked; rows a filter
|
|
61
|
+
// hides keep their tick, as they always have.
|
|
62
|
+
const next = { ...table.store.state.rowSelection };
|
|
63
|
+
for (const row of table.getPreGroupedRowModel().flatRows) {
|
|
64
|
+
delete next[row.id];
|
|
65
|
+
}
|
|
66
|
+
table.setRowSelection(next);
|
|
67
|
+
}}
|
|
54
68
|
/>
|
|
55
69
|
);
|
|
56
70
|
}
|
|
@@ -1531,6 +1531,24 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
|
|
|
1531
1531
|
const trailingGuardRef = useRef<HTMLDivElement>(null);
|
|
1532
1532
|
const guardHopRef = useRef(false);
|
|
1533
1533
|
|
|
1534
|
+
/**
|
|
1535
|
+
* Keeps both guards at the scrollport's top-left corner as the body scrolls.
|
|
1536
|
+
*
|
|
1537
|
+
* A guard is out of flow, so left alone it sits at the top of the scrolled
|
|
1538
|
+
* content. Tab from outside focuses it without `preventScroll`, and the
|
|
1539
|
+
* browser then scrolls the body back to the top to show it - which unmounts
|
|
1540
|
+
* the cursor row the guard is about to hand the focus to, and drops the
|
|
1541
|
+
* focus on `<body>`. A guard already inside the scrollport is never
|
|
1542
|
+
* scrolled to. Written straight to the style, so a scroll costs no render.
|
|
1543
|
+
*/
|
|
1544
|
+
const placeTabGuards = (container: HTMLElement) => {
|
|
1545
|
+
for (const guard of [leadingGuardRef.current, trailingGuardRef.current]) {
|
|
1546
|
+
if (guard === null) continue;
|
|
1547
|
+
guard.style.top = `${container.scrollTop}px`;
|
|
1548
|
+
guard.style.left = `${container.scrollLeft}px`;
|
|
1549
|
+
}
|
|
1550
|
+
};
|
|
1551
|
+
|
|
1534
1552
|
// O(n) per keystroke and per render while a cell is focused. Fine at any row
|
|
1535
1553
|
// count a grid actually holds, and the alternative - an id→index map rebuilt
|
|
1536
1554
|
// whenever sorting, filtering or grouping changes - costs more than it saves.
|
|
@@ -2448,8 +2466,9 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
|
|
|
2448
2466
|
* zoom, where a "fully scrolled" position can land at 799.5 of 800.
|
|
2449
2467
|
*/
|
|
2450
2468
|
const handleScroll =
|
|
2451
|
-
contextMenuTarget || hasEdgeCallbacks
|
|
2469
|
+
contextMenuTarget || hasEdgeCallbacks || cellSelection
|
|
2452
2470
|
? (event: UIEvent<HTMLDivElement>) => {
|
|
2471
|
+
if (cellSelection) placeTabGuards(event.currentTarget);
|
|
2453
2472
|
if (contextMenuTarget) closeContextMenu();
|
|
2454
2473
|
if (!hasEdgeCallbacks) return;
|
|
2455
2474
|
const el = event.currentTarget;
|
package/src/core/expanding.ts
CHANGED
|
@@ -20,7 +20,10 @@ function isTarget<TData extends RowData>(
|
|
|
20
20
|
row: Row<TMDataGridFeatures, TData>,
|
|
21
21
|
target: TMDataGridExpandTarget,
|
|
22
22
|
): boolean {
|
|
23
|
-
|
|
23
|
+
// A record a consumer's `getRowCanExpand` turns down has no panel to open.
|
|
24
|
+
return target === "groups"
|
|
25
|
+
? row.getIsGrouped()
|
|
26
|
+
: !row.getIsGrouped() && row.getCanExpand();
|
|
24
27
|
}
|
|
25
28
|
|
|
26
29
|
/**
|
package/src/core/labels.ts
CHANGED
|
@@ -236,8 +236,8 @@ export const TMDATAGRID_LABELS_EN: TMDataGridLabels = {
|
|
|
236
236
|
activeFilters: "Active filters",
|
|
237
237
|
clearFilter: (column) => `Clear ${column} filter`,
|
|
238
238
|
|
|
239
|
-
sortAsc: "Sort
|
|
240
|
-
sortDesc: "Sort
|
|
239
|
+
sortAsc: "Sort ascending",
|
|
240
|
+
sortDesc: "Sort descending",
|
|
241
241
|
filterMenuItem: "Filter",
|
|
242
242
|
groupBy: (column) => `Group by ${column}`,
|
|
243
243
|
ungroup: (column) => `Ungroup ${column}`,
|
|
@@ -260,7 +260,7 @@ export const TMDATAGRID_LABELS_EN: TMDataGridLabels = {
|
|
|
260
260
|
pageCount < 0 ? `Page ${page}` : `Page ${page} of ${pageCount}`,
|
|
261
261
|
groupedAllRows: (total) => `Grouped · all ${total} rows`,
|
|
262
262
|
pagingSuspendedHint:
|
|
263
|
-
"Paging is off while the rows are grouped
|
|
263
|
+
"Paging is off while the rows are grouped, and every row is shown. Ungroup to page again.",
|
|
264
264
|
previousPage: "Previous page",
|
|
265
265
|
nextPage: "Next page",
|
|
266
266
|
|