@jielga/tmdatagrid 0.1.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +35 -2
- package/dist/index.d.ts +792 -327
- package/dist/index.js +1581 -892
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +15 -7
- package/skills/columns/SKILL.md +8 -7
- package/skills/features/SKILL.md +104 -16
- package/skills/getting-started/SKILL.md +78 -20
- package/skills/options/SKILL.md +12 -7
- package/skills/server-side/SKILL.md +5 -2
- package/src/tmdatagrid/TMDataGridContext.ts +1 -1
- package/src/tmdatagrid/components/TMDataGrid.module.css +73 -0
- package/src/tmdatagrid/{TMDataGrid.tsx → components/TMDataGrid.tsx} +15 -4
- package/src/tmdatagrid/components/TMDataGridColumnsPanel.module.css +25 -0
- package/src/tmdatagrid/{TMDataGridColumnsPanel.tsx → components/TMDataGridColumnsPanel.tsx} +10 -4
- package/src/tmdatagrid/components/TMDataGridFilterPanel.module.css +35 -0
- package/src/tmdatagrid/{TMDataGridFilterPanel.tsx → components/TMDataGridFilterPanel.tsx} +91 -14
- package/src/tmdatagrid/components/TMDataGridFilterPills.module.css +35 -0
- package/src/tmdatagrid/components/TMDataGridFilterPills.tsx +135 -0
- package/src/tmdatagrid/components/TMDataGridFooter.module.css +18 -0
- package/src/tmdatagrid/components/TMDataGridFooter.tsx +171 -0
- package/src/tmdatagrid/components/TMDataGridGroupColumn.module.css +48 -0
- package/src/tmdatagrid/components/TMDataGridGroupColumn.tsx +147 -0
- package/src/tmdatagrid/components/TMDataGridHeaderCell.module.css +159 -0
- package/src/tmdatagrid/{TMDataGridHeaderCell.tsx → components/TMDataGridHeaderCell.tsx} +99 -14
- package/src/tmdatagrid/components/TMDataGridSelectColumn.tsx +177 -0
- package/src/tmdatagrid/components/TMDataGridTable.module.css +137 -0
- package/src/tmdatagrid/components/TMDataGridTable.tsx +720 -0
- package/src/tmdatagrid/components/TMDataGridToolbar.module.css +12 -0
- package/src/tmdatagrid/{TMDataGridToolbar.tsx → components/TMDataGridToolbar.tsx} +8 -5
- package/src/tmdatagrid/{icons.ts → components/icons.ts} +5 -0
- package/src/tmdatagrid/components/sticky.module.css +45 -0
- package/src/tmdatagrid/core/capabilities.ts +215 -0
- package/src/tmdatagrid/{columnOrdering.ts → core/columnOrdering.ts} +2 -2
- package/src/tmdatagrid/{columnUtils.ts → core/columnUtils.ts} +1 -1
- package/src/tmdatagrid/{filterOperators.ts → core/filterOperators.ts} +25 -0
- package/src/tmdatagrid/core/grouping.ts +21 -0
- package/src/tmdatagrid/{persistence.ts → core/persistence.ts} +92 -2
- package/src/tmdatagrid/core/rowSelection.ts +202 -0
- package/src/tmdatagrid/index.ts +39 -9
- package/src/tmdatagrid/useTMDataGrid.tsx +318 -66
- package/src/tmdatagrid/TMDataGrid.module.css +0 -410
- package/src/tmdatagrid/TMDataGridFooter.tsx +0 -74
- package/src/tmdatagrid/TMDataGridTable.tsx +0 -297
- package/src/tmdatagrid/capabilities.ts +0 -117
- /package/src/tmdatagrid/{sizes.ts → core/sizes.ts} +0 -0
package/README.md
CHANGED
|
@@ -15,6 +15,11 @@ Peer dependencies: `react` and `react-dom` (19.1 or later), `@mantine/core`,
|
|
|
15
15
|
`@tanstack/react-table` (v9), `@tanstack/react-store`, `@tanstack/store`,
|
|
16
16
|
`@tanstack/react-virtual` and `@tabler/icons-react`.
|
|
17
17
|
|
|
18
|
+
> **TanStack Table v9 is still in beta.** The grid is built against
|
|
19
|
+
> `^9.0.0-beta.21` and uses its feature-registry API, which beta releases may
|
|
20
|
+
> change without a major bump. Pin `@tanstack/react-table` and
|
|
21
|
+
> `@tanstack/table-core` to an exact version if you need reproducible installs.
|
|
22
|
+
|
|
18
23
|
Import both stylesheets once in your app, Mantine's first:
|
|
19
24
|
|
|
20
25
|
```ts
|
|
@@ -54,6 +59,7 @@ export function Employees({ data }: { data: Employee[] }) {
|
|
|
54
59
|
data,
|
|
55
60
|
columns,
|
|
56
61
|
getRowId: (row) => String(row.id),
|
|
62
|
+
enablePagination: true,
|
|
57
63
|
});
|
|
58
64
|
|
|
59
65
|
return (
|
|
@@ -72,8 +78,10 @@ export function Employees({ data }: { data: Employee[] }) {
|
|
|
72
78
|
}
|
|
73
79
|
```
|
|
74
80
|
|
|
75
|
-
Only the parts you render exist
|
|
76
|
-
|
|
81
|
+
Only the parts you render exist, and only the features you enable have state.
|
|
82
|
+
Pagination is opt-in via `enablePagination` (implied by `manualPagination`) —
|
|
83
|
+
by default every row renders, virtualized. A column that defines no filter
|
|
84
|
+
shows no filter control.
|
|
77
85
|
|
|
78
86
|
## Documentation
|
|
79
87
|
|
|
@@ -94,12 +102,37 @@ demo site:
|
|
|
94
102
|
The grid lives in [`src/tmdatagrid/`](src/tmdatagrid); everything else in `src`
|
|
95
103
|
is the demo site that documents it.
|
|
96
104
|
|
|
105
|
+
| Path | Contents |
|
|
106
|
+
| ------------------- | ------------------------------------------------------------ |
|
|
107
|
+
| `index.ts` | The public API — the only entry point the package exposes |
|
|
108
|
+
| `useTMDataGrid.tsx` | The hook that builds the table, and the types it is built on |
|
|
109
|
+
| `core/` | Headless logic: filtering, ordering, persistence, capabilities |
|
|
110
|
+
| `components/` | The React chrome and its co-located CSS modules |
|
|
111
|
+
|
|
97
112
|
```sh
|
|
98
113
|
npm install
|
|
99
114
|
npm run dev # demo site with the grid example and docs
|
|
100
115
|
npm run lint # oxlint
|
|
116
|
+
npm run test # vitest, once
|
|
117
|
+
npm run test:watch
|
|
101
118
|
```
|
|
102
119
|
|
|
120
|
+
## Testing
|
|
121
|
+
|
|
122
|
+
Vitest with React Testing Library, in jsdom. Tests sit next to the code they
|
|
123
|
+
cover as `*.test.ts(x)` and are excluded from both the package and the
|
|
124
|
+
declaration build; shared fixtures live in [`src/test/`](src/test) so they stay
|
|
125
|
+
out of `src/tmdatagrid/` entirely.
|
|
126
|
+
|
|
127
|
+
Two things worth knowing before adding to them:
|
|
128
|
+
|
|
129
|
+
- `vitest.setup.ts` installs what jsdom does not provide — an in-memory
|
|
130
|
+
`Storage`, `matchMedia`, `ResizeObserver`, and element sizes. The last one
|
|
131
|
+
matters: without a measurable box, the virtualizer renders no rows at all.
|
|
132
|
+
- The Mantine provider in the harness runs with `env="test"`, which disables
|
|
133
|
+
transitions. Without it a popover never finishes mounting and its panel is
|
|
134
|
+
never found.
|
|
135
|
+
|
|
103
136
|
## Building
|
|
104
137
|
|
|
105
138
|
Two independent outputs, neither committed:
|