@rozie-ui/data-table-solid 0.4.0 → 0.6.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 +66 -52
- package/dist/index.cjs +3198 -837
- package/dist/index.d.cts +71 -8
- package/dist/index.d.mts +71 -8
- package/dist/index.mjs +3122 -761
- package/dist/source/index.jsx +6368 -0
- package/package.json +8 -3
- package/src/Column.tsx +3 -3
- package/src/DataTable.tsx +1401 -133
- package/src/EditorCheckbox.tsx +38 -4
- package/src/EditorDate.tsx +79 -8
- package/src/EditorNumber.tsx +52 -6
- package/src/EditorSelect.tsx +51 -6
- package/src/EditorText.tsx +34 -5
- package/src/FilterNumberRange.tsx +79 -12
- package/src/FilterSelect.tsx +18 -3
- package/src/FilterText.tsx +48 -9
- package/src/GroupBar.tsx +75 -3
- package/src/helpers/columnDefUtils.ts +73 -1
- package/src/helpers/dateValue.ts +55 -0
- package/src/themes/base.css +122 -88
- package/src/themes/bootstrap.css +60 -24
- package/src/themes/material.css +54 -22
- package/src/themes/shadcn.css +59 -23
package/dist/index.d.cts
CHANGED
|
@@ -12,6 +12,10 @@ interface SelectAllSlotCtx {
|
|
|
12
12
|
indeterminate: any;
|
|
13
13
|
toggle: any;
|
|
14
14
|
}
|
|
15
|
+
interface PlaceholderSlotCtx {
|
|
16
|
+
index: any;
|
|
17
|
+
columnId: any;
|
|
18
|
+
}
|
|
15
19
|
interface SelectCellSlotCtx {
|
|
16
20
|
row: any;
|
|
17
21
|
checked: any;
|
|
@@ -30,6 +34,7 @@ interface FilterSlotCtx {
|
|
|
30
34
|
value: any;
|
|
31
35
|
uniqueValues: any;
|
|
32
36
|
minMax: any;
|
|
37
|
+
columnLabel: any;
|
|
33
38
|
setFilter: any;
|
|
34
39
|
}
|
|
35
40
|
interface CellSlotCtx {
|
|
@@ -45,11 +50,12 @@ interface EditorSlotCtx {
|
|
|
45
50
|
value: any;
|
|
46
51
|
commit: any;
|
|
47
52
|
cancel: any;
|
|
53
|
+
columnLabel: any;
|
|
48
54
|
autofocus: any;
|
|
49
55
|
}
|
|
50
56
|
interface DataTableProps {
|
|
51
57
|
/**
|
|
52
|
-
* The row data — `model: true`, so a committed cell/row edit writes a **fresh** array back through `
|
|
58
|
+
* 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).
|
|
53
59
|
* @example
|
|
54
60
|
* <DataTable data={rows()} onDataChange={setRows} columns={cols} />
|
|
55
61
|
*/
|
|
@@ -57,7 +63,7 @@ interface DataTableProps {
|
|
|
57
63
|
defaultData?: any[];
|
|
58
64
|
onDataChange?: (data: any[]) => void;
|
|
59
65
|
/**
|
|
60
|
-
* 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).
|
|
66
|
+
* 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.
|
|
61
67
|
*/
|
|
62
68
|
columns?: any[];
|
|
63
69
|
/**
|
|
@@ -101,7 +107,7 @@ interface DataTableProps {
|
|
|
101
107
|
*/
|
|
102
108
|
pageCount?: (number) | null;
|
|
103
109
|
/**
|
|
104
|
-
* 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).
|
|
110
|
+
* 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.
|
|
105
111
|
*/
|
|
106
112
|
expandable?: boolean;
|
|
107
113
|
/**
|
|
@@ -110,6 +116,10 @@ interface DataTableProps {
|
|
|
110
116
|
expanded?: (Record<string, any> | boolean) | null;
|
|
111
117
|
defaultExpanded?: (Record<string, any> | boolean) | null;
|
|
112
118
|
onExpandedChange?: (expanded: (Record<string, any> | boolean) | null) => void;
|
|
119
|
+
/**
|
|
120
|
+
* Row identity `(originalRow, index, parentRow?) => string | number` — the key `rowSelection`, `expanded` and the per-row caches use. Default null → table-core keys rows by position (`"0"`, `"1"`, … and `"0.1"` for sub-rows), so inserting or removing rows above a selected or expanded row moves that state onto whatever row now sits at its index. Supply it whenever rows can be added or removed while state is held (server push, live lists); the result is coerced to a string.
|
|
121
|
+
*/
|
|
122
|
+
getRowId?: ((...args: any[]) => any) | null;
|
|
113
123
|
/**
|
|
114
124
|
* 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.
|
|
115
125
|
*/
|
|
@@ -119,7 +129,7 @@ interface DataTableProps {
|
|
|
119
129
|
*/
|
|
120
130
|
groupable?: boolean;
|
|
121
131
|
/**
|
|
122
|
-
* `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 `
|
|
132
|
+
* `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.
|
|
123
133
|
*/
|
|
124
134
|
grouping?: (any[]) | null;
|
|
125
135
|
defaultGrouping?: (any[]) | null;
|
|
@@ -159,7 +169,7 @@ interface DataTableProps {
|
|
|
159
169
|
*/
|
|
160
170
|
stickyHeader?: boolean;
|
|
161
171
|
/**
|
|
162
|
-
* `'table'` (default, row-oriented, byte-behaviorally identical to a plain accessible table) | `'grid'`
|
|
172
|
+
* `'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.
|
|
163
173
|
*/
|
|
164
174
|
interactionMode?: string;
|
|
165
175
|
/**
|
|
@@ -201,13 +211,16 @@ interface DataTableProps {
|
|
|
201
211
|
onReorderChange?: (...args: unknown[]) => void;
|
|
202
212
|
onPinChange?: (...args: unknown[]) => void;
|
|
203
213
|
onHistoryChange?: (...args: unknown[]) => void;
|
|
214
|
+
onVisibleRangeChange?: (...args: unknown[]) => void;
|
|
204
215
|
onActivecellChange?: (...args: unknown[]) => void;
|
|
216
|
+
onRowActivate?: (...args: unknown[]) => void;
|
|
205
217
|
onRangeChange?: (...args: unknown[]) => void;
|
|
206
218
|
onCellEditCommit?: (...args: unknown[]) => void;
|
|
207
219
|
onRowEditCommit?: (...args: unknown[]) => void;
|
|
208
220
|
children?: JSX.Element;
|
|
209
221
|
groupBarSlot?: (ctx: GroupBarSlotCtx) => JSX.Element;
|
|
210
222
|
selectAllSlot?: (ctx: SelectAllSlotCtx) => JSX.Element;
|
|
223
|
+
placeholderSlot?: (ctx: PlaceholderSlotCtx) => JSX.Element;
|
|
211
224
|
selectCellSlot?: (ctx: SelectCellSlotCtx) => JSX.Element;
|
|
212
225
|
detailSlot?: (ctx: DetailSlotCtx) => JSX.Element;
|
|
213
226
|
colHeaderSlot?: (ctx: ColHeaderSlotCtx) => JSX.Element;
|
|
@@ -225,6 +238,7 @@ interface DataTableProps {
|
|
|
225
238
|
value: any;
|
|
226
239
|
uniqueValues: any;
|
|
227
240
|
minMax: any;
|
|
241
|
+
columnLabel: any;
|
|
228
242
|
setFilter: any;
|
|
229
243
|
}) => JSX.Element) | undefined;
|
|
230
244
|
[key: `cell-${string}`]: ((ctx: {
|
|
@@ -240,6 +254,7 @@ interface DataTableProps {
|
|
|
240
254
|
value: any;
|
|
241
255
|
commit: any;
|
|
242
256
|
cancel: any;
|
|
257
|
+
columnLabel: any;
|
|
243
258
|
autofocus: any;
|
|
244
259
|
}) => JSX.Element) | undefined;
|
|
245
260
|
[key: string]: ((...args: any[]) => JSX.Element) | undefined;
|
|
@@ -309,11 +324,11 @@ interface ColumnProps {
|
|
|
309
324
|
*/
|
|
310
325
|
filterable?: boolean;
|
|
311
326
|
/**
|
|
312
|
-
*
|
|
327
|
+
* Initial pin side: `''` (unpinned) | `'left'` | `'right'`. Applied once as the table's starting `columnPinning` state, so `getIsPinned()` reports it and the column joins the matching sticky rail — which also reorders it, since visible cells are ordered `[left-pinned, center, right-pinned]`. Ignored if the consumer has already pinned something; an interactive unpin is never re-applied.
|
|
313
328
|
*/
|
|
314
329
|
pinned?: string;
|
|
315
330
|
/**
|
|
316
|
-
* Optional fixed/initial column width — a
|
|
331
|
+
* Optional fixed/initial column width, applied as the column's starting size — a px number (`120`) or a px string (`'120px'`). Column sizing is numeric px, so other CSS lengths (`'12rem'`, `'20%'`, `'auto'`) have no px value to apply and are ignored; the column keeps the default width. An interactive resize overrides this.
|
|
317
332
|
*/
|
|
318
333
|
width?: string | number;
|
|
319
334
|
/**
|
|
@@ -333,7 +348,7 @@ interface ColumnProps {
|
|
|
333
348
|
*/
|
|
334
349
|
editable?: boolean;
|
|
335
350
|
/**
|
|
336
|
-
*
|
|
351
|
+
* Editor type for this column: `'text'` | `'number'` | `'select'` | `'checkbox'` (built-in inputs), or `'custom'` to hand rendering to the `#editor` scoped slot (or a per-column `editor-<columnId>` fill). Default `'text'`. **`'custom'` is the gate:** a column left on a built-in type ignores any `#editor` fill and renders the built-in input. Requires `editable: true` — and, for any pointer or keyboard edit entry, `interactionMode="grid"` on the table.
|
|
337
352
|
*/
|
|
338
353
|
editor?: string;
|
|
339
354
|
/**
|
|
@@ -377,6 +392,10 @@ interface EditorTextProps {
|
|
|
377
392
|
* Focus this editor's primary input when true — the host sets it for the one editor that should hold focus; reactive.
|
|
378
393
|
*/
|
|
379
394
|
autofocus?: boolean;
|
|
395
|
+
/**
|
|
396
|
+
* The column's human header, forwarded by the slot scope — used as the control's accessible name in place of the internal column id.
|
|
397
|
+
*/
|
|
398
|
+
columnLabel?: string;
|
|
380
399
|
}
|
|
381
400
|
declare function EditorText(_props: EditorTextProps): JSX.Element;
|
|
382
401
|
//#endregion
|
|
@@ -406,6 +425,14 @@ interface EditorNumberProps {
|
|
|
406
425
|
* `() => void` — revert the edit (Escape). Null-guarded at call sites.
|
|
407
426
|
*/
|
|
408
427
|
cancel?: ((...args: any[]) => any) | null;
|
|
428
|
+
/**
|
|
429
|
+
* Focus this editor's primary control when true — the host sets it for the one editor that should hold focus; reactive.
|
|
430
|
+
*/
|
|
431
|
+
autofocus?: boolean;
|
|
432
|
+
/**
|
|
433
|
+
* The column's human header, forwarded by the slot scope — used as the control's accessible name in place of the internal column id.
|
|
434
|
+
*/
|
|
435
|
+
columnLabel?: string;
|
|
409
436
|
}
|
|
410
437
|
declare function EditorNumber(_props: EditorNumberProps): JSX.Element;
|
|
411
438
|
//#endregion
|
|
@@ -439,6 +466,14 @@ interface EditorSelectProps {
|
|
|
439
466
|
* The select options — `[{ value, label }]`. Mirrors `<Column editorOptions>`.
|
|
440
467
|
*/
|
|
441
468
|
options?: any[];
|
|
469
|
+
/**
|
|
470
|
+
* Focus this editor's primary control when true — the host sets it for the one editor that should hold focus; reactive.
|
|
471
|
+
*/
|
|
472
|
+
autofocus?: boolean;
|
|
473
|
+
/**
|
|
474
|
+
* The column's human header, forwarded by the slot scope — used as the control's accessible name in place of the internal column id.
|
|
475
|
+
*/
|
|
476
|
+
columnLabel?: string;
|
|
442
477
|
}
|
|
443
478
|
declare function EditorSelect(_props: EditorSelectProps): JSX.Element;
|
|
444
479
|
//#endregion
|
|
@@ -468,6 +503,14 @@ interface EditorCheckboxProps {
|
|
|
468
503
|
* `() => void` — revert the edit (Escape). Null-guarded at call sites.
|
|
469
504
|
*/
|
|
470
505
|
cancel?: ((...args: any[]) => any) | null;
|
|
506
|
+
/**
|
|
507
|
+
* Focus this editor's primary control when true — the host sets it for the one editor that should hold focus; reactive.
|
|
508
|
+
*/
|
|
509
|
+
autofocus?: boolean;
|
|
510
|
+
/**
|
|
511
|
+
* The column's human header, forwarded by the slot scope — used as the control's accessible name in place of the internal column id.
|
|
512
|
+
*/
|
|
513
|
+
columnLabel?: string;
|
|
471
514
|
}
|
|
472
515
|
declare function EditorCheckbox(_props: EditorCheckboxProps): JSX.Element;
|
|
473
516
|
//#endregion
|
|
@@ -497,6 +540,14 @@ interface EditorDateProps {
|
|
|
497
540
|
* `() => void` — revert the edit (Escape). Null-guarded at call sites.
|
|
498
541
|
*/
|
|
499
542
|
cancel?: ((...args: any[]) => any) | null;
|
|
543
|
+
/**
|
|
544
|
+
* Focus this editor's primary control when true — the host sets it for the one editor that should hold focus; reactive.
|
|
545
|
+
*/
|
|
546
|
+
autofocus?: boolean;
|
|
547
|
+
/**
|
|
548
|
+
* The column's human header, forwarded by the slot scope — used as the control's accessible name in place of the internal column id.
|
|
549
|
+
*/
|
|
550
|
+
columnLabel?: string;
|
|
500
551
|
}
|
|
501
552
|
declare function EditorDate(_props: EditorDateProps): JSX.Element;
|
|
502
553
|
//#endregion
|
|
@@ -518,6 +569,10 @@ interface FilterTextProps {
|
|
|
518
569
|
* `(columnId, value) => void` — apply the column filter (Enter / blur applies, Escape clears). Null-guarded at call sites.
|
|
519
570
|
*/
|
|
520
571
|
setFilter?: ((...args: any[]) => any) | null;
|
|
572
|
+
/**
|
|
573
|
+
* The column's human header, forwarded by the `#filter` slot scope — used as the control's accessible name in place of the internal column id.
|
|
574
|
+
*/
|
|
575
|
+
columnLabel?: string;
|
|
521
576
|
}
|
|
522
577
|
declare function FilterText(_props: FilterTextProps): JSX.Element;
|
|
523
578
|
//#endregion
|
|
@@ -543,6 +598,10 @@ interface FilterNumberRangeProps {
|
|
|
543
598
|
* The faceted `[min, max]` bounds for this column (`[number, number]` or null) — drives the input placeholders only.
|
|
544
599
|
*/
|
|
545
600
|
minMax?: (unknown) | null;
|
|
601
|
+
/**
|
|
602
|
+
* The column's human header, forwarded by the `#filter` slot scope — used as the control's accessible name in place of the internal column id.
|
|
603
|
+
*/
|
|
604
|
+
columnLabel?: string;
|
|
546
605
|
}
|
|
547
606
|
declare function FilterNumberRange(_props: FilterNumberRangeProps): JSX.Element;
|
|
548
607
|
//#endregion
|
|
@@ -568,6 +627,10 @@ interface FilterSelectProps {
|
|
|
568
627
|
* The faceted distinct keys for this column (cross-filtered, keys only — no occurrence counts) used to build the `<option>` list.
|
|
569
628
|
*/
|
|
570
629
|
uniqueValues?: any[];
|
|
630
|
+
/**
|
|
631
|
+
* The column's human header, forwarded by the `#filter` slot scope — used as the control's accessible name in place of the internal column id.
|
|
632
|
+
*/
|
|
633
|
+
columnLabel?: string;
|
|
571
634
|
}
|
|
572
635
|
declare function FilterSelect(_props: FilterSelectProps): JSX.Element;
|
|
573
636
|
//#endregion
|
package/dist/index.d.mts
CHANGED
|
@@ -12,6 +12,10 @@ interface SelectAllSlotCtx {
|
|
|
12
12
|
indeterminate: any;
|
|
13
13
|
toggle: any;
|
|
14
14
|
}
|
|
15
|
+
interface PlaceholderSlotCtx {
|
|
16
|
+
index: any;
|
|
17
|
+
columnId: any;
|
|
18
|
+
}
|
|
15
19
|
interface SelectCellSlotCtx {
|
|
16
20
|
row: any;
|
|
17
21
|
checked: any;
|
|
@@ -30,6 +34,7 @@ interface FilterSlotCtx {
|
|
|
30
34
|
value: any;
|
|
31
35
|
uniqueValues: any;
|
|
32
36
|
minMax: any;
|
|
37
|
+
columnLabel: any;
|
|
33
38
|
setFilter: any;
|
|
34
39
|
}
|
|
35
40
|
interface CellSlotCtx {
|
|
@@ -45,11 +50,12 @@ interface EditorSlotCtx {
|
|
|
45
50
|
value: any;
|
|
46
51
|
commit: any;
|
|
47
52
|
cancel: any;
|
|
53
|
+
columnLabel: any;
|
|
48
54
|
autofocus: any;
|
|
49
55
|
}
|
|
50
56
|
interface DataTableProps {
|
|
51
57
|
/**
|
|
52
|
-
* The row data — `model: true`, so a committed cell/row edit writes a **fresh** array back through `
|
|
58
|
+
* 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).
|
|
53
59
|
* @example
|
|
54
60
|
* <DataTable data={rows()} onDataChange={setRows} columns={cols} />
|
|
55
61
|
*/
|
|
@@ -57,7 +63,7 @@ interface DataTableProps {
|
|
|
57
63
|
defaultData?: any[];
|
|
58
64
|
onDataChange?: (data: any[]) => void;
|
|
59
65
|
/**
|
|
60
|
-
* 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).
|
|
66
|
+
* 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.
|
|
61
67
|
*/
|
|
62
68
|
columns?: any[];
|
|
63
69
|
/**
|
|
@@ -101,7 +107,7 @@ interface DataTableProps {
|
|
|
101
107
|
*/
|
|
102
108
|
pageCount?: (number) | null;
|
|
103
109
|
/**
|
|
104
|
-
* 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).
|
|
110
|
+
* 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.
|
|
105
111
|
*/
|
|
106
112
|
expandable?: boolean;
|
|
107
113
|
/**
|
|
@@ -110,6 +116,10 @@ interface DataTableProps {
|
|
|
110
116
|
expanded?: (Record<string, any> | boolean) | null;
|
|
111
117
|
defaultExpanded?: (Record<string, any> | boolean) | null;
|
|
112
118
|
onExpandedChange?: (expanded: (Record<string, any> | boolean) | null) => void;
|
|
119
|
+
/**
|
|
120
|
+
* Row identity `(originalRow, index, parentRow?) => string | number` — the key `rowSelection`, `expanded` and the per-row caches use. Default null → table-core keys rows by position (`"0"`, `"1"`, … and `"0.1"` for sub-rows), so inserting or removing rows above a selected or expanded row moves that state onto whatever row now sits at its index. Supply it whenever rows can be added or removed while state is held (server push, live lists); the result is coerced to a string.
|
|
121
|
+
*/
|
|
122
|
+
getRowId?: ((...args: any[]) => any) | null;
|
|
113
123
|
/**
|
|
114
124
|
* 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.
|
|
115
125
|
*/
|
|
@@ -119,7 +129,7 @@ interface DataTableProps {
|
|
|
119
129
|
*/
|
|
120
130
|
groupable?: boolean;
|
|
121
131
|
/**
|
|
122
|
-
* `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 `
|
|
132
|
+
* `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.
|
|
123
133
|
*/
|
|
124
134
|
grouping?: (any[]) | null;
|
|
125
135
|
defaultGrouping?: (any[]) | null;
|
|
@@ -159,7 +169,7 @@ interface DataTableProps {
|
|
|
159
169
|
*/
|
|
160
170
|
stickyHeader?: boolean;
|
|
161
171
|
/**
|
|
162
|
-
* `'table'` (default, row-oriented, byte-behaviorally identical to a plain accessible table) | `'grid'`
|
|
172
|
+
* `'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.
|
|
163
173
|
*/
|
|
164
174
|
interactionMode?: string;
|
|
165
175
|
/**
|
|
@@ -201,13 +211,16 @@ interface DataTableProps {
|
|
|
201
211
|
onReorderChange?: (...args: unknown[]) => void;
|
|
202
212
|
onPinChange?: (...args: unknown[]) => void;
|
|
203
213
|
onHistoryChange?: (...args: unknown[]) => void;
|
|
214
|
+
onVisibleRangeChange?: (...args: unknown[]) => void;
|
|
204
215
|
onActivecellChange?: (...args: unknown[]) => void;
|
|
216
|
+
onRowActivate?: (...args: unknown[]) => void;
|
|
205
217
|
onRangeChange?: (...args: unknown[]) => void;
|
|
206
218
|
onCellEditCommit?: (...args: unknown[]) => void;
|
|
207
219
|
onRowEditCommit?: (...args: unknown[]) => void;
|
|
208
220
|
children?: JSX.Element;
|
|
209
221
|
groupBarSlot?: (ctx: GroupBarSlotCtx) => JSX.Element;
|
|
210
222
|
selectAllSlot?: (ctx: SelectAllSlotCtx) => JSX.Element;
|
|
223
|
+
placeholderSlot?: (ctx: PlaceholderSlotCtx) => JSX.Element;
|
|
211
224
|
selectCellSlot?: (ctx: SelectCellSlotCtx) => JSX.Element;
|
|
212
225
|
detailSlot?: (ctx: DetailSlotCtx) => JSX.Element;
|
|
213
226
|
colHeaderSlot?: (ctx: ColHeaderSlotCtx) => JSX.Element;
|
|
@@ -225,6 +238,7 @@ interface DataTableProps {
|
|
|
225
238
|
value: any;
|
|
226
239
|
uniqueValues: any;
|
|
227
240
|
minMax: any;
|
|
241
|
+
columnLabel: any;
|
|
228
242
|
setFilter: any;
|
|
229
243
|
}) => JSX.Element) | undefined;
|
|
230
244
|
[key: `cell-${string}`]: ((ctx: {
|
|
@@ -240,6 +254,7 @@ interface DataTableProps {
|
|
|
240
254
|
value: any;
|
|
241
255
|
commit: any;
|
|
242
256
|
cancel: any;
|
|
257
|
+
columnLabel: any;
|
|
243
258
|
autofocus: any;
|
|
244
259
|
}) => JSX.Element) | undefined;
|
|
245
260
|
[key: string]: ((...args: any[]) => JSX.Element) | undefined;
|
|
@@ -309,11 +324,11 @@ interface ColumnProps {
|
|
|
309
324
|
*/
|
|
310
325
|
filterable?: boolean;
|
|
311
326
|
/**
|
|
312
|
-
*
|
|
327
|
+
* Initial pin side: `''` (unpinned) | `'left'` | `'right'`. Applied once as the table's starting `columnPinning` state, so `getIsPinned()` reports it and the column joins the matching sticky rail — which also reorders it, since visible cells are ordered `[left-pinned, center, right-pinned]`. Ignored if the consumer has already pinned something; an interactive unpin is never re-applied.
|
|
313
328
|
*/
|
|
314
329
|
pinned?: string;
|
|
315
330
|
/**
|
|
316
|
-
* Optional fixed/initial column width — a
|
|
331
|
+
* Optional fixed/initial column width, applied as the column's starting size — a px number (`120`) or a px string (`'120px'`). Column sizing is numeric px, so other CSS lengths (`'12rem'`, `'20%'`, `'auto'`) have no px value to apply and are ignored; the column keeps the default width. An interactive resize overrides this.
|
|
317
332
|
*/
|
|
318
333
|
width?: string | number;
|
|
319
334
|
/**
|
|
@@ -333,7 +348,7 @@ interface ColumnProps {
|
|
|
333
348
|
*/
|
|
334
349
|
editable?: boolean;
|
|
335
350
|
/**
|
|
336
|
-
*
|
|
351
|
+
* Editor type for this column: `'text'` | `'number'` | `'select'` | `'checkbox'` (built-in inputs), or `'custom'` to hand rendering to the `#editor` scoped slot (or a per-column `editor-<columnId>` fill). Default `'text'`. **`'custom'` is the gate:** a column left on a built-in type ignores any `#editor` fill and renders the built-in input. Requires `editable: true` — and, for any pointer or keyboard edit entry, `interactionMode="grid"` on the table.
|
|
337
352
|
*/
|
|
338
353
|
editor?: string;
|
|
339
354
|
/**
|
|
@@ -377,6 +392,10 @@ interface EditorTextProps {
|
|
|
377
392
|
* Focus this editor's primary input when true — the host sets it for the one editor that should hold focus; reactive.
|
|
378
393
|
*/
|
|
379
394
|
autofocus?: boolean;
|
|
395
|
+
/**
|
|
396
|
+
* The column's human header, forwarded by the slot scope — used as the control's accessible name in place of the internal column id.
|
|
397
|
+
*/
|
|
398
|
+
columnLabel?: string;
|
|
380
399
|
}
|
|
381
400
|
declare function EditorText(_props: EditorTextProps): JSX.Element;
|
|
382
401
|
//#endregion
|
|
@@ -406,6 +425,14 @@ interface EditorNumberProps {
|
|
|
406
425
|
* `() => void` — revert the edit (Escape). Null-guarded at call sites.
|
|
407
426
|
*/
|
|
408
427
|
cancel?: ((...args: any[]) => any) | null;
|
|
428
|
+
/**
|
|
429
|
+
* Focus this editor's primary control when true — the host sets it for the one editor that should hold focus; reactive.
|
|
430
|
+
*/
|
|
431
|
+
autofocus?: boolean;
|
|
432
|
+
/**
|
|
433
|
+
* The column's human header, forwarded by the slot scope — used as the control's accessible name in place of the internal column id.
|
|
434
|
+
*/
|
|
435
|
+
columnLabel?: string;
|
|
409
436
|
}
|
|
410
437
|
declare function EditorNumber(_props: EditorNumberProps): JSX.Element;
|
|
411
438
|
//#endregion
|
|
@@ -439,6 +466,14 @@ interface EditorSelectProps {
|
|
|
439
466
|
* The select options — `[{ value, label }]`. Mirrors `<Column editorOptions>`.
|
|
440
467
|
*/
|
|
441
468
|
options?: any[];
|
|
469
|
+
/**
|
|
470
|
+
* Focus this editor's primary control when true — the host sets it for the one editor that should hold focus; reactive.
|
|
471
|
+
*/
|
|
472
|
+
autofocus?: boolean;
|
|
473
|
+
/**
|
|
474
|
+
* The column's human header, forwarded by the slot scope — used as the control's accessible name in place of the internal column id.
|
|
475
|
+
*/
|
|
476
|
+
columnLabel?: string;
|
|
442
477
|
}
|
|
443
478
|
declare function EditorSelect(_props: EditorSelectProps): JSX.Element;
|
|
444
479
|
//#endregion
|
|
@@ -468,6 +503,14 @@ interface EditorCheckboxProps {
|
|
|
468
503
|
* `() => void` — revert the edit (Escape). Null-guarded at call sites.
|
|
469
504
|
*/
|
|
470
505
|
cancel?: ((...args: any[]) => any) | null;
|
|
506
|
+
/**
|
|
507
|
+
* Focus this editor's primary control when true — the host sets it for the one editor that should hold focus; reactive.
|
|
508
|
+
*/
|
|
509
|
+
autofocus?: boolean;
|
|
510
|
+
/**
|
|
511
|
+
* The column's human header, forwarded by the slot scope — used as the control's accessible name in place of the internal column id.
|
|
512
|
+
*/
|
|
513
|
+
columnLabel?: string;
|
|
471
514
|
}
|
|
472
515
|
declare function EditorCheckbox(_props: EditorCheckboxProps): JSX.Element;
|
|
473
516
|
//#endregion
|
|
@@ -497,6 +540,14 @@ interface EditorDateProps {
|
|
|
497
540
|
* `() => void` — revert the edit (Escape). Null-guarded at call sites.
|
|
498
541
|
*/
|
|
499
542
|
cancel?: ((...args: any[]) => any) | null;
|
|
543
|
+
/**
|
|
544
|
+
* Focus this editor's primary control when true — the host sets it for the one editor that should hold focus; reactive.
|
|
545
|
+
*/
|
|
546
|
+
autofocus?: boolean;
|
|
547
|
+
/**
|
|
548
|
+
* The column's human header, forwarded by the slot scope — used as the control's accessible name in place of the internal column id.
|
|
549
|
+
*/
|
|
550
|
+
columnLabel?: string;
|
|
500
551
|
}
|
|
501
552
|
declare function EditorDate(_props: EditorDateProps): JSX.Element;
|
|
502
553
|
//#endregion
|
|
@@ -518,6 +569,10 @@ interface FilterTextProps {
|
|
|
518
569
|
* `(columnId, value) => void` — apply the column filter (Enter / blur applies, Escape clears). Null-guarded at call sites.
|
|
519
570
|
*/
|
|
520
571
|
setFilter?: ((...args: any[]) => any) | null;
|
|
572
|
+
/**
|
|
573
|
+
* The column's human header, forwarded by the `#filter` slot scope — used as the control's accessible name in place of the internal column id.
|
|
574
|
+
*/
|
|
575
|
+
columnLabel?: string;
|
|
521
576
|
}
|
|
522
577
|
declare function FilterText(_props: FilterTextProps): JSX.Element;
|
|
523
578
|
//#endregion
|
|
@@ -543,6 +598,10 @@ interface FilterNumberRangeProps {
|
|
|
543
598
|
* The faceted `[min, max]` bounds for this column (`[number, number]` or null) — drives the input placeholders only.
|
|
544
599
|
*/
|
|
545
600
|
minMax?: (unknown) | null;
|
|
601
|
+
/**
|
|
602
|
+
* The column's human header, forwarded by the `#filter` slot scope — used as the control's accessible name in place of the internal column id.
|
|
603
|
+
*/
|
|
604
|
+
columnLabel?: string;
|
|
546
605
|
}
|
|
547
606
|
declare function FilterNumberRange(_props: FilterNumberRangeProps): JSX.Element;
|
|
548
607
|
//#endregion
|
|
@@ -568,6 +627,10 @@ interface FilterSelectProps {
|
|
|
568
627
|
* The faceted distinct keys for this column (cross-filtered, keys only — no occurrence counts) used to build the `<option>` list.
|
|
569
628
|
*/
|
|
570
629
|
uniqueValues?: any[];
|
|
630
|
+
/**
|
|
631
|
+
* The column's human header, forwarded by the `#filter` slot scope — used as the control's accessible name in place of the internal column id.
|
|
632
|
+
*/
|
|
633
|
+
columnLabel?: string;
|
|
571
634
|
}
|
|
572
635
|
declare function FilterSelect(_props: FilterSelectProps): JSX.Element;
|
|
573
636
|
//#endregion
|