@zvndev/yable-react 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +145 -0
- package/dist/index.cjs +4947 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +957 -0
- package/dist/index.d.ts +957 -0
- package/dist/index.js +4835 -0
- package/dist/index.js.map +1 -0
- package/package.json +72 -0
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,957 @@
|
|
|
1
|
+
import { Table as Table$1, RowData, Cell, Header, Row, TableOptions, ColumnDef, SortDirection, CellContext, ClipboardOptions, CellFlashInfo } from '@zvndev/yable-core';
|
|
2
|
+
export { AccessorFnColumnDef, AccessorKeyColumnDef, AggregationFn, Cell, CellStatus as CellCommitStatus, CellContext, CellFlashEvent, CellPatch, ClipboardOptions, Column, ColumnDef, ColumnDefBase, ColumnFiltersState, ColumnMeta, ColumnOrderState, ColumnPinningState, ColumnSizingInfoState, ColumnSizingState, CommitError, CommitErrorCells, CommitRecord, CommitResult, CommitsSlice, DisplayColumnDef, EditingState, ExpandedState, FillHandleState, FilterFn, FormulaState, GroupColumnDef, Header, HeaderContext, HeaderGroup, KeyboardNavigationAction, KeyboardNavigationCell, KeyboardNavigationDirection, KeyboardNavigationState, OnChangeFn, OnCommitFn, PaginationState, PartialLocale, PivotConfig, PivotState, Row, RowData, RowDragEndEvent, RowDragEvent, RowDragState, RowEditCommitEvent, RowEditEvent, RowPinningState, RowReorderEvent, RowSelectionState, SortDirection, SortingFn, SortingState, Table as TableInstance, TableOptions, TableOptionsResolved, TableState, UndoAction, UndoRedoState, Updater, VisibilityState, YableLocale, aggregationFns, createColumnHelper, createLocale, en, filterFns, functionalUpdate, getDefaultLocale, resetLocale, setDefaultLocale, sortingFns } from '@zvndev/yable-core';
|
|
3
|
+
import * as React$1 from 'react';
|
|
4
|
+
import React__default, { HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react';
|
|
5
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
6
|
+
import { RowDragState } from '@zvndev/yable-core/features/rowDragging';
|
|
7
|
+
|
|
8
|
+
interface TableProps<TData extends RowData> extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
|
|
9
|
+
table: Table$1<TData>;
|
|
10
|
+
/** Enable sticky header */
|
|
11
|
+
stickyHeader?: boolean;
|
|
12
|
+
/** Enable striped rows */
|
|
13
|
+
striped?: boolean;
|
|
14
|
+
/** Enable bordered cells */
|
|
15
|
+
bordered?: boolean;
|
|
16
|
+
/** Enable compact spacing */
|
|
17
|
+
compact?: boolean;
|
|
18
|
+
/** Theme variant */
|
|
19
|
+
theme?: string;
|
|
20
|
+
/** Whether rows are clickable (adds cursor + hover) */
|
|
21
|
+
clickableRows?: boolean;
|
|
22
|
+
/** Show footer */
|
|
23
|
+
footer?: boolean;
|
|
24
|
+
/** Loading state */
|
|
25
|
+
loading?: boolean;
|
|
26
|
+
/** Custom loading component */
|
|
27
|
+
loadingComponent?: React.ReactNode;
|
|
28
|
+
/** Loading text shown below the spinner */
|
|
29
|
+
loadingText?: string;
|
|
30
|
+
/** Empty state message */
|
|
31
|
+
emptyMessage?: string;
|
|
32
|
+
/** Custom empty state render */
|
|
33
|
+
renderEmpty?: () => React.ReactNode;
|
|
34
|
+
/** Custom loading render */
|
|
35
|
+
renderLoading?: () => React.ReactNode;
|
|
36
|
+
/** Custom empty component */
|
|
37
|
+
emptyComponent?: React.ReactNode;
|
|
38
|
+
/** Custom empty icon */
|
|
39
|
+
emptyIcon?: React.ReactNode;
|
|
40
|
+
/** Secondary detail text for empty state */
|
|
41
|
+
emptyDetail?: string;
|
|
42
|
+
/** Children rendered inside the table container (e.g. Pagination) */
|
|
43
|
+
children?: React.ReactNode;
|
|
44
|
+
/** Text direction for RTL support */
|
|
45
|
+
direction?: 'ltr' | 'rtl';
|
|
46
|
+
/** Enable status bar */
|
|
47
|
+
statusBar?: boolean;
|
|
48
|
+
/** Status bar panels configuration */
|
|
49
|
+
statusBarPanels?: StatusBarPanelConfig[];
|
|
50
|
+
/** Enable sidebar */
|
|
51
|
+
sidebar?: boolean;
|
|
52
|
+
/** Sidebar panels */
|
|
53
|
+
sidebarPanels?: ('columns' | 'filters')[];
|
|
54
|
+
/** Default sidebar panel */
|
|
55
|
+
defaultSidebarPanel?: 'columns' | 'filters';
|
|
56
|
+
}
|
|
57
|
+
/** Status bar panel configuration */
|
|
58
|
+
interface StatusBarPanelConfig {
|
|
59
|
+
id: string;
|
|
60
|
+
component?: React.ComponentType<StatusBarPanelProps>;
|
|
61
|
+
align?: 'left' | 'center' | 'right';
|
|
62
|
+
label?: string;
|
|
63
|
+
}
|
|
64
|
+
/** Props passed to status bar panel components */
|
|
65
|
+
interface StatusBarPanelProps {
|
|
66
|
+
table: Table$1<any>;
|
|
67
|
+
}
|
|
68
|
+
interface TableRowProps<TData extends RowData> extends HTMLAttributes<HTMLTableRowElement> {
|
|
69
|
+
row: Row<TData>;
|
|
70
|
+
}
|
|
71
|
+
interface TableCellProps$1<TData extends RowData, TValue = unknown> extends TdHTMLAttributes<HTMLTableCellElement> {
|
|
72
|
+
cell: Cell<TData, TValue>;
|
|
73
|
+
}
|
|
74
|
+
interface TableHeaderCellProps<TData extends RowData, TValue = unknown> extends ThHTMLAttributes<HTMLTableCellElement> {
|
|
75
|
+
header: Header<TData, TValue>;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
declare function useTable<TData extends RowData>(options: TableOptions<TData>): Table$1<TData>;
|
|
79
|
+
|
|
80
|
+
interface VirtualRow {
|
|
81
|
+
index: number;
|
|
82
|
+
start: number;
|
|
83
|
+
size: number;
|
|
84
|
+
}
|
|
85
|
+
interface UseVirtualizationOptions {
|
|
86
|
+
containerRef: React.RefObject<HTMLElement | null>;
|
|
87
|
+
totalRows: number;
|
|
88
|
+
rowHeight?: number | ((index: number) => number);
|
|
89
|
+
overscan?: number;
|
|
90
|
+
estimateRowHeight?: number;
|
|
91
|
+
/** Pre-computed row heights from Pretext measurement (Float64Array indexed by row) */
|
|
92
|
+
pretextHeights?: Float64Array | null;
|
|
93
|
+
/** Pre-computed prefix sums for O(log n) scroll lookups */
|
|
94
|
+
pretextPrefixSums?: Float64Array | null;
|
|
95
|
+
}
|
|
96
|
+
interface UseVirtualizationResult {
|
|
97
|
+
virtualRows: VirtualRow[];
|
|
98
|
+
totalHeight: number;
|
|
99
|
+
startIndex: number;
|
|
100
|
+
endIndex: number;
|
|
101
|
+
scrollTo: (index: number) => void;
|
|
102
|
+
}
|
|
103
|
+
/**
|
|
104
|
+
* Computes which rows are visible in a scrollable container and returns
|
|
105
|
+
* positioning data so only those rows (plus an overscan buffer) are rendered.
|
|
106
|
+
*
|
|
107
|
+
* Supports both fixed and variable row heights.
|
|
108
|
+
*/
|
|
109
|
+
declare function useVirtualization({ containerRef, totalRows, rowHeight, overscan, estimateRowHeight: _estimateRowHeight, pretextHeights, pretextPrefixSums, }: UseVirtualizationOptions): UseVirtualizationResult;
|
|
110
|
+
|
|
111
|
+
interface CellMeasurement {
|
|
112
|
+
/** Column ID */
|
|
113
|
+
columnId: string;
|
|
114
|
+
/** Column width in px */
|
|
115
|
+
width: number;
|
|
116
|
+
/** CSS font string for this column, e.g. "400 13px Inter" */
|
|
117
|
+
font: string;
|
|
118
|
+
/** Line height in px */
|
|
119
|
+
lineHeight: number;
|
|
120
|
+
/** Vertical padding in px (top + bottom) */
|
|
121
|
+
padding?: number;
|
|
122
|
+
/**
|
|
123
|
+
* If true, this column never wraps text — Pretext skips text measurement
|
|
124
|
+
* for it and contributes a constant `lineHeight + padding` to every row.
|
|
125
|
+
* Use this for visual cells like progress bars and rating stars.
|
|
126
|
+
*/
|
|
127
|
+
fixedHeight?: boolean;
|
|
128
|
+
}
|
|
129
|
+
interface UsePretextMeasurementOptions {
|
|
130
|
+
/** The row data to measure */
|
|
131
|
+
data: any[];
|
|
132
|
+
/** Measurement config per column — only columns that need text measurement */
|
|
133
|
+
columns: CellMeasurement[];
|
|
134
|
+
/** Extract the text content for a given row and column */
|
|
135
|
+
getCellText: (row: any, columnId: string) => string;
|
|
136
|
+
/** Minimum row height in px */
|
|
137
|
+
minRowHeight?: number;
|
|
138
|
+
/** Whether measurement is enabled */
|
|
139
|
+
enabled?: boolean;
|
|
140
|
+
}
|
|
141
|
+
interface UsePretextMeasurementResult {
|
|
142
|
+
/** Map from row index → exact pixel height */
|
|
143
|
+
rowHeights: Float64Array | null;
|
|
144
|
+
/** Pre-computed cumulative offsets for binary search (prefix sums) */
|
|
145
|
+
prefixSums: Float64Array | null;
|
|
146
|
+
/** Total height of all rows in px */
|
|
147
|
+
totalHeight: number;
|
|
148
|
+
/** Whether pretext is loaded and heights are computed */
|
|
149
|
+
ready: boolean;
|
|
150
|
+
/** Time taken for prepare() phase in ms */
|
|
151
|
+
prepareTimeMs: number;
|
|
152
|
+
/** Time taken for layout() phase in ms */
|
|
153
|
+
layoutTimeMs: number;
|
|
154
|
+
}
|
|
155
|
+
/**
|
|
156
|
+
* Pre-computes exact pixel heights for every row using Pretext's
|
|
157
|
+
* DOM-free text measurement. Returns typed arrays for cache-friendly
|
|
158
|
+
* access by the virtualizer.
|
|
159
|
+
*
|
|
160
|
+
* layout() is pure arithmetic (~0.0003ms per cell) so column resizing
|
|
161
|
+
* re-computes all heights near-instantly.
|
|
162
|
+
*/
|
|
163
|
+
declare function usePretextMeasurement({ data, columns, getCellText, minRowHeight, enabled, }: UsePretextMeasurementOptions): UsePretextMeasurementResult;
|
|
164
|
+
|
|
165
|
+
/** Font measurement recipe for a cell type, used by Pretext integration */
|
|
166
|
+
interface CellMeasureRecipe {
|
|
167
|
+
/** CSS font string, e.g. "500 13px Inter" */
|
|
168
|
+
font: string;
|
|
169
|
+
/** Line height in px */
|
|
170
|
+
lineHeight: number;
|
|
171
|
+
/** Cell padding (top + bottom) in px */
|
|
172
|
+
padding: number;
|
|
173
|
+
/**
|
|
174
|
+
* If true, the cell renders at a fixed visual height regardless of text content
|
|
175
|
+
* (e.g. progress bar, rating stars). Pretext will return `lineHeight + padding`
|
|
176
|
+
* as the row contribution and skip text measurement entirely.
|
|
177
|
+
*/
|
|
178
|
+
fixedHeight?: boolean;
|
|
179
|
+
}
|
|
180
|
+
/** Base props shared by all display cell types */
|
|
181
|
+
interface CellTypeBaseProps {
|
|
182
|
+
/** Additional CSS class */
|
|
183
|
+
className?: string;
|
|
184
|
+
}
|
|
185
|
+
/** Badge / pill cell — categorical data like departments, tags */
|
|
186
|
+
interface CellBadgeProps extends CellTypeBaseProps {
|
|
187
|
+
/** Color variant — maps to theme tokens */
|
|
188
|
+
variant?: 'default' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
|
|
189
|
+
/** Visual style */
|
|
190
|
+
appearance?: 'soft' | 'solid' | 'outline';
|
|
191
|
+
}
|
|
192
|
+
/** Currency / money cell — formatted numbers with currency symbol */
|
|
193
|
+
interface CellCurrencyProps extends CellTypeBaseProps {
|
|
194
|
+
/** ISO 4217 currency code */
|
|
195
|
+
currency?: string;
|
|
196
|
+
/** Locale for formatting */
|
|
197
|
+
locale?: string;
|
|
198
|
+
/** Number of decimal places (default: 0 for integers, 2 for decimals) */
|
|
199
|
+
decimals?: number;
|
|
200
|
+
/** Show +/- coloring for positive/negative values */
|
|
201
|
+
colorize?: boolean;
|
|
202
|
+
}
|
|
203
|
+
/** Status indicator cell — dot + label for states */
|
|
204
|
+
interface CellStatusProps extends CellTypeBaseProps {
|
|
205
|
+
/** Map of value → color variant */
|
|
206
|
+
colorMap?: Record<string, 'success' | 'warning' | 'danger' | 'info' | 'default'>;
|
|
207
|
+
}
|
|
208
|
+
/** Numeric cell — right-aligned, tabular numbers */
|
|
209
|
+
interface CellNumericProps extends CellTypeBaseProps {
|
|
210
|
+
/** Locale for formatting */
|
|
211
|
+
locale?: string;
|
|
212
|
+
/** Unit suffix (e.g. "ms", "KB", "%") */
|
|
213
|
+
unit?: string;
|
|
214
|
+
/** Number of decimal places */
|
|
215
|
+
decimals?: number;
|
|
216
|
+
/** Show +/- coloring */
|
|
217
|
+
colorize?: boolean;
|
|
218
|
+
}
|
|
219
|
+
/** Rating cell — star or dot display */
|
|
220
|
+
interface CellRatingProps extends CellTypeBaseProps {
|
|
221
|
+
/** Maximum rating value (default: 5) */
|
|
222
|
+
max?: number;
|
|
223
|
+
/** Display character (default: "★") */
|
|
224
|
+
character?: string;
|
|
225
|
+
/** Empty character (default: "☆") */
|
|
226
|
+
emptyCharacter?: string;
|
|
227
|
+
}
|
|
228
|
+
/** Boolean cell — visual true/false indicator */
|
|
229
|
+
interface CellBooleanProps extends CellTypeBaseProps {
|
|
230
|
+
/** Label for true value */
|
|
231
|
+
trueLabel?: string;
|
|
232
|
+
/** Label for false value */
|
|
233
|
+
falseLabel?: string;
|
|
234
|
+
/** Display mode */
|
|
235
|
+
mode?: 'dot' | 'badge' | 'icon';
|
|
236
|
+
}
|
|
237
|
+
/** Progress cell — inline progress bar */
|
|
238
|
+
interface CellProgressProps extends CellTypeBaseProps {
|
|
239
|
+
/** Maximum value (default: 100) */
|
|
240
|
+
max?: number;
|
|
241
|
+
/** Color variant */
|
|
242
|
+
variant?: 'default' | 'accent' | 'success' | 'warning' | 'danger';
|
|
243
|
+
/** Show percentage label */
|
|
244
|
+
showLabel?: boolean;
|
|
245
|
+
}
|
|
246
|
+
/** Link cell — clickable URL or text */
|
|
247
|
+
interface CellLinkProps extends CellTypeBaseProps {
|
|
248
|
+
/** URL to link to (if not the cell value itself) */
|
|
249
|
+
href?: string | ((value: unknown) => string);
|
|
250
|
+
/** Open in new tab */
|
|
251
|
+
external?: boolean;
|
|
252
|
+
}
|
|
253
|
+
/** Date cell — formatted dates */
|
|
254
|
+
interface CellDateProps extends CellTypeBaseProps {
|
|
255
|
+
/** Intl.DateTimeFormat options or preset name */
|
|
256
|
+
format?: 'short' | 'medium' | 'long' | 'relative' | Intl.DateTimeFormatOptions;
|
|
257
|
+
/** Locale for formatting */
|
|
258
|
+
locale?: string;
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
interface AutoMeasurementsOptions<TData extends RowData> {
|
|
262
|
+
/** Columns to measure — usually the same array passed into `useTable`. */
|
|
263
|
+
columns: ColumnDef<TData, any>[];
|
|
264
|
+
/**
|
|
265
|
+
* Default recipe for columns that don't declare a `cellType` or
|
|
266
|
+
* `measureRecipe`. This is the theme's body text style.
|
|
267
|
+
*/
|
|
268
|
+
defaultRecipe: CellMeasureRecipe;
|
|
269
|
+
/**
|
|
270
|
+
* Override how a column's pixel width is determined. Defaults to
|
|
271
|
+
* `column.size ?? 150`. Provide this when you want auto-measurement to
|
|
272
|
+
* track live column resizing — e.g. `(col) => table.getColumn(col.id)?.getSize() ?? 150`.
|
|
273
|
+
*/
|
|
274
|
+
getColumnWidth?: (column: ColumnDef<TData, any>) => number;
|
|
275
|
+
/**
|
|
276
|
+
* Optional filter — return false to skip a column entirely (e.g. select
|
|
277
|
+
* checkboxes, action buttons). Defaults to skipping columns whose id
|
|
278
|
+
* starts with `_` or matches common non-data ids.
|
|
279
|
+
*/
|
|
280
|
+
shouldMeasureColumn?: (column: ColumnDef<TData, any>) => boolean;
|
|
281
|
+
}
|
|
282
|
+
/**
|
|
283
|
+
* Resolve the measure recipe for a single column, walking the precedence
|
|
284
|
+
* chain (per-column override → cellType built-in → default).
|
|
285
|
+
*/
|
|
286
|
+
declare function resolveMeasureRecipe<TData extends RowData>(column: ColumnDef<TData, any>, defaultRecipe: CellMeasureRecipe): CellMeasureRecipe;
|
|
287
|
+
/**
|
|
288
|
+
* Build a `CellMeasurement[]` from columns, suitable for handing to
|
|
289
|
+
* `usePretextMeasurement`. Pure derivation — no table instance required.
|
|
290
|
+
*/
|
|
291
|
+
declare function useAutoMeasurements<TData extends RowData>({ columns, defaultRecipe, getColumnWidth, shouldMeasureColumn, }: AutoMeasurementsOptions<TData>): CellMeasurement[];
|
|
292
|
+
|
|
293
|
+
interface UseTableRowHeightsOptions<TData extends RowData> {
|
|
294
|
+
/** Row data being measured. */
|
|
295
|
+
data: TData[];
|
|
296
|
+
/** Column definitions (the same array passed into `useTable`). */
|
|
297
|
+
columns: ColumnDef<TData, any>[];
|
|
298
|
+
/**
|
|
299
|
+
* Default text recipe for columns without an explicit `cellType` /
|
|
300
|
+
* `measureRecipe`. Should reflect the active theme's body text style.
|
|
301
|
+
*/
|
|
302
|
+
defaultRecipe?: CellMeasureRecipe;
|
|
303
|
+
/**
|
|
304
|
+
* Override how a column's pixel width is determined. Defaults to
|
|
305
|
+
* `column.size ?? 150`. Provide this when you want pretext to track
|
|
306
|
+
* live column resizing — e.g. `(c) => table.getColumn(c.id)?.getSize() ?? 150`.
|
|
307
|
+
*/
|
|
308
|
+
getColumnWidth?: (column: ColumnDef<TData, any>) => number;
|
|
309
|
+
/** Minimum row height in px (default: 36). */
|
|
310
|
+
minRowHeight?: number;
|
|
311
|
+
/** Disable measurement entirely (e.g. when virtualization is off). */
|
|
312
|
+
enabled?: boolean;
|
|
313
|
+
}
|
|
314
|
+
/** Sensible default that matches `@zvndev/yable-themes` `tokens.css`. */
|
|
315
|
+
declare const DEFAULT_TEXT_RECIPE: CellMeasureRecipe;
|
|
316
|
+
/**
|
|
317
|
+
* Compute exact pixel row heights for the entire dataset using Pretext,
|
|
318
|
+
* deriving per-column measurement specs from each column's declarative
|
|
319
|
+
* `cellType` (or explicit `measureRecipe` override). No font strings,
|
|
320
|
+
* line heights, or paddings to hand-write.
|
|
321
|
+
*
|
|
322
|
+
* Returns the same shape as `usePretextMeasurement` plus the resolved
|
|
323
|
+
* `measurements` array for debugging / inspection.
|
|
324
|
+
*/
|
|
325
|
+
declare function useTableRowHeights<TData extends RowData>({ data, columns, defaultRecipe, getColumnWidth, minRowHeight, enabled, }: UseTableRowHeightsOptions<TData>): UsePretextMeasurementResult & {
|
|
326
|
+
measurements: CellMeasurement[];
|
|
327
|
+
};
|
|
328
|
+
|
|
329
|
+
/**
|
|
330
|
+
* Look up the measure recipe for a built-in cell type. Returns `undefined`
|
|
331
|
+
* for unknown types so callers can fall back to a default text recipe.
|
|
332
|
+
*/
|
|
333
|
+
declare function getMeasureRecipeForCellType(cellType: string): CellMeasureRecipe | undefined;
|
|
334
|
+
/** Read-only access to the registered cell type ids — useful for tooling. */
|
|
335
|
+
declare function getRegisteredCellTypes(): readonly string[];
|
|
336
|
+
|
|
337
|
+
declare const TableProvider: React$1.Provider<Table$1<any> | null>;
|
|
338
|
+
declare function useTableContext<TData extends RowData>(): Table$1<TData>;
|
|
339
|
+
|
|
340
|
+
declare function Table<TData extends RowData>({ table, stickyHeader, striped, bordered, compact, theme, clickableRows, footer, loading, loadingComponent, loadingText, emptyMessage, emptyComponent, emptyIcon, emptyDetail, renderEmpty, renderLoading, children, className, direction, statusBar, statusBarPanels, sidebar, sidebarPanels, defaultSidebarPanel, ...rest }: TableProps<TData>): react_jsx_runtime.JSX.Element;
|
|
341
|
+
|
|
342
|
+
interface TableHeaderProps<TData extends RowData> {
|
|
343
|
+
table: Table$1<TData>;
|
|
344
|
+
}
|
|
345
|
+
declare function TableHeader<TData extends RowData>({ table, }: TableHeaderProps<TData>): react_jsx_runtime.JSX.Element;
|
|
346
|
+
|
|
347
|
+
interface TableBodyProps<TData extends RowData> {
|
|
348
|
+
table: Table$1<TData>;
|
|
349
|
+
clickableRows?: boolean;
|
|
350
|
+
}
|
|
351
|
+
declare function TableBody<TData extends RowData>({ table, clickableRows, }: TableBodyProps<TData>): react_jsx_runtime.JSX.Element;
|
|
352
|
+
|
|
353
|
+
interface TableCellProps<TData extends RowData> {
|
|
354
|
+
cell: Cell<TData, unknown>;
|
|
355
|
+
table: Table$1<TData>;
|
|
356
|
+
rowIndex: number;
|
|
357
|
+
columnIndex: number;
|
|
358
|
+
isFocused: boolean;
|
|
359
|
+
isTabStop: boolean;
|
|
360
|
+
}
|
|
361
|
+
declare function TableCell<TData extends RowData>({ cell, table, rowIndex, columnIndex, isFocused, isTabStop, }: TableCellProps<TData>): react_jsx_runtime.JSX.Element;
|
|
362
|
+
|
|
363
|
+
interface TableFooterProps<TData extends RowData> {
|
|
364
|
+
table: Table$1<TData>;
|
|
365
|
+
}
|
|
366
|
+
declare function TableFooter<TData extends RowData>({ table, }: TableFooterProps<TData>): react_jsx_runtime.JSX.Element | null;
|
|
367
|
+
|
|
368
|
+
interface PaginationProps<TData extends RowData> {
|
|
369
|
+
table: Table$1<TData>;
|
|
370
|
+
/** Show page size selector */
|
|
371
|
+
showPageSize?: boolean;
|
|
372
|
+
/** Available page sizes */
|
|
373
|
+
pageSizes?: number[];
|
|
374
|
+
/** Show row count info */
|
|
375
|
+
showInfo?: boolean;
|
|
376
|
+
/** Show first/last buttons */
|
|
377
|
+
showFirstLast?: boolean;
|
|
378
|
+
}
|
|
379
|
+
declare function Pagination<TData extends RowData>({ table, showPageSize, pageSizes, showInfo, showFirstLast, }: PaginationProps<TData>): react_jsx_runtime.JSX.Element;
|
|
380
|
+
|
|
381
|
+
interface GlobalFilterProps<TData extends RowData> {
|
|
382
|
+
table: Table$1<TData>;
|
|
383
|
+
/** Placeholder text */
|
|
384
|
+
placeholder?: string;
|
|
385
|
+
/** Debounce delay in ms (0 = no debounce) */
|
|
386
|
+
debounce?: number;
|
|
387
|
+
/** Custom class name */
|
|
388
|
+
className?: string;
|
|
389
|
+
}
|
|
390
|
+
declare function GlobalFilter<TData extends RowData>({ table, placeholder, debounce, className, }: GlobalFilterProps<TData>): react_jsx_runtime.JSX.Element;
|
|
391
|
+
|
|
392
|
+
interface SortIndicatorProps {
|
|
393
|
+
direction: SortDirection | false;
|
|
394
|
+
index?: number;
|
|
395
|
+
}
|
|
396
|
+
declare function SortIndicator({ direction, index }: SortIndicatorProps): react_jsx_runtime.JSX.Element;
|
|
397
|
+
|
|
398
|
+
interface ErrorBoundaryProps {
|
|
399
|
+
/** Callback fired when an error is caught */
|
|
400
|
+
onError?: (error: Error, errorInfo: React__default.ErrorInfo) => void;
|
|
401
|
+
/** When any value in this array changes, the boundary resets */
|
|
402
|
+
resetKeys?: unknown[];
|
|
403
|
+
/** Custom fallback to render when an error is caught */
|
|
404
|
+
fallback?: React__default.ReactNode;
|
|
405
|
+
children: React__default.ReactNode;
|
|
406
|
+
}
|
|
407
|
+
interface ErrorBoundaryState {
|
|
408
|
+
hasError: boolean;
|
|
409
|
+
error: Error | null;
|
|
410
|
+
}
|
|
411
|
+
/**
|
|
412
|
+
* Catches rendering errors in child components so one bad cell or row
|
|
413
|
+
* does not crash the entire table. Logs errors and provides a fallback UI.
|
|
414
|
+
*/
|
|
415
|
+
declare class ErrorBoundary extends React__default.Component<ErrorBoundaryProps, ErrorBoundaryState> {
|
|
416
|
+
constructor(props: ErrorBoundaryProps);
|
|
417
|
+
static getDerivedStateFromError(error: Error): ErrorBoundaryState;
|
|
418
|
+
componentDidCatch(error: Error, errorInfo: React__default.ErrorInfo): void;
|
|
419
|
+
componentDidUpdate(prevProps: ErrorBoundaryProps): void;
|
|
420
|
+
render(): React__default.ReactNode;
|
|
421
|
+
}
|
|
422
|
+
/**
|
|
423
|
+
* Lightweight boundary specifically for table cells.
|
|
424
|
+
* Renders inline so it does not break table layout.
|
|
425
|
+
*/
|
|
426
|
+
declare class CellErrorBoundary extends React__default.Component<{
|
|
427
|
+
onError?: (error: Error, errorInfo: React__default.ErrorInfo) => void;
|
|
428
|
+
resetKeys?: unknown[];
|
|
429
|
+
children: React__default.ReactNode;
|
|
430
|
+
}, ErrorBoundaryState> {
|
|
431
|
+
constructor(props: {
|
|
432
|
+
onError?: (error: Error, errorInfo: React__default.ErrorInfo) => void;
|
|
433
|
+
resetKeys?: unknown[];
|
|
434
|
+
children: React__default.ReactNode;
|
|
435
|
+
});
|
|
436
|
+
static getDerivedStateFromError(error: Error): ErrorBoundaryState;
|
|
437
|
+
componentDidCatch(error: Error, errorInfo: React__default.ErrorInfo): void;
|
|
438
|
+
componentDidUpdate(prevProps: {
|
|
439
|
+
resetKeys?: unknown[];
|
|
440
|
+
}): void;
|
|
441
|
+
render(): React__default.ReactNode;
|
|
442
|
+
}
|
|
443
|
+
|
|
444
|
+
interface CellInputProps<TData extends RowData, TValue> {
|
|
445
|
+
context: CellContext<TData, TValue>;
|
|
446
|
+
type?: 'text' | 'number' | 'email' | 'url' | 'tel';
|
|
447
|
+
placeholder?: string;
|
|
448
|
+
inline?: boolean;
|
|
449
|
+
autoFocus?: boolean;
|
|
450
|
+
className?: string;
|
|
451
|
+
}
|
|
452
|
+
declare function CellInput<TData extends RowData, TValue>({ context, type, placeholder, inline, autoFocus, className, }: CellInputProps<TData, TValue>): react_jsx_runtime.JSX.Element;
|
|
453
|
+
|
|
454
|
+
interface SelectOption {
|
|
455
|
+
label: string;
|
|
456
|
+
value: string | number;
|
|
457
|
+
}
|
|
458
|
+
interface CellSelectProps<TData extends RowData, TValue> {
|
|
459
|
+
context: CellContext<TData, TValue>;
|
|
460
|
+
options: SelectOption[];
|
|
461
|
+
placeholder?: string;
|
|
462
|
+
className?: string;
|
|
463
|
+
}
|
|
464
|
+
declare function CellSelect<TData extends RowData, TValue>({ context, options, placeholder, className, }: CellSelectProps<TData, TValue>): react_jsx_runtime.JSX.Element;
|
|
465
|
+
|
|
466
|
+
interface CellCheckboxProps<TData extends RowData, TValue> {
|
|
467
|
+
context: CellContext<TData, TValue>;
|
|
468
|
+
className?: string;
|
|
469
|
+
}
|
|
470
|
+
declare function CellCheckbox<TData extends RowData, TValue>({ context, className, }: CellCheckboxProps<TData, TValue>): react_jsx_runtime.JSX.Element;
|
|
471
|
+
|
|
472
|
+
interface CellToggleProps<TData extends RowData, TValue> {
|
|
473
|
+
context: CellContext<TData, TValue>;
|
|
474
|
+
className?: string;
|
|
475
|
+
}
|
|
476
|
+
declare function CellToggle<TData extends RowData, TValue>({ context, className, }: CellToggleProps<TData, TValue>): react_jsx_runtime.JSX.Element;
|
|
477
|
+
|
|
478
|
+
interface CellDatePickerProps<TData extends RowData, TValue> {
|
|
479
|
+
context: CellContext<TData, TValue>;
|
|
480
|
+
type?: 'date' | 'datetime-local' | 'time';
|
|
481
|
+
className?: string;
|
|
482
|
+
}
|
|
483
|
+
declare function CellDatePicker<TData extends RowData, TValue>({ context, type, className, }: CellDatePickerProps<TData, TValue>): react_jsx_runtime.JSX.Element;
|
|
484
|
+
|
|
485
|
+
declare function CellBadge<TData extends RowData, TValue>({ context, variant, appearance, className, }: CellBadgeProps & {
|
|
486
|
+
context: CellContext<TData, TValue>;
|
|
487
|
+
}): react_jsx_runtime.JSX.Element | null;
|
|
488
|
+
declare namespace CellBadge {
|
|
489
|
+
var displayName: string;
|
|
490
|
+
}
|
|
491
|
+
|
|
492
|
+
declare function CellCurrency<TData extends RowData, TValue>({ context, currency, locale, decimals, colorize, className, }: CellCurrencyProps & {
|
|
493
|
+
context: CellContext<TData, TValue>;
|
|
494
|
+
}): react_jsx_runtime.JSX.Element | null;
|
|
495
|
+
declare namespace CellCurrency {
|
|
496
|
+
var displayName: string;
|
|
497
|
+
}
|
|
498
|
+
|
|
499
|
+
declare function CellStatus<TData extends RowData, TValue>({ context, colorMap, className, }: CellStatusProps & {
|
|
500
|
+
context: CellContext<TData, TValue>;
|
|
501
|
+
}): react_jsx_runtime.JSX.Element | null;
|
|
502
|
+
declare namespace CellStatus {
|
|
503
|
+
var displayName: string;
|
|
504
|
+
}
|
|
505
|
+
|
|
506
|
+
declare function CellNumeric<TData extends RowData, TValue>({ context, locale, unit, decimals, colorize, className, }: CellNumericProps & {
|
|
507
|
+
context: CellContext<TData, TValue>;
|
|
508
|
+
}): react_jsx_runtime.JSX.Element | null;
|
|
509
|
+
declare namespace CellNumeric {
|
|
510
|
+
var displayName: string;
|
|
511
|
+
}
|
|
512
|
+
|
|
513
|
+
declare function CellRating<TData extends RowData, TValue>({ context, max, character, emptyCharacter, className, }: CellRatingProps & {
|
|
514
|
+
context: CellContext<TData, TValue>;
|
|
515
|
+
}): react_jsx_runtime.JSX.Element | null;
|
|
516
|
+
declare namespace CellRating {
|
|
517
|
+
var displayName: string;
|
|
518
|
+
}
|
|
519
|
+
|
|
520
|
+
declare function CellBoolean<TData extends RowData, TValue>({ context, trueLabel, falseLabel, mode, className, }: CellBooleanProps & {
|
|
521
|
+
context: CellContext<TData, TValue>;
|
|
522
|
+
}): react_jsx_runtime.JSX.Element;
|
|
523
|
+
declare namespace CellBoolean {
|
|
524
|
+
var displayName: string;
|
|
525
|
+
}
|
|
526
|
+
|
|
527
|
+
declare function CellProgress<TData extends RowData, TValue>({ context, max, variant, showLabel, className, }: CellProgressProps & {
|
|
528
|
+
context: CellContext<TData, TValue>;
|
|
529
|
+
}): react_jsx_runtime.JSX.Element | null;
|
|
530
|
+
declare namespace CellProgress {
|
|
531
|
+
var displayName: string;
|
|
532
|
+
}
|
|
533
|
+
|
|
534
|
+
declare function CellDate<TData extends RowData, TValue>({ context, format, locale, className, }: CellDateProps & {
|
|
535
|
+
context: CellContext<TData, TValue>;
|
|
536
|
+
}): react_jsx_runtime.JSX.Element | null;
|
|
537
|
+
declare namespace CellDate {
|
|
538
|
+
var displayName: string;
|
|
539
|
+
}
|
|
540
|
+
|
|
541
|
+
declare function CellLink<TData extends RowData, TValue>({ context, href, external, className, }: CellLinkProps & {
|
|
542
|
+
context: CellContext<TData, TValue>;
|
|
543
|
+
}): react_jsx_runtime.JSX.Element | null;
|
|
544
|
+
declare namespace CellLink {
|
|
545
|
+
var displayName: string;
|
|
546
|
+
}
|
|
547
|
+
|
|
548
|
+
interface UseClipboardOptions extends ClipboardOptions {
|
|
549
|
+
/** Whether clipboard is enabled. Default: true */
|
|
550
|
+
enabled?: boolean;
|
|
551
|
+
/** The container element ref to attach listeners to */
|
|
552
|
+
containerRef?: React.RefObject<HTMLElement | null>;
|
|
553
|
+
/** Callback when data is copied */
|
|
554
|
+
onCopy?: (text: string) => void;
|
|
555
|
+
/** Callback when data is cut */
|
|
556
|
+
onCut?: (text: string) => void;
|
|
557
|
+
/** Callback when data is pasted */
|
|
558
|
+
onPaste?: (text: string) => void;
|
|
559
|
+
}
|
|
560
|
+
/**
|
|
561
|
+
* React hook that attaches Ctrl+C / Ctrl+X / Ctrl+V keyboard listeners
|
|
562
|
+
* to the table container for clipboard operations.
|
|
563
|
+
*/
|
|
564
|
+
declare function useClipboard<TData extends RowData>(table: Table$1<TData>, options?: UseClipboardOptions): void;
|
|
565
|
+
|
|
566
|
+
interface UseKeyboardNavigationOptions {
|
|
567
|
+
/** Whether keyboard navigation is enabled. Default: true */
|
|
568
|
+
enabled?: boolean;
|
|
569
|
+
/** The table container element ref */
|
|
570
|
+
containerRef?: React.RefObject<HTMLElement | null>;
|
|
571
|
+
}
|
|
572
|
+
declare function useKeyboardNavigation<TData extends RowData>(table: Table$1<TData>, options?: UseKeyboardNavigationOptions): void;
|
|
573
|
+
|
|
574
|
+
interface FillHandleDragState {
|
|
575
|
+
isDragging: boolean;
|
|
576
|
+
sourceCell: {
|
|
577
|
+
rowIndex: number;
|
|
578
|
+
columnIndex: number;
|
|
579
|
+
} | null;
|
|
580
|
+
currentCell: {
|
|
581
|
+
rowIndex: number;
|
|
582
|
+
columnIndex: number;
|
|
583
|
+
} | null;
|
|
584
|
+
}
|
|
585
|
+
interface UseFillHandleOptions {
|
|
586
|
+
/** Whether fill handle is enabled. Default: true */
|
|
587
|
+
enabled?: boolean;
|
|
588
|
+
}
|
|
589
|
+
interface UseFillHandleReturn {
|
|
590
|
+
dragState: FillHandleDragState;
|
|
591
|
+
onFillHandleMouseDown: (rowIndex: number, columnIndex: number, e: React.MouseEvent) => void;
|
|
592
|
+
}
|
|
593
|
+
/**
|
|
594
|
+
* React hook for fill handle drag tracking.
|
|
595
|
+
* Returns drag state and a mousedown handler to attach to the FillHandle component.
|
|
596
|
+
*/
|
|
597
|
+
declare function useFillHandle<TData extends RowData>(table: Table$1<TData>, options?: UseFillHandleOptions): UseFillHandleReturn;
|
|
598
|
+
|
|
599
|
+
interface FillHandleProps {
|
|
600
|
+
/** Row index of the cell this handle belongs to */
|
|
601
|
+
rowIndex: number;
|
|
602
|
+
/** Column index of the cell this handle belongs to */
|
|
603
|
+
columnIndex: number;
|
|
604
|
+
/** Callback when the user starts dragging the fill handle */
|
|
605
|
+
onMouseDown: (rowIndex: number, columnIndex: number, e: React__default.MouseEvent) => void;
|
|
606
|
+
}
|
|
607
|
+
/**
|
|
608
|
+
* Renders a small accent-colored square at the bottom-right corner of a cell.
|
|
609
|
+
* The user drags this to auto-fill adjacent cells (like Excel/Google Sheets).
|
|
610
|
+
*/
|
|
611
|
+
declare function FillHandle({ rowIndex, columnIndex, onMouseDown, }: FillHandleProps): react_jsx_runtime.JSX.Element;
|
|
612
|
+
|
|
613
|
+
interface DragHandleProps {
|
|
614
|
+
/** Called when drag starts on this handle */
|
|
615
|
+
onDragStart: (e: React__default.DragEvent) => void;
|
|
616
|
+
/** Whether this handle is currently part of a dragging row */
|
|
617
|
+
isDragging?: boolean;
|
|
618
|
+
/** Accessible label */
|
|
619
|
+
ariaLabel?: string;
|
|
620
|
+
/** Additional className */
|
|
621
|
+
className?: string;
|
|
622
|
+
}
|
|
623
|
+
declare function DragHandle({ onDragStart, isDragging, ariaLabel, className, }: DragHandleProps): react_jsx_runtime.JSX.Element;
|
|
624
|
+
|
|
625
|
+
interface UseRowDragOptions<TData extends RowData> {
|
|
626
|
+
table: Table$1<TData>;
|
|
627
|
+
/** Current data array */
|
|
628
|
+
data: TData[];
|
|
629
|
+
/** Callback to set data after reorder */
|
|
630
|
+
onDataChange: (data: TData[]) => void;
|
|
631
|
+
/** Optional callback when reorder completes */
|
|
632
|
+
onReorder?: (event: {
|
|
633
|
+
fromIndex: number;
|
|
634
|
+
toIndex: number;
|
|
635
|
+
rowId: string;
|
|
636
|
+
}) => void;
|
|
637
|
+
}
|
|
638
|
+
interface UseRowDragReturn {
|
|
639
|
+
/** Current drag state */
|
|
640
|
+
dragState: RowDragState;
|
|
641
|
+
/** Props to spread on a draggable row */
|
|
642
|
+
getRowDragProps: (rowId: string, rowIndex: number) => {
|
|
643
|
+
draggable: boolean;
|
|
644
|
+
onDragStart: (e: React.DragEvent) => void;
|
|
645
|
+
onDragOver: (e: React.DragEvent) => void;
|
|
646
|
+
onDragLeave: (e: React.DragEvent) => void;
|
|
647
|
+
onDrop: (e: React.DragEvent) => void;
|
|
648
|
+
onDragEnd: (e: React.DragEvent) => void;
|
|
649
|
+
'data-dragging': boolean | undefined;
|
|
650
|
+
'data-drag-over': string | undefined;
|
|
651
|
+
};
|
|
652
|
+
/** Props to spread on a drag handle element */
|
|
653
|
+
getDragHandleProps: (rowId: string) => {
|
|
654
|
+
onDragStart: (e: React.DragEvent) => void;
|
|
655
|
+
};
|
|
656
|
+
}
|
|
657
|
+
declare function useRowDrag<TData extends RowData>({ table, data, onDataChange, onReorder, }: UseRowDragOptions<TData>): UseRowDragReturn;
|
|
658
|
+
|
|
659
|
+
interface TreeToggleProps<TData extends RowData> {
|
|
660
|
+
row: Row<TData>;
|
|
661
|
+
/** Indentation width per level in pixels */
|
|
662
|
+
indentWidth?: number;
|
|
663
|
+
/** Whether to show the toggle icon (false for leaf nodes) */
|
|
664
|
+
showToggle?: boolean;
|
|
665
|
+
/** Optional custom toggle icon */
|
|
666
|
+
renderIcon?: (props: {
|
|
667
|
+
isExpanded: boolean;
|
|
668
|
+
isLeaf: boolean;
|
|
669
|
+
}) => React__default.ReactNode;
|
|
670
|
+
}
|
|
671
|
+
declare function TreeToggle<TData extends RowData>({ row, indentWidth, showToggle, renderIcon, }: TreeToggleProps<TData>): react_jsx_runtime.JSX.Element;
|
|
672
|
+
|
|
673
|
+
interface MasterDetailProps<TData extends RowData> {
|
|
674
|
+
row: Row<TData>;
|
|
675
|
+
table: Table$1<TData>;
|
|
676
|
+
/** Number of columns to span (full table width) */
|
|
677
|
+
colSpan: number;
|
|
678
|
+
/** Custom render function for the detail panel */
|
|
679
|
+
renderDetailPanel?: (row: Row<TData>) => React__default.ReactNode;
|
|
680
|
+
/** Optional animation class */
|
|
681
|
+
animationClass?: string;
|
|
682
|
+
}
|
|
683
|
+
declare function MasterDetail<TData extends RowData>({ row, table, colSpan, renderDetailPanel, animationClass, }: MasterDetailProps<TData>): react_jsx_runtime.JSX.Element | null;
|
|
684
|
+
|
|
685
|
+
interface ExpandIconProps {
|
|
686
|
+
/** Whether the row is expanded */
|
|
687
|
+
isExpanded: boolean;
|
|
688
|
+
/** Click handler to toggle expansion */
|
|
689
|
+
onClick: (e: React__default.MouseEvent) => void;
|
|
690
|
+
/** Accessible label */
|
|
691
|
+
ariaLabel?: string;
|
|
692
|
+
/** Size of the icon in pixels */
|
|
693
|
+
size?: number;
|
|
694
|
+
/** Additional className */
|
|
695
|
+
className?: string;
|
|
696
|
+
}
|
|
697
|
+
declare function ExpandIcon({ isExpanded, onClick, ariaLabel, size, className, }: ExpandIconProps): react_jsx_runtime.JSX.Element;
|
|
698
|
+
|
|
699
|
+
interface PivotFieldItem {
|
|
700
|
+
field: string;
|
|
701
|
+
label: string;
|
|
702
|
+
}
|
|
703
|
+
interface PivotValueItem {
|
|
704
|
+
field: string;
|
|
705
|
+
label: string;
|
|
706
|
+
aggregation: string;
|
|
707
|
+
}
|
|
708
|
+
interface PivotConfigProps {
|
|
709
|
+
/** Available fields that can be dragged into zones */
|
|
710
|
+
availableFields: PivotFieldItem[];
|
|
711
|
+
/** Currently configured row fields */
|
|
712
|
+
rowFields: PivotFieldItem[];
|
|
713
|
+
/** Currently configured column fields */
|
|
714
|
+
columnFields: PivotFieldItem[];
|
|
715
|
+
/** Currently configured value fields */
|
|
716
|
+
valueFields: PivotValueItem[];
|
|
717
|
+
/** Callback when row fields change */
|
|
718
|
+
onRowFieldsChange: (fields: PivotFieldItem[]) => void;
|
|
719
|
+
/** Callback when column fields change */
|
|
720
|
+
onColumnFieldsChange: (fields: PivotFieldItem[]) => void;
|
|
721
|
+
/** Callback when value fields change */
|
|
722
|
+
onValueFieldsChange: (fields: PivotValueItem[]) => void;
|
|
723
|
+
/** Available aggregation functions */
|
|
724
|
+
aggregationOptions?: {
|
|
725
|
+
value: string;
|
|
726
|
+
label: string;
|
|
727
|
+
}[];
|
|
728
|
+
/** Additional className */
|
|
729
|
+
className?: string;
|
|
730
|
+
}
|
|
731
|
+
declare function PivotConfigPanel({ availableFields, rowFields, columnFields, valueFields, onRowFieldsChange, onColumnFieldsChange, onValueFieldsChange, aggregationOptions, className, }: PivotConfigProps): react_jsx_runtime.JSX.Element;
|
|
732
|
+
|
|
733
|
+
interface LoadingOverlayProps {
|
|
734
|
+
/** Whether loading is active */
|
|
735
|
+
loading?: boolean;
|
|
736
|
+
/** Custom loading component to render instead of default spinner */
|
|
737
|
+
loadingComponent?: React__default.ReactNode;
|
|
738
|
+
/** Loading text shown below the spinner */
|
|
739
|
+
loadingText?: string;
|
|
740
|
+
}
|
|
741
|
+
declare function LoadingOverlay({ loading, loadingComponent, loadingText, }: LoadingOverlayProps): react_jsx_runtime.JSX.Element | null;
|
|
742
|
+
|
|
743
|
+
interface NoRowsOverlayProps {
|
|
744
|
+
/** Custom empty component */
|
|
745
|
+
emptyComponent?: React__default.ReactNode;
|
|
746
|
+
/** Custom icon for empty state */
|
|
747
|
+
emptyIcon?: React__default.ReactNode;
|
|
748
|
+
/** Main empty message */
|
|
749
|
+
emptyMessage?: string;
|
|
750
|
+
/** Secondary detail text */
|
|
751
|
+
emptyDetail?: string;
|
|
752
|
+
/** Whether results are filtered (changes icon/message) */
|
|
753
|
+
isFiltered?: boolean;
|
|
754
|
+
}
|
|
755
|
+
declare function NoRowsOverlay({ emptyComponent, emptyIcon, emptyMessage, emptyDetail, isFiltered, }: NoRowsOverlayProps): react_jsx_runtime.JSX.Element;
|
|
756
|
+
|
|
757
|
+
interface TooltipPosition {
|
|
758
|
+
x: number;
|
|
759
|
+
y: number;
|
|
760
|
+
placement: 'top' | 'bottom' | 'left' | 'right';
|
|
761
|
+
}
|
|
762
|
+
interface UseTooltipOptions {
|
|
763
|
+
/** Delay before showing tooltip in ms */
|
|
764
|
+
delay?: number;
|
|
765
|
+
/** Preferred placement */
|
|
766
|
+
placement?: 'top' | 'bottom' | 'left' | 'right';
|
|
767
|
+
/** Whether tooltip is enabled */
|
|
768
|
+
enabled?: boolean;
|
|
769
|
+
}
|
|
770
|
+
declare function useTooltip(options?: UseTooltipOptions): {
|
|
771
|
+
visible: boolean;
|
|
772
|
+
position: TooltipPosition;
|
|
773
|
+
content: string;
|
|
774
|
+
show: (target: HTMLElement, tooltipContent: string) => void;
|
|
775
|
+
hide: () => void;
|
|
776
|
+
};
|
|
777
|
+
|
|
778
|
+
interface TooltipProps {
|
|
779
|
+
/** Whether the tooltip is visible */
|
|
780
|
+
visible: boolean;
|
|
781
|
+
/** Position and placement */
|
|
782
|
+
position: TooltipPosition;
|
|
783
|
+
/** Tooltip content text */
|
|
784
|
+
content: string;
|
|
785
|
+
/** Custom tooltip component */
|
|
786
|
+
customComponent?: React__default.ReactNode;
|
|
787
|
+
}
|
|
788
|
+
declare function Tooltip({ visible, position, content, customComponent, }: TooltipProps): react_jsx_runtime.JSX.Element | null;
|
|
789
|
+
|
|
790
|
+
interface CellStatusBadgeBaseProps {
|
|
791
|
+
onRetry: () => void;
|
|
792
|
+
onDismiss: () => void;
|
|
793
|
+
}
|
|
794
|
+
interface ErrorProps extends CellStatusBadgeBaseProps {
|
|
795
|
+
status: 'error';
|
|
796
|
+
message: string | undefined;
|
|
797
|
+
}
|
|
798
|
+
interface ConflictProps extends CellStatusBadgeBaseProps {
|
|
799
|
+
status: 'conflict';
|
|
800
|
+
conflictWith: unknown;
|
|
801
|
+
}
|
|
802
|
+
type CellStatusBadgeProps = ErrorProps | ConflictProps;
|
|
803
|
+
declare function CellStatusBadge(props: CellStatusBadgeProps): react_jsx_runtime.JSX.Element;
|
|
804
|
+
|
|
805
|
+
interface StatusBarProps<TData extends RowData> {
|
|
806
|
+
table: Table$1<TData>;
|
|
807
|
+
panels?: StatusBarPanelConfig[];
|
|
808
|
+
}
|
|
809
|
+
declare function StatusBar<TData extends RowData>({ table, panels, }: StatusBarProps<TData>): react_jsx_runtime.JSX.Element;
|
|
810
|
+
|
|
811
|
+
interface StatusBarPanelComponentProps {
|
|
812
|
+
label?: string;
|
|
813
|
+
value: string | number;
|
|
814
|
+
icon?: React__default.ReactNode;
|
|
815
|
+
/** Optional tooltip text */
|
|
816
|
+
title?: string;
|
|
817
|
+
}
|
|
818
|
+
declare function StatusBarPanelComponent({ label, value, icon, title, }: StatusBarPanelComponentProps): react_jsx_runtime.JSX.Element;
|
|
819
|
+
|
|
820
|
+
interface FlashCellProps {
|
|
821
|
+
/** The flash info for this cell (if any) */
|
|
822
|
+
flash?: CellFlashInfo;
|
|
823
|
+
/** Flash duration in ms */
|
|
824
|
+
duration?: number;
|
|
825
|
+
/** Custom up color */
|
|
826
|
+
upColor?: string;
|
|
827
|
+
/** Custom down color */
|
|
828
|
+
downColor?: string;
|
|
829
|
+
/** Custom change color */
|
|
830
|
+
changeColor?: string;
|
|
831
|
+
/** Cell content */
|
|
832
|
+
children: React__default.ReactNode;
|
|
833
|
+
}
|
|
834
|
+
declare function FlashCell({ flash, duration, upColor, downColor, changeColor, children, }: FlashCellProps): react_jsx_runtime.JSX.Element;
|
|
835
|
+
|
|
836
|
+
interface UseCellFlashOptions {
|
|
837
|
+
/** Flash duration in ms */
|
|
838
|
+
duration?: number;
|
|
839
|
+
}
|
|
840
|
+
declare function useCellFlash<TData extends RowData>(table: Table$1<TData>, options?: UseCellFlashOptions): {
|
|
841
|
+
flashes: Map<string, CellFlashInfo>;
|
|
842
|
+
getFlash: (rowId: string, columnId: string) => CellFlashInfo | undefined;
|
|
843
|
+
};
|
|
844
|
+
|
|
845
|
+
interface UseRowAnimationOptions {
|
|
846
|
+
/** Enable row animations. Default: false */
|
|
847
|
+
enabled?: boolean;
|
|
848
|
+
/** Transition duration in ms. Default: 250 */
|
|
849
|
+
duration?: number;
|
|
850
|
+
/** Easing function. Default: 'ease' */
|
|
851
|
+
easing?: string;
|
|
852
|
+
}
|
|
853
|
+
declare function useRowAnimation<TData extends RowData>(_table: Table$1<TData>, options?: UseRowAnimationOptions): {
|
|
854
|
+
capturePositions: (containerEl: HTMLElement | null) => void;
|
|
855
|
+
animateRows: (containerEl: HTMLElement | null) => void;
|
|
856
|
+
enabled: boolean;
|
|
857
|
+
};
|
|
858
|
+
|
|
859
|
+
interface ContextMenuItemDef {
|
|
860
|
+
id: string;
|
|
861
|
+
label: string;
|
|
862
|
+
icon?: React__default.ReactNode;
|
|
863
|
+
shortcut?: string;
|
|
864
|
+
disabled?: boolean;
|
|
865
|
+
danger?: boolean;
|
|
866
|
+
separator?: boolean;
|
|
867
|
+
children?: ContextMenuItemDef[];
|
|
868
|
+
action?: () => void;
|
|
869
|
+
}
|
|
870
|
+
interface ContextMenuItemProps {
|
|
871
|
+
item: ContextMenuItemDef;
|
|
872
|
+
onClose: () => void;
|
|
873
|
+
}
|
|
874
|
+
declare function ContextMenuItem({ item, onClose }: ContextMenuItemProps): react_jsx_runtime.JSX.Element;
|
|
875
|
+
|
|
876
|
+
interface ContextMenuProps<TData extends RowData> {
|
|
877
|
+
x: number;
|
|
878
|
+
y: number;
|
|
879
|
+
onClose: () => void;
|
|
880
|
+
table: Table$1<TData>;
|
|
881
|
+
customItems?: ContextMenuItemDef[];
|
|
882
|
+
}
|
|
883
|
+
declare function ContextMenu<TData extends RowData>({ x, y, onClose, table, customItems, }: ContextMenuProps<TData>): react_jsx_runtime.JSX.Element;
|
|
884
|
+
|
|
885
|
+
declare function useContextMenu(): {
|
|
886
|
+
isOpen: boolean;
|
|
887
|
+
x: number;
|
|
888
|
+
y: number;
|
|
889
|
+
targetTable: Table$1<any> | null;
|
|
890
|
+
open: <TData extends RowData>(clientX: number, clientY: number, table: Table$1<TData>) => void;
|
|
891
|
+
close: () => void;
|
|
892
|
+
};
|
|
893
|
+
|
|
894
|
+
interface SidebarProps<TData extends RowData> {
|
|
895
|
+
table: Table$1<TData>;
|
|
896
|
+
open: boolean;
|
|
897
|
+
onClose: () => void;
|
|
898
|
+
panels: ('columns' | 'filters')[];
|
|
899
|
+
activePanel: 'columns' | 'filters';
|
|
900
|
+
onPanelChange: (panel: 'columns' | 'filters') => void;
|
|
901
|
+
}
|
|
902
|
+
declare function Sidebar<TData extends RowData>({ table, open, onClose, panels, activePanel, onPanelChange, }: SidebarProps<TData>): react_jsx_runtime.JSX.Element;
|
|
903
|
+
|
|
904
|
+
interface ColumnsPanelProps<TData extends RowData> {
|
|
905
|
+
table: Table$1<TData>;
|
|
906
|
+
}
|
|
907
|
+
declare function ColumnsPanel<TData extends RowData>({ table, }: ColumnsPanelProps<TData>): react_jsx_runtime.JSX.Element;
|
|
908
|
+
|
|
909
|
+
interface FiltersPanelProps<TData extends RowData> {
|
|
910
|
+
table: Table$1<TData>;
|
|
911
|
+
}
|
|
912
|
+
declare function FiltersPanel<TData extends RowData>({ table, }: FiltersPanelProps<TData>): react_jsx_runtime.JSX.Element;
|
|
913
|
+
|
|
914
|
+
interface PrintLayoutProps<TData extends RowData> {
|
|
915
|
+
table: Table$1<TData>;
|
|
916
|
+
/** Print title displayed at the top */
|
|
917
|
+
title?: string;
|
|
918
|
+
/** Show print timestamp */
|
|
919
|
+
showTimestamp?: boolean;
|
|
920
|
+
}
|
|
921
|
+
declare function PrintLayout<TData extends RowData>({ table, title, showTimestamp, }: PrintLayoutProps<TData>): react_jsx_runtime.JSX.Element;
|
|
922
|
+
|
|
923
|
+
interface UsePrintLayoutOptions {
|
|
924
|
+
/** Custom print title */
|
|
925
|
+
title?: string;
|
|
926
|
+
/**
|
|
927
|
+
* Additional CSS to inject for print.
|
|
928
|
+
*
|
|
929
|
+
* **Security warning:** Must be developer-provided CSS only.
|
|
930
|
+
* User-generated CSS is not safe even with sanitization.
|
|
931
|
+
* The library applies basic sanitization (removing @import, url(), expression())
|
|
932
|
+
* but this cannot guarantee safety against all CSS-based attacks.
|
|
933
|
+
*/
|
|
934
|
+
additionalCSS?: string;
|
|
935
|
+
}
|
|
936
|
+
declare function usePrintLayout<TData extends RowData>(table: Table$1<TData>, options?: UsePrintLayoutOptions): {
|
|
937
|
+
preparePrint: () => void;
|
|
938
|
+
isPrinting: boolean;
|
|
939
|
+
};
|
|
940
|
+
|
|
941
|
+
interface UseThemeOptions {
|
|
942
|
+
/** Initial theme name */
|
|
943
|
+
defaultTheme?: string;
|
|
944
|
+
/** Initial color scheme */
|
|
945
|
+
defaultColorScheme?: 'light' | 'dark' | 'auto';
|
|
946
|
+
}
|
|
947
|
+
declare function useTheme(options?: UseThemeOptions): {
|
|
948
|
+
theme: string;
|
|
949
|
+
setTheme: (newTheme: string) => void;
|
|
950
|
+
colorScheme: "auto" | "light" | "dark";
|
|
951
|
+
setColorScheme: (scheme: "light" | "dark" | "auto") => void;
|
|
952
|
+
toggleColorScheme: () => void;
|
|
953
|
+
resolvedColorScheme: "light" | "dark";
|
|
954
|
+
containerRef: React$1.RefObject<HTMLElement | null>;
|
|
955
|
+
};
|
|
956
|
+
|
|
957
|
+
export { type AutoMeasurementsOptions, CellBadge, type CellBadgeProps, CellBoolean, type CellBooleanProps, CellCheckbox, CellCurrency, type CellCurrencyProps, CellDate, CellDatePicker, type CellDateProps, CellErrorBoundary, CellInput, CellLink, type CellLinkProps, type CellMeasureRecipe, type CellMeasurement, CellNumeric, type CellNumericProps, CellProgress, type CellProgressProps, CellRating, type CellRatingProps, CellSelect, CellStatus, CellStatusBadge, type CellStatusBadgeProps, type CellStatusProps, CellToggle, ColumnsPanel, ContextMenu, ContextMenuItem, type ContextMenuItemDef, DEFAULT_TEXT_RECIPE, DragHandle, ErrorBoundary, ExpandIcon, FillHandle, type FillHandleDragState, type FillHandleProps, FiltersPanel, FlashCell, GlobalFilter, LoadingOverlay, type LoadingOverlayProps, MasterDetail, NoRowsOverlay, type NoRowsOverlayProps, Pagination, PivotConfigPanel, type PivotConfigProps, type PivotFieldItem, type PivotValueItem, PrintLayout, Sidebar, SortIndicator, StatusBar, StatusBarPanelComponent, type StatusBarPanelComponentProps, type StatusBarPanelConfig, type StatusBarPanelProps, Table, TableBody, TableCell, type TableCellProps$1 as TableCellProps, TableFooter, TableHeader, type TableHeaderCellProps, type TableProps, TableProvider, type TableRowProps, Tooltip, type TooltipPosition, type TooltipProps, TreeToggle, type UseCellFlashOptions, type UseClipboardOptions, type UseFillHandleOptions, type UseFillHandleReturn, type UseKeyboardNavigationOptions, type UsePretextMeasurementOptions, type UsePretextMeasurementResult, type UsePrintLayoutOptions, type UseRowAnimationOptions, type UseRowDragOptions, type UseRowDragReturn, type UseTableRowHeightsOptions, type UseThemeOptions, type UseTooltipOptions, type UseVirtualizationOptions, type UseVirtualizationResult, type VirtualRow, getMeasureRecipeForCellType, getRegisteredCellTypes, resolveMeasureRecipe, useAutoMeasurements, useCellFlash, useClipboard, useContextMenu, useFillHandle, useKeyboardNavigation, usePretextMeasurement, usePrintLayout, useRowAnimation, useRowDrag, useTable, useTableContext, useTableRowHeights, useTheme, useTooltip, useVirtualization };
|