@rozie-ui/data-table-solid 0.7.1 → 0.7.2
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/CHANGELOG.md +357 -0
- package/README.md +11 -11
- package/dist/index.cjs +13 -13
- package/dist/index.d.cts +165 -96
- package/dist/index.d.mts +165 -96
- package/dist/index.mjs +13 -13
- package/dist/source/index.jsx +12 -12
- package/package.json +4 -3
- package/src/DataTable.tsx +134 -62
- package/src/index.ts +1 -0
package/dist/index.d.cts
CHANGED
|
@@ -1,57 +1,126 @@
|
|
|
1
1
|
import { JSX } from "solid-js";
|
|
2
|
+
import { Column as Column$1, ColumnDef, ColumnFiltersState, ColumnOrderState, ColumnPinningState, ColumnSizingState, ExpandedState, GroupingState, PaginationState, RowSelectionState, SortingState, VisibilityState } from "@tanstack/table-core";
|
|
2
3
|
|
|
3
4
|
//#region src/DataTable.d.ts
|
|
5
|
+
/** A cell position as integers over the visible (display-order) model. */
|
|
6
|
+
interface DataTableCellPosition {
|
|
7
|
+
rowIndex: number;
|
|
8
|
+
colIndex: number;
|
|
9
|
+
}
|
|
10
|
+
/** The active (roving-focus) cell. A header cell reports `rowIndex: null` and `isHeader: true`. */
|
|
11
|
+
interface DataTableActiveCell {
|
|
12
|
+
rowIndex: number | null;
|
|
13
|
+
colIndex: number;
|
|
14
|
+
isHeader: boolean;
|
|
15
|
+
}
|
|
16
|
+
/** The rectangular cell-range selection. Both corners are `null` when there is no range. */
|
|
17
|
+
interface DataTableRange {
|
|
18
|
+
anchor: DataTableCellPosition | null;
|
|
19
|
+
focus: DataTableCellPosition | null;
|
|
20
|
+
}
|
|
21
|
+
/** One data column offered to the `#groupBar` slot. */
|
|
22
|
+
interface DataTableGroupableColumn {
|
|
23
|
+
id: string;
|
|
24
|
+
label: string;
|
|
25
|
+
}
|
|
26
|
+
/** One changed cell inside a row edit commit. */
|
|
27
|
+
interface DataTableCellChange {
|
|
28
|
+
columnId: string;
|
|
29
|
+
oldValue: any;
|
|
30
|
+
newValue: any;
|
|
31
|
+
}
|
|
32
|
+
/** The `activecell-change` payload. `isHeader` is set when the move landed on or left a header cell. */
|
|
33
|
+
interface DataTableActiveCellChangePayload {
|
|
34
|
+
rowIndex: number | null;
|
|
35
|
+
colIndex: number;
|
|
36
|
+
isHeader?: boolean;
|
|
37
|
+
}
|
|
38
|
+
/** The `cell-edit-commit` payload: one committed cell. */
|
|
39
|
+
interface DataTableCellEditCommitPayload {
|
|
40
|
+
rowId: string;
|
|
41
|
+
columnId: string;
|
|
42
|
+
oldValue: any;
|
|
43
|
+
newValue: any;
|
|
44
|
+
}
|
|
45
|
+
/** The `row-edit-commit` payload: the row and every cell the save changed. */
|
|
46
|
+
interface DataTableRowEditCommitPayload {
|
|
47
|
+
rowId: string;
|
|
48
|
+
changes: DataTableCellChange[];
|
|
49
|
+
}
|
|
50
|
+
/** The `filter-change` payload: `globalFilter` for the search box, `columnFilters` for a per-column filter. Exactly one key is set. */
|
|
51
|
+
interface DataTableFilterChangePayload {
|
|
52
|
+
globalFilter?: string;
|
|
53
|
+
columnFilters?: ColumnFiltersState;
|
|
54
|
+
}
|
|
55
|
+
/** The `history-change` payload: undo/redo availability. */
|
|
56
|
+
interface DataTableHistoryChangePayload {
|
|
57
|
+
canUndo: boolean;
|
|
58
|
+
canRedo: boolean;
|
|
59
|
+
}
|
|
60
|
+
/** The `range-change` payload: the new range corners (both `null` when the range cleared). */
|
|
61
|
+
type DataTableRangeChangePayload = DataTableRange;
|
|
62
|
+
/** The `row-activate` payload. `row` is the original data object and `index` its position in the rendered model. */
|
|
63
|
+
interface DataTableRowActivatePayload {
|
|
64
|
+
row: any;
|
|
65
|
+
index: number;
|
|
66
|
+
trigger: 'keyboard' | 'click';
|
|
67
|
+
}
|
|
68
|
+
/** The `visible-range-change` payload: the rendered row window, `end` exclusive. */
|
|
69
|
+
interface DataTableVisibleRangeChangePayload {
|
|
70
|
+
start: number;
|
|
71
|
+
end: number;
|
|
72
|
+
}
|
|
4
73
|
interface GroupBarSlotCtx {
|
|
5
|
-
grouping:
|
|
6
|
-
groupableColumns:
|
|
7
|
-
applyGrouping:
|
|
8
|
-
clearGrouping:
|
|
74
|
+
grouping: string[];
|
|
75
|
+
groupableColumns: DataTableGroupableColumn[];
|
|
76
|
+
applyGrouping: (cols: string[]) => void;
|
|
77
|
+
clearGrouping: () => void;
|
|
9
78
|
}
|
|
10
79
|
interface SelectAllSlotCtx {
|
|
11
|
-
checked:
|
|
12
|
-
indeterminate:
|
|
13
|
-
toggle: any;
|
|
80
|
+
checked: boolean;
|
|
81
|
+
indeterminate: boolean;
|
|
82
|
+
toggle: (event: any) => void;
|
|
14
83
|
}
|
|
15
84
|
interface PlaceholderSlotCtx {
|
|
16
|
-
index:
|
|
17
|
-
columnId:
|
|
85
|
+
index: number;
|
|
86
|
+
columnId: string;
|
|
18
87
|
}
|
|
19
88
|
interface SelectCellSlotCtx {
|
|
20
89
|
row: any;
|
|
21
|
-
checked:
|
|
22
|
-
toggle: any;
|
|
90
|
+
checked: boolean;
|
|
91
|
+
toggle: (event: any) => void;
|
|
23
92
|
}
|
|
24
93
|
interface DetailSlotCtx {
|
|
25
94
|
row: any;
|
|
26
95
|
}
|
|
27
96
|
interface ColHeaderSlotCtx {
|
|
28
|
-
columnId:
|
|
29
|
-
column: any
|
|
30
|
-
label:
|
|
97
|
+
columnId: string;
|
|
98
|
+
column: Column$1<any, unknown>;
|
|
99
|
+
label: string;
|
|
31
100
|
}
|
|
32
101
|
interface FilterSlotCtx {
|
|
33
|
-
columnId:
|
|
102
|
+
columnId: string;
|
|
34
103
|
value: any;
|
|
35
|
-
uniqueValues: any;
|
|
36
|
-
minMax:
|
|
37
|
-
columnLabel:
|
|
38
|
-
setFilter: any;
|
|
104
|
+
uniqueValues: any[];
|
|
105
|
+
minMax: [number, number] | null;
|
|
106
|
+
columnLabel: string;
|
|
107
|
+
setFilter: (columnId: string, value: any) => void;
|
|
39
108
|
}
|
|
40
109
|
interface CellSlotCtx {
|
|
41
|
-
columnId:
|
|
42
|
-
column: any
|
|
110
|
+
columnId: string;
|
|
111
|
+
column: Column$1<any, unknown>;
|
|
43
112
|
row: any;
|
|
44
113
|
value: any;
|
|
45
114
|
}
|
|
46
115
|
interface EditorSlotCtx {
|
|
47
|
-
columnId:
|
|
48
|
-
column: any
|
|
116
|
+
columnId: string;
|
|
117
|
+
column: Column$1<any, unknown>;
|
|
49
118
|
row: any;
|
|
50
119
|
value: any;
|
|
51
|
-
commit: any;
|
|
52
|
-
cancel:
|
|
53
|
-
columnLabel:
|
|
54
|
-
autofocus:
|
|
120
|
+
commit: (value: any) => void;
|
|
121
|
+
cancel: () => void;
|
|
122
|
+
columnLabel: string;
|
|
123
|
+
autofocus: boolean;
|
|
55
124
|
}
|
|
56
125
|
interface DataTableProps {
|
|
57
126
|
/**
|
|
@@ -200,23 +269,23 @@ interface DataTableProps {
|
|
|
200
269
|
* A CSS length string bounding the `rdt-scroll` container when `virtual` is on (e.g. `'400px'`). Mirrored to the `--rozie-data-table-max-height` custom property; the prop wins, the token is the fallback.
|
|
201
270
|
*/
|
|
202
271
|
maxHeight?: string;
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
onFilterChange?: (
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
272
|
+
onActivecellChange?: (payload: DataTableActiveCellChangePayload) => void;
|
|
273
|
+
onCellEditCommit?: (payload: DataTableCellEditCommitPayload) => void;
|
|
274
|
+
onExpandChange?: (payload: ExpandedState) => void;
|
|
275
|
+
onFilterChange?: (payload: DataTableFilterChangePayload) => void;
|
|
276
|
+
onGroupChange?: (payload: GroupingState) => void;
|
|
277
|
+
onHistoryChange?: (payload: DataTableHistoryChangePayload) => void;
|
|
278
|
+
onPageChange?: (payload: PaginationState) => void;
|
|
279
|
+
onPinChange?: (payload: ColumnPinningState) => void;
|
|
280
|
+
onRangeChange?: (payload: DataTableRangeChangePayload) => void;
|
|
281
|
+
onReorderChange?: (payload: ColumnOrderState) => void;
|
|
282
|
+
onResizeChange?: (payload: ColumnSizingState) => void;
|
|
283
|
+
onRowActivate?: (payload: DataTableRowActivatePayload) => void;
|
|
284
|
+
onRowEditCommit?: (payload: DataTableRowEditCommitPayload) => void;
|
|
285
|
+
onSelectionChange?: (payload: RowSelectionState) => void;
|
|
286
|
+
onSortChange?: (payload: SortingState) => void;
|
|
287
|
+
onVisibilityChange?: (payload: VisibilityState) => void;
|
|
288
|
+
onVisibleRangeChange?: (payload: DataTableVisibleRangeChangePayload) => void;
|
|
220
289
|
children?: JSX.Element;
|
|
221
290
|
groupBarSlot?: (ctx: GroupBarSlotCtx) => JSX.Element;
|
|
222
291
|
selectAllSlot?: (ctx: SelectAllSlotCtx) => JSX.Element;
|
|
@@ -229,78 +298,78 @@ interface DataTableProps {
|
|
|
229
298
|
editorSlot?: (ctx: EditorSlotCtx) => JSX.Element;
|
|
230
299
|
slots?: {
|
|
231
300
|
[key: `colHeader-${string}`]: ((ctx: {
|
|
232
|
-
columnId:
|
|
233
|
-
column: any
|
|
234
|
-
label:
|
|
301
|
+
columnId: string;
|
|
302
|
+
column: Column$1<any, unknown>;
|
|
303
|
+
label: string;
|
|
235
304
|
}) => JSX.Element) | undefined;
|
|
236
305
|
[key: `filter-${string}`]: ((ctx: {
|
|
237
|
-
columnId:
|
|
306
|
+
columnId: string;
|
|
238
307
|
value: any;
|
|
239
|
-
uniqueValues: any;
|
|
240
|
-
minMax:
|
|
241
|
-
columnLabel:
|
|
242
|
-
setFilter: any;
|
|
308
|
+
uniqueValues: any[];
|
|
309
|
+
minMax: [number, number] | null;
|
|
310
|
+
columnLabel: string;
|
|
311
|
+
setFilter: (columnId: string, value: any) => void;
|
|
243
312
|
}) => JSX.Element) | undefined;
|
|
244
313
|
[key: `cell-${string}`]: ((ctx: {
|
|
245
|
-
columnId:
|
|
246
|
-
column: any
|
|
314
|
+
columnId: string;
|
|
315
|
+
column: Column$1<any, unknown>;
|
|
247
316
|
row: any;
|
|
248
317
|
value: any;
|
|
249
318
|
}) => JSX.Element) | undefined;
|
|
250
319
|
[key: `editor-${string}`]: ((ctx: {
|
|
251
|
-
columnId:
|
|
252
|
-
column: any
|
|
320
|
+
columnId: string;
|
|
321
|
+
column: Column$1<any, unknown>;
|
|
253
322
|
row: any;
|
|
254
323
|
value: any;
|
|
255
|
-
commit: any;
|
|
256
|
-
cancel:
|
|
257
|
-
columnLabel:
|
|
258
|
-
autofocus:
|
|
324
|
+
commit: (value: any) => void;
|
|
325
|
+
cancel: () => void;
|
|
326
|
+
columnLabel: string;
|
|
327
|
+
autofocus: boolean;
|
|
259
328
|
}) => JSX.Element) | undefined;
|
|
260
329
|
[key: string]: ((...args: any[]) => JSX.Element) | undefined;
|
|
261
330
|
};
|
|
262
331
|
ref?: (h: DataTableHandle) => void;
|
|
263
332
|
}
|
|
264
333
|
interface DataTableHandle {
|
|
265
|
-
sortColumn: (
|
|
266
|
-
clearSorting: (
|
|
267
|
-
toggleRowExpanded: (
|
|
268
|
-
expandAll: (
|
|
269
|
-
collapseAll: (
|
|
270
|
-
getExpandedRows: (
|
|
271
|
-
applyGrouping: (
|
|
272
|
-
clearGrouping: (
|
|
273
|
-
getFacetedUniqueValues: (
|
|
274
|
-
getFacetedMinMaxValues: (
|
|
275
|
-
getColumnDefs: (
|
|
276
|
-
toggleAllRows: (
|
|
277
|
-
clearSelection: (
|
|
278
|
-
getSelectedRows: (
|
|
279
|
-
setPage: (
|
|
280
|
-
setRowsPerPage: (
|
|
281
|
-
toggleColumnVisibility: (
|
|
282
|
-
applyColumnOrder: (
|
|
283
|
-
resetColumnSizing: (
|
|
284
|
-
pinColumn: (
|
|
285
|
-
focusCell: (
|
|
286
|
-
getActiveCell: (
|
|
287
|
-
clearActiveCell: (
|
|
334
|
+
sortColumn: (colId: string, desc?: boolean) => void;
|
|
335
|
+
clearSorting: () => void;
|
|
336
|
+
toggleRowExpanded: (rowId: string | number) => void;
|
|
337
|
+
expandAll: () => void;
|
|
338
|
+
collapseAll: () => void;
|
|
339
|
+
getExpandedRows: () => any[];
|
|
340
|
+
applyGrouping: (cols: string[]) => void;
|
|
341
|
+
clearGrouping: () => void;
|
|
342
|
+
getFacetedUniqueValues: (colId: string) => any[];
|
|
343
|
+
getFacetedMinMaxValues: (colId: string) => [number, number] | null;
|
|
344
|
+
getColumnDefs: () => ColumnDef<any, any>[];
|
|
345
|
+
toggleAllRows: (value?: boolean) => void;
|
|
346
|
+
clearSelection: () => void;
|
|
347
|
+
getSelectedRows: () => any[];
|
|
348
|
+
setPage: (idx: number) => void;
|
|
349
|
+
setRowsPerPage: (size: number) => void;
|
|
350
|
+
toggleColumnVisibility: (colId: string) => void;
|
|
351
|
+
applyColumnOrder: (order: string[]) => void;
|
|
352
|
+
resetColumnSizing: () => void;
|
|
353
|
+
pinColumn: (colId: string, side: 'left' | 'right' | false) => void;
|
|
354
|
+
focusCell: (rowIndex: number, colIndex: number) => void;
|
|
355
|
+
getActiveCell: () => DataTableActiveCell;
|
|
356
|
+
clearActiveCell: () => void;
|
|
288
357
|
scrollToRow(index: any, options?: {
|
|
289
358
|
align?: 'start' | 'center' | 'end' | 'auto';
|
|
290
359
|
behavior?: 'auto' | 'smooth' | 'instant';
|
|
291
360
|
}): void;
|
|
292
|
-
getScrollElement()
|
|
293
|
-
getRowIndexRelativeToPage: (
|
|
294
|
-
editCell: (
|
|
295
|
-
commitEditing: (
|
|
296
|
-
editRow: (
|
|
297
|
-
getSelectedRange: (
|
|
298
|
-
cut: (
|
|
299
|
-
undo: (
|
|
300
|
-
redo: (
|
|
301
|
-
canUndo: (
|
|
302
|
-
canRedo: (
|
|
303
|
-
clearHistory: (
|
|
361
|
+
getScrollElement: () => HTMLElement | null;
|
|
362
|
+
getRowIndexRelativeToPage: (absRow?: number) => number;
|
|
363
|
+
editCell: (rowIndex: number, colIndex: number) => void;
|
|
364
|
+
commitEditing: () => void;
|
|
365
|
+
editRow: (rowIndex: number) => void;
|
|
366
|
+
getSelectedRange: () => DataTableRange;
|
|
367
|
+
cut: () => void;
|
|
368
|
+
undo: () => void;
|
|
369
|
+
redo: () => void;
|
|
370
|
+
canUndo: () => boolean;
|
|
371
|
+
canRedo: () => boolean;
|
|
372
|
+
clearHistory: () => void;
|
|
304
373
|
}
|
|
305
374
|
declare function DataTable(_props: DataTableProps): JSX.Element;
|
|
306
375
|
//#endregion
|
|
@@ -669,4 +738,4 @@ interface DetailPanelProps {
|
|
|
669
738
|
}
|
|
670
739
|
declare function DetailPanel(_props: DetailPanelProps): JSX.Element;
|
|
671
740
|
//#endregion
|
|
672
|
-
export { Column, DataTable, DataTable as default, type DataTableHandle, DetailPanel, EditorCheckbox, EditorDate, EditorNumber, EditorSelect, EditorText, FilterNumberRange, FilterSelect, FilterText, GroupBar };
|
|
741
|
+
export { Column, DataTable, DataTable as default, DataTableActiveCell, DataTableActiveCellChangePayload, DataTableCellChange, DataTableCellEditCommitPayload, DataTableCellPosition, DataTableFilterChangePayload, DataTableGroupableColumn, type DataTableHandle, DataTableHistoryChangePayload, DataTableRange, DataTableRangeChangePayload, DataTableRowActivatePayload, DataTableRowEditCommitPayload, DataTableVisibleRangeChangePayload, DetailPanel, EditorCheckbox, EditorDate, EditorNumber, EditorSelect, EditorText, FilterNumberRange, FilterSelect, FilterText, GroupBar };
|
package/dist/index.d.mts
CHANGED
|
@@ -1,57 +1,126 @@
|
|
|
1
1
|
import { JSX } from "solid-js";
|
|
2
|
+
import { Column as Column$1, ColumnDef, ColumnFiltersState, ColumnOrderState, ColumnPinningState, ColumnSizingState, ExpandedState, GroupingState, PaginationState, RowSelectionState, SortingState, VisibilityState } from "@tanstack/table-core";
|
|
2
3
|
|
|
3
4
|
//#region src/DataTable.d.ts
|
|
5
|
+
/** A cell position as integers over the visible (display-order) model. */
|
|
6
|
+
interface DataTableCellPosition {
|
|
7
|
+
rowIndex: number;
|
|
8
|
+
colIndex: number;
|
|
9
|
+
}
|
|
10
|
+
/** The active (roving-focus) cell. A header cell reports `rowIndex: null` and `isHeader: true`. */
|
|
11
|
+
interface DataTableActiveCell {
|
|
12
|
+
rowIndex: number | null;
|
|
13
|
+
colIndex: number;
|
|
14
|
+
isHeader: boolean;
|
|
15
|
+
}
|
|
16
|
+
/** The rectangular cell-range selection. Both corners are `null` when there is no range. */
|
|
17
|
+
interface DataTableRange {
|
|
18
|
+
anchor: DataTableCellPosition | null;
|
|
19
|
+
focus: DataTableCellPosition | null;
|
|
20
|
+
}
|
|
21
|
+
/** One data column offered to the `#groupBar` slot. */
|
|
22
|
+
interface DataTableGroupableColumn {
|
|
23
|
+
id: string;
|
|
24
|
+
label: string;
|
|
25
|
+
}
|
|
26
|
+
/** One changed cell inside a row edit commit. */
|
|
27
|
+
interface DataTableCellChange {
|
|
28
|
+
columnId: string;
|
|
29
|
+
oldValue: any;
|
|
30
|
+
newValue: any;
|
|
31
|
+
}
|
|
32
|
+
/** The `activecell-change` payload. `isHeader` is set when the move landed on or left a header cell. */
|
|
33
|
+
interface DataTableActiveCellChangePayload {
|
|
34
|
+
rowIndex: number | null;
|
|
35
|
+
colIndex: number;
|
|
36
|
+
isHeader?: boolean;
|
|
37
|
+
}
|
|
38
|
+
/** The `cell-edit-commit` payload: one committed cell. */
|
|
39
|
+
interface DataTableCellEditCommitPayload {
|
|
40
|
+
rowId: string;
|
|
41
|
+
columnId: string;
|
|
42
|
+
oldValue: any;
|
|
43
|
+
newValue: any;
|
|
44
|
+
}
|
|
45
|
+
/** The `row-edit-commit` payload: the row and every cell the save changed. */
|
|
46
|
+
interface DataTableRowEditCommitPayload {
|
|
47
|
+
rowId: string;
|
|
48
|
+
changes: DataTableCellChange[];
|
|
49
|
+
}
|
|
50
|
+
/** The `filter-change` payload: `globalFilter` for the search box, `columnFilters` for a per-column filter. Exactly one key is set. */
|
|
51
|
+
interface DataTableFilterChangePayload {
|
|
52
|
+
globalFilter?: string;
|
|
53
|
+
columnFilters?: ColumnFiltersState;
|
|
54
|
+
}
|
|
55
|
+
/** The `history-change` payload: undo/redo availability. */
|
|
56
|
+
interface DataTableHistoryChangePayload {
|
|
57
|
+
canUndo: boolean;
|
|
58
|
+
canRedo: boolean;
|
|
59
|
+
}
|
|
60
|
+
/** The `range-change` payload: the new range corners (both `null` when the range cleared). */
|
|
61
|
+
type DataTableRangeChangePayload = DataTableRange;
|
|
62
|
+
/** The `row-activate` payload. `row` is the original data object and `index` its position in the rendered model. */
|
|
63
|
+
interface DataTableRowActivatePayload {
|
|
64
|
+
row: any;
|
|
65
|
+
index: number;
|
|
66
|
+
trigger: 'keyboard' | 'click';
|
|
67
|
+
}
|
|
68
|
+
/** The `visible-range-change` payload: the rendered row window, `end` exclusive. */
|
|
69
|
+
interface DataTableVisibleRangeChangePayload {
|
|
70
|
+
start: number;
|
|
71
|
+
end: number;
|
|
72
|
+
}
|
|
4
73
|
interface GroupBarSlotCtx {
|
|
5
|
-
grouping:
|
|
6
|
-
groupableColumns:
|
|
7
|
-
applyGrouping:
|
|
8
|
-
clearGrouping:
|
|
74
|
+
grouping: string[];
|
|
75
|
+
groupableColumns: DataTableGroupableColumn[];
|
|
76
|
+
applyGrouping: (cols: string[]) => void;
|
|
77
|
+
clearGrouping: () => void;
|
|
9
78
|
}
|
|
10
79
|
interface SelectAllSlotCtx {
|
|
11
|
-
checked:
|
|
12
|
-
indeterminate:
|
|
13
|
-
toggle: any;
|
|
80
|
+
checked: boolean;
|
|
81
|
+
indeterminate: boolean;
|
|
82
|
+
toggle: (event: any) => void;
|
|
14
83
|
}
|
|
15
84
|
interface PlaceholderSlotCtx {
|
|
16
|
-
index:
|
|
17
|
-
columnId:
|
|
85
|
+
index: number;
|
|
86
|
+
columnId: string;
|
|
18
87
|
}
|
|
19
88
|
interface SelectCellSlotCtx {
|
|
20
89
|
row: any;
|
|
21
|
-
checked:
|
|
22
|
-
toggle: any;
|
|
90
|
+
checked: boolean;
|
|
91
|
+
toggle: (event: any) => void;
|
|
23
92
|
}
|
|
24
93
|
interface DetailSlotCtx {
|
|
25
94
|
row: any;
|
|
26
95
|
}
|
|
27
96
|
interface ColHeaderSlotCtx {
|
|
28
|
-
columnId:
|
|
29
|
-
column: any
|
|
30
|
-
label:
|
|
97
|
+
columnId: string;
|
|
98
|
+
column: Column$1<any, unknown>;
|
|
99
|
+
label: string;
|
|
31
100
|
}
|
|
32
101
|
interface FilterSlotCtx {
|
|
33
|
-
columnId:
|
|
102
|
+
columnId: string;
|
|
34
103
|
value: any;
|
|
35
|
-
uniqueValues: any;
|
|
36
|
-
minMax:
|
|
37
|
-
columnLabel:
|
|
38
|
-
setFilter: any;
|
|
104
|
+
uniqueValues: any[];
|
|
105
|
+
minMax: [number, number] | null;
|
|
106
|
+
columnLabel: string;
|
|
107
|
+
setFilter: (columnId: string, value: any) => void;
|
|
39
108
|
}
|
|
40
109
|
interface CellSlotCtx {
|
|
41
|
-
columnId:
|
|
42
|
-
column: any
|
|
110
|
+
columnId: string;
|
|
111
|
+
column: Column$1<any, unknown>;
|
|
43
112
|
row: any;
|
|
44
113
|
value: any;
|
|
45
114
|
}
|
|
46
115
|
interface EditorSlotCtx {
|
|
47
|
-
columnId:
|
|
48
|
-
column: any
|
|
116
|
+
columnId: string;
|
|
117
|
+
column: Column$1<any, unknown>;
|
|
49
118
|
row: any;
|
|
50
119
|
value: any;
|
|
51
|
-
commit: any;
|
|
52
|
-
cancel:
|
|
53
|
-
columnLabel:
|
|
54
|
-
autofocus:
|
|
120
|
+
commit: (value: any) => void;
|
|
121
|
+
cancel: () => void;
|
|
122
|
+
columnLabel: string;
|
|
123
|
+
autofocus: boolean;
|
|
55
124
|
}
|
|
56
125
|
interface DataTableProps {
|
|
57
126
|
/**
|
|
@@ -200,23 +269,23 @@ interface DataTableProps {
|
|
|
200
269
|
* A CSS length string bounding the `rdt-scroll` container when `virtual` is on (e.g. `'400px'`). Mirrored to the `--rozie-data-table-max-height` custom property; the prop wins, the token is the fallback.
|
|
201
270
|
*/
|
|
202
271
|
maxHeight?: string;
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
onFilterChange?: (
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
272
|
+
onActivecellChange?: (payload: DataTableActiveCellChangePayload) => void;
|
|
273
|
+
onCellEditCommit?: (payload: DataTableCellEditCommitPayload) => void;
|
|
274
|
+
onExpandChange?: (payload: ExpandedState) => void;
|
|
275
|
+
onFilterChange?: (payload: DataTableFilterChangePayload) => void;
|
|
276
|
+
onGroupChange?: (payload: GroupingState) => void;
|
|
277
|
+
onHistoryChange?: (payload: DataTableHistoryChangePayload) => void;
|
|
278
|
+
onPageChange?: (payload: PaginationState) => void;
|
|
279
|
+
onPinChange?: (payload: ColumnPinningState) => void;
|
|
280
|
+
onRangeChange?: (payload: DataTableRangeChangePayload) => void;
|
|
281
|
+
onReorderChange?: (payload: ColumnOrderState) => void;
|
|
282
|
+
onResizeChange?: (payload: ColumnSizingState) => void;
|
|
283
|
+
onRowActivate?: (payload: DataTableRowActivatePayload) => void;
|
|
284
|
+
onRowEditCommit?: (payload: DataTableRowEditCommitPayload) => void;
|
|
285
|
+
onSelectionChange?: (payload: RowSelectionState) => void;
|
|
286
|
+
onSortChange?: (payload: SortingState) => void;
|
|
287
|
+
onVisibilityChange?: (payload: VisibilityState) => void;
|
|
288
|
+
onVisibleRangeChange?: (payload: DataTableVisibleRangeChangePayload) => void;
|
|
220
289
|
children?: JSX.Element;
|
|
221
290
|
groupBarSlot?: (ctx: GroupBarSlotCtx) => JSX.Element;
|
|
222
291
|
selectAllSlot?: (ctx: SelectAllSlotCtx) => JSX.Element;
|
|
@@ -229,78 +298,78 @@ interface DataTableProps {
|
|
|
229
298
|
editorSlot?: (ctx: EditorSlotCtx) => JSX.Element;
|
|
230
299
|
slots?: {
|
|
231
300
|
[key: `colHeader-${string}`]: ((ctx: {
|
|
232
|
-
columnId:
|
|
233
|
-
column: any
|
|
234
|
-
label:
|
|
301
|
+
columnId: string;
|
|
302
|
+
column: Column$1<any, unknown>;
|
|
303
|
+
label: string;
|
|
235
304
|
}) => JSX.Element) | undefined;
|
|
236
305
|
[key: `filter-${string}`]: ((ctx: {
|
|
237
|
-
columnId:
|
|
306
|
+
columnId: string;
|
|
238
307
|
value: any;
|
|
239
|
-
uniqueValues: any;
|
|
240
|
-
minMax:
|
|
241
|
-
columnLabel:
|
|
242
|
-
setFilter: any;
|
|
308
|
+
uniqueValues: any[];
|
|
309
|
+
minMax: [number, number] | null;
|
|
310
|
+
columnLabel: string;
|
|
311
|
+
setFilter: (columnId: string, value: any) => void;
|
|
243
312
|
}) => JSX.Element) | undefined;
|
|
244
313
|
[key: `cell-${string}`]: ((ctx: {
|
|
245
|
-
columnId:
|
|
246
|
-
column: any
|
|
314
|
+
columnId: string;
|
|
315
|
+
column: Column$1<any, unknown>;
|
|
247
316
|
row: any;
|
|
248
317
|
value: any;
|
|
249
318
|
}) => JSX.Element) | undefined;
|
|
250
319
|
[key: `editor-${string}`]: ((ctx: {
|
|
251
|
-
columnId:
|
|
252
|
-
column: any
|
|
320
|
+
columnId: string;
|
|
321
|
+
column: Column$1<any, unknown>;
|
|
253
322
|
row: any;
|
|
254
323
|
value: any;
|
|
255
|
-
commit: any;
|
|
256
|
-
cancel:
|
|
257
|
-
columnLabel:
|
|
258
|
-
autofocus:
|
|
324
|
+
commit: (value: any) => void;
|
|
325
|
+
cancel: () => void;
|
|
326
|
+
columnLabel: string;
|
|
327
|
+
autofocus: boolean;
|
|
259
328
|
}) => JSX.Element) | undefined;
|
|
260
329
|
[key: string]: ((...args: any[]) => JSX.Element) | undefined;
|
|
261
330
|
};
|
|
262
331
|
ref?: (h: DataTableHandle) => void;
|
|
263
332
|
}
|
|
264
333
|
interface DataTableHandle {
|
|
265
|
-
sortColumn: (
|
|
266
|
-
clearSorting: (
|
|
267
|
-
toggleRowExpanded: (
|
|
268
|
-
expandAll: (
|
|
269
|
-
collapseAll: (
|
|
270
|
-
getExpandedRows: (
|
|
271
|
-
applyGrouping: (
|
|
272
|
-
clearGrouping: (
|
|
273
|
-
getFacetedUniqueValues: (
|
|
274
|
-
getFacetedMinMaxValues: (
|
|
275
|
-
getColumnDefs: (
|
|
276
|
-
toggleAllRows: (
|
|
277
|
-
clearSelection: (
|
|
278
|
-
getSelectedRows: (
|
|
279
|
-
setPage: (
|
|
280
|
-
setRowsPerPage: (
|
|
281
|
-
toggleColumnVisibility: (
|
|
282
|
-
applyColumnOrder: (
|
|
283
|
-
resetColumnSizing: (
|
|
284
|
-
pinColumn: (
|
|
285
|
-
focusCell: (
|
|
286
|
-
getActiveCell: (
|
|
287
|
-
clearActiveCell: (
|
|
334
|
+
sortColumn: (colId: string, desc?: boolean) => void;
|
|
335
|
+
clearSorting: () => void;
|
|
336
|
+
toggleRowExpanded: (rowId: string | number) => void;
|
|
337
|
+
expandAll: () => void;
|
|
338
|
+
collapseAll: () => void;
|
|
339
|
+
getExpandedRows: () => any[];
|
|
340
|
+
applyGrouping: (cols: string[]) => void;
|
|
341
|
+
clearGrouping: () => void;
|
|
342
|
+
getFacetedUniqueValues: (colId: string) => any[];
|
|
343
|
+
getFacetedMinMaxValues: (colId: string) => [number, number] | null;
|
|
344
|
+
getColumnDefs: () => ColumnDef<any, any>[];
|
|
345
|
+
toggleAllRows: (value?: boolean) => void;
|
|
346
|
+
clearSelection: () => void;
|
|
347
|
+
getSelectedRows: () => any[];
|
|
348
|
+
setPage: (idx: number) => void;
|
|
349
|
+
setRowsPerPage: (size: number) => void;
|
|
350
|
+
toggleColumnVisibility: (colId: string) => void;
|
|
351
|
+
applyColumnOrder: (order: string[]) => void;
|
|
352
|
+
resetColumnSizing: () => void;
|
|
353
|
+
pinColumn: (colId: string, side: 'left' | 'right' | false) => void;
|
|
354
|
+
focusCell: (rowIndex: number, colIndex: number) => void;
|
|
355
|
+
getActiveCell: () => DataTableActiveCell;
|
|
356
|
+
clearActiveCell: () => void;
|
|
288
357
|
scrollToRow(index: any, options?: {
|
|
289
358
|
align?: 'start' | 'center' | 'end' | 'auto';
|
|
290
359
|
behavior?: 'auto' | 'smooth' | 'instant';
|
|
291
360
|
}): void;
|
|
292
|
-
getScrollElement()
|
|
293
|
-
getRowIndexRelativeToPage: (
|
|
294
|
-
editCell: (
|
|
295
|
-
commitEditing: (
|
|
296
|
-
editRow: (
|
|
297
|
-
getSelectedRange: (
|
|
298
|
-
cut: (
|
|
299
|
-
undo: (
|
|
300
|
-
redo: (
|
|
301
|
-
canUndo: (
|
|
302
|
-
canRedo: (
|
|
303
|
-
clearHistory: (
|
|
361
|
+
getScrollElement: () => HTMLElement | null;
|
|
362
|
+
getRowIndexRelativeToPage: (absRow?: number) => number;
|
|
363
|
+
editCell: (rowIndex: number, colIndex: number) => void;
|
|
364
|
+
commitEditing: () => void;
|
|
365
|
+
editRow: (rowIndex: number) => void;
|
|
366
|
+
getSelectedRange: () => DataTableRange;
|
|
367
|
+
cut: () => void;
|
|
368
|
+
undo: () => void;
|
|
369
|
+
redo: () => void;
|
|
370
|
+
canUndo: () => boolean;
|
|
371
|
+
canRedo: () => boolean;
|
|
372
|
+
clearHistory: () => void;
|
|
304
373
|
}
|
|
305
374
|
declare function DataTable(_props: DataTableProps): JSX.Element;
|
|
306
375
|
//#endregion
|
|
@@ -669,4 +738,4 @@ interface DetailPanelProps {
|
|
|
669
738
|
}
|
|
670
739
|
declare function DetailPanel(_props: DetailPanelProps): JSX.Element;
|
|
671
740
|
//#endregion
|
|
672
|
-
export { Column, DataTable, DataTable as default, type DataTableHandle, DetailPanel, EditorCheckbox, EditorDate, EditorNumber, EditorSelect, EditorText, FilterNumberRange, FilterSelect, FilterText, GroupBar };
|
|
741
|
+
export { Column, DataTable, DataTable as default, DataTableActiveCell, DataTableActiveCellChangePayload, DataTableCellChange, DataTableCellEditCommitPayload, DataTableCellPosition, DataTableFilterChangePayload, DataTableGroupableColumn, type DataTableHandle, DataTableHistoryChangePayload, DataTableRange, DataTableRangeChangePayload, DataTableRowActivatePayload, DataTableRowEditCommitPayload, DataTableVisibleRangeChangePayload, DetailPanel, EditorCheckbox, EditorDate, EditorNumber, EditorSelect, EditorText, FilterNumberRange, FilterSelect, FilterText, GroupBar };
|