@jielga/tmdatagrid 1.1.1 → 2.0.0-beta.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/README.md +32 -34
- package/dist/index.d.ts +273 -155
- package/dist/index.js +1784 -1687
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
- package/skills/appearance/SKILL.md +37 -34
- package/skills/cell-selection/SKILL.md +19 -19
- package/skills/columns/SKILL.md +46 -21
- package/skills/data/SKILL.md +53 -53
- package/skills/editing/SKILL.md +165 -169
- package/skills/editing/references/editing-api.md +26 -24
- package/skills/editing/references/editors-and-validation.md +71 -25
- package/skills/filtering/SKILL.md +62 -62
- package/skills/getting-started/SKILL.md +10 -10
- package/skills/grouping/SKILL.md +41 -43
- package/skills/options/SKILL.md +4 -4
- package/skills/rows/SKILL.md +59 -59
- package/skills/rows/references/rows-api.md +6 -6
- package/skills/server-side/SKILL.md +1 -1
- package/skills/testing/SKILL.md +10 -10
- package/src/tmdatagrid/components/TMDataGrid.module.css +6 -1
- package/src/tmdatagrid/components/TMDataGridCellEditor.tsx +49 -16
- package/src/tmdatagrid/components/TMDataGridColumnsPanel.tsx +29 -18
- package/src/tmdatagrid/components/TMDataGridDetailsColumn.tsx +5 -8
- package/src/tmdatagrid/components/TMDataGridEditActions.tsx +1 -1
- package/src/tmdatagrid/components/TMDataGridEditColumn.tsx +5 -1
- package/src/tmdatagrid/components/TMDataGridEntryRows.tsx +42 -11
- package/src/tmdatagrid/components/TMDataGridFilterPanel.tsx +5 -3
- package/src/tmdatagrid/components/TMDataGridHeaderCell.tsx +11 -6
- package/src/tmdatagrid/components/TMDataGridSelectColumn.tsx +9 -5
- package/src/tmdatagrid/components/TMDataGridTable.tsx +60 -62
- package/src/tmdatagrid/components/editors/TMDataGridBooleanEditor.tsx +0 -2
- package/src/tmdatagrid/components/editors/TMDataGridDateEditor.tsx +1 -3
- package/src/tmdatagrid/components/editors/TMDataGridMultiSelectEditor.tsx +0 -2
- package/src/tmdatagrid/components/editors/TMDataGridNumberEditor.tsx +14 -12
- package/src/tmdatagrid/components/editors/TMDataGridSelectEditor.tsx +0 -2
- package/src/tmdatagrid/components/editors/TMDataGridStringEditor.tsx +13 -9
- package/src/tmdatagrid/components/editors/editorShared.ts +47 -0
- package/src/tmdatagrid/components/filters/DgAutocompleteFilter.tsx +1 -1
- package/src/tmdatagrid/components/filters/DgDateRangeFilter.tsx +2 -2
- package/src/tmdatagrid/components/filters/DgRangeSliderFilter.tsx +2 -2
- package/src/tmdatagrid/components/filters/DgTriStateFilter.tsx +1 -1
- package/src/tmdatagrid/components/filters/TMDataGridFilterValueInput.tsx +1 -1
- package/src/tmdatagrid/core/autosize.ts +30 -6
- package/src/tmdatagrid/core/capabilities.ts +5 -5
- package/src/tmdatagrid/core/cellExport.ts +6 -7
- package/src/tmdatagrid/core/cellNavigation.ts +2 -2
- package/src/tmdatagrid/core/cellRange.ts +6 -6
- package/src/tmdatagrid/core/columnOrdering.ts +30 -1
- package/src/tmdatagrid/core/columnUtils.ts +58 -3
- package/src/tmdatagrid/core/editEngine.ts +95 -28
- package/src/tmdatagrid/core/editorFocus.ts +29 -0
- package/src/tmdatagrid/core/filterControls.ts +28 -1
- package/src/tmdatagrid/core/filterOperators.ts +6 -6
- package/src/tmdatagrid/core/matchHighlight.ts +3 -3
- package/src/tmdatagrid/core/persistence.ts +3 -3
- package/src/tmdatagrid/core/rowSelection.ts +3 -3
- package/src/tmdatagrid/index.ts +8 -0
- package/src/tmdatagrid/useTMDataGrid.tsx +145 -133
package/README.md
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
# TMDataGrid
|
|
2
2
|
|
|
3
|
-
A data grid for React built on [TanStack Table v9](https://tanstack.com/table)
|
|
4
|
-
[Mantine](https://mantine.dev). Rows are always virtualized, columns are
|
|
5
|
-
reorderable, sortable, filterable, hideable and pinnable, and every
|
|
6
|
-
|
|
3
|
+
A data grid for React built on [TanStack Table v9](https://tanstack.com/table)
|
|
4
|
+
and [Mantine](https://mantine.dev). Rows are always virtualized, columns are
|
|
5
|
+
resizable, reorderable, sortable, filterable, hideable and pinnable, and every
|
|
6
|
+
part of the grid interface is a component you render yourself.
|
|
7
7
|
|
|
8
8
|
## Installation
|
|
9
9
|
|
|
@@ -79,18 +79,16 @@ export function Employees({ data }: { data: Employee[] }) {
|
|
|
79
79
|
```
|
|
80
80
|
|
|
81
81
|
Only the parts you render exist, and only the features you enable have state.
|
|
82
|
-
Pagination is opt
|
|
83
|
-
by default every row renders, virtualized. A column that defines no filter
|
|
84
|
-
|
|
82
|
+
Pagination is opt in through `enablePagination` (implied by `manualPagination`);
|
|
83
|
+
by default every row renders, virtualized. A column that defines no filter shows
|
|
84
|
+
no filter control.
|
|
85
85
|
|
|
86
86
|
## Documentation
|
|
87
87
|
|
|
88
|
-
The documentation is
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
table for everything that page owns. [`docsPages.ts`](src/docs/docsPages.ts) is
|
|
93
|
-
the registry and the sidebar order.
|
|
88
|
+
The documentation is markdown under [`src/docs/`](src/docs), served by the demo
|
|
89
|
+
site. There is one page per topic, each holding the prose, its demos and a
|
|
90
|
+
reference table. [`docsPages.ts`](src/docs/docsPages.ts) is the registry and the
|
|
91
|
+
sidebar order.
|
|
94
92
|
|
|
95
93
|
| Section | Pages |
|
|
96
94
|
| -------------------- | ---------------------------------------------------------------- |
|
|
@@ -109,10 +107,10 @@ is the demo site that documents it.
|
|
|
109
107
|
|
|
110
108
|
| Path | Contents |
|
|
111
109
|
| ------------------- | ------------------------------------------------------------ |
|
|
112
|
-
| `index.ts` | The public API
|
|
110
|
+
| `index.ts` | The public API, and the only entry point the package exposes |
|
|
113
111
|
| `useTMDataGrid.tsx` | The hook that builds the table, and the types it is built on |
|
|
114
112
|
| `core/` | Headless logic: filtering, ordering, persistence, capabilities |
|
|
115
|
-
| `components/` | The React
|
|
113
|
+
| `components/` | The React components and their co-located CSS modules |
|
|
116
114
|
|
|
117
115
|
### Examples
|
|
118
116
|
|
|
@@ -122,14 +120,14 @@ The demo site's examples live in [`src/examples/`](src/examples):
|
|
|
122
120
|
| ----------------- | -------------------------------------------------------------- |
|
|
123
121
|
| `demoRegistry.ts` | Pairs each demo module with its own source through `import.meta.glob` |
|
|
124
122
|
| `demos/` | One file per demo: one idea, no headings, no explanation |
|
|
125
|
-
| `data/` | Shared datasets, and the column set
|
|
126
|
-
| `playground/` |
|
|
123
|
+
| `data/` | Shared datasets, and the column set used by unrelated demos |
|
|
124
|
+
| `playground/` | Every feature at once, behind switches |
|
|
127
125
|
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
[`demos.test.tsx`](src/examples/demos.test.tsx) mounts every registered demo,
|
|
132
|
-
|
|
126
|
+
To add a demo, add a file under `demos/` and name it from a ` ```demo ` fence on
|
|
127
|
+
the docs page that explains it. The registry pairs each module with its own
|
|
128
|
+
source, so the code on screen cannot drift from the code running.
|
|
129
|
+
[`demos.test.tsx`](src/examples/demos.test.tsx) mounts every registered demo, so
|
|
130
|
+
a demo that stops working fails the suite whether or not it still compiles.
|
|
133
131
|
|
|
134
132
|
```sh
|
|
135
133
|
npm install
|
|
@@ -141,8 +139,8 @@ npm run test:watch
|
|
|
141
139
|
|
|
142
140
|
## Testing
|
|
143
141
|
|
|
144
|
-
For testing an application that *uses* the grid
|
|
145
|
-
attributes it publishes
|
|
142
|
+
For testing an application that *uses* the grid, including the test ids, roles
|
|
143
|
+
and ARIA attributes it publishes and how to drive it from Playwright, see
|
|
146
144
|
[Testing](src/docs/testing.md). What follows is about this repo's own suite.
|
|
147
145
|
|
|
148
146
|
Vitest with React Testing Library, in jsdom. Tests sit next to the code they
|
|
@@ -150,11 +148,11 @@ cover as `*.test.ts(x)` and are excluded from both the package and the
|
|
|
150
148
|
declaration build; shared fixtures live in [`src/test/`](src/test) so they stay
|
|
151
149
|
out of `src/tmdatagrid/` entirely.
|
|
152
150
|
|
|
153
|
-
Two things
|
|
151
|
+
Two things to know before adding to them:
|
|
154
152
|
|
|
155
|
-
- `vitest.setup.ts` installs what jsdom does not provide
|
|
156
|
-
`Storage`, `matchMedia`, `ResizeObserver`, and element sizes.
|
|
157
|
-
|
|
153
|
+
- `vitest.setup.ts` installs what jsdom does not provide: an in-memory
|
|
154
|
+
`Storage`, `matchMedia`, `ResizeObserver`, and element sizes. Element sizes
|
|
155
|
+
matter, because without a measurable box the virtualizer renders no rows.
|
|
158
156
|
- The Mantine provider in the harness runs with `env="test"`, which disables
|
|
159
157
|
transitions. Without it a popover never finishes mounting and its panel is
|
|
160
158
|
never found.
|
|
@@ -183,8 +181,8 @@ works everywhere without putting `.js` extensions in the sources.
|
|
|
183
181
|
## Publishing
|
|
184
182
|
|
|
185
183
|
Releases are managed by [Changesets](https://github.com/changesets/changesets).
|
|
186
|
-
Nothing publishes from an ordinary push
|
|
187
|
-
|
|
184
|
+
Nothing publishes from an ordinary push. A release happens only when the version
|
|
185
|
+
PR is merged.
|
|
188
186
|
|
|
189
187
|
Describe your change in the same PR that makes it:
|
|
190
188
|
|
|
@@ -196,9 +194,9 @@ That writes a markdown file under `.changeset/`. Commit it alongside the code.
|
|
|
196
194
|
|
|
197
195
|
Once on `main`, [`release.yml`](.github/workflows/release.yml) opens a
|
|
198
196
|
**chore: version packages** PR that collects every pending changeset, bumps
|
|
199
|
-
`package.json`, writes `CHANGELOG.md` and syncs the skills.
|
|
200
|
-
|
|
201
|
-
|
|
197
|
+
`package.json`, writes `CHANGELOG.md` and syncs the skills. Review the version it
|
|
198
|
+
picked and the changelog it wrote, then merge it to publish to npm with
|
|
199
|
+
provenance.
|
|
202
200
|
|
|
203
201
|
The package build runs from `prepublishOnly` rather than as a workflow step, so
|
|
204
202
|
`npm publish` cannot ship a stale `dist` whether it runs in CI or by hand.
|
|
@@ -212,7 +210,7 @@ The package build runs from `prepublishOnly` rather than as a workflow step, so
|
|
|
212
210
|
Intent reports a skill as stale when its `library_version` trails the package
|
|
213
211
|
version, so without that step every release would leave every skill stale.
|
|
214
212
|
Because it runs inside the version command, the bump and the skill sync land in
|
|
215
|
-
the same PR
|
|
213
|
+
the same PR.
|
|
216
214
|
|
|
217
215
|
To check what a release would contain without publishing anything:
|
|
218
216
|
|