@nsaa/data-table 0.0.0-stage → 0.1.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +28 -0
- package/NOTICE +154 -0
- package/README.md +28 -2
- package/dist/index.d.ts +1221 -0
- package/dist/index.js +5750 -0
- package/package.json +59 -3
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,1221 @@
|
|
|
1
|
+
|
|
2
|
+
import { Cell, Column, ColumnFiltersState, Header, ReactTable, Row, RowData, SortingState, Table, TableFeatures } from "@tanstack/react-table";
|
|
3
|
+
import { CSSProperties, HTMLAttributes, JSX, ReactElement, ReactNode, Ref, RefObject } from "react";
|
|
4
|
+
import { ScrollArea } from "@base-ui/react/scroll-area";
|
|
5
|
+
import { CollisionDetection, DndContextProps, DragCancelEvent, DragEndEvent, DragMoveEvent, DragOverEvent, DragStartEvent, Modifier, UniqueIdentifier } from "@dnd-kit/core";
|
|
6
|
+
import { SortingStrategy } from "@dnd-kit/sortable";
|
|
7
|
+
import { VirtualizerOptions } from "@tanstack/react-virtual";
|
|
8
|
+
export interface DataGridI18nLabels {
|
|
9
|
+
sortAscending: string;
|
|
10
|
+
sortDescending: string;
|
|
11
|
+
pinColumnStart: string;
|
|
12
|
+
pinColumnEnd: string;
|
|
13
|
+
moveColumnStart: string;
|
|
14
|
+
moveColumnEnd: string;
|
|
15
|
+
columnsMenu: string;
|
|
16
|
+
unpinColumn: (title: string) => string;
|
|
17
|
+
toggleColumns: string;
|
|
18
|
+
rowCreate: string;
|
|
19
|
+
pinRow: string;
|
|
20
|
+
unpinRow: string;
|
|
21
|
+
selectRow: string;
|
|
22
|
+
selectAll: string;
|
|
23
|
+
expandRow: string;
|
|
24
|
+
collapseRow: string;
|
|
25
|
+
dragToReorder: string;
|
|
26
|
+
dragToReorderRow: string;
|
|
27
|
+
reorderingUnavailable: string;
|
|
28
|
+
loading: string;
|
|
29
|
+
empty: string;
|
|
30
|
+
allRowsLoaded: string;
|
|
31
|
+
rowsPerPage: string;
|
|
32
|
+
paginationInfo: (info: {
|
|
33
|
+
from: number;
|
|
34
|
+
to: number;
|
|
35
|
+
count: number;
|
|
36
|
+
}) => string;
|
|
37
|
+
previousPage: string;
|
|
38
|
+
nextPage: string;
|
|
39
|
+
goToPage: (page: number) => string;
|
|
40
|
+
paginationEllipsis: string;
|
|
41
|
+
filterSelectedCount: (count: number) => string;
|
|
42
|
+
filterNoResults: string;
|
|
43
|
+
filterClear: string;
|
|
44
|
+
}
|
|
45
|
+
export interface DataGridI18nConfig {
|
|
46
|
+
labels: DataGridI18nLabels;
|
|
47
|
+
}
|
|
48
|
+
export type DataGridI18nOverrides = {
|
|
49
|
+
labels?: Partial<DataGridI18nLabels>;
|
|
50
|
+
};
|
|
51
|
+
/**
|
|
52
|
+
* A shallow merge per section, deliberately: a deep merge would leak a
|
|
53
|
+
* default back into a function-valued label the consumer replaced. With no
|
|
54
|
+
* overrides the frozen default is returned as-is, so the merge is free to
|
|
55
|
+
* run on every render without producing a new identity.
|
|
56
|
+
*/
|
|
57
|
+
export declare function mergeDataGridI18n(overrides?: DataGridI18nOverrides): DataGridI18nConfig;
|
|
58
|
+
/**
|
|
59
|
+
* Per-column extras the grid reads off `columnDef.meta`.
|
|
60
|
+
*
|
|
61
|
+
* TanStack v9 resolves this through the `columnMeta` slot on the feature
|
|
62
|
+
* bundle below instead of a global `declare module` augmentation, so
|
|
63
|
+
* installing the data grid no longer widens `ColumnMeta` for every other
|
|
64
|
+
* table in the consuming app.
|
|
65
|
+
*/
|
|
66
|
+
/**
|
|
67
|
+
* Per-column write contract for the spreadsheet operations (paste, fill,
|
|
68
|
+
* clear, cut). Presence marks the column writable; every write still flows
|
|
69
|
+
* through `onCellsChange`, so the consumer's state stays the only data owner.
|
|
70
|
+
*/
|
|
71
|
+
export interface DataGridColumnCellEdit<TData> {
|
|
72
|
+
/**
|
|
73
|
+
* Set false for a column that formats clipboard output but is never
|
|
74
|
+
* written; a function decides per row, so locked rows (archived, another
|
|
75
|
+
* user's, a totals row) reject like any read-only cell. Defaults to true.
|
|
76
|
+
*/
|
|
77
|
+
editable?: boolean | ((row: TData) => boolean);
|
|
78
|
+
/**
|
|
79
|
+
* Clipboard or fill string to typed value. Return undefined to reject the
|
|
80
|
+
* cell into `rejected`. Without it the raw string passes through unchanged -
|
|
81
|
+
* a deliberate non-coercion, so a number column receives strings only when
|
|
82
|
+
* the consumer chose not to parse.
|
|
83
|
+
*/
|
|
84
|
+
parse?: (raw: string, row: TData) => unknown;
|
|
85
|
+
/** Typed value to clipboard string. Fallback: String(value ?? ""). */
|
|
86
|
+
format?: (value: unknown, row: TData) => string;
|
|
87
|
+
/** Value dispatched by Delete/Backspace and cut. Defaults to null. */
|
|
88
|
+
clearValue?: unknown;
|
|
89
|
+
/**
|
|
90
|
+
* Opt into the grid's built-in free-text editor: an overlay input (or
|
|
91
|
+
* auto-growing textarea) flush over the focused cell, opened by Enter, F2,
|
|
92
|
+
* typing, or double-click, committing through `onCellsChange` as source
|
|
93
|
+
* `"edit"` with `parse` applied. Columns without it stay consumer-edited
|
|
94
|
+
* via `onCellEditRequest` or their own cell renderers.
|
|
95
|
+
*/
|
|
96
|
+
control?: "text" | "textarea";
|
|
97
|
+
}
|
|
98
|
+
export interface DataGridColumnMeta<TData> {
|
|
99
|
+
headerTitle?: string;
|
|
100
|
+
headerClassName?: string;
|
|
101
|
+
cellClassName?: string;
|
|
102
|
+
skeleton?: ReactNode;
|
|
103
|
+
expandedContent?: (row: TData) => ReactNode;
|
|
104
|
+
autoSize?: boolean;
|
|
105
|
+
/** Header spans this many leaves: this one and its next adjacent siblings. */
|
|
106
|
+
headerColSpan?: number;
|
|
107
|
+
cellEdit?: DataGridColumnCellEdit<TData>;
|
|
108
|
+
/**
|
|
109
|
+
* Under `columnsResizable`, this column absorbs the free space the filler
|
|
110
|
+
* strip would otherwise hold, so the grid always reads full-width and the
|
|
111
|
+
* built-in editor covers the whole cell. One column per grid; while free
|
|
112
|
+
* space remains, manual resizing of this column is visually a no-op (the
|
|
113
|
+
* absorbed space compensates), the flex-column trade-off.
|
|
114
|
+
*/
|
|
115
|
+
fillWidth?: boolean;
|
|
116
|
+
}
|
|
117
|
+
/**
|
|
118
|
+
* The batteries-included feature bundle every ReUI data-grid example builds
|
|
119
|
+
* on. v9 requires each table to declare its features up front, and the grid's
|
|
120
|
+
* render path needs the ones registered here: `columnVisibilityFeature` alone
|
|
121
|
+
* gates `row.getVisibleCells()`, so even a grid that never hides a column
|
|
122
|
+
* needs it to render at all.
|
|
123
|
+
*
|
|
124
|
+
* Pass it straight through for the full grid:
|
|
125
|
+
*
|
|
126
|
+
* ```tsx
|
|
127
|
+
* const table = useTable({ features: dataGridFeatures, columns, data })
|
|
128
|
+
* ```
|
|
129
|
+
*
|
|
130
|
+
* Extend it when a grid needs more, keeping each prerequisite feature ahead of
|
|
131
|
+
* the slot that depends on it:
|
|
132
|
+
*
|
|
133
|
+
* ```tsx
|
|
134
|
+
* const features = tableFeatures({
|
|
135
|
+
* ...dataGridFeatures,
|
|
136
|
+
* columnGroupingFeature,
|
|
137
|
+
* groupedRowModel: createGroupedRowModel(),
|
|
138
|
+
* })
|
|
139
|
+
* ```
|
|
140
|
+
*
|
|
141
|
+
* Or drop it entirely and hand `<DataGrid>` a leaner table - the components
|
|
142
|
+
* accept any bundle, so you keep full ownership of the TanStack core.
|
|
143
|
+
*/
|
|
144
|
+
export declare const dataGridFeatures: {
|
|
145
|
+
columnVisibilityFeature: import("@tanstack/react-table").TableFeature;
|
|
146
|
+
columnOrderingFeature: import("@tanstack/react-table").TableFeature;
|
|
147
|
+
columnPinningFeature: import("@tanstack/react-table").TableFeature;
|
|
148
|
+
columnSizingFeature: import("@tanstack/react-table").TableFeature;
|
|
149
|
+
columnResizingFeature: import("@tanstack/react-table").TableFeature;
|
|
150
|
+
columnFilteringFeature: import("@tanstack/react-table").TableFeature;
|
|
151
|
+
columnFacetingFeature: import("@tanstack/react-table").TableFeature;
|
|
152
|
+
globalFilteringFeature: import("@tanstack/react-table").TableFeature;
|
|
153
|
+
rowSortingFeature: import("@tanstack/react-table").TableFeature;
|
|
154
|
+
rowPaginationFeature: import("@tanstack/react-table").TableFeature;
|
|
155
|
+
rowSelectionFeature: import("@tanstack/react-table").TableFeature;
|
|
156
|
+
rowExpandingFeature: import("@tanstack/react-table").TableFeature;
|
|
157
|
+
rowPinningFeature: import("@tanstack/react-table").TableFeature;
|
|
158
|
+
cellSelectionFeature: import("@tanstack/react-table").TableFeature;
|
|
159
|
+
sortedRowModel: (table: Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
160
|
+
filteredRowModel: (table: Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
161
|
+
paginatedRowModel: (table: Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
162
|
+
expandedRowModel: (table: Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
163
|
+
facetedRowModel: (table: Table<any, any>, columnId: string) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
164
|
+
facetedUniqueValues: (table: Table<TableFeatures, any>, columnId: string) => () => Map<any, number>;
|
|
165
|
+
sortFns: {
|
|
166
|
+
alphanumeric: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
167
|
+
alphanumericCaseSensitive: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
168
|
+
basic: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
169
|
+
datetime: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
170
|
+
text: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
171
|
+
textCaseSensitive: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
172
|
+
};
|
|
173
|
+
columnMeta: DataGridColumnMeta<any>;
|
|
174
|
+
};
|
|
175
|
+
/** The feature set `dataGridFeatures` registers. */
|
|
176
|
+
export type DataGridFeatures = typeof dataGridFeatures;
|
|
177
|
+
/**
|
|
178
|
+
* The grid's internal view of the table.
|
|
179
|
+
*
|
|
180
|
+
* `TFeatures` is invariant in v9 and an unresolved generic one collapses to a
|
|
181
|
+
* union that includes the bare core arm, so no generic signature can call
|
|
182
|
+
* `getVisibleCells()`, `getStartVisibleLeafColumns()` and friends. The public
|
|
183
|
+
* components stay generic so consumers can pass any bundle they like; the
|
|
184
|
+
* table is widened to this concrete type exactly once, on the way into
|
|
185
|
+
* context, and every internal component reads it from there.
|
|
186
|
+
*/
|
|
187
|
+
export type DataGridTableInstance<TData extends object> = ReactTable<DataGridFeatures, TData>;
|
|
188
|
+
/** Label for headers / column visibility: `meta.headerTitle`, string `columnDef.header`, or `column.id`. */
|
|
189
|
+
export declare function getColumnHeaderLabel<TData extends RowData, TValue>(column: Column<DataGridFeatures, TData, TValue>): string;
|
|
190
|
+
/**
|
|
191
|
+
* meta.headerColSpan: the sibling leaves each owning leaf's header covers,
|
|
192
|
+
* by owner id. Each must render right after the last in its pin family, or
|
|
193
|
+
* the span ends there; the header rows, the resize indicator and the move
|
|
194
|
+
* and drop targets all read spans from here.
|
|
195
|
+
*/
|
|
196
|
+
export declare function getDataGridHeaderSpans<TData extends object>(table: DataGridTableInstance<TData>): Map<string, Column<{
|
|
197
|
+
columnVisibilityFeature: import("@tanstack/react-table").TableFeature;
|
|
198
|
+
columnOrderingFeature: import("@tanstack/react-table").TableFeature;
|
|
199
|
+
columnPinningFeature: import("@tanstack/react-table").TableFeature;
|
|
200
|
+
columnSizingFeature: import("@tanstack/react-table").TableFeature;
|
|
201
|
+
columnResizingFeature: import("@tanstack/react-table").TableFeature;
|
|
202
|
+
columnFilteringFeature: import("@tanstack/react-table").TableFeature;
|
|
203
|
+
columnFacetingFeature: import("@tanstack/react-table").TableFeature;
|
|
204
|
+
globalFilteringFeature: import("@tanstack/react-table").TableFeature;
|
|
205
|
+
rowSortingFeature: import("@tanstack/react-table").TableFeature;
|
|
206
|
+
rowPaginationFeature: import("@tanstack/react-table").TableFeature;
|
|
207
|
+
rowSelectionFeature: import("@tanstack/react-table").TableFeature;
|
|
208
|
+
rowExpandingFeature: import("@tanstack/react-table").TableFeature;
|
|
209
|
+
rowPinningFeature: import("@tanstack/react-table").TableFeature;
|
|
210
|
+
cellSelectionFeature: import("@tanstack/react-table").TableFeature;
|
|
211
|
+
sortedRowModel: (table: Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
212
|
+
filteredRowModel: (table: Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
213
|
+
paginatedRowModel: (table: Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
214
|
+
expandedRowModel: (table: Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
215
|
+
facetedRowModel: (table: Table<any, any>, columnId: string) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
216
|
+
facetedUniqueValues: (table: Table<TableFeatures, any>, columnId: string) => () => Map<any, number>;
|
|
217
|
+
sortFns: {
|
|
218
|
+
alphanumeric: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
219
|
+
alphanumericCaseSensitive: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
220
|
+
basic: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
221
|
+
datetime: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
222
|
+
text: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
223
|
+
textCaseSensitive: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
224
|
+
};
|
|
225
|
+
columnMeta: DataGridColumnMeta<any>;
|
|
226
|
+
}, TData, unknown>[]>;
|
|
227
|
+
/**
|
|
228
|
+
* The td contract for spreadsheet selection. Call inside a
|
|
229
|
+
* `Subscribe source={table.atoms.cellSelection}` render only: the reads are
|
|
230
|
+
* builder calls whose state dependency React Compiler cannot see, exactly the
|
|
231
|
+
* trap the row-selection checkbox documents.
|
|
232
|
+
*/
|
|
233
|
+
export declare function getDataGridCellSelectionCellAttrs<TData extends object>(cell: Cell<DataGridFeatures, TData, unknown>): {
|
|
234
|
+
"aria-selected": boolean;
|
|
235
|
+
"data-col-id": string;
|
|
236
|
+
"data-cell-selected": true | undefined;
|
|
237
|
+
"data-cell-focused": true | undefined;
|
|
238
|
+
"data-cell-edge-top": true | undefined;
|
|
239
|
+
"data-cell-edge-right": true | undefined;
|
|
240
|
+
"data-cell-edge-bottom": true | undefined;
|
|
241
|
+
"data-cell-edge-left": true | undefined;
|
|
242
|
+
};
|
|
243
|
+
/**
|
|
244
|
+
* Selection chrome for a body td, activated by the data attributes above plus
|
|
245
|
+
* the imperatively toggled `data-cell-fill-target` (fill-drag preview, written
|
|
246
|
+
* outside React like the resize indicator). A ::before overlay, not outline
|
|
247
|
+
* or box-shadow: an outline ring hugs the cell box and cannot line up with
|
|
248
|
+
* the gridlines the perimeter paints on, and the pinned-column dividers
|
|
249
|
+
* already own the cell's shadow slot (tailwind-merge would collapse a second
|
|
250
|
+
* shadow-[...] into it).
|
|
251
|
+
*/
|
|
252
|
+
export declare const dataGridCellSelectionCellClasses: string;
|
|
253
|
+
export type DataGridApiFetchParams = {
|
|
254
|
+
pageIndex: number;
|
|
255
|
+
pageSize: number;
|
|
256
|
+
sorting?: SortingState;
|
|
257
|
+
filters?: ColumnFiltersState;
|
|
258
|
+
searchQuery?: string;
|
|
259
|
+
};
|
|
260
|
+
export type DataGridApiResponse<T> = {
|
|
261
|
+
data: T[];
|
|
262
|
+
empty: boolean;
|
|
263
|
+
pagination: {
|
|
264
|
+
total: number;
|
|
265
|
+
page: number;
|
|
266
|
+
};
|
|
267
|
+
};
|
|
268
|
+
/**
|
|
269
|
+
* Everything `<DataGrid>` accepts except the two props the provider consumes
|
|
270
|
+
* itself. Kept feature-agnostic: layout and messaging never depend on which
|
|
271
|
+
* TanStack features the consumer registered.
|
|
272
|
+
*/
|
|
273
|
+
export type DataGridLayoutProps<TData extends object> = Omit<DataGridProps<TableFeatures, TData>, "table" | "children">;
|
|
274
|
+
export interface DataGridContextProps<TData extends object> {
|
|
275
|
+
props: DataGridLayoutProps<TData>;
|
|
276
|
+
table: DataGridTableInstance<TData>;
|
|
277
|
+
recordCount: number;
|
|
278
|
+
isLoading: boolean;
|
|
279
|
+
/** Stable per-grid prefix for the DOM ids ARIA relations point at. */
|
|
280
|
+
gridId: string;
|
|
281
|
+
/** The merged label set; components read `i18n.labels.<key>`. */
|
|
282
|
+
i18n: DataGridI18nConfig;
|
|
283
|
+
/**
|
|
284
|
+
* Internal coordinator for `meta.autoSize` columns. Lives at the core level
|
|
285
|
+
* so every table variant and viewport instance shares one application state.
|
|
286
|
+
*/
|
|
287
|
+
autoSize?: DataGridAutoSizeController;
|
|
288
|
+
}
|
|
289
|
+
/**
|
|
290
|
+
* Row and column ids are consumer strings; DOM ids cannot carry spaces or
|
|
291
|
+
* quotes. One shared sanitizer so `aria-activedescendant` writers and the id
|
|
292
|
+
* renderers always agree on the same encoding.
|
|
293
|
+
*/
|
|
294
|
+
export declare function toDataGridDomId(value: string): string;
|
|
295
|
+
export type DataGridAutoSizeController = {
|
|
296
|
+
/**
|
|
297
|
+
* Feeds the controller one viewport measurement: the SIGNED free space
|
|
298
|
+
* between the scroll container and the table, negative while the table
|
|
299
|
+
* overflows. The first sight of a `meta.autoSize` column absorbs the
|
|
300
|
+
* free space into its width; after that, every measurement REFLOWS the
|
|
301
|
+
* same growth - a wider window widens the column, a narrower one gives
|
|
302
|
+
* the space back down to the column's `minSize` (or its starting width
|
|
303
|
+
* when none is set) - so the grid tracks its container live. Commits
|
|
304
|
+
* are coalesced for performance: sub-pixel deltas are dropped, a
|
|
305
|
+
* streaming resize gets one leading commit plus one trailing commit at
|
|
306
|
+
* settle, and a width the user dragged is never touched. Safe to call
|
|
307
|
+
* from every viewport measurement; returns true when a sizing update
|
|
308
|
+
* was dispatched.
|
|
309
|
+
*/
|
|
310
|
+
apply: (freeSpace: number) => boolean;
|
|
311
|
+
/**
|
|
312
|
+
* The width the armed column would reflow to at this free space, and the
|
|
313
|
+
* width it holds now, without committing anything. Null when no column is
|
|
314
|
+
* armed. A live (onChange) resize previews with it on every move.
|
|
315
|
+
*/
|
|
316
|
+
preview: (freeSpace: number) => {
|
|
317
|
+
columnId: string;
|
|
318
|
+
current: number;
|
|
319
|
+
size: number;
|
|
320
|
+
} | null;
|
|
321
|
+
/**
|
|
322
|
+
* Records a width the caller commits for the armed column, so the next
|
|
323
|
+
* measurement reads it as this coordinator's own write and keeps
|
|
324
|
+
* reflowing, rather than as a user drag that stands it down.
|
|
325
|
+
*/
|
|
326
|
+
adopt: (columnId: string, size: number) => void;
|
|
327
|
+
};
|
|
328
|
+
export type DataGridRequestParams = {
|
|
329
|
+
pageIndex: number;
|
|
330
|
+
pageSize: number;
|
|
331
|
+
sorting?: SortingState;
|
|
332
|
+
columnFilters?: ColumnFiltersState;
|
|
333
|
+
};
|
|
334
|
+
/** Which spreadsheet operation produced a cell change batch. */
|
|
335
|
+
export type DataGridCellsChangeSource = "paste" | "cut" | "clear" | "fill" | "edit";
|
|
336
|
+
export interface DataGridCellChange<TData> {
|
|
337
|
+
rowId: string;
|
|
338
|
+
columnId: string;
|
|
339
|
+
/** The consumer's row object, so immutable write-back needs no second lookup. */
|
|
340
|
+
row: TData;
|
|
341
|
+
/** Accessor value at dispatch time; enables consumer-side undo stacks. */
|
|
342
|
+
previousValue: unknown;
|
|
343
|
+
/** Typed value produced by `meta.cellEdit.parse`, or `clearValue` for clear/cut. */
|
|
344
|
+
value: unknown;
|
|
345
|
+
}
|
|
346
|
+
/** What onCellsCopy receives after the grid writes the clipboard. */
|
|
347
|
+
export interface DataGridCopyDetails {
|
|
348
|
+
/** The TSV text that reached the clipboard. */
|
|
349
|
+
text: string;
|
|
350
|
+
/** The same content as a row-major grid of formatted fields. */
|
|
351
|
+
grid: string[][];
|
|
352
|
+
/** True when the write came from a cut, which clears the region next. */
|
|
353
|
+
cut: boolean;
|
|
354
|
+
}
|
|
355
|
+
/** One resolved positive region, in pre-paginated display indexes. */
|
|
356
|
+
export interface DataGridCellSelectionBound {
|
|
357
|
+
minRowIndex: number;
|
|
358
|
+
maxRowIndex: number;
|
|
359
|
+
minColumnIndex: number;
|
|
360
|
+
maxColumnIndex: number;
|
|
361
|
+
}
|
|
362
|
+
/** What onCellSelectionChange receives, resolved from the live selection. */
|
|
363
|
+
export interface DataGridCellSelectionSnapshot {
|
|
364
|
+
/** The virtually focused cell, the active range's anchor. Null when clear. */
|
|
365
|
+
focused: {
|
|
366
|
+
rowId: string;
|
|
367
|
+
columnId: string;
|
|
368
|
+
} | null;
|
|
369
|
+
/** Every positive region, geometric order. */
|
|
370
|
+
bounds: DataGridCellSelectionBound[];
|
|
371
|
+
/** The most recent region, the one copy and paste act on. */
|
|
372
|
+
activeBound: DataGridCellSelectionBound | null;
|
|
373
|
+
/**
|
|
374
|
+
* Cells of the selection the view can show - the count that matches the
|
|
375
|
+
* painted range and what a batch will touch.
|
|
376
|
+
*/
|
|
377
|
+
visibleCellCount: number;
|
|
378
|
+
}
|
|
379
|
+
export interface DataGridCellRejection {
|
|
380
|
+
rowId: string;
|
|
381
|
+
columnId: string;
|
|
382
|
+
raw: string;
|
|
383
|
+
reason: "readonly" | "invalid";
|
|
384
|
+
}
|
|
385
|
+
/**
|
|
386
|
+
* Lifecycle of a row for the optional CRUD indications: "new" and "dirty"
|
|
387
|
+
* tint the row, "deleted" mutes and strikes it. Purely presentational - the
|
|
388
|
+
* consumer's state stays the only owner of what the statuses mean.
|
|
389
|
+
*/
|
|
390
|
+
export type DataGridRowStatus = "new" | "dirty" | "deleted";
|
|
391
|
+
/**
|
|
392
|
+
* Lifecycle of a cell for the optional CRUD indications: a corner mark in
|
|
393
|
+
* the amber tone for "dirty", the destructive tone for "invalid".
|
|
394
|
+
*/
|
|
395
|
+
export type DataGridCellStatus = "dirty" | "invalid";
|
|
396
|
+
/**
|
|
397
|
+
* Asks the consumer to open its editor for the focused cell: Enter or F2, or
|
|
398
|
+
* a typed printable character (then `initialText` carries it, the
|
|
399
|
+
* Notion/Airtable type-to-replace flow). Dispatched only for cells whose
|
|
400
|
+
* column is writable via `meta.cellEdit`.
|
|
401
|
+
*/
|
|
402
|
+
export interface DataGridCellEditRequest<TData> {
|
|
403
|
+
rowId: string;
|
|
404
|
+
columnId: string;
|
|
405
|
+
row: TData;
|
|
406
|
+
previousValue: unknown;
|
|
407
|
+
/** The typed character that started the edit; absent for Enter and F2. */
|
|
408
|
+
initialText?: string;
|
|
409
|
+
}
|
|
410
|
+
/**
|
|
411
|
+
* One batch per operation, however many cells it spans: a 10k-cell paste is
|
|
412
|
+
* one callback, one consumer setState, one table rebuild. The grid never
|
|
413
|
+
* writes data itself.
|
|
414
|
+
*/
|
|
415
|
+
export interface DataGridCellsChangeDetails<TData> {
|
|
416
|
+
source: DataGridCellsChangeSource;
|
|
417
|
+
changes: DataGridCellChange<TData>[];
|
|
418
|
+
rejected: DataGridCellRejection[];
|
|
419
|
+
}
|
|
420
|
+
export interface DataGridProps<TFeatures extends TableFeatures, TData extends object> {
|
|
421
|
+
className?: string;
|
|
422
|
+
table?: Table<TFeatures, TData>;
|
|
423
|
+
recordCount: number;
|
|
424
|
+
children?: ReactNode;
|
|
425
|
+
onRowClick?: (row: TData) => void;
|
|
426
|
+
/**
|
|
427
|
+
* Receives every spreadsheet write batch (paste, cut, clear, fill, edit).
|
|
428
|
+
* Served through the props getter like `onRowClick`, so an inline identity
|
|
429
|
+
* never republishes the context. Absent: copy still works, writes no-op.
|
|
430
|
+
*/
|
|
431
|
+
onCellsChange?: (details: DataGridCellsChangeDetails<TData>) => void;
|
|
432
|
+
/**
|
|
433
|
+
* Opens the consumer's editor from the keyboard: Enter, F2, or typing on
|
|
434
|
+
* the focused cell. Absent: Enter keeps moving down, typing does nothing.
|
|
435
|
+
*/
|
|
436
|
+
onCellEditRequest?: (request: DataGridCellEditRequest<TData>) => void;
|
|
437
|
+
/**
|
|
438
|
+
* Fires on every cell-selection change (focus moves, ranges grow or
|
|
439
|
+
* clear) with a resolved snapshot, so a selection count, formula bar or
|
|
440
|
+
* context panel needs no reach into TanStack internals.
|
|
441
|
+
*/
|
|
442
|
+
onCellSelectionChange?: (snapshot: DataGridCellSelectionSnapshot) => void;
|
|
443
|
+
/**
|
|
444
|
+
* Fires after the grid writes the clipboard (Cmd/Ctrl+C or X, or the
|
|
445
|
+
* native copy and cut events), e.g. to confirm with a toast.
|
|
446
|
+
*/
|
|
447
|
+
onCellsCopy?: (details: DataGridCopyDetails) => void;
|
|
448
|
+
/**
|
|
449
|
+
* Renders an "Add row" affordance as the table body's last row; clicking
|
|
450
|
+
* it is the consumer's cue to start creating a row. Absent: no row.
|
|
451
|
+
*/
|
|
452
|
+
onRowCreate?: () => void;
|
|
453
|
+
/** Label of the onRowCreate affordance. Defaults to "Add row". */
|
|
454
|
+
rowCreateLabel?: ReactNode;
|
|
455
|
+
/**
|
|
456
|
+
* Rendered inside the table body after the data rows: the slot a DRAFT
|
|
457
|
+
* row lives in while it is being created, before it joins `data` and the
|
|
458
|
+
* pagination math. Supply a `<tr>` of cells; the colgroup sizes them.
|
|
459
|
+
*/
|
|
460
|
+
appendRow?: ReactNode;
|
|
461
|
+
/**
|
|
462
|
+
* Optional CRUD indication per row. Return undefined for no indication;
|
|
463
|
+
* omit the prop entirely to render none anywhere.
|
|
464
|
+
*/
|
|
465
|
+
getRowStatus?: (row: TData) => DataGridRowStatus | undefined;
|
|
466
|
+
/**
|
|
467
|
+
* Optional CRUD indication per cell: the classic corner mark on cells the
|
|
468
|
+
* consumer tracks as edited or invalid.
|
|
469
|
+
*/
|
|
470
|
+
getCellStatus?: (row: TData, columnId: string) => DataGridCellStatus | undefined;
|
|
471
|
+
isLoading?: boolean;
|
|
472
|
+
/**
|
|
473
|
+
* Overrides for every built-in string: menu items, aria labels,
|
|
474
|
+
* pagination copy, state messages. Merged over the defaults; a more
|
|
475
|
+
* specific component prop (`rowCreateLabel`, `loadingMessage`, the
|
|
476
|
+
* pagination label props) still wins over its `i18n` counterpart.
|
|
477
|
+
*/
|
|
478
|
+
i18n?: DataGridI18nOverrides;
|
|
479
|
+
loadingMode?: "skeleton" | "spinner";
|
|
480
|
+
loadingMessage?: ReactNode | string;
|
|
481
|
+
fetchingMoreMessage?: ReactNode | string;
|
|
482
|
+
allRowsLoadedMessage?: ReactNode | string;
|
|
483
|
+
emptyMessage?: ReactNode | string;
|
|
484
|
+
tableLayout?: {
|
|
485
|
+
dense?: boolean;
|
|
486
|
+
cellBorder?: boolean;
|
|
487
|
+
rowBorder?: boolean;
|
|
488
|
+
rowRounded?: boolean;
|
|
489
|
+
stripped?: boolean;
|
|
490
|
+
headerBackground?: boolean;
|
|
491
|
+
footerBackground?: boolean;
|
|
492
|
+
headerBorder?: boolean;
|
|
493
|
+
headerSticky?: boolean;
|
|
494
|
+
width?: "auto" | "fixed";
|
|
495
|
+
columnsVisibility?: boolean;
|
|
496
|
+
columnsResizable?: boolean;
|
|
497
|
+
columnsResizeMode?: "onChange" | "onEnd";
|
|
498
|
+
columnsPinnable?: boolean;
|
|
499
|
+
columnsMovable?: boolean;
|
|
500
|
+
columnsDraggable?: boolean;
|
|
501
|
+
rowsDraggable?: boolean;
|
|
502
|
+
rowsPinnable?: boolean;
|
|
503
|
+
/** Spreadsheet cell range selection: mouse ranges, keyboard, clipboard chrome. */
|
|
504
|
+
cellSelection?: boolean;
|
|
505
|
+
/**
|
|
506
|
+
* "range" (default): drag, Shift and Ctrl/Cmd gestures and Shift+keys
|
|
507
|
+
* grow multi-cell regions. "single": one focused cell only - every
|
|
508
|
+
* gesture collapses to it and Ctrl/Cmd+A is inert.
|
|
509
|
+
*/
|
|
510
|
+
cellSelectionMode?: "single" | "range";
|
|
511
|
+
/** Drag-to-fill handle on the selection corner. Requires cellSelection. */
|
|
512
|
+
cellFillHandle?: boolean;
|
|
513
|
+
/**
|
|
514
|
+
* How a cell opens its editor from the mouse: "dblclick" (default,
|
|
515
|
+
* the spreadsheet standard - first click focuses, second edits) or
|
|
516
|
+
* "click", opening the editor as soon as a plain click lands on the
|
|
517
|
+
* focused cell; modifier clicks and drags still select.
|
|
518
|
+
*/
|
|
519
|
+
cellEditMode?: "dblclick" | "click";
|
|
520
|
+
/**
|
|
521
|
+
* When true, committing an edit with Enter moves focus down (Shift+Enter
|
|
522
|
+
* up), the Sheets and Excel convention. Off by default: the commit keeps
|
|
523
|
+
* focus on the edited cell. Tab always commits and moves across.
|
|
524
|
+
*/
|
|
525
|
+
cellEditEnterAdvance?: boolean;
|
|
526
|
+
/**
|
|
527
|
+
* The handle's look: "dot" is a solid primary dot kept inside the
|
|
528
|
+
* cell corner; "ring" is the Sheets-style hollow circle riding the
|
|
529
|
+
* corner point, clamped at the grid's own boundary; "square" is the
|
|
530
|
+
* Excel-style solid square inside the corner. Default "dot".
|
|
531
|
+
*/
|
|
532
|
+
cellFillHandleVariant?: "dot" | "ring" | "square";
|
|
533
|
+
};
|
|
534
|
+
tableClassNames?: {
|
|
535
|
+
base?: string;
|
|
536
|
+
header?: string;
|
|
537
|
+
headerRow?: string;
|
|
538
|
+
headerSticky?: string;
|
|
539
|
+
body?: string;
|
|
540
|
+
bodyRow?: string;
|
|
541
|
+
footer?: string;
|
|
542
|
+
edgeCell?: string;
|
|
543
|
+
/** Override the getRowStatus tints; defaults are the warning-muted set. */
|
|
544
|
+
rowNew?: string;
|
|
545
|
+
rowDirty?: string;
|
|
546
|
+
rowDeleted?: string;
|
|
547
|
+
/**
|
|
548
|
+
* Override the pinned-row chrome (muted tint, boundary shadow). A grid
|
|
549
|
+
* that pins a draft row for quick-create wants it to read as an active
|
|
550
|
+
* row, not a muted one.
|
|
551
|
+
*/
|
|
552
|
+
rowPinned?: string;
|
|
553
|
+
/** The onRowCreate affordance row, e.g. to match the grid's row height. */
|
|
554
|
+
rowCreate?: string;
|
|
555
|
+
/** The fill handle, e.g. to restyle or resize it beyond the built-in variants. */
|
|
556
|
+
cellFillHandle?: string;
|
|
557
|
+
};
|
|
558
|
+
}
|
|
559
|
+
/**
|
|
560
|
+
* Reads the grid context. Pass `TData` from the calling component when the
|
|
561
|
+
* table, a row or a cell is handed on to something typed against that row
|
|
562
|
+
* shape: v9 declares `TData` invariant, so the default `any` no longer
|
|
563
|
+
* unifies with a concrete row type the way it did on v8.
|
|
564
|
+
*/
|
|
565
|
+
declare function useDataGrid<TData extends object = any>(): DataGridContextProps<TData>;
|
|
566
|
+
type DataGridStateAtom<TValue> = {
|
|
567
|
+
get: () => TValue;
|
|
568
|
+
subscribe: (listener: () => void) => {
|
|
569
|
+
unsubscribe: () => void;
|
|
570
|
+
};
|
|
571
|
+
};
|
|
572
|
+
/**
|
|
573
|
+
* Re-renders the caller when one table state atom changes, without waiting
|
|
574
|
+
* for a render from above. The context holds still while a column resize is
|
|
575
|
+
* in flight (see DataGridProvider), and React Compiler caches a consumer's
|
|
576
|
+
* `<DataGridTable />` element, so whatever a drag must keep live (the width
|
|
577
|
+
* variables, the resize line and indicator) subscribes here. `select` must
|
|
578
|
+
* return the slice itself or a primitive, or every write re-renders.
|
|
579
|
+
*/
|
|
580
|
+
declare function useDataGridAtom<TValue, TSelected = TValue | undefined>(atom: DataGridStateAtom<TValue> | undefined, select?: (value: TValue | undefined) => TSelected): TSelected;
|
|
581
|
+
declare function DataGridProvider<TData extends object>({ children, table, ...props }: DataGridLayoutProps<TData> & {
|
|
582
|
+
table: DataGridTableInstance<TData>;
|
|
583
|
+
children?: ReactNode;
|
|
584
|
+
}): import("react").JSX.Element;
|
|
585
|
+
declare function DataGrid<TFeatures extends TableFeatures, TData extends object>({ children, table, ...props }: DataGridProps<TFeatures, TData>): import("react").JSX.Element;
|
|
586
|
+
declare function DataGridContainer({ children, className }: {
|
|
587
|
+
children: ReactNode;
|
|
588
|
+
className?: string;
|
|
589
|
+
/** Accepted for backwards compatibility; currently has no effect. */
|
|
590
|
+
border?: boolean;
|
|
591
|
+
}): import("react").JSX.Element;
|
|
592
|
+
interface DataGridFocusCellOptions {
|
|
593
|
+
/** Also open the cell's editor, the way Enter would. */
|
|
594
|
+
edit?: boolean;
|
|
595
|
+
}
|
|
596
|
+
/** Imperative surface of the cell-selection controller. */
|
|
597
|
+
interface DataGridCellSelectionApi {
|
|
598
|
+
/**
|
|
599
|
+
* Moves the grid's cell focus AND the document focus together, retrying
|
|
600
|
+
* briefly while the row mounts, so a freshly created row is typeable
|
|
601
|
+
* without an extra click. `edit: true` also opens the cell's editor the
|
|
602
|
+
* way Enter would. Registered once the controller is wired; null while
|
|
603
|
+
* cell selection is off.
|
|
604
|
+
*/
|
|
605
|
+
focusCell: (rowId: string, columnId: string, options?: DataGridFocusCellOptions) => void;
|
|
606
|
+
/** Clears every range and the focused cell. */
|
|
607
|
+
clearSelection: () => void;
|
|
608
|
+
/** Scrolls a rendered cell into view without moving focus. */
|
|
609
|
+
scrollToCell: (rowId: string, columnId: string) => void;
|
|
610
|
+
}
|
|
611
|
+
/** Row-major grid to TSV, CRLF rows, Excel-style quoting. */
|
|
612
|
+
declare function serializeDataGridClipboardText(grid: string[][]): string;
|
|
613
|
+
/**
|
|
614
|
+
* TSV to a row-major grid. A stateful scan, not a split: a quoted field may
|
|
615
|
+
* contain tabs, quotes and both newline flavors, which is exactly what Excel
|
|
616
|
+
* emits for a multi-line cell.
|
|
617
|
+
*/
|
|
618
|
+
declare function parseDataGridClipboardText(text: string): string[][];
|
|
619
|
+
/** Repeats a block cyclically to fill rowCount x columnCount. */
|
|
620
|
+
declare function tileDataGridClipboardBlock(block: string[][], rowCount: number, columnCount: number): string[][];
|
|
621
|
+
/**
|
|
622
|
+
* Cells of the current selection the view can actually show, under the
|
|
623
|
+
* same row filter the batch builders use, so a count shown next to the
|
|
624
|
+
* selection always matches what is painted and what a batch will touch.
|
|
625
|
+
* The feature's own getSelectedCellCount spans off-page rows instead.
|
|
626
|
+
*/
|
|
627
|
+
declare function getDataGridVisibleSelectedCellCount<TData extends object>(table: DataGridTableInstance<TData>,
|
|
628
|
+
/** The grid's body viewport; null falls back to the full-range count. */
|
|
629
|
+
viewport: HTMLElement | null): number;
|
|
630
|
+
/**
|
|
631
|
+
* The active region as formatted strings, row-major. Columns opted out of
|
|
632
|
+
* selection are compacted away, matching the feature's own ranges-data
|
|
633
|
+
* behavior, and rows the view cannot show are skipped when a viewport is
|
|
634
|
+
* given. Null when nothing is selected.
|
|
635
|
+
*/
|
|
636
|
+
declare function getDataGridActiveRegionGrid<TData extends object>(table: DataGridTableInstance<TData>, viewport?: HTMLElement | null): string[][] | null;
|
|
637
|
+
/**
|
|
638
|
+
* A clear/cut batch over the selection's writable cells. Non-writable columns
|
|
639
|
+
* are skipped silently: clearing is an intent over what the grid owns, and a
|
|
640
|
+
* rejection per read-only cell would be noise. Null when nothing clears.
|
|
641
|
+
*/
|
|
642
|
+
declare function buildDataGridClearDetails<TData extends object>(table: DataGridTableInstance<TData>, source: "clear" | "cut", activeRegionOnly: boolean, viewport?: HTMLElement | null): DataGridCellsChangeDetails<TData> | null;
|
|
643
|
+
type DataGridPasteTarget = {
|
|
644
|
+
/** Display indexes of the pasted region's first and last row. */
|
|
645
|
+
startRowIndex: number;
|
|
646
|
+
endRowIndex: number;
|
|
647
|
+
/** How many rows a paste actually wrote (hidden rows are skipped). */
|
|
648
|
+
rowCount?: number;
|
|
649
|
+
/** Display indexes of the pasted region's first and last column. */
|
|
650
|
+
startColumnIndex: number;
|
|
651
|
+
endColumnIndex: number;
|
|
652
|
+
};
|
|
653
|
+
/**
|
|
654
|
+
* Resolves a parsed clipboard block into a paste batch, Excel semantics:
|
|
655
|
+
* a 1x1 block fills the whole selected region; a block tiles when the region
|
|
656
|
+
* is an exact multiple of it; otherwise it pastes once from the region's
|
|
657
|
+
* top-left, clamped at the grid edges (rows are never grown).
|
|
658
|
+
*/
|
|
659
|
+
declare function buildDataGridPasteDetails<TData extends object>(table: DataGridTableInstance<TData>, block: string[][], viewport?: HTMLElement | null): {
|
|
660
|
+
details: DataGridCellsChangeDetails<TData>;
|
|
661
|
+
target: DataGridPasteTarget;
|
|
662
|
+
} | null;
|
|
663
|
+
/**
|
|
664
|
+
* The inverse batch: every change's value and previousValue swapped and
|
|
665
|
+
* rejections dropped. Feed it through the same state update onCellsChange
|
|
666
|
+
* uses to implement undo; inverting the inverse is redo.
|
|
667
|
+
*/
|
|
668
|
+
declare function invertDataGridCellsChange<TData extends object>(details: DataGridCellsChangeDetails<TData>): DataGridCellsChangeDetails<TData>;
|
|
669
|
+
/**
|
|
670
|
+
* Headless spreadsheet controller: keyboard navigation, clipboard, clear and
|
|
671
|
+
* the fill-handle drag. Mount once inside `<DataGrid>`, next to the table.
|
|
672
|
+
* Renders only a hidden anchor; the real listeners attach to the grid's own
|
|
673
|
+
* body viewport, which also receives focus (container-focus model), so a
|
|
674
|
+
* virtualized row unmounting can never strand `document.activeElement`.
|
|
675
|
+
*/
|
|
676
|
+
declare function DataGridCellSelection<TData extends object>({ apiRef, clipboard, keyboard }: {
|
|
677
|
+
/** Receives the controller's imperative API, e.g. for create-row flows. */
|
|
678
|
+
apiRef?: RefObject<DataGridCellSelectionApi | null>;
|
|
679
|
+
/** Native copy, cut and paste handling. Defaults to true. */
|
|
680
|
+
clipboard?: boolean;
|
|
681
|
+
/**
|
|
682
|
+
* Arrows (with Ctrl/Cmd edge jumps), Home/End, PageUp/PageDown, Enter,
|
|
683
|
+
* F2, type-to-edit, Tab, Ctrl/Cmd+A, Delete, Escape. Defaults to true.
|
|
684
|
+
*/
|
|
685
|
+
keyboard?: boolean;
|
|
686
|
+
}): import("react").JSX.Element;
|
|
687
|
+
/**
|
|
688
|
+
* Thin shell over row selection for bulk actions: selected count, a slot for
|
|
689
|
+
* the consumer's controls, and a clear action. Hidden while nothing is
|
|
690
|
+
* selected. What the controls do stays consumer-owned.
|
|
691
|
+
*
|
|
692
|
+
* Presented as a floating toolbar, the Google Sheets way: auto width,
|
|
693
|
+
* centered, elevated, and sticky to the viewport bottom with breathing room,
|
|
694
|
+
* so bulk actions stay reachable while the grid scrolls.
|
|
695
|
+
*/
|
|
696
|
+
declare function DataGridSelectionBar({ children, className, label, clearLabel, onClear }: {
|
|
697
|
+
children?: ReactNode;
|
|
698
|
+
className?: string;
|
|
699
|
+
label?: (count: number) => ReactNode;
|
|
700
|
+
clearLabel?: ReactNode;
|
|
701
|
+
onClear?: () => void;
|
|
702
|
+
}): import("react").JSX.Element | null;
|
|
703
|
+
interface DataGridColumnFilterProps<TData extends object, TValue> {
|
|
704
|
+
column?: Column<DataGridFeatures, TData, TValue>;
|
|
705
|
+
title?: string;
|
|
706
|
+
options: {
|
|
707
|
+
label: string;
|
|
708
|
+
value: string;
|
|
709
|
+
icon?: React.ComponentType<{
|
|
710
|
+
className?: string;
|
|
711
|
+
}>;
|
|
712
|
+
}[];
|
|
713
|
+
}
|
|
714
|
+
declare function DataGridColumnFilter<TData extends object, TValue>({ column, title, options }: DataGridColumnFilterProps<TData, TValue>): import("react").JSX.Element;
|
|
715
|
+
interface DataGridColumnHeaderProps<TData extends object, TValue> extends HTMLAttributes<HTMLDivElement> {
|
|
716
|
+
column: Column<DataGridFeatures, TData, TValue>;
|
|
717
|
+
/** When omitted, uses `column.columnDef.meta.headerTitle`, then a string `columnDef.header`, then `column.id`. */
|
|
718
|
+
title?: string;
|
|
719
|
+
icon?: ReactNode;
|
|
720
|
+
/** Reserved; pin controls are gated by tableLayout.columnsPinnable + column.getCanPin(). */
|
|
721
|
+
pinnable?: boolean;
|
|
722
|
+
filter?: ReactNode;
|
|
723
|
+
visibility?: boolean;
|
|
724
|
+
}
|
|
725
|
+
/**
|
|
726
|
+
* Sort and pin state reaches this header through builder calls on `column`
|
|
727
|
+
* (`getIsSorted()`, `getIsPinned()`), and `column` keeps its identity across
|
|
728
|
+
* renders, so anything memoized against it (the `memo` below, or a consumer's
|
|
729
|
+
* compiled header template) never re-runs those reads: frozen sort arrows and
|
|
730
|
+
* pin controls. The `Subscribe` below turns the slices this header actually
|
|
731
|
+
* reads into a real reactive dependency, and threading the selection through
|
|
732
|
+
* as a prop is what lets it past the `memo`.
|
|
733
|
+
*/
|
|
734
|
+
declare function DataGridColumnHeader<TData extends object, TValue>(props: DataGridColumnHeaderProps<TData, TValue>): import("react").JSX.Element;
|
|
735
|
+
declare function DataGridColumnVisibility<TData extends object>({ table, trigger }: {
|
|
736
|
+
table: Table<DataGridFeatures, TData>;
|
|
737
|
+
trigger: ReactElement<Record<string, unknown>>;
|
|
738
|
+
}): import("react").JSX.Element;
|
|
739
|
+
interface DataGridPaginationProps {
|
|
740
|
+
sizes?: number[];
|
|
741
|
+
sizesInfo?: string;
|
|
742
|
+
sizesLabel?: string;
|
|
743
|
+
sizesDescription?: string;
|
|
744
|
+
sizesSkeleton?: ReactNode;
|
|
745
|
+
more?: boolean;
|
|
746
|
+
/** Page buttons the truncated middle shows; the row adds first, last and
|
|
747
|
+
* an ellipsis for each hidden stretch. Clamped to a minimum of 3. */
|
|
748
|
+
moreLimit?: number;
|
|
749
|
+
info?: string;
|
|
750
|
+
infoSkeleton?: ReactNode;
|
|
751
|
+
className?: string;
|
|
752
|
+
rowsPerPageLabel?: string;
|
|
753
|
+
previousPageLabel?: string;
|
|
754
|
+
nextPageLabel?: string;
|
|
755
|
+
ellipsisText?: string;
|
|
756
|
+
}
|
|
757
|
+
declare function DataGridPagination(props: DataGridPaginationProps): JSX.Element;
|
|
758
|
+
type DataGridScrollAreaOrientation = "horizontal" | "vertical" | "both";
|
|
759
|
+
type DataGridScrollAreaProps = Omit<ScrollArea.Root.Props, "children"> & {
|
|
760
|
+
children: ReactNode;
|
|
761
|
+
orientation?: DataGridScrollAreaOrientation;
|
|
762
|
+
};
|
|
763
|
+
declare function DataGridScrollArea({ children, className, orientation, ...props }: DataGridScrollAreaProps): import("react").JSX.Element;
|
|
764
|
+
declare function getPinningStyles<TData extends object>(column: Column<DataGridFeatures, TData, unknown>): CSSProperties;
|
|
765
|
+
declare function getDataGridTreeIndentStyle<TData extends object>(row: Row<DataGridFeatures, TData>, indent?: number): CSSProperties;
|
|
766
|
+
/**
|
|
767
|
+
* Nearest scroll-area viewport that belongs to THIS grid. A viewport outside
|
|
768
|
+
* the grid's own container (e.g. a page-level ScrollArea) would make the
|
|
769
|
+
* width measurement - and the virtualizer - bind the wrong box.
|
|
770
|
+
*/
|
|
771
|
+
declare function getDataGridScrollAreaViewport(node: HTMLElement): HTMLElement | null;
|
|
772
|
+
type DataGridTablePinnedBoundary = "top" | "bottom";
|
|
773
|
+
declare function getDataGridTableRowSections<TData extends object>(table: DataGridTableInstance<TData>, rowsPinnable?: boolean): {
|
|
774
|
+
topRows: Row<DataGridFeatures, TData>[];
|
|
775
|
+
centerRows: Row<DataGridFeatures, TData>[];
|
|
776
|
+
bottomRows: Row<DataGridFeatures, TData>[];
|
|
777
|
+
};
|
|
778
|
+
declare function getDataGridTableResolvedRows<TData extends object>(table: DataGridTableInstance<TData>, rowsPinnable?: boolean): {
|
|
779
|
+
row: Row<DataGridFeatures, TData>;
|
|
780
|
+
pinnedBoundary?: DataGridTablePinnedBoundary;
|
|
781
|
+
}[];
|
|
782
|
+
declare function getDataGridTableMergedHeaderGroups<TData extends object>(table: DataGridTableInstance<TData>): {
|
|
783
|
+
id: string;
|
|
784
|
+
headers: Header<DataGridFeatures, TData, unknown>[];
|
|
785
|
+
startHeaders: Header<{
|
|
786
|
+
columnVisibilityFeature: import("@tanstack/react-table").TableFeature;
|
|
787
|
+
columnOrderingFeature: import("@tanstack/react-table").TableFeature;
|
|
788
|
+
columnPinningFeature: import("@tanstack/react-table").TableFeature;
|
|
789
|
+
columnSizingFeature: import("@tanstack/react-table").TableFeature;
|
|
790
|
+
columnResizingFeature: import("@tanstack/react-table").TableFeature;
|
|
791
|
+
columnFilteringFeature: import("@tanstack/react-table").TableFeature;
|
|
792
|
+
columnFacetingFeature: import("@tanstack/react-table").TableFeature;
|
|
793
|
+
globalFilteringFeature: import("@tanstack/react-table").TableFeature;
|
|
794
|
+
rowSortingFeature: import("@tanstack/react-table").TableFeature;
|
|
795
|
+
rowPaginationFeature: import("@tanstack/react-table").TableFeature;
|
|
796
|
+
rowSelectionFeature: import("@tanstack/react-table").TableFeature;
|
|
797
|
+
rowExpandingFeature: import("@tanstack/react-table").TableFeature;
|
|
798
|
+
rowPinningFeature: import("@tanstack/react-table").TableFeature;
|
|
799
|
+
cellSelectionFeature: import("@tanstack/react-table").TableFeature;
|
|
800
|
+
sortedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
801
|
+
filteredRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
802
|
+
paginatedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
803
|
+
expandedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
804
|
+
facetedRowModel: (table: import("@tanstack/react-table").Table<any, any>, columnId: string) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
805
|
+
facetedUniqueValues: (table: import("@tanstack/react-table").Table<import("@tanstack/react-table").TableFeatures, any>, columnId: string) => () => Map<any, number>;
|
|
806
|
+
sortFns: {
|
|
807
|
+
alphanumeric: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
808
|
+
alphanumericCaseSensitive: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
809
|
+
basic: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
810
|
+
datetime: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
811
|
+
text: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
812
|
+
textCaseSensitive: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
813
|
+
};
|
|
814
|
+
columnMeta: DataGridColumnMeta<any>;
|
|
815
|
+
}, TData, unknown>[];
|
|
816
|
+
centerHeaders: Header<{
|
|
817
|
+
columnVisibilityFeature: import("@tanstack/react-table").TableFeature;
|
|
818
|
+
columnOrderingFeature: import("@tanstack/react-table").TableFeature;
|
|
819
|
+
columnPinningFeature: import("@tanstack/react-table").TableFeature;
|
|
820
|
+
columnSizingFeature: import("@tanstack/react-table").TableFeature;
|
|
821
|
+
columnResizingFeature: import("@tanstack/react-table").TableFeature;
|
|
822
|
+
columnFilteringFeature: import("@tanstack/react-table").TableFeature;
|
|
823
|
+
columnFacetingFeature: import("@tanstack/react-table").TableFeature;
|
|
824
|
+
globalFilteringFeature: import("@tanstack/react-table").TableFeature;
|
|
825
|
+
rowSortingFeature: import("@tanstack/react-table").TableFeature;
|
|
826
|
+
rowPaginationFeature: import("@tanstack/react-table").TableFeature;
|
|
827
|
+
rowSelectionFeature: import("@tanstack/react-table").TableFeature;
|
|
828
|
+
rowExpandingFeature: import("@tanstack/react-table").TableFeature;
|
|
829
|
+
rowPinningFeature: import("@tanstack/react-table").TableFeature;
|
|
830
|
+
cellSelectionFeature: import("@tanstack/react-table").TableFeature;
|
|
831
|
+
sortedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
832
|
+
filteredRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
833
|
+
paginatedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
834
|
+
expandedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
835
|
+
facetedRowModel: (table: import("@tanstack/react-table").Table<any, any>, columnId: string) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
836
|
+
facetedUniqueValues: (table: import("@tanstack/react-table").Table<import("@tanstack/react-table").TableFeatures, any>, columnId: string) => () => Map<any, number>;
|
|
837
|
+
sortFns: {
|
|
838
|
+
alphanumeric: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
839
|
+
alphanumericCaseSensitive: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
840
|
+
basic: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
841
|
+
datetime: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
842
|
+
text: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
843
|
+
textCaseSensitive: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
844
|
+
};
|
|
845
|
+
columnMeta: DataGridColumnMeta<any>;
|
|
846
|
+
}, TData, unknown>[];
|
|
847
|
+
endHeaders: Header<{
|
|
848
|
+
columnVisibilityFeature: import("@tanstack/react-table").TableFeature;
|
|
849
|
+
columnOrderingFeature: import("@tanstack/react-table").TableFeature;
|
|
850
|
+
columnPinningFeature: import("@tanstack/react-table").TableFeature;
|
|
851
|
+
columnSizingFeature: import("@tanstack/react-table").TableFeature;
|
|
852
|
+
columnResizingFeature: import("@tanstack/react-table").TableFeature;
|
|
853
|
+
columnFilteringFeature: import("@tanstack/react-table").TableFeature;
|
|
854
|
+
columnFacetingFeature: import("@tanstack/react-table").TableFeature;
|
|
855
|
+
globalFilteringFeature: import("@tanstack/react-table").TableFeature;
|
|
856
|
+
rowSortingFeature: import("@tanstack/react-table").TableFeature;
|
|
857
|
+
rowPaginationFeature: import("@tanstack/react-table").TableFeature;
|
|
858
|
+
rowSelectionFeature: import("@tanstack/react-table").TableFeature;
|
|
859
|
+
rowExpandingFeature: import("@tanstack/react-table").TableFeature;
|
|
860
|
+
rowPinningFeature: import("@tanstack/react-table").TableFeature;
|
|
861
|
+
cellSelectionFeature: import("@tanstack/react-table").TableFeature;
|
|
862
|
+
sortedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
863
|
+
filteredRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
864
|
+
paginatedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
865
|
+
expandedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
866
|
+
facetedRowModel: (table: import("@tanstack/react-table").Table<any, any>, columnId: string) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
867
|
+
facetedUniqueValues: (table: import("@tanstack/react-table").Table<import("@tanstack/react-table").TableFeatures, any>, columnId: string) => () => Map<any, number>;
|
|
868
|
+
sortFns: {
|
|
869
|
+
alphanumeric: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
870
|
+
alphanumericCaseSensitive: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
871
|
+
basic: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
872
|
+
datetime: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
873
|
+
text: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
874
|
+
textCaseSensitive: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
875
|
+
};
|
|
876
|
+
columnMeta: DataGridColumnMeta<any>;
|
|
877
|
+
}, TData, unknown>[];
|
|
878
|
+
coveredHeaders: Map<string, Header<{
|
|
879
|
+
columnVisibilityFeature: import("@tanstack/react-table").TableFeature;
|
|
880
|
+
columnOrderingFeature: import("@tanstack/react-table").TableFeature;
|
|
881
|
+
columnPinningFeature: import("@tanstack/react-table").TableFeature;
|
|
882
|
+
columnSizingFeature: import("@tanstack/react-table").TableFeature;
|
|
883
|
+
columnResizingFeature: import("@tanstack/react-table").TableFeature;
|
|
884
|
+
columnFilteringFeature: import("@tanstack/react-table").TableFeature;
|
|
885
|
+
columnFacetingFeature: import("@tanstack/react-table").TableFeature;
|
|
886
|
+
globalFilteringFeature: import("@tanstack/react-table").TableFeature;
|
|
887
|
+
rowSortingFeature: import("@tanstack/react-table").TableFeature;
|
|
888
|
+
rowPaginationFeature: import("@tanstack/react-table").TableFeature;
|
|
889
|
+
rowSelectionFeature: import("@tanstack/react-table").TableFeature;
|
|
890
|
+
rowExpandingFeature: import("@tanstack/react-table").TableFeature;
|
|
891
|
+
rowPinningFeature: import("@tanstack/react-table").TableFeature;
|
|
892
|
+
cellSelectionFeature: import("@tanstack/react-table").TableFeature;
|
|
893
|
+
sortedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
894
|
+
filteredRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
895
|
+
paginatedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
896
|
+
expandedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
897
|
+
facetedRowModel: (table: import("@tanstack/react-table").Table<any, any>, columnId: string) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
898
|
+
facetedUniqueValues: (table: import("@tanstack/react-table").Table<import("@tanstack/react-table").TableFeatures, any>, columnId: string) => () => Map<any, number>;
|
|
899
|
+
sortFns: {
|
|
900
|
+
alphanumeric: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
901
|
+
alphanumericCaseSensitive: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
902
|
+
basic: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
903
|
+
datetime: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
904
|
+
text: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
905
|
+
textCaseSensitive: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
906
|
+
};
|
|
907
|
+
columnMeta: DataGridColumnMeta<any>;
|
|
908
|
+
}, TData, unknown>[]>;
|
|
909
|
+
}[];
|
|
910
|
+
declare function renderDataGridTableHeadCellContent<TData extends object>(header: Header<DataGridFeatures, TData, unknown>): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
|
|
911
|
+
declare function getDataGridHeadCellResizeHeader<TData extends object>(header: Header<DataGridFeatures, TData, unknown>, coveredHeaders?: Header<DataGridFeatures, TData, unknown>[]): Header<{
|
|
912
|
+
columnVisibilityFeature: import("@tanstack/react-table").TableFeature;
|
|
913
|
+
columnOrderingFeature: import("@tanstack/react-table").TableFeature;
|
|
914
|
+
columnPinningFeature: import("@tanstack/react-table").TableFeature;
|
|
915
|
+
columnSizingFeature: import("@tanstack/react-table").TableFeature;
|
|
916
|
+
columnResizingFeature: import("@tanstack/react-table").TableFeature;
|
|
917
|
+
columnFilteringFeature: import("@tanstack/react-table").TableFeature;
|
|
918
|
+
columnFacetingFeature: import("@tanstack/react-table").TableFeature;
|
|
919
|
+
globalFilteringFeature: import("@tanstack/react-table").TableFeature;
|
|
920
|
+
rowSortingFeature: import("@tanstack/react-table").TableFeature;
|
|
921
|
+
rowPaginationFeature: import("@tanstack/react-table").TableFeature;
|
|
922
|
+
rowSelectionFeature: import("@tanstack/react-table").TableFeature;
|
|
923
|
+
rowExpandingFeature: import("@tanstack/react-table").TableFeature;
|
|
924
|
+
rowPinningFeature: import("@tanstack/react-table").TableFeature;
|
|
925
|
+
cellSelectionFeature: import("@tanstack/react-table").TableFeature;
|
|
926
|
+
sortedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
927
|
+
filteredRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
928
|
+
paginatedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
929
|
+
expandedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
930
|
+
facetedRowModel: (table: import("@tanstack/react-table").Table<any, any>, columnId: string) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
931
|
+
facetedUniqueValues: (table: import("@tanstack/react-table").Table<import("@tanstack/react-table").TableFeatures, any>, columnId: string) => () => Map<any, number>;
|
|
932
|
+
sortFns: {
|
|
933
|
+
alphanumeric: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
934
|
+
alphanumericCaseSensitive: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
935
|
+
basic: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
936
|
+
datetime: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
937
|
+
text: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
938
|
+
textCaseSensitive: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
939
|
+
};
|
|
940
|
+
columnMeta: DataGridColumnMeta<any>;
|
|
941
|
+
}, TData, unknown>;
|
|
942
|
+
declare function getDataGridHeadCellSizeVar<TData extends object>(header: Header<DataGridFeatures, TData, unknown>, coveredHeaders?: Header<DataGridFeatures, TData, unknown>[]): string;
|
|
943
|
+
declare function hasDataGridTableRightPinnedColumns<TData extends object>(table: DataGridTableInstance<TData>): boolean;
|
|
944
|
+
declare function DataGridTableFillHeadCell({ rowSpan }?: {
|
|
945
|
+
/** Multi-level headers render one fill cell spanning every head row. */
|
|
946
|
+
rowSpan?: number;
|
|
947
|
+
}): import("react").JSX.Element | null;
|
|
948
|
+
declare function DataGridTableFillBodyCell(): import("react").JSX.Element | null;
|
|
949
|
+
/**
|
|
950
|
+
* The quick-create affordance, rendered as the body's last row when
|
|
951
|
+
* `onRowCreate` is set: one full-width ghost button, the Notion/Airtable
|
|
952
|
+
* "+ New" idiom. What the click creates stays consumer-owned.
|
|
953
|
+
*/
|
|
954
|
+
declare function DataGridTableAddRow(): import("react").JSX.Element | null;
|
|
955
|
+
declare function DataGridTableBase({ children }: {
|
|
956
|
+
children: ReactNode;
|
|
957
|
+
}): import("react").JSX.Element;
|
|
958
|
+
declare function DataGridTableViewport({ children, className, viewportRef, style }: {
|
|
959
|
+
children: ReactNode;
|
|
960
|
+
className?: string;
|
|
961
|
+
viewportRef?: Ref<HTMLDivElement>;
|
|
962
|
+
style?: CSSProperties;
|
|
963
|
+
}): import("react").JSX.Element;
|
|
964
|
+
declare function DataGridTableHead({ children }: {
|
|
965
|
+
children: ReactNode;
|
|
966
|
+
}): import("react").JSX.Element;
|
|
967
|
+
declare function DataGridTableHeadRow({ children, rowId }: {
|
|
968
|
+
children: ReactNode;
|
|
969
|
+
rowId: string;
|
|
970
|
+
}): import("react").JSX.Element;
|
|
971
|
+
declare function DataGridTableHeadRowCell<TData extends object>({ children, header, coveredHeaders, dndRef, dndStyle }: {
|
|
972
|
+
children: ReactNode;
|
|
973
|
+
header: Header<DataGridFeatures, TData, unknown>;
|
|
974
|
+
/** Headers this cell spans through meta.headerColSpan; they render none. */
|
|
975
|
+
coveredHeaders?: Header<DataGridFeatures, TData, unknown>[];
|
|
976
|
+
dndRef?: React.Ref<HTMLTableCellElement>;
|
|
977
|
+
dndStyle?: CSSProperties;
|
|
978
|
+
}): import("react").JSX.Element;
|
|
979
|
+
declare function DataGridTableHeadRowCellResize<TData extends object>({ header }: {
|
|
980
|
+
header: Header<DataGridFeatures, TData, unknown>;
|
|
981
|
+
}): import("react").JSX.Element;
|
|
982
|
+
declare function DataGridTableRowSpacer(): import("react").JSX.Element;
|
|
983
|
+
declare function DataGridTableBody({ children }: {
|
|
984
|
+
children: ReactNode;
|
|
985
|
+
}): import("react").JSX.Element;
|
|
986
|
+
declare function DataGridTableFoot({ children }: {
|
|
987
|
+
children: ReactNode;
|
|
988
|
+
}): import("react").JSX.Element;
|
|
989
|
+
declare function DataGridTableFootRow({ children }: {
|
|
990
|
+
children: ReactNode;
|
|
991
|
+
}): import("react").JSX.Element;
|
|
992
|
+
declare function DataGridTableFootRowCell({ children, colSpan, className }: {
|
|
993
|
+
children?: ReactNode;
|
|
994
|
+
colSpan?: number;
|
|
995
|
+
className?: string;
|
|
996
|
+
}): import("react").JSX.Element;
|
|
997
|
+
declare function DataGridTableBodyRowSkeleton({ children }: {
|
|
998
|
+
children: ReactNode;
|
|
999
|
+
}): import("react").JSX.Element;
|
|
1000
|
+
declare function DataGridTableBodyRowSkeletonCell<TData extends object>({ children, column }: {
|
|
1001
|
+
children: ReactNode;
|
|
1002
|
+
column: Column<DataGridFeatures, TData, unknown>;
|
|
1003
|
+
}): import("react").JSX.Element;
|
|
1004
|
+
declare function DataGridTableBodyRow<TData extends object>({ children, row, pinnedBoundary, rowRef, dndRef, dndStyle, dndDragging, dataIndex }: {
|
|
1005
|
+
children: ReactNode;
|
|
1006
|
+
row: Row<DataGridFeatures, TData>;
|
|
1007
|
+
pinnedBoundary?: DataGridTablePinnedBoundary;
|
|
1008
|
+
rowRef?: React.Ref<HTMLTableRowElement>;
|
|
1009
|
+
dndRef?: React.Ref<HTMLTableRowElement>;
|
|
1010
|
+
dndStyle?: CSSProperties;
|
|
1011
|
+
dndDragging?: boolean;
|
|
1012
|
+
dataIndex?: number;
|
|
1013
|
+
}): import("react").JSX.Element;
|
|
1014
|
+
declare function DataGridTableBodyRowExpandded<TData extends object>({ row }: {
|
|
1015
|
+
row: Row<DataGridFeatures, TData>;
|
|
1016
|
+
}): import("react").JSX.Element | null;
|
|
1017
|
+
declare function DataGridTableBodyRowCell<TData extends object>({ children, cell, dndRef, dndStyle, columnIndex }: {
|
|
1018
|
+
children: ReactNode;
|
|
1019
|
+
cell: Cell<DataGridFeatures, TData, unknown>;
|
|
1020
|
+
dndRef?: React.Ref<HTMLTableCellElement>;
|
|
1021
|
+
dndStyle?: CSSProperties;
|
|
1022
|
+
/** Center-column index under column virtualization; data-column-index. */
|
|
1023
|
+
columnIndex?: number;
|
|
1024
|
+
}): import("react").JSX.Element;
|
|
1025
|
+
declare function DataGridTableRenderedRow<TData extends object>({ row, pinnedBoundary, rowRef, rowIndex, centerWindow }: {
|
|
1026
|
+
row: Row<DataGridFeatures, TData>;
|
|
1027
|
+
pinnedBoundary?: DataGridTablePinnedBoundary;
|
|
1028
|
+
rowRef?: React.Ref<HTMLTableRowElement>;
|
|
1029
|
+
/** Virtualized list index, rendered as data-index for measureElement. */
|
|
1030
|
+
rowIndex?: number;
|
|
1031
|
+
/**
|
|
1032
|
+
* Column-virtualization window over the CENTER cells: only the inclusive
|
|
1033
|
+
* [start, end] slice renders, and each flank collapses into one colSpan
|
|
1034
|
+
* spacer. The spacers carry no width of their own - the colgroup stays
|
|
1035
|
+
* complete, so under table-fixed the browser sizes them from the col
|
|
1036
|
+
* elements they span and the layout cannot drift.
|
|
1037
|
+
*/
|
|
1038
|
+
centerWindow?: {
|
|
1039
|
+
start: number;
|
|
1040
|
+
end: number;
|
|
1041
|
+
};
|
|
1042
|
+
}): import("react").JSX.Element;
|
|
1043
|
+
declare function DataGridTableEmpty(): import("react").JSX.Element;
|
|
1044
|
+
declare function DataGridTableLoader(): import("react").JSX.Element;
|
|
1045
|
+
declare function DataGridTableRowPin<TData extends object>({ row }: {
|
|
1046
|
+
row: Row<DataGridFeatures, TData>;
|
|
1047
|
+
}): import("react").JSX.Element;
|
|
1048
|
+
/**
|
|
1049
|
+
* Selection cell.
|
|
1050
|
+
*
|
|
1051
|
+
* Selection is read through `row.getIsSelected()`, a builder call on a row
|
|
1052
|
+
* that keeps its identity across renders. A consumer's compiled component
|
|
1053
|
+
* around this checkbox caches it against that row and never renders it
|
|
1054
|
+
* again, which shows up as checkboxes that do not respond to clicks.
|
|
1055
|
+
* Subscribing to the row-selection atom makes selection a dependency of its
|
|
1056
|
+
* own. Note the standalone `Subscribe` rather than `table.Subscribe`: inside a
|
|
1057
|
+
* cell template the `table` handed to the column def is the core `Table`, which
|
|
1058
|
+
* has no `Subscribe` attached.
|
|
1059
|
+
*/
|
|
1060
|
+
declare function DataGridTableRowSelect<TData extends object>({ row }: {
|
|
1061
|
+
row: Row<DataGridFeatures, TData>;
|
|
1062
|
+
}): import("react").JSX.Element;
|
|
1063
|
+
declare function DataGridTableRowSelectAll(): import("react").JSX.Element;
|
|
1064
|
+
declare function DataGridTableRowExpand<TData extends object>({ row, indent, className, children }: {
|
|
1065
|
+
row: Row<DataGridFeatures, TData>;
|
|
1066
|
+
/** Horizontal offset in px applied per tree depth level. */
|
|
1067
|
+
indent?: number;
|
|
1068
|
+
className?: string;
|
|
1069
|
+
/** Custom toggle icon; replaces the default chevron. */
|
|
1070
|
+
children?: ReactNode;
|
|
1071
|
+
}): import("react").JSX.Element;
|
|
1072
|
+
declare function DataGridTableHeader<TData extends object>(): import("react").JSX.Element;
|
|
1073
|
+
declare function DataGridTable<TData extends object>({ footerContent, renderHeader }: {
|
|
1074
|
+
footerContent?: ReactNode;
|
|
1075
|
+
renderHeader?: boolean;
|
|
1076
|
+
}): import("react").JSX.Element;
|
|
1077
|
+
declare function DataGridTableDnd<TData extends object>({ handleDragEnd, footerContent, accessibility }: {
|
|
1078
|
+
handleDragEnd: (event: DragEndEvent) => void;
|
|
1079
|
+
footerContent?: ReactNode;
|
|
1080
|
+
/**
|
|
1081
|
+
* Forwarded to dnd-kit's `DndContext`: its screen-reader instructions and
|
|
1082
|
+
* live-region announcements, which default to dnd-kit's English strings.
|
|
1083
|
+
*/
|
|
1084
|
+
accessibility?: DndContextProps["accessibility"];
|
|
1085
|
+
}): import("react").JSX.Element;
|
|
1086
|
+
/**
|
|
1087
|
+
* Tree metadata attached to every sortable row, readable from
|
|
1088
|
+
* `active.data.current` / `over.data.current` in any drag event. Cross-parent
|
|
1089
|
+
* drops can be resolved from it without re-deriving the shape of the table.
|
|
1090
|
+
*/
|
|
1091
|
+
type DataGridTableDndRowData = {
|
|
1092
|
+
type: "data-grid-row";
|
|
1093
|
+
/** Tree depth, 0 for root rows. */
|
|
1094
|
+
depth: number;
|
|
1095
|
+
/** Index within the parent's children, or within the root rows. */
|
|
1096
|
+
index: number;
|
|
1097
|
+
/** Parent row id, or null for root rows. */
|
|
1098
|
+
parentId: string | null;
|
|
1099
|
+
};
|
|
1100
|
+
/**
|
|
1101
|
+
* Per-row render slot for drop indicators and depth guides. The returned node
|
|
1102
|
+
* is positioned over the row, so it never adds a column, shifts striping, or
|
|
1103
|
+
* gets clipped by a truncating resizable cell.
|
|
1104
|
+
*/
|
|
1105
|
+
type DataGridTableDndRowDecoration<TData extends object> = (context: {
|
|
1106
|
+
row: Row<DataGridFeatures, TData>;
|
|
1107
|
+
isDragging: boolean;
|
|
1108
|
+
isOver: boolean;
|
|
1109
|
+
}) => ReactNode;
|
|
1110
|
+
declare function DataGridTableDndRowHandle({ className, disabled, disabledLabel }: {
|
|
1111
|
+
className?: string;
|
|
1112
|
+
/**
|
|
1113
|
+
* Renders the grip inert instead of withdrawing it. A grid that reorders on
|
|
1114
|
+
* one truth (manual order) and sorts on another cannot honour both at once,
|
|
1115
|
+
* but dropping the handle entirely collapses the gutter and reads as broken
|
|
1116
|
+
* rather than as unavailable. Keep the column's shape, mute the control.
|
|
1117
|
+
*/
|
|
1118
|
+
disabled?: boolean;
|
|
1119
|
+
/** Announced and shown on hover in place of the drag affordance. */
|
|
1120
|
+
disabledLabel?: string;
|
|
1121
|
+
}): import("react").JSX.Element;
|
|
1122
|
+
declare function DataGridTableDndRows<TData extends object>({ handleDragEnd, dataIds, footerContent, collisionDetection, modifiers, sortingStrategy, renderRowDecoration, dropIndicator, onDragStart, onDragMove, onDragOver, onDragCancel, accessibility }: {
|
|
1123
|
+
handleDragEnd: (event: DragEndEvent) => void;
|
|
1124
|
+
dataIds: UniqueIdentifier[];
|
|
1125
|
+
footerContent?: ReactNode;
|
|
1126
|
+
/** Overrides the default `closestCenter` strategy. */
|
|
1127
|
+
collisionDetection?: CollisionDetection;
|
|
1128
|
+
/**
|
|
1129
|
+
* Replaces the default axis restriction, e.g. drop `restrictToVerticalAxis`
|
|
1130
|
+
* to allow the horizontal gesture that tree re-parenting relies on. The
|
|
1131
|
+
* table container clamp is always applied after these, so a dragged row
|
|
1132
|
+
* cannot leave the grid.
|
|
1133
|
+
*/
|
|
1134
|
+
modifiers?: Modifier[];
|
|
1135
|
+
/**
|
|
1136
|
+
* Replaces the default `verticalListSortingStrategy`. Return null from a
|
|
1137
|
+
* strategy to leave every row exactly where it is. A tree needs that: its drop
|
|
1138
|
+
* is either INTO the hovered row or BETWEEN two rows, and which one it is
|
|
1139
|
+
* flips as the pointer crosses a single row, so a gap that opens for one and
|
|
1140
|
+
* shuts for the other flickers the whole surface. Such a caller draws its own
|
|
1141
|
+
* insertion line instead, and pairs this with a modifier that holds the
|
|
1142
|
+
* carried row still, since a gap nothing moves into is just a hole.
|
|
1143
|
+
*/
|
|
1144
|
+
sortingStrategy?: SortingStrategy;
|
|
1145
|
+
/** Per-row slot for drop indicators and depth guides. */
|
|
1146
|
+
renderRowDecoration?: DataGridTableDndRowDecoration<TData>;
|
|
1147
|
+
/**
|
|
1148
|
+
* Draws a line on the seam the carried row would land on. On by default;
|
|
1149
|
+
* pass `false` when `renderRowDecoration` paints its own insertion affordance
|
|
1150
|
+
* and the two would compete.
|
|
1151
|
+
*/
|
|
1152
|
+
dropIndicator?: boolean;
|
|
1153
|
+
onDragStart?: (event: DragStartEvent) => void;
|
|
1154
|
+
onDragMove?: (event: DragMoveEvent) => void;
|
|
1155
|
+
onDragOver?: (event: DragOverEvent) => void;
|
|
1156
|
+
onDragCancel?: (event: DragCancelEvent) => void;
|
|
1157
|
+
/**
|
|
1158
|
+
* Forwarded to dnd-kit's `DndContext`: its screen-reader instructions and
|
|
1159
|
+
* live-region announcements, which default to dnd-kit's English strings.
|
|
1160
|
+
*/
|
|
1161
|
+
accessibility?: DndContextProps["accessibility"];
|
|
1162
|
+
}): import("react").JSX.Element;
|
|
1163
|
+
type DataGridTableVirtualScrollElements = {
|
|
1164
|
+
containerElement: HTMLDivElement | null;
|
|
1165
|
+
scrollElement: HTMLElement | null;
|
|
1166
|
+
};
|
|
1167
|
+
type DataGridTableVirtualScrollAlignment = "auto" | "center" | "start" | "end";
|
|
1168
|
+
interface DataGridTableColumnVirtualizerOptions {
|
|
1169
|
+
/** Off unless explicitly true; a column window is opt-in. */
|
|
1170
|
+
enabled?: boolean;
|
|
1171
|
+
overscan?: number;
|
|
1172
|
+
}
|
|
1173
|
+
type DataGridTableVirtualizerOptions<TData extends object> = Omit<VirtualizerOptions<HTMLElement, HTMLTableRowElement>, "count" | "estimateSize" | "getItemKey" | "getScrollElement"> & {
|
|
1174
|
+
estimateSize?: (index: number, row: Row<DataGridFeatures, TData>) => number;
|
|
1175
|
+
getItemKey?: (index: number, row: Row<DataGridFeatures, TData>) => string | number;
|
|
1176
|
+
getScrollElement?: (elements: DataGridTableVirtualScrollElements) => HTMLElement | null;
|
|
1177
|
+
};
|
|
1178
|
+
interface DataGridTableVirtualProps<TData extends object> {
|
|
1179
|
+
height?: number | string;
|
|
1180
|
+
estimateSize?: number;
|
|
1181
|
+
overscan?: number;
|
|
1182
|
+
/** Scroll animation used when revealing a controlled target row. */
|
|
1183
|
+
scrollBehavior?: ScrollBehavior;
|
|
1184
|
+
/** Alignment used when revealing a controlled target row. Defaults to auto. */
|
|
1185
|
+
scrollToRowAlign?: DataGridTableVirtualScrollAlignment;
|
|
1186
|
+
/** Index within the center (non-pinned) row section to reveal. */
|
|
1187
|
+
scrollToRowIndex?: number;
|
|
1188
|
+
/**
|
|
1189
|
+
* Opt-in horizontal virtualization of the CENTER columns. Activates only
|
|
1190
|
+
* under a fixed table layout with a single ungrouped header row; pinned
|
|
1191
|
+
* columns stay mounted, and anything else falls back to full-column
|
|
1192
|
+
* rendering. `scrollBehavior` is shared with controlled row scrolling.
|
|
1193
|
+
*/
|
|
1194
|
+
columnVirtualizerOptions?: DataGridTableColumnVirtualizerOptions;
|
|
1195
|
+
/** Alignment used when revealing a controlled target column. */
|
|
1196
|
+
scrollToColumnAlign?: DataGridTableVirtualScrollAlignment;
|
|
1197
|
+
/** Index within the center (non-pinned) visible leaf columns to reveal. */
|
|
1198
|
+
scrollToColumnIndex?: number;
|
|
1199
|
+
footerContent?: ReactNode;
|
|
1200
|
+
renderHeader?: boolean;
|
|
1201
|
+
onFetchMore?: () => void;
|
|
1202
|
+
isFetchingMore?: boolean;
|
|
1203
|
+
hasMore?: boolean;
|
|
1204
|
+
fetchMoreOffset?: number;
|
|
1205
|
+
virtualizerOptions?: DataGridTableVirtualizerOptions<TData>;
|
|
1206
|
+
}
|
|
1207
|
+
declare function DataGridTableVirtual<TData extends object>({ height, estimateSize, overscan, scrollBehavior, scrollToRowAlign, scrollToRowIndex, columnVirtualizerOptions, scrollToColumnAlign, scrollToColumnIndex, footerContent, renderHeader, onFetchMore, isFetchingMore, hasMore, fetchMoreOffset, virtualizerOptions }: DataGridTableVirtualProps<TData>): import("react").JSX.Element;
|
|
1208
|
+
interface Transaction {
|
|
1209
|
+
id: string;
|
|
1210
|
+
name: string;
|
|
1211
|
+
network: string;
|
|
1212
|
+
reference: string;
|
|
1213
|
+
date: string;
|
|
1214
|
+
amount: number;
|
|
1215
|
+
}
|
|
1216
|
+
export declare const TRANSACTIONS: Transaction[];
|
|
1217
|
+
/** A Mobile Money statement: sortable columns, cell borders, pagination (5 per page). */
|
|
1218
|
+
export declare function TransactionsExample({ data }: {
|
|
1219
|
+
data?: Transaction[];
|
|
1220
|
+
}): import("react").JSX.Element;
|
|
1221
|
+
export { DataGrid, DataGridCellSelection, type DataGridCellSelectionApi, DataGridColumnFilter, type DataGridColumnFilterProps, DataGridColumnHeader, type DataGridColumnHeaderProps, DataGridColumnVisibility, DataGridContainer, type DataGridFocusCellOptions, DataGridPagination, type DataGridPaginationProps, type DataGridPasteTarget, DataGridProvider, DataGridScrollArea, type DataGridScrollAreaOrientation, type DataGridScrollAreaProps, DataGridSelectionBar, DataGridTable, DataGridTableAddRow, DataGridTableBase, DataGridTableBody, DataGridTableBodyRow, DataGridTableBodyRowCell, DataGridTableBodyRowExpandded, DataGridTableBodyRowSkeleton, DataGridTableBodyRowSkeletonCell, DataGridTableDnd, type DataGridTableDndRowData, type DataGridTableDndRowDecoration, DataGridTableDndRowHandle, DataGridTableDndRows, DataGridTableEmpty, DataGridTableFillBodyCell, DataGridTableFillHeadCell, DataGridTableFoot, DataGridTableFootRow, DataGridTableFootRowCell, DataGridTableHead, DataGridTableHeadRow, DataGridTableHeadRowCell, DataGridTableHeadRowCellResize, DataGridTableHeader, DataGridTableLoader, type DataGridTablePinnedBoundary, DataGridTableRenderedRow, DataGridTableRowExpand, DataGridTableRowPin, DataGridTableRowSelect, DataGridTableRowSelectAll, DataGridTableRowSpacer, DataGridTableViewport, DataGridTableVirtual, type DataGridTableVirtualProps, type DataGridTableVirtualScrollAlignment, type DataGridTableVirtualScrollElements, type DataGridTableVirtualizerOptions, type Transaction, buildDataGridClearDetails, buildDataGridPasteDetails, getDataGridActiveRegionGrid, getDataGridHeadCellResizeHeader, getDataGridHeadCellSizeVar, getDataGridScrollAreaViewport, getDataGridTableMergedHeaderGroups, getDataGridTableResolvedRows, getDataGridTableRowSections, getDataGridTreeIndentStyle, getDataGridVisibleSelectedCellCount, getPinningStyles, hasDataGridTableRightPinnedColumns, invertDataGridCellsChange, parseDataGridClipboardText, renderDataGridTableHeadCellContent, serializeDataGridClipboardText, tileDataGridClipboardBlock, useDataGrid, useDataGridAtom };
|