@rozie-ui/data-table-lit 0.3.2 → 0.5.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 +129 -76
- package/dist/index.cjs +502 -120
- package/dist/index.d.cts +69 -25
- package/dist/index.d.mts +69 -25
- package/dist/index.mjs +502 -120
- package/package.json +2 -2
- package/src/Column.ts +2 -2
- package/src/DataTable.ts +534 -124
- package/src/themes/base.css +38 -25
- package/src/themes/bootstrap.css +11 -0
- package/src/themes/material.css +11 -0
- package/src/themes/shadcn.css +11 -0
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @rozie-ui/data-table-lit
|
|
2
2
|
|
|
3
|
-
Idiomatic **lit** `DataTable` — a headless, fully-accessible (WAI-ARIA) data table (sorting, global + per-column filtering, pagination, row selection, column visibility / resize /
|
|
3
|
+
Idiomatic **lit** `DataTable` — a headless, fully-accessible (WAI-ARIA) data table (sorting, global + per-column filtering, pagination, row selection, column visibility / resize / pinning (plus a programmatic `columnOrder` slice, no drag affordance), sticky header) compiled from one [Rozie](https://github.com/One-Learning-Community/rozie.js) source. The state engine is `@tanstack/table-core` — the SAME framework-agnostic core behind TanStack Table, wired to this framework's reactivity with NO per-framework adapter. The table's primary surfaces are themed through 18 `--rozie-data-table-*` custom properties, so it re-skins to any design system. This package is generated; do not edit `src/` by hand.
|
|
4
4
|
|
|
5
5
|
## Install
|
|
6
6
|
|
|
@@ -14,29 +14,32 @@ Also installed: `@rozie/runtime-lit` — Rozie's small, tree-shaken runtime help
|
|
|
14
14
|
|
|
15
15
|
## Usage
|
|
16
16
|
|
|
17
|
-
Columns may be declared as a
|
|
17
|
+
Columns may be declared as a `columns` config array **or** as `<Column>` children (or both — an id-keyed last-write-wins union). Per-cell rendering is one parent `#cell` / `#colHeader` renderer on `<DataTable>`, dispatched by `columnId`, so it works the same with either column form.
|
|
18
18
|
|
|
19
19
|
### Columns as a config array
|
|
20
20
|
|
|
21
21
|
```ts
|
|
22
22
|
import '@rozie-ui/data-table-lit';
|
|
23
|
+
import type { DataTable } from '@rozie-ui/data-table-lit';
|
|
23
24
|
|
|
24
25
|
// <rozie-data-table> is a custom element. Set `data`/`columns` as properties
|
|
25
26
|
// and listen for the change events (`sort-change`, `filter-change`, …).
|
|
26
|
-
const el = document.querySelector('rozie-data-table');
|
|
27
|
-
el
|
|
27
|
+
const el = document.querySelector<DataTable>('rozie-data-table');
|
|
28
|
+
if (el) {
|
|
29
|
+
el.data = [
|
|
28
30
|
{ id: 1, name: 'Ada Lovelace', email: 'ada@analytical.engine', status: 'active' },
|
|
29
31
|
{ id: 2, name: 'Alan Turing', email: 'alan@bletchley.park', status: 'active' },
|
|
30
32
|
{ id: 3, name: 'Grace Hopper', email: 'grace@navy.mil', status: 'away' },
|
|
31
33
|
];
|
|
32
|
-
el.columns = [
|
|
34
|
+
el.columns = [
|
|
33
35
|
{ field: 'name', header: 'Name', sortable: true, filterable: true },
|
|
34
36
|
{ field: 'email', header: 'Email' },
|
|
35
37
|
{ field: 'status', header: 'Status', sortable: true },
|
|
36
38
|
];
|
|
37
|
-
el.addEventListener('sort-change', (e) => {
|
|
38
|
-
|
|
39
|
-
});
|
|
39
|
+
el.addEventListener('sort-change', (e) => {
|
|
40
|
+
console.log('sorting', e.detail);
|
|
41
|
+
});
|
|
42
|
+
}
|
|
40
43
|
```
|
|
41
44
|
|
|
42
45
|
### Declarative `<Column>` children + a custom cell
|
|
@@ -56,8 +59,8 @@ const rows = [
|
|
|
56
59
|
render(html`
|
|
57
60
|
<rozie-data-table
|
|
58
61
|
.data=${rows}
|
|
59
|
-
|
|
60
|
-
|
|
62
|
+
selectionmode="multiple"
|
|
63
|
+
stickyheader
|
|
61
64
|
.cell=${({ columnId, value }) =>
|
|
62
65
|
columnId === 'status' ? html`<span class="badge">${value}</span>` : value}
|
|
63
66
|
>
|
|
@@ -81,9 +84,9 @@ const rows = Array.from({ length: 10_000 }, (_, i) => ({
|
|
|
81
84
|
status: i % 2 ? 'active' : 'away',
|
|
82
85
|
}));
|
|
83
86
|
|
|
84
|
-
// PROP form — the `
|
|
87
|
+
// PROP form — the `maxheight` attribute sizes the scroll container.
|
|
85
88
|
render(html`
|
|
86
|
-
<rozie-data-table .data=${rows} virtual
|
|
89
|
+
<rozie-data-table .data=${rows} virtual maxheight="400px">
|
|
87
90
|
<rozie-column field="name" header="Name"></rozie-column>
|
|
88
91
|
<rozie-column field="email" header="Email"></rozie-column>
|
|
89
92
|
<rozie-column field="status" header="Status"></rozie-column>
|
|
@@ -91,8 +94,8 @@ render(html`
|
|
|
91
94
|
`, document.body);
|
|
92
95
|
|
|
93
96
|
// TOKEN form — the same height via the CSS custom property (the prop wins when
|
|
94
|
-
// both are set; the token is the fallback). `
|
|
95
|
-
// <rozie-data-table .data=${rows} virtual
|
|
97
|
+
// both are set; the token is the fallback). `estimaterowheight` tunes the seed:
|
|
98
|
+
// <rozie-data-table .data=${rows} virtual estimaterowheight="48"
|
|
96
99
|
// style="--rozie-data-table-max-height: 400px"> … </rozie-data-table>
|
|
97
100
|
```
|
|
98
101
|
|
|
@@ -116,7 +119,7 @@ const validateQty = (value: unknown) => Number(value) >= 0 || 'must be >= 0';
|
|
|
116
119
|
|
|
117
120
|
render(html`
|
|
118
121
|
<rozie-data-table
|
|
119
|
-
|
|
122
|
+
interactionmode="grid"
|
|
120
123
|
.data=${rows}
|
|
121
124
|
@data-change=${(e: CustomEvent) => { rows = e.detail; }}
|
|
122
125
|
@cell-edit-commit=${(e: CustomEvent) => console.log('cell commit', e.detail)}
|
|
@@ -260,21 +263,21 @@ const statusOptions = [
|
|
|
260
263
|
|
|
261
264
|
// The #editor slot is the `.editor` property — a function returning a Lit template,
|
|
262
265
|
// dispatched by columnId. Pass the slot scope ({ columnId, column, row, value, commit,
|
|
263
|
-
// cancel }) as element properties; <rozie-editor-select> also takes `.options`.
|
|
266
|
+
// cancel, autofocus }) as element properties; <rozie-editor-select> also takes `.options`.
|
|
264
267
|
render(html`
|
|
265
268
|
<rozie-data-table
|
|
266
|
-
|
|
269
|
+
interactionmode="grid"
|
|
267
270
|
.data=${rows}
|
|
268
271
|
@data-change=${(e: CustomEvent) => { rows = e.detail; }}
|
|
269
272
|
@cell-edit-commit=${(e: CustomEvent) => console.log('cell commit', e.detail)}
|
|
270
|
-
.editor=${({ columnId, column, row, value, commit, cancel }) => {
|
|
271
|
-
const p = { columnId, column, row, value, commit, cancel };
|
|
273
|
+
.editor=${({ columnId, column, row, value, commit, cancel, autofocus }) => {
|
|
274
|
+
const p = { columnId, column, row, value, commit, cancel, autofocus };
|
|
272
275
|
switch (columnId) {
|
|
273
|
-
case 'name': return html`<rozie-editor-text .columnId=${p.columnId} .column=${p.column} .row=${p.row} .value=${p.value} .commit=${p.commit} .cancel=${p.cancel}></rozie-editor-text>`;
|
|
274
|
-
case 'qty': return html`<rozie-editor-number .columnId=${p.columnId} .column=${p.column} .row=${p.row} .value=${p.value} .commit=${p.commit} .cancel=${p.cancel}></rozie-editor-number>`;
|
|
275
|
-
case 'status': return html`<rozie-editor-select .columnId=${p.columnId} .column=${p.column} .row=${p.row} .value=${p.value} .commit=${p.commit} .cancel=${p.cancel} .options=${statusOptions}></rozie-editor-select>`;
|
|
276
|
-
case 'active': return html`<rozie-editor-checkbox .columnId=${p.columnId} .column=${p.column} .row=${p.row} .value=${p.value} .commit=${p.commit} .cancel=${p.cancel}></rozie-editor-checkbox>`;
|
|
277
|
-
case 'score': return html`<rozie-editor-date .columnId=${p.columnId} .column=${p.column} .row=${p.row} .value=${p.value} .commit=${p.commit} .cancel=${p.cancel}></rozie-editor-date>`;
|
|
276
|
+
case 'name': return html`<rozie-editor-text .columnId=${p.columnId} .column=${p.column} .row=${p.row} .value=${p.value} .commit=${p.commit} .cancel=${p.cancel} .autofocus=${p.autofocus}></rozie-editor-text>`;
|
|
277
|
+
case 'qty': return html`<rozie-editor-number .columnId=${p.columnId} .column=${p.column} .row=${p.row} .value=${p.value} .commit=${p.commit} .cancel=${p.cancel} .autofocus=${p.autofocus}></rozie-editor-number>`;
|
|
278
|
+
case 'status': return html`<rozie-editor-select .columnId=${p.columnId} .column=${p.column} .row=${p.row} .value=${p.value} .commit=${p.commit} .cancel=${p.cancel} .autofocus=${p.autofocus} .options=${statusOptions}></rozie-editor-select>`;
|
|
279
|
+
case 'active': return html`<rozie-editor-checkbox .columnId=${p.columnId} .column=${p.column} .row=${p.row} .value=${p.value} .commit=${p.commit} .cancel=${p.cancel} .autofocus=${p.autofocus}></rozie-editor-checkbox>`;
|
|
280
|
+
case 'score': return html`<rozie-editor-date .columnId=${p.columnId} .column=${p.column} .row=${p.row} .value=${p.value} .commit=${p.commit} .cancel=${p.cancel} .autofocus=${p.autofocus}></rozie-editor-date>`;
|
|
278
281
|
default: return null;
|
|
279
282
|
}
|
|
280
283
|
}}
|
|
@@ -306,19 +309,19 @@ let rows = [
|
|
|
306
309
|
let columnFilters: { id: string; value: unknown }[] = [];
|
|
307
310
|
|
|
308
311
|
// The #filter slot is the `.filter` property — a function returning a Lit template,
|
|
309
|
-
// dispatched by columnId. Pass the slot scope ({ columnId,
|
|
310
|
-
//
|
|
312
|
+
// dispatched by columnId. Pass the slot scope ({ columnId, value, uniqueValues, minMax,
|
|
313
|
+
// setFilter }) as element properties.
|
|
311
314
|
render(html`
|
|
312
315
|
<rozie-data-table
|
|
313
316
|
.data=${rows}
|
|
314
317
|
.columnFilters=${columnFilters}
|
|
315
318
|
@filter-change=${(e: CustomEvent) => { columnFilters = e.detail.columnFilters; }}
|
|
316
|
-
.filter=${({ columnId,
|
|
317
|
-
const p = { columnId,
|
|
319
|
+
.filter=${({ columnId, value, setFilter, uniqueValues, minMax }) => {
|
|
320
|
+
const p = { columnId, value, setFilter, uniqueValues, minMax };
|
|
318
321
|
switch (columnId) {
|
|
319
|
-
case 'name': return html`<rozie-filter-text .columnId=${p.columnId} .
|
|
320
|
-
case 'category': return html`<rozie-filter-select .columnId=${p.columnId} .
|
|
321
|
-
case 'price': return html`<rozie-filter-number-range .columnId=${p.columnId} .
|
|
322
|
+
case 'name': return html`<rozie-filter-text .columnId=${p.columnId} .value=${p.value} .setFilter=${p.setFilter}></rozie-filter-text>`;
|
|
323
|
+
case 'category': return html`<rozie-filter-select .columnId=${p.columnId} .value=${p.value} .setFilter=${p.setFilter} .uniqueValues=${p.uniqueValues}></rozie-filter-select>`;
|
|
324
|
+
case 'price': return html`<rozie-filter-number-range .columnId=${p.columnId} .value=${p.value} .setFilter=${p.setFilter} .minMax=${p.minMax}></rozie-filter-number-range>`;
|
|
322
325
|
default: return null;
|
|
323
326
|
}
|
|
324
327
|
}}
|
|
@@ -365,9 +368,47 @@ render(html`
|
|
|
365
368
|
`, document.body);
|
|
366
369
|
```
|
|
367
370
|
|
|
371
|
+
### Per-column slot families (`cell-<id>` / `colHeader-<id>` / `filter-<id>` / `editor-<id>`)
|
|
372
|
+
|
|
373
|
+
```ts
|
|
374
|
+
import { html, render } from 'lit';
|
|
375
|
+
import '@rozie-ui/data-table-lit';
|
|
376
|
+
|
|
377
|
+
const rows = [
|
|
378
|
+
{ id: 1, name: 'Alpha', category: 'Hardware', price: 30 },
|
|
379
|
+
{ id: 2, name: 'Beta', category: 'Software', price: 90 },
|
|
380
|
+
{ id: 3, name: 'Gamma', category: 'Hardware', price: 10 },
|
|
381
|
+
{ id: 4, name: 'Delta', category: 'Service', price: 50 },
|
|
382
|
+
];
|
|
383
|
+
|
|
384
|
+
// A family fill is a STATIC per-column override — the `.rozieSlots` record property
|
|
385
|
+
// (NOT an extension of `.cell` / `.colHeader` / `.filter` / `.editor`). Precedence per
|
|
386
|
+
// seam: rozieSlots['<seam>-<id>'] → the generic .<seam> property → the built-in render.
|
|
387
|
+
// editor-<id> needs editor="custom"; filter-<id> needs filterable (shown on category
|
|
388
|
+
// below); cell-<id> / colHeader-<id> have no gate.
|
|
389
|
+
render(html`
|
|
390
|
+
<rozie-data-table
|
|
391
|
+
.data=${rows}
|
|
392
|
+
.rozieSlots=${{
|
|
393
|
+
'cell-price': ({ value }) => html`💲 ${value}`,
|
|
394
|
+
'colHeader-price': ({ label }) => html`🏷️ ${label}`,
|
|
395
|
+
'filter-category': ({ columnId, uniqueValues, setFilter }) => html`
|
|
396
|
+
<select @change=${(e: Event) => setFilter(columnId, (e.target as HTMLSelectElement).value || null)}>
|
|
397
|
+
<option value="">All</option>
|
|
398
|
+
${uniqueValues.map((v) => html`<option value=${String(v)}>${String(v)}</option>`)}
|
|
399
|
+
</select>`,
|
|
400
|
+
}}
|
|
401
|
+
>
|
|
402
|
+
<rozie-column field="name" header="Name"></rozie-column>
|
|
403
|
+
<rozie-column field="category" header="Category" filterable></rozie-column>
|
|
404
|
+
<rozie-column field="price" header="Price"></rozie-column>
|
|
405
|
+
</rozie-data-table>
|
|
406
|
+
`, document.body);
|
|
407
|
+
```
|
|
408
|
+
|
|
368
409
|
## Theming
|
|
369
410
|
|
|
370
|
-
|
|
411
|
+
The table's primary surfaces are themed through 18 `--rozie-data-table-*` CSS custom properties — override any of them at any ancestor scope (on Lit, set them at or above the `<rozie-data-table>` element — `:root`, a wrapper, or the element itself — never on the `.rozie-data-table` classes, which render inside the shadow root where a document stylesheet cannot reach them). Some internal details (the grid active-cell ring, range highlight, fill handle, the per-header column ⋯ menu, and most of the pagination bar beyond its control border/radius/disabled-opacity) are not yet part of the public token surface. Ready-made design-system bridges ship in the package (import `base.css` first, then a bridge):
|
|
371
412
|
|
|
372
413
|
```ts
|
|
373
414
|
import '@rozie-ui/data-table-lit/themes/base.css';
|
|
@@ -378,8 +419,8 @@ import '@rozie-ui/data-table-lit/themes/shadcn.css'; // or material.css, boot
|
|
|
378
419
|
|
|
379
420
|
| Name | Type | Default | Two-way (model) | Required | Description |
|
|
380
421
|
| --- | --- | --- | :---: | :---: | --- |
|
|
381
|
-
| `data` | `Array` | `—` | ✓ | ✓ | The row data — `model: true`, so a committed cell/row edit writes a **fresh** array back through `
|
|
382
|
-
| `columns` | `Array` | `[]` | | | Config-array column fallback (lower precedence than `<Column>` children). Each entry: `{ id?, field, header?, sortable?, filterable?, pinned?, width? }`. Columns may come from this array, from `<Column>` children, or both (id-keyed last-write-wins union). |
|
|
422
|
+
| `data` | `Array` | `—` | ✓ | ✓ | The row data — `model: true`, so a committed cell/row edit writes a **fresh** array back through the two-way `data` binding (uncontrolled fallback `dataDefault`). A stable reference per Rozie's setup-once model — fed directly into table-core (never map/cloned in the watcher). |
|
|
423
|
+
| `columns` | `Array` | `[]` | | | Config-array column fallback (lower precedence than `<Column>` children). Each entry: `{ id?, field, header?, sortable?, filterable?, pinned?, width? }`. Columns may come from this array, from `<Column>` children, or both (id-keyed last-write-wins union). A `pinned` value of `'left'` or `'right'` is applied once as the table's initial `columnPinning` state — identical to `<Column pinned>` — which also REORDERS that column, since table-core orders visible cells `[left-pinned, center, right-pinned]`. A consumer who has already expressed a pin (an initial two-way `columnPinning` model value or an interactive pin) owns the slice and this declaration is ignored. |
|
|
383
424
|
| `selectionMode` | `String` | `"none"` | | | Row-selection mode: `'none'` \| `'single'` \| `'multiple'`. `'multiple'` auto-injects a leading checkbox column with a select-all header. |
|
|
384
425
|
| `sorting` | `Array` | `[]` | ✓ | | `SortingState` — `[{ id, desc }]`. Uncontrolled fallback when unbound. Two-way: writes funnel a fresh value through the `sort-change` event regardless of binding. |
|
|
385
426
|
| `globalFilter` | `String` | `''` | ✓ | | The global search string — narrows all columns. Feeds `getFilteredRowModel()`. Surfaces through `filter-change`. Two-way: fires `filter-change` regardless of binding. |
|
|
@@ -388,18 +429,18 @@ import '@rozie-ui/data-table-lit/themes/shadcn.css'; // or material.css, boot
|
|
|
388
429
|
| `manual` | `Boolean` | `false` | | | Server-side hook: sets `manualPagination` / `manualFiltering` / `manualSorting` so table-core trusts the consumer-supplied rows and only emits the change events (the consumer fetches each page). |
|
|
389
430
|
| `rowCount` | `Number` | `null` | | | Total server-side row count for `manual` pagination; lets the table compute page count when it doesn't hold the full dataset. |
|
|
390
431
|
| `pageCount` | `Number` | `null` | | | Explicit total page count for `manual` pagination; overrides rowCount-derived count. |
|
|
391
|
-
| `expandable` | `Boolean` | `false` | | | Opt-in **expandable rows**. When `true`, a leading chevron expander column auto-injects (after the select column) and `getExpandedRowModel` activates; default `false` is byte-identical-off. Every row can expand to reveal a `#detail` panel unless `getSubRows` is supplied (then only rows with children expand).
|
|
432
|
+
| `expandable` | `Boolean` | `false` | | | Opt-in **expandable rows**. When `true`, a leading chevron expander column auto-injects (after the select column) and `getExpandedRowModel` activates; default `false` is byte-identical-off. Every row can expand to reveal a `#detail` panel unless `getSubRows` is supplied (then only rows with children expand). Pass `expandable` as a real boolean — a valueless attribute only coerces to `true` on Vue and Lit. |
|
|
392
433
|
| `expanded` | `any` | `null` | ✓ | | `ExpandedState` — `{ [rowId]: true }`, or the `true` literal after `expandAll` (declared `type: [Object, Boolean]`). Multi-expand (multiple rows open at once). Surfaces through `expand-change`; uncontrolled fallback (`$data.expandedDefault`) when unbound — the default is `null` so the uncontrolled fallback AND the grouping auto-expand default are reachable (a non-null default would short-circuit them). When grouping is active and `expanded` is untouched, group subtrees auto-expand. |
|
|
393
434
|
| `getSubRows` | `Function` | `null` | | | Table-level child-row accessor `(originalRow, index) => TData[] \| undefined` that drives nested sub-rows. When supplied (with `expandable`), table-core flattens the hierarchy and the expand seam reveals depth-indented child rows. Null → the `#detail` scoped slot is the expand mode. |
|
|
394
435
|
| `groupable` | `Boolean` | `false` | | | Opt-in gate for the **headless `#groupBar`** host region. Default `false` is byte-identical-off. `getGroupedRowModel` is wired unconditionally (inert when `grouping` is empty), so grouping is driven by the `grouping` model; this flag only gates the consumer-facing group-bar surface (the component ships **no** built-in drag UI). |
|
|
395
|
-
| `grouping` | `Array` | `null` | ✓ | | `GroupingState` — an ordered `string[]` of column ids (multi-column → nested groups, e.g. `['region','category']`). An empty/unbound list is ungrouped (byte-identical-off). Group-header rows are collapsible (they ride the expand model). Surfaces through `group-change`; uncontrolled fallback (`$data.groupingDefault`, default `[]`) when unbound — the default is `null` (mirroring `expanded`) so the uncontrolled fallback is reachable and the grouping auto-expand default can activate when a consumer applies grouping without binding `
|
|
436
|
+
| `grouping` | `Array` | `null` | ✓ | | `GroupingState` — an ordered `string[]` of column ids (multi-column → nested groups, e.g. `['region','category']`). An empty/unbound list is ungrouped (byte-identical-off). Group-header rows are collapsible (they ride the expand model). Surfaces through `group-change`; uncontrolled fallback (`$data.groupingDefault`, default `[]`) when unbound — the default is `null` (mirroring `expanded`) so the uncontrolled fallback is reachable and the grouping auto-expand default can activate when a consumer applies grouping without binding the two-way `grouping` model (a non-null `[]` default would short-circuit it). All reads are null-guarded, so table-core still receives an array. |
|
|
396
437
|
| `rowSelection` | `Object` | `{}` | ✓ | | `RowSelectionState` — `{ [rowId]: true }`. Checkbox-only toggle (the row body does not select). Driven by the `selectionMode` chrome. Two-way: fires `selection-change` regardless of binding. |
|
|
397
438
|
| `columnVisibility` | `Object` | `{}` | ✓ | | `VisibilityState` — `{ [colId]: boolean }`. Hidden columns drop automatically from header + body. Two-way: funnels a fresh object through `visibility-change`. |
|
|
398
439
|
| `columnSizing` | `Object` | `{}` | ✓ | | `ColumnSizingState` — `{ [colId]: number }`. Driven live by the pointer-drag resize handle (`columnResizeMode: 'onChange'`). Two-way: fires `resize-change`. |
|
|
399
440
|
| `columnOrder` | `Array` | `[]` | ✓ | | `ColumnOrderState` — `string[]`. A fresh order array on reorder (never an in-place splice). Two-way: fires `reorder-change`. |
|
|
400
441
|
| `columnPinning` | `Object` | `{…}` | ✓ | | `ColumnPinningState` — `{ left: string[], right: string[] }`. Pinned columns get `position: sticky` + computed offsets. Defaults to `{ left: [], right: [] }`. Two-way: fires `pin-change`. |
|
|
401
442
|
| `stickyHeader` | `Boolean` | `false` | | | Pure-CSS sticky header: the `<thead>` sticks to the top of the scroll container. |
|
|
402
|
-
| `interactionMode` | `String` | `"table"` | | | `'table'` (default, row-oriented, byte-behaviorally identical to a plain accessible table) \| `'grid'`
|
|
443
|
+
| `interactionMode` | `String` | `"table"` | | | `'table'` (default, row-oriented, byte-behaviorally identical to a plain accessible table) \| `'grid'` — lights up the full WAI-ARIA **[grid interaction mode](/components/data-table-grid-mode)**: `role="grid"`, a roving single tab-stop, 2-D APG arrow-key cell navigation, range selection, and clipboard support. |
|
|
403
444
|
| `singleClickEdit` | `Boolean` | `false` | | | Grid mode only. When `true`, a plain click on an **editable** cell opens its editor immediately (single-click-to-edit) instead of just activating the cell. Default `false` keeps click-to-activate (double-click opens the editor). Shift+click (range selection) and clicks on non-editable cells are unaffected. |
|
|
404
445
|
| `undoable` | `Boolean` | `false` | | | Grid mode. When `true`, every committed data mutation (cell/row edit, paste, fill, cut, clear) becomes one undo step: Ctrl/Cmd+Z undoes, Ctrl/Cmd+Y or Ctrl/Cmd+Shift+Z redoes. Default `false` records no history and Ctrl+Z/Y are inert. |
|
|
405
446
|
| `undoLimit` | `Number` | `100` | | | The maximum number of undo steps retained (oldest evicted past this depth). Only consulted when `undoable` is `true`. |
|
|
@@ -413,20 +454,20 @@ import '@rozie-ui/data-table-lit/themes/shadcn.css'; // or material.css, boot
|
|
|
413
454
|
| Event | Description |
|
|
414
455
|
| --- | --- |
|
|
415
456
|
| `sort-change` | Fired when the sort state changes (header click / shift-click multi-sort / a `sortColumn`/`clearSorting` call). Payload is the fresh `SortingState` array `[{ id, desc }]`. |
|
|
416
|
-
| `expand-change` | Fired
|
|
417
|
-
| `group-change` | Fired
|
|
457
|
+
| `expand-change` | Fired when the expanded-row set changes (an expander chevron toggle — click / Enter / Space — or a `toggleRowExpanded`/`expandAll`/`collapseAll` call). Fires exactly once per change (the echo-guarded write funnel dedups the React multi-render re-entry) and REGARDLESS of whether the two-way `expanded` model is bound. Payload is the fresh `ExpandedState` — a `{ [rowId]: true }` object, or the `true` literal after `expandAll` (passed through verbatim — never `Object.keys` it without a `=== true` guard). Named `expand-change` (not `expanded-change`): the model:true `expanded` prop owns the `onExpandedChange` callback on the React/Solid Props interface, so the event stems off a distinct name to avoid a duplicate-identifier collision (the house convention every slice follows). |
|
|
458
|
+
| `group-change` | Fired when the grouping state changes (a consumer-built `#groupBar` apply/clear, mutating the `grouping` model, or an `applyGrouping`/`clearGrouping` call). Fires exactly once per change (the echo-guarded write funnel dedups the React multi-render re-entry) and REGARDLESS of whether the two-way `grouping` model is bound. Payload is the fresh `GroupingState` — an ORDERED `string[]` of column ids (e.g. `["region","category"]` for nested groups), or `[]` when cleared. Named `group-change` (not `grouping-change`): the model:true `grouping` prop owns the `onGroupingChange` callback on the React/Solid Props interface, so the event stems off a distinct name to avoid a duplicate-identifier collision (the house convention every slice follows — sorting→sort-change, expanded→expand-change). |
|
|
418
459
|
| `filter-change` | Fired when a filter changes. Payload is `{ globalFilter }` for the global search box or `{ columnFilters }` (the fresh `ColumnFiltersState` `[{ id, value }]`) for a per-column filter — both surface through this one event. |
|
|
419
460
|
| `page-change` | Fired when pagination changes (prev/next, a page-size change, or a `setPage`/`setRowsPerPage` call). Payload is the fresh `{ pageIndex, pageSize }` object. |
|
|
420
461
|
| `selection-change` | Fired when the row selection changes (a row/select-all checkbox toggle or a `toggleAllRows`/`clearSelection` call). Payload is the fresh `RowSelectionState` `{ [rowId]: true }` object. |
|
|
421
462
|
| `visibility-change` | Fired when a column is shown/hidden (the column-toggle menu or a `toggleColumnVisibility` call). Payload is the fresh `VisibilityState` `{ [colId]: boolean }` object. |
|
|
422
463
|
| `resize-change` | Fired live during a column resize drag (`columnResizeMode: "onChange"`). Payload is the fresh `ColumnSizingState` `{ [colId]: number }` object. |
|
|
423
|
-
| `reorder-change` | Fired when the column order changes
|
|
464
|
+
| `reorder-change` | Fired when the column order changes. Column reorder is programmatic only — an `applyColumnOrder` call or a two-way `columnOrder` write; the component ships NO drag or menu affordance for it. Payload is the fresh `ColumnOrderState` `string[]`. |
|
|
424
465
|
| `pin-change` | Fired when a column is pinned/unpinned (the per-header pin buttons or a `pinColumn` call). Payload is the fresh `ColumnPinningState` `{ left: string[], right: string[] }` object. |
|
|
425
|
-
| `history-change` | Fired (
|
|
426
|
-
| `activecell-change` | Fired (grid interaction mode only) whenever the active cell moves — by keyboard navigation or a `focusCell` call. One-way notification; payload is `{ rowIndex, colIndex }` integers over the visible model. Fires on every move including arrow keypresses
|
|
427
|
-
| `range-change` | Fired
|
|
428
|
-
| `cell-edit-commit` | Fired
|
|
429
|
-
| `row-edit-commit` | Fired
|
|
466
|
+
| `history-change` | Fired when undo/redo AVAILABILITY changes (one unified grid-wide undo/redo stack, not scoped per-cell or per-row) — EDGE-triggered (only when `canUndo`/`canRedo` actually flip, not on every recorded edit) so a toolbar can enable/disable its buttons without polling. Only meaningful when `undoable` is `true`. Payload is `{ canUndo, canRedo }` booleans. No `history` model prop exists, so there is no model-prop==emit-name duplicate-identifier collision. |
|
|
467
|
+
| `activecell-change` | Fired (grid interaction mode only) whenever the active cell moves — by keyboard navigation or a `focusCell` call. One-way notification; payload is `{ rowIndex, colIndex }` integers over the visible model. Fires on every move including arrow keypresses. |
|
|
468
|
+
| `range-change` | Fired whenever the rectangular cell-range selection changes — extended by `Shift+Arrow` / `Shift+Click` from the single `extendRange`/`setRangeFocus` call sites (React multi-emit dedup). One-way notification (the range is NOT a `model:true` slice — the model:true count stays at 12, leaving the Angular multi-model-CVA condition untouched); it is a SEPARATE layer from the row-selection slice and the two never corrupt each other. Payload is `getSelectedRange()` → `{ anchor, focus }` where each corner is a `{ rowIndex, colIndex }` index pair over the visible model (integers only — no row data, no DOM node), or `{ anchor: null, focus: null }` when no range is set. |
|
|
469
|
+
| `cell-edit-commit` | Fired when an editable cell commits a NEW, validated value — once per committed cell, from the single `commitEdit` call site (a rejected/invalid commit fires nothing). Pairs with the two-way `data` write (one fresh-array replace per commit). Payload is `{ rowId, columnId, oldValue, newValue }`. `cancel`/`Escape` and a validation failure emit nothing. |
|
|
470
|
+
| `row-edit-commit` | Fired when a FULL-ROW edit commits — once per row save, from the single `commitRow` call site (React multi-emit dedup). A row enters full-row edit via `Shift+F2` or the `editRow` verb (every editable cell edits at once); one save validates every edited cell (a single failure blocks the whole row and emits nothing) then writes the two-way `data` model ONCE (a single fresh-array row-object replace with all changes applied) and fires this event ONCE. `Escape` reverts the whole row as a unit and emits nothing. Payload is `{ rowId, changes }` where `changes` is `[{ columnId, oldValue, newValue }]` for ONLY the columns whose value actually changed. |
|
|
430
471
|
|
|
431
472
|
## Imperative handle
|
|
432
473
|
|
|
@@ -436,15 +477,15 @@ Beyond props, the component exposes imperative methods (declared once in the Roz
|
|
|
436
477
|
| --- | --- |
|
|
437
478
|
| `sortColumn` | Toggle (or set) the sort for a column — `sortColumn(colId, desc?)`. Drives table-core so `sort-change` fires with the fresh `SortingState`. |
|
|
438
479
|
| `clearSorting` | Clear all sorting — `clearSorting()`. Resets to the unsorted core row model and fires `sort-change`. |
|
|
439
|
-
| `toggleRowExpanded` | Toggle ONE row's expanded state
|
|
440
|
-
| `expandAll` | Open every expandable row
|
|
441
|
-
| `collapseAll` | Collapse every row
|
|
442
|
-
| `getExpandedRows` | Return the original row data for the currently-expanded rows
|
|
480
|
+
| `toggleRowExpanded` | Toggle ONE row's expanded state — `toggleRowExpanded(rowId)` where `rowId` is the consumer's row `id` (the data field) OR the table-core row id (both resolve). Scans the core flat-row set so a collapsed parent is still resolvable. Drives table-core so `expand-change` fires with the fresh `ExpandedState`. Multi-expand: it does not collapse other open rows. |
|
|
481
|
+
| `expandAll` | Open every expandable row — `expandAll()`. Drives table-core (`toggleAllRowsExpanded(true)`) so `expand-change` fires; the payload may be the `true` expand-all literal. |
|
|
482
|
+
| `collapseAll` | Collapse every row — `collapseAll()`. Resets the expanded set to a blank state (`resetExpanded(true)` → `{}`) and fires `expand-change` with `{}`. |
|
|
483
|
+
| `getExpandedRows` | Return the original row data for the currently-expanded rows — `getExpandedRows()` → `unknown[]` (empty when nothing is expanded). The read-verb twin of the `expand-change` event. |
|
|
443
484
|
| `applyGrouping` | Set the full grouping — `applyGrouping(cols)` where `cols` is a fresh ORDERED `string[]` of column ids (multi-column → nested groups, e.g. `["region","category"]`). Drives table-core (`table.setGrouping`) so `group-change` fires with the fresh `GroupingState`. (Named `applyGrouping`, not `setGrouping`: a `set<ModelProp>` verb collides with React`s auto-generated `grouping` useState setter and an $expose verb is rename-protected — ROZ524; same `applyColumnOrder` precedent.) |
|
|
444
485
|
| `clearGrouping` | Clear all grouping — `clearGrouping()`. Resets to the ungrouped (flat) row model (`table.setGrouping([])`) and fires `group-change` with `[]`. |
|
|
445
|
-
| `getFacetedUniqueValues` | Return a column's CROSS-FILTERED distinct values
|
|
446
|
-
| `getFacetedMinMaxValues` | Return a numeric column's CROSS-FILTERED `[min, max]` range
|
|
447
|
-
| `getColumnDefs` | Return the resolved `ColumnDef[]` (the id-keyed LWW union of the
|
|
486
|
+
| `getFacetedUniqueValues` | Return a column's CROSS-FILTERED distinct values — `getFacetedUniqueValues(colId)` → `unknown[]` of distinct values (KEYS ONLY — occurrence counts are deliberately NOT exposed). Resolves the column via `table.getColumn(colId)` and reads table-core's faceted unique-value map, returning `Array.from(map.keys())`. Cross-filtered: the values reflect rows passing all OTHER active column filters and update when an upstream filter changes. Empty array when the column/table is missing. Inert (the faceted models stay off-path) until this verb or the `#filter` slot reads a facet. |
|
|
487
|
+
| `getFacetedMinMaxValues` | Return a numeric column's CROSS-FILTERED `[min, max]` range — `getFacetedMinMaxValues(colId)` → `[number, number] | null`. Resolves the column via `table.getColumn(colId)` and reads table-core's faceted min/max. Cross-filtered (reflects rows passing all OTHER active column filters) and updates when an upstream filter changes. `null` when unavailable. The read twin handed to the `#filter` scoped slot so a consumer builds a numeric range slider purely from exposed values. |
|
|
488
|
+
| `getColumnDefs` | Return the resolved `ColumnDef[]` (the id-keyed LWW union of the `columns` config array and the `<Column>` children) — `getColumnDefs()`. |
|
|
448
489
|
| `toggleAllRows` | Select or clear all (filtered) rows — `toggleAllRows(value)`. Drives table-core so `selection-change` fires with the fresh `RowSelectionState`. |
|
|
449
490
|
| `clearSelection` | Clear the row selection — `clearSelection()`. Fires `selection-change` with `{}`. |
|
|
450
491
|
| `getSelectedRows` | Return the original row data for the currently-selected rows — `getSelectedRows()` → `unknown[]` (empty when nothing is selected). |
|
|
@@ -454,32 +495,36 @@ Beyond props, the component exposes imperative methods (declared once in the Roz
|
|
|
454
495
|
| `applyColumnOrder` | Set the full column order — `applyColumnOrder(order)` where `order` is a fresh `string[]`. Fires `reorder-change`. (Named `applyColumnOrder`, not `setColumnOrder`: a `set<ModelProp>` verb collides with React`s auto-generated `columnOrder` setter and an $expose verb is rename-protected — ROZ524.) |
|
|
455
496
|
| `resetColumnSizing` | Reset all column widths to their defaults — `resetColumnSizing()`. Fires `resize-change`. |
|
|
456
497
|
| `pinColumn` | Pin a column to a side or unpin it — `pinColumn(colId, side)` where `side` is `'left'` | `'right'` | `false`. Fires `pin-change` with the fresh `ColumnPinningState`. |
|
|
457
|
-
| `focusCell` | Move + focus the active cell (grid interaction mode) — `focusCell(rowIndex, colIndex)`. `rowIndex` is the ABSOLUTE display-order position in `getPrePaginationRowModel().rows` (filter+sort+expand applied, BEFORE pagination/windowing), in BOTH paginated and virtual modes
|
|
458
|
-
| `getActiveCell` | Return the current active-cell position — `getActiveCell()` → `{ rowIndex, colIndex, isHeader }`. For a body cell `rowIndex` is the ABSOLUTE display-order index (
|
|
459
|
-
| `clearActiveCell` | Reset the roving active-cell position to the entry cell and exit interaction mode — `clearActiveCell()`. The next Tab-in re-enters at the entry cell
|
|
460
|
-
| `getRowIndexRelativeToPage` | Convert an ABSOLUTE display-order row index (the `focusCell` / `getActiveCell` / `activecell-change` space
|
|
461
|
-
| `editCell` | Programmatically open the editor on a cell
|
|
462
|
-
| `commitEditing` | Programmatically commit the open editor
|
|
463
|
-
| `editRow` | Programmatically enter FULL-ROW edit on a body row
|
|
464
|
-
| `getSelectedRange` | Return the current rectangular cell-range selection
|
|
465
|
-
| `cut` | Cut the current cell-range selection
|
|
466
|
-
| `undo` | Undo the most recent data mutation (
|
|
467
|
-
| `redo` | Redo the most recently undone data mutation
|
|
468
|
-
| `canUndo` | Return whether an undo step is available
|
|
469
|
-
| `canRedo` | Return whether a redo step is available
|
|
470
|
-
| `clearHistory` | Discard all undo/redo history
|
|
498
|
+
| `focusCell` | Move + focus the active cell (grid interaction mode) — `focusCell(rowIndex, colIndex)`. `rowIndex` is the ABSOLUTE display-order position in `getPrePaginationRowModel().rows` (filter+sort+expand applied, BEFORE pagination/windowing), in BOTH paginated and virtual modes: a paginated `focusCell(abs)` switches to `Math.floor(abs/pageSize)` then focuses; a virtual `focusCell(abs)` scrolls-then-focuses. Args coerced to integers + clamped to bounds. Fires `activecell-change` with the absolute `rowIndex`. (Named `focusCell`, not `focus`: a bare `focus` verb shadows the inherited `HTMLElement.focus` on Lit — ROZ137.) |
|
|
499
|
+
| `getActiveCell` | Return the current active-cell position — `getActiveCell()` → `{ rowIndex, colIndex, isHeader }`. For a body cell `rowIndex` is the ABSOLUTE display-order index (matching `focusCell` / `activecell-change`) and `isHeader` is `false`; for a header-active cell `rowIndex` is `null` and `isHeader` is `true` (integers only — no row data, no DOM node). |
|
|
500
|
+
| `clearActiveCell` | Reset the roving active-cell position to the entry cell and exit interaction mode — `clearActiveCell()`. The next Tab-in re-enters at the entry cell. (Named `clearActiveCell`, not `clear`: distinct from the listbox `clear` selection verb.) |
|
|
501
|
+
| `getRowIndexRelativeToPage` | Convert an ABSOLUTE display-order row index (the `focusCell` / `getActiveCell` / `activecell-change` space) to the PAGE-RELATIVE index — `getRowIndexRelativeToPage(absRow?)` → `number`. With no argument it converts the current active cell (`abs - pageIndex*pageSize`). In virtual mode (no pagination) it returns the absolute index unchanged. Mirrors MUI `getRowIndexRelativeToVisibleRows`. (Named `getRowIndexRelativeToPage`: collision-clean against the verb/event/prop and Lit ROZ137 reserved sets.) |
|
|
502
|
+
| `editCell` | Programmatically open the editor on a cell — `editCell(rowIndex, colIndex)`, addressed by index over the visible model (args coerced to integers + clamped). No-op on a non-editable cell. (Named `editCell`, not `edit`: collision-clean against the verb/event/prop and Lit ROZ137 reserved sets.) |
|
|
503
|
+
| `commitEditing` | Programmatically commit the open editor — `commitEditing()`. Runs the column validator; on success writes the two-way `data` model and fires one `cell-edit-commit`; on a validation failure keeps the editor open. No-op when no cell is editing. (Named `commitEditing`, not `commit`.) |
|
|
504
|
+
| `editRow` | Programmatically enter FULL-ROW edit on a body row — `editRow(rowIndex)`, addressed by index over the visible model (args coerced to integers + clamped). The API twin of the `Shift+F2` shortcut: every editable cell in the row enters edit at once. A later save commits the whole row in one two-way `data` model write + one `row-edit-commit`; `Escape` reverts the row as a unit. No-op on a row with no editable columns. (Named `editRow`, not `edit`/`editColumn`: collision-clean against the verb/event/prop and Lit ROZ137 reserved sets.) |
|
|
505
|
+
| `getSelectedRange` | Return the current rectangular cell-range selection — `getSelectedRange()` → `{ anchor, focus }` where each corner is a `{ rowIndex, colIndex }` index pair over the visible model (integers only — no row data, no DOM node), or `{ anchor: null, focus: null }` when no range is set. The range is extended by `Shift+Arrow` / `Shift+Click` and is ONE-WAY (this read verb + the `range-change` event), NOT a `model:true` slice. (Named `getSelectedRange`, not `getRange`/`getSelection`: collision-clean against `getSelectedRows`, the verb/event/prop, and the Lit ROZ137 reserved sets.) |
|
|
506
|
+
| `cut` | Cut the current cell-range selection — `cut()`. Copies the range to the clipboard as TSV (the same escaped serialization `Ctrl+C` produces) THEN clears the source cells through the two-way `data` model write-funnel in a single `writeData` (each cell coerced to its column empty — `null` on a numeric column, the empty string on text — under the editable + validator skip rule, firing one `cell-edit-commit` per cleared cell). The API twin of the `Ctrl/Cmd+X` shortcut. A no-op while a header cell is active (the reusable clipboard guard). (Named `cut`, the spreadsheet-standard verb: collision-clean against the verb/event/prop, the React auto-setter set, and the Lit ROZ137 reserved DOM members — `cut` is not on `HTMLElement`.) |
|
|
507
|
+
| `undo` | Undo the most recent data mutation (grid-wide undo/redo) — `undo()`. Only meaningful when `undoable` is `true`. Pops the most recent pre-mutation snapshot, pushes the current data onto the redo stack, and replays the snapshot through the SAME `writeData` funnel every edit/paste/fill/cut/clear commits through — so the two-way `data` model writeback keeps working with zero new code. Fires `history-change` once per call. A no-op when nothing is undoable (`canUndo()` is `false`). The API twin of the `Ctrl/Cmd+Z` shortcut. |
|
|
508
|
+
| `redo` | Redo the most recently undone data mutation — `redo()`. Symmetric to `undo()`: pops the redo stack, pushes the current data back onto the undo stack, replays through the same `writeData` seam, fires `history-change` once. A no-op when nothing is redoable (`canRedo()` is `false`). The API twin of the `Ctrl/Cmd+Y` / `Ctrl/Cmd+Shift+Z` shortcuts. |
|
|
509
|
+
| `canUndo` | Return whether an undo step is available — `canUndo()` → `boolean`. Reflects the undo stack depth; use alongside the `history-change` event to drive a toolbar button`s disabled state without polling. |
|
|
510
|
+
| `canRedo` | Return whether a redo step is available — `canRedo()` → `boolean`. Reflects the redo stack depth; cleared by any new edit after an undo (standard undo semantics). |
|
|
511
|
+
| `clearHistory` | Discard all undo/redo history — `clearHistory()`. Empties both stacks (`canUndo()`/`canRedo()` become `false`). Also called internally on an external data-reference swap (a dataset the component itself did not write), since undoing across a dataset boundary is incoherent. |
|
|
471
512
|
|
|
472
513
|
```ts
|
|
473
514
|
// The custom element IS the handle — exposed methods are public element
|
|
474
515
|
// methods.
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
const
|
|
478
|
-
el
|
|
479
|
-
|
|
480
|
-
el.
|
|
481
|
-
el.
|
|
482
|
-
const
|
|
516
|
+
import type { DataTable } from '@rozie-ui/data-table-lit';
|
|
517
|
+
|
|
518
|
+
const el = document.querySelector<DataTable>('rozie-data-table');
|
|
519
|
+
if (el) {
|
|
520
|
+
el.toggleAllRows(true);
|
|
521
|
+
const selected = el.getSelectedRows();
|
|
522
|
+
el.editRow(0); // full-row edit on row 0
|
|
523
|
+
const range = el.getSelectedRange(); // the active cell-range rectangle
|
|
524
|
+
el.expandAll(); // collapseAll / toggleRowExpanded / getExpandedRows
|
|
525
|
+
el.applyGrouping(['region']); // clearGrouping to reset
|
|
526
|
+
const cats = el.getFacetedUniqueValues('category'); // getFacetedMinMaxValues too
|
|
527
|
+
}
|
|
483
528
|
```
|
|
484
529
|
|
|
485
530
|
## Slots
|
|
@@ -488,14 +533,22 @@ All rendering slots live on the parent `<DataTable>` (a `<Column>` carries metad
|
|
|
488
533
|
|
|
489
534
|
The `detail` (expandable rows), `groupBar` (grouping) and `filter` (faceted filtering) scoped slots follow the SAME render-prop convention: on React they are `renderDetail` / `renderGroupBar` / `renderFilter`; on Solid they are `detailSlot` / `groupBarSlot` / `filterSlot`; on Lit they are the `.detail` / `.groupBar` / `.filter` properties — the documented React render-prop edge (per the cross-framework compatibility bar). On Vue / Svelte / Angular they are ordinary named scoped slots (`#detail` / `#groupBar` / `#filter`). The `groupBar` and `filter` slots are HEADLESS — the component ships NO built-in group-bar / facet control, so the consumer builds the UI purely from the exposed slot props.
|
|
490
535
|
|
|
536
|
+
`cell`, `colHeader`, `filter` and `editor` each also have a **per-column slot family** — a statically-named fill per `columnId` (`cell-price`, `colHeader-price`, `filter-category`, `editor-score`, …) that takes precedence OVER the matching generic slot above it: `<seam>-<id>` → the generic `<seam>` slot → the built-in render. `editor-<id>` (and `editor`) only render on a column declared `editor="custom"`; `filter-<id>` (and `filter`) only render on a column declared `filterable`; `cell-<id>` / `colHeader-<id>` have no gate. The auto-injected row-select / row-expander chrome columns never reach any family — they are excluded structurally. On Lit the family is the additive **`.rozieSlots`** record property — `.rozieSlots=${{ 'cell-price': (ctx) => html`…` }}` — keyed by the exact `<seam>-<id>` string.
|
|
537
|
+
|
|
538
|
+
A misspelled family key does not fail to compile — the emitted type carries a trailing catch-all index signature alongside the templated key, so it typechecks but is simply never invoked. See the "Per-column slot families" example in Usage above for the full per-target syntax.
|
|
539
|
+
|
|
491
540
|
| Slot | Params |
|
|
492
541
|
| --- | --- |
|
|
493
542
|
| (default) | |
|
|
494
543
|
| groupBar | grouping, groupableColumns, applyGrouping, clearGrouping |
|
|
495
544
|
| selectAll | checked, indeterminate, toggle |
|
|
545
|
+
| colHeader-<id> | columnId, column, label |
|
|
546
|
+
| filter-<id> | columnId, value, uniqueValues, minMax, setFilter |
|
|
547
|
+
| selectCell | row, checked, toggle |
|
|
548
|
+
| cell-<id> | columnId, column, row, value |
|
|
549
|
+
| editor-<id> | columnId, column, row, value, commit, cancel, autofocus |
|
|
550
|
+
| detail | row |
|
|
496
551
|
| colHeader | columnId, column, label |
|
|
497
552
|
| filter | columnId, value, uniqueValues, minMax, setFilter |
|
|
498
|
-
| selectCell | row, checked, toggle |
|
|
499
553
|
| cell | columnId, column, row, value |
|
|
500
554
|
| editor | columnId, column, row, value, commit, cancel, autofocus |
|
|
501
|
-
| detail | row |
|