@zvndev/yable-react 0.0.0-canary-20260629011348
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 +21 -0
- package/README.md +145 -0
- package/dist/index.cjs +6684 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +1338 -0
- package/dist/index.d.ts +1338 -0
- package/dist/index.js +6516 -0
- package/dist/index.js.map +1 -0
- package/package.json +90 -0
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,1338 @@
|
|
|
1
|
+
import { RowData, ColumnDefBase, ColumnDefExtensions, Row, ColumnDef, Table as Table$1, Cell, Header, TableOptions, SortingState, ColumnFiltersState, PaginationState, TableState, Updater, Column, 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, FormulaEngine, FormulaError, FormulaFunction, FormulaState, GroupColumnDef, Header, HeaderContext, HeaderGroup, KeyboardNavigationAction, KeyboardNavigationCell, KeyboardNavigationDirection, KeyboardNavigationState, OnChangeFn, OnCommitFn, PaginationState, PartialLocale, PivotColumn, PivotConfig, PivotEngine, PivotFieldConfig, PivotRow, PivotState, PivotValueConfig, Row, RowData, RowDragEndEvent, RowDragEvent, RowDragState, RowEditCommitEvent, RowEditEvent, RowPinningState, RowReorderEvent, RowSelectionState, SortDirection, SortingFn, SortingState, Table as TableInstance, TableOptions, TableOptionsResolved, TableState, UndoAction, UndoRedoOptions, UndoRedoState, UndoStack, Updater, VisibilityState, YableLocale, aggregationFns, createColumnHelper, createLocale, createUndoRedoIntegration, en, filterFns, formulaFunctions, functionalUpdate, generatePivotColumnDefs, getDefaultLocale, getInitialPivotState, getPivotRowModel, resetLocale, setDefaultLocale, sortingFns } from '@zvndev/yable-core';
|
|
3
|
+
import * as React$1 from 'react';
|
|
4
|
+
import React__default, { CSSProperties, HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes, ReactNode } from 'react';
|
|
5
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
6
|
+
import { RowDragState } from '@zvndev/yable-core/features/rowDragging';
|
|
7
|
+
|
|
8
|
+
type YableTableVisualConfig = Partial<Pick<TableProps<any>, 'striped' | 'bordered' | 'compact' | 'stickyHeader' | 'theme' | 'direction' | 'ariaLabel' | 'clickableRows' | 'floatingFilters' | 'columnVirtualization' | 'columnVirtualizationOverscan' | 'statusBar' | 'sidebar' | 'sidebarPanels' | 'defaultSidebarPanel'>>;
|
|
9
|
+
type YableColumnConfig<TData extends RowData = any, TValue = unknown> = Partial<ColumnDefBase<TData, TValue>> & Partial<ColumnDefExtensions<TData, TValue>>;
|
|
10
|
+
interface YableRowConfig<TData extends RowData = any> {
|
|
11
|
+
className?: string | ((row: Row<TData>) => string | undefined);
|
|
12
|
+
style?: CSSProperties | ((row: Row<TData>) => CSSProperties);
|
|
13
|
+
}
|
|
14
|
+
type YableCellConfig<TData extends RowData = any, TValue = unknown> = Pick<YableColumnConfig<TData, TValue>, 'cell' | 'cellType' | 'cellTypeProps' | 'cellClassName' | 'cellStyle' | 'editable' | 'editConfig' | 'tooltip' | 'tooltipDelay'>;
|
|
15
|
+
interface YableColumnConfigSet<TData extends RowData = any> {
|
|
16
|
+
default?: YableColumnConfig<TData>;
|
|
17
|
+
byId?: Record<string, YableColumnConfig<TData>>;
|
|
18
|
+
}
|
|
19
|
+
interface YableCellConfigSet<TData extends RowData = any> {
|
|
20
|
+
default?: YableCellConfig<TData>;
|
|
21
|
+
named?: Record<string, YableCellConfig<TData>>;
|
|
22
|
+
byColumn?: Record<string, YableCellConfig<TData>>;
|
|
23
|
+
}
|
|
24
|
+
interface YableTableProfile<TData extends RowData = any> {
|
|
25
|
+
table?: YableTableVisualConfig;
|
|
26
|
+
columns?: YableColumnConfigSet<TData>;
|
|
27
|
+
rows?: YableRowConfig<TData>;
|
|
28
|
+
cells?: YableCellConfigSet<TData>;
|
|
29
|
+
}
|
|
30
|
+
interface YableConfig<TData extends RowData = any> extends YableTableProfile<TData> {
|
|
31
|
+
profiles?: Record<string, YableTableProfile<TData>>;
|
|
32
|
+
}
|
|
33
|
+
interface ResolvedYableProfile<TData extends RowData = any> extends YableTableProfile<TData> {
|
|
34
|
+
name: string;
|
|
35
|
+
}
|
|
36
|
+
declare function createYableConfig<TData extends RowData = any>(config: YableConfig<TData>): YableConfig<TData>;
|
|
37
|
+
declare function resolveYableProfile<TData extends RowData = any>(config?: YableConfig<TData>, profileName?: string): ResolvedYableProfile<TData>;
|
|
38
|
+
declare function getYableDefaultColumnDef<TData extends RowData>(profile?: YableTableProfile<TData>): YableColumnConfig<TData> | undefined;
|
|
39
|
+
declare function applyYableConfigToColumns<TData extends RowData>(columns: ColumnDef<TData, any>[], profile?: YableTableProfile<TData>): ColumnDef<TData, any>[];
|
|
40
|
+
|
|
41
|
+
interface TableProps<TData extends RowData> extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
|
|
42
|
+
table: Table$1<TData>;
|
|
43
|
+
/** Enable sticky header */
|
|
44
|
+
stickyHeader?: boolean;
|
|
45
|
+
/** Enable striped rows */
|
|
46
|
+
striped?: boolean;
|
|
47
|
+
/** Enable bordered cells */
|
|
48
|
+
bordered?: boolean;
|
|
49
|
+
/** Enable compact spacing */
|
|
50
|
+
compact?: boolean;
|
|
51
|
+
/** Theme variant */
|
|
52
|
+
theme?: string;
|
|
53
|
+
/** Named table profile from `YableProvider config` */
|
|
54
|
+
configProfile?: string;
|
|
55
|
+
/** Table-local config; overrides provider config for this component */
|
|
56
|
+
config?: YableConfig<TData>;
|
|
57
|
+
/** Whether rows are clickable (adds cursor + hover) */
|
|
58
|
+
clickableRows?: boolean;
|
|
59
|
+
/** Show footer */
|
|
60
|
+
footer?: boolean;
|
|
61
|
+
/** Loading state */
|
|
62
|
+
loading?: boolean;
|
|
63
|
+
/** Custom loading component */
|
|
64
|
+
loadingComponent?: React.ReactNode;
|
|
65
|
+
/** Loading text shown below the spinner */
|
|
66
|
+
loadingText?: string;
|
|
67
|
+
/** Empty state message */
|
|
68
|
+
emptyMessage?: string;
|
|
69
|
+
/** Custom empty state render */
|
|
70
|
+
renderEmpty?: () => React.ReactNode;
|
|
71
|
+
/** Custom loading render */
|
|
72
|
+
renderLoading?: () => React.ReactNode;
|
|
73
|
+
/** Custom empty component */
|
|
74
|
+
emptyComponent?: React.ReactNode;
|
|
75
|
+
/** Custom empty icon */
|
|
76
|
+
emptyIcon?: React.ReactNode;
|
|
77
|
+
/** Secondary detail text for empty state */
|
|
78
|
+
emptyDetail?: string;
|
|
79
|
+
/** Children rendered inside the table container (e.g. Pagination) */
|
|
80
|
+
children?: React.ReactNode;
|
|
81
|
+
/** Text direction for RTL support */
|
|
82
|
+
direction?: 'ltr' | 'rtl';
|
|
83
|
+
/** Enable status bar */
|
|
84
|
+
statusBar?: boolean;
|
|
85
|
+
/** Status bar panels configuration */
|
|
86
|
+
statusBarPanels?: StatusBarPanelConfig[];
|
|
87
|
+
/** Enable sidebar */
|
|
88
|
+
sidebar?: boolean;
|
|
89
|
+
/** Sidebar panels */
|
|
90
|
+
sidebarPanels?: ('columns' | 'filters')[];
|
|
91
|
+
/** Default sidebar panel */
|
|
92
|
+
defaultSidebarPanel?: 'columns' | 'filters';
|
|
93
|
+
/** Render a second header row with per-column floating filters */
|
|
94
|
+
floatingFilters?: boolean;
|
|
95
|
+
/** Virtualize wide tables horizontally when safe to do so */
|
|
96
|
+
columnVirtualization?: boolean;
|
|
97
|
+
/** Additional columns rendered beyond the viewport when column virtualization is enabled */
|
|
98
|
+
columnVirtualizationOverscan?: number;
|
|
99
|
+
/** Accessible label for the grid container. Default: "Data table" */
|
|
100
|
+
ariaLabel?: string;
|
|
101
|
+
}
|
|
102
|
+
/** Status bar panel configuration */
|
|
103
|
+
interface StatusBarPanelConfig {
|
|
104
|
+
id: string;
|
|
105
|
+
component?: React.ComponentType<StatusBarPanelProps>;
|
|
106
|
+
align?: 'left' | 'center' | 'right';
|
|
107
|
+
label?: string;
|
|
108
|
+
}
|
|
109
|
+
/** Props passed to status bar panel components */
|
|
110
|
+
interface StatusBarPanelProps {
|
|
111
|
+
table: Table$1<any>;
|
|
112
|
+
}
|
|
113
|
+
interface TableRowProps<TData extends RowData> extends HTMLAttributes<HTMLTableRowElement> {
|
|
114
|
+
row: Row<TData>;
|
|
115
|
+
}
|
|
116
|
+
interface TableCellProps$1<TData extends RowData, TValue = unknown> extends TdHTMLAttributes<HTMLTableCellElement> {
|
|
117
|
+
cell: Cell<TData, TValue>;
|
|
118
|
+
}
|
|
119
|
+
interface TableHeaderCellProps<TData extends RowData, TValue = unknown> extends ThHTMLAttributes<HTMLTableCellElement> {
|
|
120
|
+
header: Header<TData, TValue>;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
type UseTableOptions<TData extends RowData> = TableOptions<TData> & {
|
|
124
|
+
/** Table-local config; overrides provider config for this table instance. */
|
|
125
|
+
config?: YableConfig<TData>;
|
|
126
|
+
/** Named profile from `YableProvider config`; overrides provider `tableProfile`. */
|
|
127
|
+
configProfile?: string;
|
|
128
|
+
};
|
|
129
|
+
/**
|
|
130
|
+
* React hook that wraps the framework-agnostic core table engine.
|
|
131
|
+
*
|
|
132
|
+
* Returns a stable {@link Table} instance whose `state` reflects either
|
|
133
|
+
* the consumer's controlled `options.state` or the hook's internal state.
|
|
134
|
+
*
|
|
135
|
+
* Re-renders are triggered by `setState` from the default `onStateChange`
|
|
136
|
+
* implementation. Consumers may pass their own `onStateChange` to control
|
|
137
|
+
* state externally.
|
|
138
|
+
*
|
|
139
|
+
* Gotcha: `options.onStateChange` is captured via a latest-ref, so a fresh
|
|
140
|
+
* function identity from the parent is always invoked — even if every other
|
|
141
|
+
* option key is shallow-equal to the previous render.
|
|
142
|
+
*/
|
|
143
|
+
declare function useTable<TData extends RowData>(options: UseTableOptions<TData>): Table$1<TData>;
|
|
144
|
+
|
|
145
|
+
interface ServerTableFetchArgs {
|
|
146
|
+
sorting: SortingState;
|
|
147
|
+
columnFilters: ColumnFiltersState;
|
|
148
|
+
globalFilter: string;
|
|
149
|
+
pagination: PaginationState;
|
|
150
|
+
cursor: unknown;
|
|
151
|
+
signal: AbortSignal;
|
|
152
|
+
}
|
|
153
|
+
interface ServerTableFetchResult<TData extends RowData> {
|
|
154
|
+
rows: TData[];
|
|
155
|
+
cursor?: unknown;
|
|
156
|
+
hasMore?: boolean;
|
|
157
|
+
rowCount?: number;
|
|
158
|
+
pageCount?: number;
|
|
159
|
+
}
|
|
160
|
+
interface ServerTableUpdateArgs<TData extends RowData> {
|
|
161
|
+
rowId: string;
|
|
162
|
+
patch: Partial<TData>;
|
|
163
|
+
previousRow?: TData;
|
|
164
|
+
signal: AbortSignal;
|
|
165
|
+
}
|
|
166
|
+
interface UseServerTableOptions<TData extends RowData> extends Omit<UseTableOptions<TData>, 'data' | 'state' | 'manualSorting' | 'manualFiltering' | 'manualPagination' | 'onSortingChange' | 'onColumnFiltersChange' | 'onGlobalFilterChange' | 'onPaginationChange' | 'rowCount' | 'pageCount'> {
|
|
167
|
+
fetchData: (args: ServerTableFetchArgs) => Promise<ServerTableFetchResult<TData>>;
|
|
168
|
+
updateRow?: (args: ServerTableUpdateArgs<TData>) => Promise<TData | Partial<TData> | void>;
|
|
169
|
+
initialRows?: TData[];
|
|
170
|
+
initialCursor?: unknown;
|
|
171
|
+
initialHasMore?: boolean;
|
|
172
|
+
initialRowCount?: number;
|
|
173
|
+
initialPageCount?: number;
|
|
174
|
+
initialSorting?: SortingState;
|
|
175
|
+
initialColumnFilters?: ColumnFiltersState;
|
|
176
|
+
initialGlobalFilter?: string;
|
|
177
|
+
initialPagination?: PaginationState;
|
|
178
|
+
autoLoad?: boolean;
|
|
179
|
+
}
|
|
180
|
+
interface ServerTableController<TData extends RowData> {
|
|
181
|
+
table: Table$1<TData>;
|
|
182
|
+
rows: TData[];
|
|
183
|
+
loading: boolean;
|
|
184
|
+
error: unknown;
|
|
185
|
+
cursor: unknown;
|
|
186
|
+
hasMore: boolean;
|
|
187
|
+
rowCount?: number;
|
|
188
|
+
pageCount?: number;
|
|
189
|
+
sorting: SortingState;
|
|
190
|
+
columnFilters: ColumnFiltersState;
|
|
191
|
+
globalFilter: string;
|
|
192
|
+
pagination: PaginationState;
|
|
193
|
+
refresh: () => Promise<void>;
|
|
194
|
+
loadMore: () => Promise<void>;
|
|
195
|
+
updateRow: (rowId: string, patch: Partial<TData>) => Promise<void>;
|
|
196
|
+
}
|
|
197
|
+
declare function useServerTable<TData extends RowData>({ fetchData, updateRow, initialRows, initialCursor, initialHasMore, initialRowCount, initialPageCount, initialSorting, initialColumnFilters, initialGlobalFilter, initialPagination, autoLoad, getRowId, ...tableOptions }: UseServerTableOptions<TData>): ServerTableController<TData>;
|
|
198
|
+
|
|
199
|
+
interface UseTablePersistenceOptions {
|
|
200
|
+
/** Storage key used for getItem/setItem. */
|
|
201
|
+
key: string;
|
|
202
|
+
/** Which TableState slices to persist. Defaults to column layout keys. */
|
|
203
|
+
persistedKeys?: (keyof TableState)[];
|
|
204
|
+
/** Milliseconds to debounce storage writes. Default: 100. */
|
|
205
|
+
debounce?: number;
|
|
206
|
+
/** Schema version — bumping this discards any stale stored data. */
|
|
207
|
+
version?: number;
|
|
208
|
+
/** Custom Storage implementation. Default: localStorage. */
|
|
209
|
+
storage?: Storage;
|
|
210
|
+
}
|
|
211
|
+
interface UseTablePersistenceReturn {
|
|
212
|
+
/**
|
|
213
|
+
* Partial state hydrated from storage — pass to `useTable({ initialState })`.
|
|
214
|
+
* Only useful when NOT passing `onStateChange` (i.e., uncontrolled mode).
|
|
215
|
+
*/
|
|
216
|
+
initialState: Partial<TableState>;
|
|
217
|
+
/**
|
|
218
|
+
* State-change handler that persists relevant slices on each update.
|
|
219
|
+
* When passed to `useTable({ onStateChange })`, the persistence hook
|
|
220
|
+
* takes over state management (controlled mode). You MUST also pass
|
|
221
|
+
* `state` to useTable in this case.
|
|
222
|
+
*/
|
|
223
|
+
onStateChange: (updater: Updater<TableState>) => void;
|
|
224
|
+
/**
|
|
225
|
+
* Current table state managed by the persistence hook.
|
|
226
|
+
* Pass to `useTable({ state })` alongside `onStateChange`.
|
|
227
|
+
*/
|
|
228
|
+
state: Partial<TableState>;
|
|
229
|
+
/** Manually clear all persisted state for this key. */
|
|
230
|
+
clearPersistedState: () => void;
|
|
231
|
+
}
|
|
232
|
+
/**
|
|
233
|
+
* React hook that persists selected table state slices to storage.
|
|
234
|
+
*
|
|
235
|
+
* Returns `initialState` (hydrated from storage), `state`, and
|
|
236
|
+
* `onStateChange` — pass all three to `useTable` so that persisted
|
|
237
|
+
* slices survive page reloads.
|
|
238
|
+
*
|
|
239
|
+
* @example
|
|
240
|
+
* ```tsx
|
|
241
|
+
* const persistence = useTablePersistence({ key: 'my-table', version: 1 })
|
|
242
|
+
*
|
|
243
|
+
* // Controlled mode (recommended) — persistence manages state:
|
|
244
|
+
* const table = useTable({
|
|
245
|
+
* data,
|
|
246
|
+
* columns,
|
|
247
|
+
* initialState: persistence.initialState,
|
|
248
|
+
* state: persistence.state,
|
|
249
|
+
* onStateChange: persistence.onStateChange,
|
|
250
|
+
* })
|
|
251
|
+
*
|
|
252
|
+
* // Uncontrolled mode — only hydrate, no live persistence:
|
|
253
|
+
* const table = useTable({
|
|
254
|
+
* data,
|
|
255
|
+
* columns,
|
|
256
|
+
* initialState: persistence.initialState,
|
|
257
|
+
* })
|
|
258
|
+
* ```
|
|
259
|
+
*/
|
|
260
|
+
declare function useTablePersistence(options: UseTablePersistenceOptions): UseTablePersistenceReturn;
|
|
261
|
+
|
|
262
|
+
interface VirtualRow {
|
|
263
|
+
index: number;
|
|
264
|
+
start: number;
|
|
265
|
+
size: number;
|
|
266
|
+
}
|
|
267
|
+
interface UseVirtualizationOptions {
|
|
268
|
+
containerRef: React.RefObject<HTMLElement | null>;
|
|
269
|
+
totalRows: number;
|
|
270
|
+
rowHeight?: number | ((index: number) => number);
|
|
271
|
+
overscan?: number;
|
|
272
|
+
estimateRowHeight?: number;
|
|
273
|
+
/** Pre-computed row heights from Pretext measurement (Float64Array indexed by row) */
|
|
274
|
+
pretextHeights?: Float64Array | null;
|
|
275
|
+
/** Pre-computed prefix sums for O(log n) scroll lookups */
|
|
276
|
+
pretextPrefixSums?: Float64Array | null;
|
|
277
|
+
/**
|
|
278
|
+
* Opaque key that changes when column widths change.
|
|
279
|
+
* When this value changes the height cache is invalidated because column
|
|
280
|
+
* resizing can affect text wrapping and therefore row heights.
|
|
281
|
+
*/
|
|
282
|
+
columnSizingHash?: string | number;
|
|
283
|
+
}
|
|
284
|
+
interface UseVirtualizationResult {
|
|
285
|
+
virtualRows: VirtualRow[];
|
|
286
|
+
totalHeight: number;
|
|
287
|
+
startIndex: number;
|
|
288
|
+
endIndex: number;
|
|
289
|
+
scrollTo: (index: number) => void;
|
|
290
|
+
/**
|
|
291
|
+
* Manually clear the row-height cache and force recalculation.
|
|
292
|
+
* Call this when cell content changes (data mutations, font-size changes, etc.)
|
|
293
|
+
* that may affect row heights.
|
|
294
|
+
*/
|
|
295
|
+
invalidateRowHeights: () => void;
|
|
296
|
+
}
|
|
297
|
+
/**
|
|
298
|
+
* Computes which rows are visible in a scrollable container and returns
|
|
299
|
+
* positioning data so only those rows (plus an overscan buffer) are rendered.
|
|
300
|
+
*
|
|
301
|
+
* Returns `{ virtualRows, totalHeight, startIndex, endIndex, scrollTo, invalidateRowHeights }`.
|
|
302
|
+
* Re-renders are triggered by scroll (rAF-throttled) and ResizeObserver
|
|
303
|
+
* container resize. Supports fixed, variable, and Pretext-pre-measured heights.
|
|
304
|
+
*
|
|
305
|
+
* The height cache is automatically invalidated when `totalRows`, `isFixedHeight`,
|
|
306
|
+
* or `columnSizingHash` changes. For manual invalidation (e.g. after data mutations
|
|
307
|
+
* or font-size changes), call `invalidateRowHeights()`.
|
|
308
|
+
*/
|
|
309
|
+
declare function useVirtualization({ containerRef, totalRows, rowHeight, overscan, estimateRowHeight: _estimateRowHeight, pretextHeights, pretextPrefixSums, columnSizingHash, }: UseVirtualizationOptions): UseVirtualizationResult;
|
|
310
|
+
|
|
311
|
+
interface VirtualColumn<TData extends RowData> {
|
|
312
|
+
column: Column<TData, unknown>;
|
|
313
|
+
index: number;
|
|
314
|
+
start: number;
|
|
315
|
+
size: number;
|
|
316
|
+
}
|
|
317
|
+
interface UseColumnVirtualizationOptions<TData extends RowData> {
|
|
318
|
+
containerRef: React.RefObject<HTMLElement | null>;
|
|
319
|
+
columns: Column<TData, unknown>[];
|
|
320
|
+
overscan?: number;
|
|
321
|
+
enabled?: boolean;
|
|
322
|
+
sizingKey?: string;
|
|
323
|
+
}
|
|
324
|
+
interface UseColumnVirtualizationResult<TData extends RowData> {
|
|
325
|
+
virtualColumns: VirtualColumn<TData>[];
|
|
326
|
+
startOffset: number;
|
|
327
|
+
endOffset: number;
|
|
328
|
+
totalWidth: number;
|
|
329
|
+
visibleWidth: number;
|
|
330
|
+
startIndex: number;
|
|
331
|
+
endIndex: number;
|
|
332
|
+
isVirtualized: boolean;
|
|
333
|
+
scrollToIndex: (index: number) => void;
|
|
334
|
+
}
|
|
335
|
+
declare function useColumnVirtualization<TData extends RowData>({ containerRef, columns, overscan, enabled, sizingKey, }: UseColumnVirtualizationOptions<TData>): UseColumnVirtualizationResult<TData>;
|
|
336
|
+
|
|
337
|
+
interface CellMeasurement {
|
|
338
|
+
/** Column ID */
|
|
339
|
+
columnId: string;
|
|
340
|
+
/** Column width in px */
|
|
341
|
+
width: number;
|
|
342
|
+
/** CSS font string for this column, e.g. "400 13px Inter" */
|
|
343
|
+
font: string;
|
|
344
|
+
/** Line height in px */
|
|
345
|
+
lineHeight: number;
|
|
346
|
+
/** Vertical padding in px (top + bottom) */
|
|
347
|
+
padding?: number;
|
|
348
|
+
/**
|
|
349
|
+
* If true, this column never wraps text — Pretext skips text measurement
|
|
350
|
+
* for it and contributes a constant `lineHeight + padding` to every row.
|
|
351
|
+
* Use this for visual cells like progress bars and rating stars.
|
|
352
|
+
*/
|
|
353
|
+
fixedHeight?: boolean;
|
|
354
|
+
}
|
|
355
|
+
interface UsePretextMeasurementOptions {
|
|
356
|
+
/** The row data to measure */
|
|
357
|
+
data: any[];
|
|
358
|
+
/** Measurement config per column — only columns that need text measurement */
|
|
359
|
+
columns: CellMeasurement[];
|
|
360
|
+
/** Extract the text content for a given row and column */
|
|
361
|
+
getCellText: (row: any, columnId: string) => string;
|
|
362
|
+
/** Minimum row height in px */
|
|
363
|
+
minRowHeight?: number;
|
|
364
|
+
/** Whether measurement is enabled */
|
|
365
|
+
enabled?: boolean;
|
|
366
|
+
}
|
|
367
|
+
interface UsePretextMeasurementResult {
|
|
368
|
+
/** Map from row index → exact pixel height */
|
|
369
|
+
rowHeights: Float64Array | null;
|
|
370
|
+
/** Pre-computed cumulative offsets for binary search (prefix sums) */
|
|
371
|
+
prefixSums: Float64Array | null;
|
|
372
|
+
/** Total height of all rows in px */
|
|
373
|
+
totalHeight: number;
|
|
374
|
+
/** Whether pretext is loaded and heights are computed */
|
|
375
|
+
ready: boolean;
|
|
376
|
+
/** Time taken for prepare() phase in ms */
|
|
377
|
+
prepareTimeMs: number;
|
|
378
|
+
/** Time taken for layout() phase in ms */
|
|
379
|
+
layoutTimeMs: number;
|
|
380
|
+
}
|
|
381
|
+
/**
|
|
382
|
+
* Pre-computes exact pixel heights for every row using Pretext's
|
|
383
|
+
* DOM-free text measurement.
|
|
384
|
+
*
|
|
385
|
+
* Returns `{ rowHeights, prefixSums, totalHeight, ready, ... }` as typed
|
|
386
|
+
* arrays for cache-friendly access by the virtualizer. `prepare()` re-runs
|
|
387
|
+
* when `data` or fonts change; `layout()` re-runs only when column widths
|
|
388
|
+
* change (pure math, ~0.0003ms per cell).
|
|
389
|
+
*
|
|
390
|
+
* Gotcha: pretext is loaded lazily — `ready` flips to true on the first
|
|
391
|
+
* render after the dynamic import resolves and heights are computed.
|
|
392
|
+
*/
|
|
393
|
+
declare function usePretextMeasurement({ data, columns, getCellText, minRowHeight, enabled, }: UsePretextMeasurementOptions): UsePretextMeasurementResult;
|
|
394
|
+
|
|
395
|
+
/** Font measurement recipe for a cell type, used by Pretext integration */
|
|
396
|
+
interface CellMeasureRecipe {
|
|
397
|
+
/** CSS font string, e.g. "500 13px Inter" */
|
|
398
|
+
font: string;
|
|
399
|
+
/** Line height in px */
|
|
400
|
+
lineHeight: number;
|
|
401
|
+
/** Cell padding (top + bottom) in px */
|
|
402
|
+
padding: number;
|
|
403
|
+
/**
|
|
404
|
+
* If true, the cell renders at a fixed visual height regardless of text content
|
|
405
|
+
* (e.g. progress bar, rating stars). Pretext will return `lineHeight + padding`
|
|
406
|
+
* as the row contribution and skip text measurement entirely.
|
|
407
|
+
*/
|
|
408
|
+
fixedHeight?: boolean;
|
|
409
|
+
}
|
|
410
|
+
/** Base props shared by all display cell types */
|
|
411
|
+
interface CellTypeBaseProps {
|
|
412
|
+
/** Additional CSS class */
|
|
413
|
+
className?: string;
|
|
414
|
+
}
|
|
415
|
+
/** Badge / pill cell — categorical data like departments, tags */
|
|
416
|
+
interface CellBadgeProps extends CellTypeBaseProps {
|
|
417
|
+
/** Color variant — maps to theme tokens */
|
|
418
|
+
variant?: 'default' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
|
|
419
|
+
/** Visual style */
|
|
420
|
+
appearance?: 'soft' | 'solid' | 'outline';
|
|
421
|
+
}
|
|
422
|
+
/** Currency / money cell — formatted numbers with currency symbol */
|
|
423
|
+
interface CellCurrencyProps extends CellTypeBaseProps {
|
|
424
|
+
/** ISO 4217 currency code */
|
|
425
|
+
currency?: string;
|
|
426
|
+
/** Locale for formatting */
|
|
427
|
+
locale?: string;
|
|
428
|
+
/** Number of decimal places (default: 0 for integers, 2 for decimals) */
|
|
429
|
+
decimals?: number;
|
|
430
|
+
/** Show +/- coloring for positive/negative values */
|
|
431
|
+
colorize?: boolean;
|
|
432
|
+
}
|
|
433
|
+
/** Status indicator cell — dot + label for states */
|
|
434
|
+
interface CellStatusProps extends CellTypeBaseProps {
|
|
435
|
+
/** Map of value → color variant */
|
|
436
|
+
colorMap?: Record<string, 'success' | 'warning' | 'danger' | 'info' | 'default'>;
|
|
437
|
+
}
|
|
438
|
+
/** Numeric cell — right-aligned, tabular numbers */
|
|
439
|
+
interface CellNumericProps extends CellTypeBaseProps {
|
|
440
|
+
/** Locale for formatting */
|
|
441
|
+
locale?: string;
|
|
442
|
+
/** Unit suffix (e.g. "ms", "KB", "%") */
|
|
443
|
+
unit?: string;
|
|
444
|
+
/** Number of decimal places */
|
|
445
|
+
decimals?: number;
|
|
446
|
+
/** Show +/- coloring */
|
|
447
|
+
colorize?: boolean;
|
|
448
|
+
}
|
|
449
|
+
/** Rating cell — star or dot display */
|
|
450
|
+
interface CellRatingProps extends CellTypeBaseProps {
|
|
451
|
+
/** Maximum rating value (default: 5) */
|
|
452
|
+
max?: number;
|
|
453
|
+
/** Display character (default: "★") */
|
|
454
|
+
character?: string;
|
|
455
|
+
/** Empty character (default: "☆") */
|
|
456
|
+
emptyCharacter?: string;
|
|
457
|
+
}
|
|
458
|
+
/** Boolean cell — visual true/false indicator */
|
|
459
|
+
interface CellBooleanProps extends CellTypeBaseProps {
|
|
460
|
+
/** Label for true value */
|
|
461
|
+
trueLabel?: string;
|
|
462
|
+
/** Label for false value */
|
|
463
|
+
falseLabel?: string;
|
|
464
|
+
/** Display mode */
|
|
465
|
+
mode?: 'dot' | 'badge' | 'icon';
|
|
466
|
+
}
|
|
467
|
+
/** Progress cell — inline progress bar */
|
|
468
|
+
interface CellProgressProps extends CellTypeBaseProps {
|
|
469
|
+
/** Maximum value (default: 100) */
|
|
470
|
+
max?: number;
|
|
471
|
+
/** Color variant */
|
|
472
|
+
variant?: 'default' | 'accent' | 'success' | 'warning' | 'danger';
|
|
473
|
+
/** Show percentage label */
|
|
474
|
+
showLabel?: boolean;
|
|
475
|
+
}
|
|
476
|
+
/** Link cell — clickable URL or text */
|
|
477
|
+
interface CellLinkProps extends CellTypeBaseProps {
|
|
478
|
+
/** URL to link to (if not the cell value itself) */
|
|
479
|
+
href?: string | ((value: unknown) => string);
|
|
480
|
+
/** Open in new tab */
|
|
481
|
+
external?: boolean;
|
|
482
|
+
}
|
|
483
|
+
/** Date cell — formatted dates */
|
|
484
|
+
interface CellDateProps extends CellTypeBaseProps {
|
|
485
|
+
/** Intl.DateTimeFormat options or preset name */
|
|
486
|
+
format?: 'short' | 'medium' | 'long' | 'relative' | Intl.DateTimeFormatOptions;
|
|
487
|
+
/** Locale for formatting */
|
|
488
|
+
locale?: string;
|
|
489
|
+
}
|
|
490
|
+
|
|
491
|
+
interface AutoMeasurementsOptions<TData extends RowData> {
|
|
492
|
+
/** Columns to measure — usually the same array passed into `useTable`. */
|
|
493
|
+
columns: ColumnDef<TData, any>[];
|
|
494
|
+
/**
|
|
495
|
+
* Default recipe for columns that don't declare a `cellType` or
|
|
496
|
+
* `measureRecipe`. This is the theme's body text style.
|
|
497
|
+
*/
|
|
498
|
+
defaultRecipe: CellMeasureRecipe;
|
|
499
|
+
/**
|
|
500
|
+
* Override how a column's pixel width is determined. Defaults to
|
|
501
|
+
* `column.size ?? 150`. Provide this when you want auto-measurement to
|
|
502
|
+
* track live column resizing — e.g. `(col) => table.getColumn(col.id)?.getSize() ?? 150`.
|
|
503
|
+
*/
|
|
504
|
+
getColumnWidth?: (column: ColumnDef<TData, any>) => number;
|
|
505
|
+
/**
|
|
506
|
+
* Optional filter — return false to skip a column entirely (e.g. select
|
|
507
|
+
* checkboxes, action buttons). Defaults to skipping columns whose id
|
|
508
|
+
* starts with `_` or matches common non-data ids.
|
|
509
|
+
*/
|
|
510
|
+
shouldMeasureColumn?: (column: ColumnDef<TData, any>) => boolean;
|
|
511
|
+
}
|
|
512
|
+
/**
|
|
513
|
+
* Resolve the measure recipe for a single column, walking the precedence
|
|
514
|
+
* chain (per-column override → cellType built-in → default).
|
|
515
|
+
*/
|
|
516
|
+
declare function resolveMeasureRecipe<TData extends RowData>(column: ColumnDef<TData, any>, defaultRecipe: CellMeasureRecipe): CellMeasureRecipe;
|
|
517
|
+
/**
|
|
518
|
+
* Build a `CellMeasurement[]` from columns, suitable for handing to
|
|
519
|
+
* `usePretextMeasurement`. Pure derivation — no table instance required.
|
|
520
|
+
*/
|
|
521
|
+
declare function useAutoMeasurements<TData extends RowData>({ columns, defaultRecipe, getColumnWidth, shouldMeasureColumn, }: AutoMeasurementsOptions<TData>): CellMeasurement[];
|
|
522
|
+
|
|
523
|
+
interface UseTableRowHeightsOptions<TData extends RowData> {
|
|
524
|
+
/** Row data being measured. */
|
|
525
|
+
data: TData[];
|
|
526
|
+
/** Column definitions (the same array passed into `useTable`). */
|
|
527
|
+
columns: ColumnDef<TData, any>[];
|
|
528
|
+
/**
|
|
529
|
+
* Default text recipe for columns without an explicit `cellType` /
|
|
530
|
+
* `measureRecipe`. Should reflect the active theme's body text style.
|
|
531
|
+
*/
|
|
532
|
+
defaultRecipe?: CellMeasureRecipe;
|
|
533
|
+
/**
|
|
534
|
+
* Override how a column's pixel width is determined. Defaults to
|
|
535
|
+
* `column.size ?? 150`. Provide this when you want pretext to track
|
|
536
|
+
* live column resizing — e.g. `(c) => table.getColumn(c.id)?.getSize() ?? 150`.
|
|
537
|
+
*/
|
|
538
|
+
getColumnWidth?: (column: ColumnDef<TData, any>) => number;
|
|
539
|
+
/** Minimum row height in px (default: 36). */
|
|
540
|
+
minRowHeight?: number;
|
|
541
|
+
/** Disable measurement entirely (e.g. when virtualization is off). */
|
|
542
|
+
enabled?: boolean;
|
|
543
|
+
}
|
|
544
|
+
/** Sensible default that matches `@zvndev/yable-themes` `tokens.css`. */
|
|
545
|
+
declare const DEFAULT_TEXT_RECIPE: CellMeasureRecipe;
|
|
546
|
+
/**
|
|
547
|
+
* Compute exact pixel row heights for the entire dataset using Pretext,
|
|
548
|
+
* deriving per-column measurement specs from each column's declarative
|
|
549
|
+
* `cellType` (or explicit `measureRecipe` override). No font strings,
|
|
550
|
+
* line heights, or paddings to hand-write.
|
|
551
|
+
*
|
|
552
|
+
* Returns the same shape as `usePretextMeasurement` plus the resolved
|
|
553
|
+
* `measurements` array for debugging / inspection.
|
|
554
|
+
*/
|
|
555
|
+
declare function useTableRowHeights<TData extends RowData>({ data, columns, defaultRecipe, getColumnWidth, minRowHeight, enabled, }: UseTableRowHeightsOptions<TData>): UsePretextMeasurementResult & {
|
|
556
|
+
measurements: CellMeasurement[];
|
|
557
|
+
};
|
|
558
|
+
|
|
559
|
+
/**
|
|
560
|
+
* Look up the measure recipe for a built-in cell type. Returns `undefined`
|
|
561
|
+
* for unknown types so callers can fall back to a default text recipe.
|
|
562
|
+
*/
|
|
563
|
+
declare function getMeasureRecipeForCellType(cellType: string): CellMeasureRecipe | undefined;
|
|
564
|
+
/** Read-only access to the registered cell type ids — useful for tooling. */
|
|
565
|
+
declare function getRegisteredCellTypes(): readonly string[];
|
|
566
|
+
|
|
567
|
+
declare const TableProvider: React$1.Provider<Table$1<any> | null>;
|
|
568
|
+
declare function useTableContext<TData extends RowData>(): Table$1<TData>;
|
|
569
|
+
|
|
570
|
+
/**
|
|
571
|
+
* Project-wide default table and column options.
|
|
572
|
+
*
|
|
573
|
+
* Wrap your app (or a subtree) in `<YableProvider>` so every `<Table>` and
|
|
574
|
+
* `useTable` call inherits these defaults without repeating config.
|
|
575
|
+
*
|
|
576
|
+
* Component-level and hook-level values always take precedence over provider
|
|
577
|
+
* defaults.
|
|
578
|
+
*/
|
|
579
|
+
interface YableDefaults {
|
|
580
|
+
/** Layered project config with default and named table/cell profiles */
|
|
581
|
+
config?: YableConfig;
|
|
582
|
+
/** Named config profile used by descendants unless overridden */
|
|
583
|
+
tableProfile?: string;
|
|
584
|
+
/** Default props applied to every `<Table>` in the subtree */
|
|
585
|
+
tableProps?: Partial<Pick<TableProps<any>, 'striped' | 'bordered' | 'compact' | 'stickyHeader' | 'theme' | 'direction' | 'ariaLabel'>>;
|
|
586
|
+
/** Default column definition merged under every table's own `defaultColumnDef` */
|
|
587
|
+
defaultColumnDef?: Partial<ColumnDefBase<any, unknown>> & Partial<ColumnDefExtensions<any, unknown>>;
|
|
588
|
+
}
|
|
589
|
+
/**
|
|
590
|
+
* Read the nearest `YableProvider` defaults.
|
|
591
|
+
*
|
|
592
|
+
* Safe to call outside a provider — returns an empty object.
|
|
593
|
+
*/
|
|
594
|
+
declare function useYableDefaults(): YableDefaults;
|
|
595
|
+
/**
|
|
596
|
+
* Provide project-wide defaults for all Yable tables in a subtree.
|
|
597
|
+
*
|
|
598
|
+
* @example
|
|
599
|
+
* ```tsx
|
|
600
|
+
* <YableProvider
|
|
601
|
+
* striped
|
|
602
|
+
* stickyHeader
|
|
603
|
+
* theme="stripe"
|
|
604
|
+
* defaultColumnDef={{ enableSorting: true }}
|
|
605
|
+
* >
|
|
606
|
+
* <EmployeeTable />
|
|
607
|
+
* <ProjectTable />
|
|
608
|
+
* </YableProvider>
|
|
609
|
+
* ```
|
|
610
|
+
*/
|
|
611
|
+
declare function YableProvider({ children, config, tableProfile, defaultColumnDef, striped, stickyHeader, bordered, compact, theme, direction, ariaLabel, }: YableDefaults & {
|
|
612
|
+
children: ReactNode;
|
|
613
|
+
striped?: boolean;
|
|
614
|
+
stickyHeader?: boolean;
|
|
615
|
+
bordered?: boolean;
|
|
616
|
+
compact?: boolean;
|
|
617
|
+
theme?: string;
|
|
618
|
+
direction?: 'ltr' | 'rtl';
|
|
619
|
+
ariaLabel?: string;
|
|
620
|
+
}): react_jsx_runtime.JSX.Element;
|
|
621
|
+
|
|
622
|
+
declare function Table<TData extends RowData>({ table, stickyHeader: stickyHeaderProp, striped: stripedProp, bordered: borderedProp, compact: compactProp, theme: themeProp, config, configProfile, clickableRows, footer, loading, loadingComponent, loadingText, emptyMessage, emptyComponent, emptyIcon, emptyDetail, renderEmpty, renderLoading, children, className, direction: directionProp, statusBar, statusBarPanels, sidebar, sidebarPanels, defaultSidebarPanel, floatingFilters, columnVirtualization, columnVirtualizationOverscan, ariaLabel: ariaLabelProp, ...rest }: TableProps<TData>): react_jsx_runtime.JSX.Element;
|
|
623
|
+
|
|
624
|
+
interface TableHeaderProps<TData extends RowData> {
|
|
625
|
+
table: Table$1<TData>;
|
|
626
|
+
floatingFilters?: boolean;
|
|
627
|
+
}
|
|
628
|
+
declare function TableHeader<TData extends RowData>({ table, floatingFilters, }: TableHeaderProps<TData>): react_jsx_runtime.JSX.Element;
|
|
629
|
+
|
|
630
|
+
interface TableBodyProps<TData extends RowData> {
|
|
631
|
+
table: Table$1<TData>;
|
|
632
|
+
clickableRows?: boolean;
|
|
633
|
+
colgroup?: React__default.ReactNode;
|
|
634
|
+
/** Stable mousedown handler for the fill handle, lifted from `useFillHandle`. */
|
|
635
|
+
onFillHandleMouseDown?: (rowIndex: number, columnIndex: number, e: React__default.MouseEvent) => void;
|
|
636
|
+
}
|
|
637
|
+
declare function TableBody<TData extends RowData>({ table, clickableRows, colgroup, onFillHandleMouseDown, }: TableBodyProps<TData>): react_jsx_runtime.JSX.Element;
|
|
638
|
+
|
|
639
|
+
interface TableCellProps<TData extends RowData> {
|
|
640
|
+
cell: Cell<TData, unknown>;
|
|
641
|
+
table: Table$1<TData>;
|
|
642
|
+
rowIndex: number;
|
|
643
|
+
columnIndex: number;
|
|
644
|
+
isFocused: boolean;
|
|
645
|
+
isTabStop: boolean;
|
|
646
|
+
/** Mousedown handler for the fill handle; when present and the table has
|
|
647
|
+
* `enableFillHandle`, the focused cell renders a drag-to-fill corner. */
|
|
648
|
+
onFillHandleMouseDown?: (rowIndex: number, columnIndex: number, e: React__default.MouseEvent) => void;
|
|
649
|
+
}
|
|
650
|
+
declare function TableCell<TData extends RowData>({ cell, table, rowIndex, columnIndex, isFocused, isTabStop, onFillHandleMouseDown, }: TableCellProps<TData>): react_jsx_runtime.JSX.Element;
|
|
651
|
+
|
|
652
|
+
interface TableFooterProps<TData extends RowData> {
|
|
653
|
+
table: Table$1<TData>;
|
|
654
|
+
}
|
|
655
|
+
declare function TableFooter<TData extends RowData>({ table }: TableFooterProps<TData>): react_jsx_runtime.JSX.Element | null;
|
|
656
|
+
|
|
657
|
+
interface PaginationProps<TData extends RowData> {
|
|
658
|
+
table: Table$1<TData>;
|
|
659
|
+
/** Show page size selector */
|
|
660
|
+
showPageSize?: boolean;
|
|
661
|
+
/** Available page sizes */
|
|
662
|
+
pageSizes?: number[];
|
|
663
|
+
/** Show row count info */
|
|
664
|
+
showInfo?: boolean;
|
|
665
|
+
/** Show first/last buttons */
|
|
666
|
+
showFirstLast?: boolean;
|
|
667
|
+
}
|
|
668
|
+
declare function Pagination<TData extends RowData>({ table, showPageSize, pageSizes, showInfo, showFirstLast, }: PaginationProps<TData>): react_jsx_runtime.JSX.Element;
|
|
669
|
+
|
|
670
|
+
interface GlobalFilterProps<TData extends RowData> {
|
|
671
|
+
table: Table$1<TData>;
|
|
672
|
+
/** Placeholder text */
|
|
673
|
+
placeholder?: string;
|
|
674
|
+
/** Debounce delay in ms (0 = no debounce) */
|
|
675
|
+
debounce?: number;
|
|
676
|
+
/** Custom class name */
|
|
677
|
+
className?: string;
|
|
678
|
+
}
|
|
679
|
+
declare function GlobalFilter<TData extends RowData>({ table, placeholder, debounce, className, }: GlobalFilterProps<TData>): react_jsx_runtime.JSX.Element;
|
|
680
|
+
|
|
681
|
+
interface FloatingFilterProps<TData extends RowData> {
|
|
682
|
+
column: Column<TData, unknown>;
|
|
683
|
+
}
|
|
684
|
+
declare function FloatingFilter<TData extends RowData>({ column }: FloatingFilterProps<TData>): react_jsx_runtime.JSX.Element;
|
|
685
|
+
|
|
686
|
+
interface SetFilterProps<TData extends RowData> {
|
|
687
|
+
column: Column<TData, unknown>;
|
|
688
|
+
className?: string;
|
|
689
|
+
}
|
|
690
|
+
declare function SetFilter<TData extends RowData>({ column, className }: SetFilterProps<TData>): react_jsx_runtime.JSX.Element;
|
|
691
|
+
|
|
692
|
+
interface SortIndicatorProps {
|
|
693
|
+
direction: SortDirection | false;
|
|
694
|
+
index?: number;
|
|
695
|
+
}
|
|
696
|
+
declare function SortIndicator({ direction, index }: SortIndicatorProps): react_jsx_runtime.JSX.Element;
|
|
697
|
+
|
|
698
|
+
interface ErrorBoundaryProps {
|
|
699
|
+
/** Callback fired when an error is caught */
|
|
700
|
+
onError?: (error: Error, errorInfo: React__default.ErrorInfo) => void;
|
|
701
|
+
/** When any value in this array changes, the boundary resets */
|
|
702
|
+
resetKeys?: unknown[];
|
|
703
|
+
/** Custom fallback to render when an error is caught */
|
|
704
|
+
fallback?: React__default.ReactNode;
|
|
705
|
+
children: React__default.ReactNode;
|
|
706
|
+
}
|
|
707
|
+
interface ErrorBoundaryState {
|
|
708
|
+
hasError: boolean;
|
|
709
|
+
error: Error | null;
|
|
710
|
+
}
|
|
711
|
+
/**
|
|
712
|
+
* Catches rendering errors in child components so one bad cell or row
|
|
713
|
+
* does not crash the entire table. Logs errors and provides a fallback UI.
|
|
714
|
+
*/
|
|
715
|
+
declare class ErrorBoundary extends React__default.Component<ErrorBoundaryProps, ErrorBoundaryState> {
|
|
716
|
+
constructor(props: ErrorBoundaryProps);
|
|
717
|
+
static getDerivedStateFromError(error: Error): ErrorBoundaryState;
|
|
718
|
+
componentDidCatch(error: Error, errorInfo: React__default.ErrorInfo): void;
|
|
719
|
+
componentDidUpdate(prevProps: ErrorBoundaryProps): void;
|
|
720
|
+
render(): React__default.ReactNode;
|
|
721
|
+
}
|
|
722
|
+
/**
|
|
723
|
+
* Lightweight boundary specifically for table cells.
|
|
724
|
+
* Renders inline so it does not break table layout.
|
|
725
|
+
*/
|
|
726
|
+
declare class CellErrorBoundary extends React__default.Component<{
|
|
727
|
+
onError?: (error: Error, errorInfo: React__default.ErrorInfo) => void;
|
|
728
|
+
resetKeys?: unknown[];
|
|
729
|
+
children: React__default.ReactNode;
|
|
730
|
+
}, ErrorBoundaryState> {
|
|
731
|
+
constructor(props: {
|
|
732
|
+
onError?: (error: Error, errorInfo: React__default.ErrorInfo) => void;
|
|
733
|
+
resetKeys?: unknown[];
|
|
734
|
+
children: React__default.ReactNode;
|
|
735
|
+
});
|
|
736
|
+
static getDerivedStateFromError(error: Error): ErrorBoundaryState;
|
|
737
|
+
componentDidCatch(error: Error, errorInfo: React__default.ErrorInfo): void;
|
|
738
|
+
componentDidUpdate(prevProps: {
|
|
739
|
+
resetKeys?: unknown[];
|
|
740
|
+
}): void;
|
|
741
|
+
render(): React__default.ReactNode;
|
|
742
|
+
}
|
|
743
|
+
|
|
744
|
+
interface CellInputProps<TData extends RowData, TValue> {
|
|
745
|
+
context: CellContext<TData, TValue>;
|
|
746
|
+
type?: 'text' | 'number' | 'email' | 'url' | 'tel';
|
|
747
|
+
placeholder?: string;
|
|
748
|
+
inline?: boolean;
|
|
749
|
+
autoFocus?: boolean;
|
|
750
|
+
className?: string;
|
|
751
|
+
}
|
|
752
|
+
declare function CellInput<TData extends RowData, TValue>({ context, type, placeholder, inline, autoFocus, className, }: CellInputProps<TData, TValue>): react_jsx_runtime.JSX.Element;
|
|
753
|
+
|
|
754
|
+
interface SelectOption {
|
|
755
|
+
label: string;
|
|
756
|
+
value: string | number;
|
|
757
|
+
}
|
|
758
|
+
interface CellSelectProps<TData extends RowData, TValue> {
|
|
759
|
+
context: CellContext<TData, TValue>;
|
|
760
|
+
options: SelectOption[];
|
|
761
|
+
placeholder?: string;
|
|
762
|
+
className?: string;
|
|
763
|
+
}
|
|
764
|
+
declare function CellSelect<TData extends RowData, TValue>({ context, options, placeholder, className, }: CellSelectProps<TData, TValue>): react_jsx_runtime.JSX.Element;
|
|
765
|
+
|
|
766
|
+
interface CellCheckboxProps<TData extends RowData, TValue> {
|
|
767
|
+
context: CellContext<TData, TValue>;
|
|
768
|
+
className?: string;
|
|
769
|
+
}
|
|
770
|
+
declare function CellCheckbox<TData extends RowData, TValue>({ context, className, }: CellCheckboxProps<TData, TValue>): react_jsx_runtime.JSX.Element;
|
|
771
|
+
|
|
772
|
+
interface CellToggleProps<TData extends RowData, TValue> {
|
|
773
|
+
context: CellContext<TData, TValue>;
|
|
774
|
+
className?: string;
|
|
775
|
+
}
|
|
776
|
+
declare function CellToggle<TData extends RowData, TValue>({ context, className, }: CellToggleProps<TData, TValue>): react_jsx_runtime.JSX.Element;
|
|
777
|
+
|
|
778
|
+
interface CellDatePickerProps<TData extends RowData, TValue> {
|
|
779
|
+
context: CellContext<TData, TValue>;
|
|
780
|
+
type?: 'date' | 'datetime-local' | 'time';
|
|
781
|
+
className?: string;
|
|
782
|
+
}
|
|
783
|
+
declare function CellDatePicker<TData extends RowData, TValue>({ context, type, className, }: CellDatePickerProps<TData, TValue>): react_jsx_runtime.JSX.Element;
|
|
784
|
+
|
|
785
|
+
declare function CellBadge<TData extends RowData, TValue>({ context, variant, appearance, className, }: CellBadgeProps & {
|
|
786
|
+
context: CellContext<TData, TValue>;
|
|
787
|
+
}): react_jsx_runtime.JSX.Element | null;
|
|
788
|
+
declare namespace CellBadge {
|
|
789
|
+
var displayName: string;
|
|
790
|
+
}
|
|
791
|
+
|
|
792
|
+
declare function CellCurrency<TData extends RowData, TValue>({ context, currency, locale, decimals, colorize, className, }: CellCurrencyProps & {
|
|
793
|
+
context: CellContext<TData, TValue>;
|
|
794
|
+
}): react_jsx_runtime.JSX.Element | null;
|
|
795
|
+
declare namespace CellCurrency {
|
|
796
|
+
var displayName: string;
|
|
797
|
+
}
|
|
798
|
+
|
|
799
|
+
declare function CellStatus<TData extends RowData, TValue>({ context, colorMap, className, }: CellStatusProps & {
|
|
800
|
+
context: CellContext<TData, TValue>;
|
|
801
|
+
}): react_jsx_runtime.JSX.Element | null;
|
|
802
|
+
declare namespace CellStatus {
|
|
803
|
+
var displayName: string;
|
|
804
|
+
}
|
|
805
|
+
|
|
806
|
+
declare function CellNumeric<TData extends RowData, TValue>({ context, locale, unit, decimals, colorize, className, }: CellNumericProps & {
|
|
807
|
+
context: CellContext<TData, TValue>;
|
|
808
|
+
}): react_jsx_runtime.JSX.Element | null;
|
|
809
|
+
declare namespace CellNumeric {
|
|
810
|
+
var displayName: string;
|
|
811
|
+
}
|
|
812
|
+
|
|
813
|
+
declare function CellRating<TData extends RowData, TValue>({ context, max, character, emptyCharacter, className, }: CellRatingProps & {
|
|
814
|
+
context: CellContext<TData, TValue>;
|
|
815
|
+
}): react_jsx_runtime.JSX.Element | null;
|
|
816
|
+
declare namespace CellRating {
|
|
817
|
+
var displayName: string;
|
|
818
|
+
}
|
|
819
|
+
|
|
820
|
+
declare function CellBoolean<TData extends RowData, TValue>({ context, trueLabel, falseLabel, mode, className, }: CellBooleanProps & {
|
|
821
|
+
context: CellContext<TData, TValue>;
|
|
822
|
+
}): react_jsx_runtime.JSX.Element;
|
|
823
|
+
declare namespace CellBoolean {
|
|
824
|
+
var displayName: string;
|
|
825
|
+
}
|
|
826
|
+
|
|
827
|
+
declare function CellProgress<TData extends RowData, TValue>({ context, max, variant, showLabel, className, }: CellProgressProps & {
|
|
828
|
+
context: CellContext<TData, TValue>;
|
|
829
|
+
}): react_jsx_runtime.JSX.Element | null;
|
|
830
|
+
declare namespace CellProgress {
|
|
831
|
+
var displayName: string;
|
|
832
|
+
}
|
|
833
|
+
|
|
834
|
+
declare function CellDate<TData extends RowData, TValue>({ context, format, locale, className, }: CellDateProps & {
|
|
835
|
+
context: CellContext<TData, TValue>;
|
|
836
|
+
}): react_jsx_runtime.JSX.Element | null;
|
|
837
|
+
declare namespace CellDate {
|
|
838
|
+
var displayName: string;
|
|
839
|
+
}
|
|
840
|
+
|
|
841
|
+
declare function CellLink<TData extends RowData, TValue>({ context, href, external, className, }: CellLinkProps & {
|
|
842
|
+
context: CellContext<TData, TValue>;
|
|
843
|
+
}): react_jsx_runtime.JSX.Element | null;
|
|
844
|
+
declare namespace CellLink {
|
|
845
|
+
var displayName: string;
|
|
846
|
+
}
|
|
847
|
+
|
|
848
|
+
interface UseClipboardOptions extends ClipboardOptions {
|
|
849
|
+
/** Whether clipboard is enabled. Default: true */
|
|
850
|
+
enabled?: boolean;
|
|
851
|
+
/** The container element ref to attach listeners to */
|
|
852
|
+
containerRef?: React.RefObject<HTMLElement | null>;
|
|
853
|
+
/** Callback when data is copied */
|
|
854
|
+
onCopy?: (text: string) => void;
|
|
855
|
+
/** Callback when data is cut */
|
|
856
|
+
onCut?: (text: string) => void;
|
|
857
|
+
/** Callback when data is pasted */
|
|
858
|
+
onPaste?: (text: string) => void;
|
|
859
|
+
}
|
|
860
|
+
/**
|
|
861
|
+
* React hook that attaches Ctrl+C / Ctrl+X / Ctrl+V keyboard listeners
|
|
862
|
+
* to the table container for clipboard operations.
|
|
863
|
+
*/
|
|
864
|
+
declare function useClipboard<TData extends RowData>(table: Table$1<TData>, options?: UseClipboardOptions): void;
|
|
865
|
+
|
|
866
|
+
interface UseKeyboardNavigationOptions {
|
|
867
|
+
/** Whether keyboard navigation is enabled. Default: true */
|
|
868
|
+
enabled?: boolean;
|
|
869
|
+
/** The table container element ref */
|
|
870
|
+
containerRef?: React.RefObject<HTMLElement | null>;
|
|
871
|
+
}
|
|
872
|
+
declare function useKeyboardNavigation<TData extends RowData>(table: Table$1<TData>, options?: UseKeyboardNavigationOptions): void;
|
|
873
|
+
|
|
874
|
+
interface FillHandleDragState {
|
|
875
|
+
isDragging: boolean;
|
|
876
|
+
sourceCell: {
|
|
877
|
+
rowIndex: number;
|
|
878
|
+
columnIndex: number;
|
|
879
|
+
} | null;
|
|
880
|
+
currentCell: {
|
|
881
|
+
rowIndex: number;
|
|
882
|
+
columnIndex: number;
|
|
883
|
+
} | null;
|
|
884
|
+
}
|
|
885
|
+
interface UseFillHandleOptions {
|
|
886
|
+
/** Whether fill handle is enabled. Default: true */
|
|
887
|
+
enabled?: boolean;
|
|
888
|
+
}
|
|
889
|
+
interface UseFillHandleReturn {
|
|
890
|
+
dragState: FillHandleDragState;
|
|
891
|
+
onFillHandleMouseDown: (rowIndex: number, columnIndex: number, e: React.MouseEvent) => void;
|
|
892
|
+
}
|
|
893
|
+
/**
|
|
894
|
+
* React hook for fill handle drag tracking.
|
|
895
|
+
* Returns drag state and a mousedown handler to attach to the FillHandle component.
|
|
896
|
+
*/
|
|
897
|
+
declare function useFillHandle<TData extends RowData>(table: Table$1<TData>, options?: UseFillHandleOptions): UseFillHandleReturn;
|
|
898
|
+
|
|
899
|
+
interface FillHandleProps {
|
|
900
|
+
/** Row index of the cell this handle belongs to */
|
|
901
|
+
rowIndex: number;
|
|
902
|
+
/** Column index of the cell this handle belongs to */
|
|
903
|
+
columnIndex: number;
|
|
904
|
+
/** Callback when the user starts dragging the fill handle */
|
|
905
|
+
onMouseDown: (rowIndex: number, columnIndex: number, e: React__default.MouseEvent) => void;
|
|
906
|
+
}
|
|
907
|
+
/**
|
|
908
|
+
* Renders a small accent-colored square at the bottom-right corner of a cell.
|
|
909
|
+
* The user drags this to auto-fill adjacent cells (like Excel/Google Sheets).
|
|
910
|
+
*/
|
|
911
|
+
declare function FillHandle({ rowIndex, columnIndex, onMouseDown, }: FillHandleProps): react_jsx_runtime.JSX.Element;
|
|
912
|
+
|
|
913
|
+
interface DragHandleProps {
|
|
914
|
+
/** Called when drag starts on this handle */
|
|
915
|
+
onDragStart: (e: React__default.DragEvent) => void;
|
|
916
|
+
/** Whether this handle is currently part of a dragging row */
|
|
917
|
+
isDragging?: boolean;
|
|
918
|
+
/** Accessible label */
|
|
919
|
+
ariaLabel?: string;
|
|
920
|
+
/** Additional className */
|
|
921
|
+
className?: string;
|
|
922
|
+
}
|
|
923
|
+
declare function DragHandle({ onDragStart, isDragging, ariaLabel, className, }: DragHandleProps): react_jsx_runtime.JSX.Element;
|
|
924
|
+
|
|
925
|
+
interface UseRowDragOptions<TData extends RowData> {
|
|
926
|
+
table: Table$1<TData>;
|
|
927
|
+
/** Current data array */
|
|
928
|
+
data: TData[];
|
|
929
|
+
/** Callback to set data after reorder */
|
|
930
|
+
onDataChange: (data: TData[]) => void;
|
|
931
|
+
/** Optional callback when reorder completes */
|
|
932
|
+
onReorder?: (event: {
|
|
933
|
+
fromIndex: number;
|
|
934
|
+
toIndex: number;
|
|
935
|
+
rowId: string;
|
|
936
|
+
}) => void;
|
|
937
|
+
}
|
|
938
|
+
interface UseRowDragReturn {
|
|
939
|
+
/** Current drag state */
|
|
940
|
+
dragState: RowDragState;
|
|
941
|
+
/** Props to spread on a draggable row */
|
|
942
|
+
getRowDragProps: (rowId: string, rowIndex: number) => {
|
|
943
|
+
draggable: boolean;
|
|
944
|
+
onDragStart: (e: React.DragEvent) => void;
|
|
945
|
+
onDragOver: (e: React.DragEvent) => void;
|
|
946
|
+
onDragLeave: (e: React.DragEvent) => void;
|
|
947
|
+
onDrop: (e: React.DragEvent) => void;
|
|
948
|
+
onDragEnd: (e: React.DragEvent) => void;
|
|
949
|
+
'data-dragging': boolean | undefined;
|
|
950
|
+
'data-drag-over': string | undefined;
|
|
951
|
+
};
|
|
952
|
+
/** Props to spread on a drag handle element */
|
|
953
|
+
getDragHandleProps: (rowId: string) => {
|
|
954
|
+
onDragStart: (e: React.DragEvent) => void;
|
|
955
|
+
};
|
|
956
|
+
}
|
|
957
|
+
declare function useRowDrag<TData extends RowData>({ table, data, onDataChange, onReorder, }: UseRowDragOptions<TData>): UseRowDragReturn;
|
|
958
|
+
|
|
959
|
+
interface TreeToggleProps<TData extends RowData> {
|
|
960
|
+
row: Row<TData>;
|
|
961
|
+
/** Indentation width per level in pixels */
|
|
962
|
+
indentWidth?: number;
|
|
963
|
+
/** Whether to show the toggle icon (false for leaf nodes) */
|
|
964
|
+
showToggle?: boolean;
|
|
965
|
+
/** Optional custom toggle icon */
|
|
966
|
+
renderIcon?: (props: {
|
|
967
|
+
isExpanded: boolean;
|
|
968
|
+
isLeaf: boolean;
|
|
969
|
+
}) => React__default.ReactNode;
|
|
970
|
+
}
|
|
971
|
+
declare function TreeToggle<TData extends RowData>({ row, indentWidth, showToggle, renderIcon, }: TreeToggleProps<TData>): react_jsx_runtime.JSX.Element;
|
|
972
|
+
|
|
973
|
+
interface MasterDetailProps<TData extends RowData> {
|
|
974
|
+
row: Row<TData>;
|
|
975
|
+
table: Table$1<TData>;
|
|
976
|
+
/** Number of columns to span (full table width) */
|
|
977
|
+
colSpan: number;
|
|
978
|
+
/** Custom render function for the detail panel */
|
|
979
|
+
renderDetailPanel?: (row: Row<TData>) => React__default.ReactNode;
|
|
980
|
+
/** Optional animation class */
|
|
981
|
+
animationClass?: string;
|
|
982
|
+
}
|
|
983
|
+
declare function MasterDetail<TData extends RowData>({ row, table, colSpan, renderDetailPanel, animationClass, }: MasterDetailProps<TData>): react_jsx_runtime.JSX.Element | null;
|
|
984
|
+
|
|
985
|
+
interface ExpandIconProps {
|
|
986
|
+
/** Whether the row is expanded */
|
|
987
|
+
isExpanded: boolean;
|
|
988
|
+
/** Click handler to toggle expansion */
|
|
989
|
+
onClick: (e: React__default.MouseEvent) => void;
|
|
990
|
+
/** Accessible label */
|
|
991
|
+
ariaLabel?: string;
|
|
992
|
+
/** Size of the icon in pixels */
|
|
993
|
+
size?: number;
|
|
994
|
+
/** Additional className */
|
|
995
|
+
className?: string;
|
|
996
|
+
}
|
|
997
|
+
declare function ExpandIcon({ isExpanded, onClick, ariaLabel, size, className, }: ExpandIconProps): react_jsx_runtime.JSX.Element;
|
|
998
|
+
|
|
999
|
+
interface PivotFieldItem {
|
|
1000
|
+
field: string;
|
|
1001
|
+
label: string;
|
|
1002
|
+
}
|
|
1003
|
+
interface PivotValueItem {
|
|
1004
|
+
field: string;
|
|
1005
|
+
label: string;
|
|
1006
|
+
aggregation: string;
|
|
1007
|
+
}
|
|
1008
|
+
interface PivotConfigProps {
|
|
1009
|
+
/** Available fields that can be dragged into zones */
|
|
1010
|
+
availableFields: PivotFieldItem[];
|
|
1011
|
+
/** Currently configured row fields */
|
|
1012
|
+
rowFields: PivotFieldItem[];
|
|
1013
|
+
/** Currently configured column fields */
|
|
1014
|
+
columnFields: PivotFieldItem[];
|
|
1015
|
+
/** Currently configured value fields */
|
|
1016
|
+
valueFields: PivotValueItem[];
|
|
1017
|
+
/** Callback when row fields change */
|
|
1018
|
+
onRowFieldsChange: (fields: PivotFieldItem[]) => void;
|
|
1019
|
+
/** Callback when column fields change */
|
|
1020
|
+
onColumnFieldsChange: (fields: PivotFieldItem[]) => void;
|
|
1021
|
+
/** Callback when value fields change */
|
|
1022
|
+
onValueFieldsChange: (fields: PivotValueItem[]) => void;
|
|
1023
|
+
/** Available aggregation functions */
|
|
1024
|
+
aggregationOptions?: {
|
|
1025
|
+
value: string;
|
|
1026
|
+
label: string;
|
|
1027
|
+
}[];
|
|
1028
|
+
/** Additional className */
|
|
1029
|
+
className?: string;
|
|
1030
|
+
}
|
|
1031
|
+
declare function PivotConfigPanel({ availableFields, rowFields, columnFields, valueFields, onRowFieldsChange, onColumnFieldsChange, onValueFieldsChange, aggregationOptions, className, }: PivotConfigProps): react_jsx_runtime.JSX.Element;
|
|
1032
|
+
|
|
1033
|
+
interface LoadingOverlayProps {
|
|
1034
|
+
/** Whether loading is active */
|
|
1035
|
+
loading?: boolean;
|
|
1036
|
+
/** Custom loading component to render instead of default spinner */
|
|
1037
|
+
loadingComponent?: React__default.ReactNode;
|
|
1038
|
+
/** Loading text shown below the spinner */
|
|
1039
|
+
loadingText?: string;
|
|
1040
|
+
}
|
|
1041
|
+
declare function LoadingOverlay({ loading, loadingComponent, loadingText, }: LoadingOverlayProps): react_jsx_runtime.JSX.Element | null;
|
|
1042
|
+
|
|
1043
|
+
interface NoRowsOverlayProps {
|
|
1044
|
+
/** Custom empty component */
|
|
1045
|
+
emptyComponent?: React__default.ReactNode;
|
|
1046
|
+
/** Custom icon for empty state */
|
|
1047
|
+
emptyIcon?: React__default.ReactNode;
|
|
1048
|
+
/** Main empty message */
|
|
1049
|
+
emptyMessage?: string;
|
|
1050
|
+
/** Secondary detail text */
|
|
1051
|
+
emptyDetail?: string;
|
|
1052
|
+
/** Whether results are filtered (changes icon/message) */
|
|
1053
|
+
isFiltered?: boolean;
|
|
1054
|
+
}
|
|
1055
|
+
declare function NoRowsOverlay({ emptyComponent, emptyIcon, emptyMessage, emptyDetail, isFiltered, }: NoRowsOverlayProps): react_jsx_runtime.JSX.Element;
|
|
1056
|
+
|
|
1057
|
+
interface TooltipPosition {
|
|
1058
|
+
x: number;
|
|
1059
|
+
y: number;
|
|
1060
|
+
placement: 'top' | 'bottom' | 'left' | 'right';
|
|
1061
|
+
}
|
|
1062
|
+
interface UseTooltipOptions {
|
|
1063
|
+
/** Delay before showing tooltip in ms */
|
|
1064
|
+
delay?: number;
|
|
1065
|
+
/** Preferred placement */
|
|
1066
|
+
placement?: 'top' | 'bottom' | 'left' | 'right';
|
|
1067
|
+
/** Whether tooltip is enabled */
|
|
1068
|
+
enabled?: boolean;
|
|
1069
|
+
}
|
|
1070
|
+
declare function useTooltip(options?: UseTooltipOptions): {
|
|
1071
|
+
visible: boolean;
|
|
1072
|
+
position: TooltipPosition;
|
|
1073
|
+
content: string;
|
|
1074
|
+
show: (target: HTMLElement, tooltipContent: string) => void;
|
|
1075
|
+
hide: () => void;
|
|
1076
|
+
};
|
|
1077
|
+
|
|
1078
|
+
interface TooltipProps {
|
|
1079
|
+
/** Whether the tooltip is visible */
|
|
1080
|
+
visible: boolean;
|
|
1081
|
+
/** Position and placement */
|
|
1082
|
+
position: TooltipPosition;
|
|
1083
|
+
/** Tooltip content text */
|
|
1084
|
+
content: string;
|
|
1085
|
+
/** Custom tooltip component */
|
|
1086
|
+
customComponent?: React__default.ReactNode;
|
|
1087
|
+
}
|
|
1088
|
+
declare function Tooltip({ visible, position, content, customComponent, }: TooltipProps): react_jsx_runtime.JSX.Element | null;
|
|
1089
|
+
|
|
1090
|
+
interface CellStatusBadgeBaseProps {
|
|
1091
|
+
onRetry: () => void;
|
|
1092
|
+
onDismiss: () => void;
|
|
1093
|
+
}
|
|
1094
|
+
interface ErrorProps extends CellStatusBadgeBaseProps {
|
|
1095
|
+
status: 'error';
|
|
1096
|
+
message: string | undefined;
|
|
1097
|
+
}
|
|
1098
|
+
interface ConflictProps extends CellStatusBadgeBaseProps {
|
|
1099
|
+
status: 'conflict';
|
|
1100
|
+
conflictWith: unknown;
|
|
1101
|
+
}
|
|
1102
|
+
type CellStatusBadgeProps = ErrorProps | ConflictProps;
|
|
1103
|
+
declare function CellStatusBadge(props: CellStatusBadgeProps): react_jsx_runtime.JSX.Element;
|
|
1104
|
+
|
|
1105
|
+
interface StatusBarProps<TData extends RowData> {
|
|
1106
|
+
table: Table$1<TData>;
|
|
1107
|
+
panels?: StatusBarPanelConfig[];
|
|
1108
|
+
}
|
|
1109
|
+
declare function StatusBar<TData extends RowData>({ table, panels, }: StatusBarProps<TData>): react_jsx_runtime.JSX.Element;
|
|
1110
|
+
|
|
1111
|
+
interface StatusBarPanelComponentProps {
|
|
1112
|
+
label?: string;
|
|
1113
|
+
value: string | number;
|
|
1114
|
+
icon?: React__default.ReactNode;
|
|
1115
|
+
/** Optional tooltip text */
|
|
1116
|
+
title?: string;
|
|
1117
|
+
}
|
|
1118
|
+
declare function StatusBarPanelComponent({ label, value, icon, title, }: StatusBarPanelComponentProps): react_jsx_runtime.JSX.Element;
|
|
1119
|
+
|
|
1120
|
+
interface FlashCellProps {
|
|
1121
|
+
/** The flash info for this cell (if any) */
|
|
1122
|
+
flash?: CellFlashInfo;
|
|
1123
|
+
/** Flash duration in ms */
|
|
1124
|
+
duration?: number;
|
|
1125
|
+
/** Custom up color */
|
|
1126
|
+
upColor?: string;
|
|
1127
|
+
/** Custom down color */
|
|
1128
|
+
downColor?: string;
|
|
1129
|
+
/** Custom change color */
|
|
1130
|
+
changeColor?: string;
|
|
1131
|
+
/** Cell content */
|
|
1132
|
+
children: React__default.ReactNode;
|
|
1133
|
+
}
|
|
1134
|
+
declare function FlashCell({ flash, duration, upColor, downColor, changeColor, children, }: FlashCellProps): react_jsx_runtime.JSX.Element;
|
|
1135
|
+
|
|
1136
|
+
interface UseCellFlashOptions {
|
|
1137
|
+
/** Flash duration in ms */
|
|
1138
|
+
duration?: number;
|
|
1139
|
+
}
|
|
1140
|
+
declare function useCellFlash<TData extends RowData>(table: Table$1<TData>, options?: UseCellFlashOptions): {
|
|
1141
|
+
flashes: Map<string, CellFlashInfo>;
|
|
1142
|
+
getFlash: (rowId: string, columnId: string) => CellFlashInfo | undefined;
|
|
1143
|
+
};
|
|
1144
|
+
|
|
1145
|
+
interface UseRowAnimationOptions {
|
|
1146
|
+
/** Enable row animations. Default: false */
|
|
1147
|
+
enabled?: boolean;
|
|
1148
|
+
/** Transition duration in ms. Default: 250 */
|
|
1149
|
+
duration?: number;
|
|
1150
|
+
/** Easing function. Default: 'ease' */
|
|
1151
|
+
easing?: string;
|
|
1152
|
+
}
|
|
1153
|
+
declare function useRowAnimation<TData extends RowData>(_table: Table$1<TData>, options?: UseRowAnimationOptions): {
|
|
1154
|
+
capturePositions: (containerEl: HTMLElement | null) => void;
|
|
1155
|
+
animateRows: (containerEl: HTMLElement | null) => void;
|
|
1156
|
+
enabled: boolean;
|
|
1157
|
+
};
|
|
1158
|
+
|
|
1159
|
+
interface ContextMenuItemDef {
|
|
1160
|
+
id: string;
|
|
1161
|
+
label: string;
|
|
1162
|
+
icon?: React__default.ReactNode;
|
|
1163
|
+
shortcut?: string;
|
|
1164
|
+
disabled?: boolean;
|
|
1165
|
+
danger?: boolean;
|
|
1166
|
+
separator?: boolean;
|
|
1167
|
+
children?: ContextMenuItemDef[];
|
|
1168
|
+
action?: () => void;
|
|
1169
|
+
}
|
|
1170
|
+
interface ContextMenuItemProps {
|
|
1171
|
+
item: ContextMenuItemDef;
|
|
1172
|
+
onClose: () => void;
|
|
1173
|
+
}
|
|
1174
|
+
declare function ContextMenuItem({ item, onClose }: ContextMenuItemProps): react_jsx_runtime.JSX.Element;
|
|
1175
|
+
|
|
1176
|
+
interface ContextMenuProps<TData extends RowData> {
|
|
1177
|
+
x: number;
|
|
1178
|
+
y: number;
|
|
1179
|
+
onClose: () => void;
|
|
1180
|
+
table: Table$1<TData>;
|
|
1181
|
+
/** Column the menu was opened on (right-clicked header/cell). */
|
|
1182
|
+
targetColumnId?: string;
|
|
1183
|
+
customItems?: ContextMenuItemDef[];
|
|
1184
|
+
}
|
|
1185
|
+
declare function ContextMenu<TData extends RowData>({ x, y, onClose, table, targetColumnId, customItems, }: ContextMenuProps<TData>): react_jsx_runtime.JSX.Element;
|
|
1186
|
+
|
|
1187
|
+
declare function useContextMenu(): {
|
|
1188
|
+
isOpen: boolean;
|
|
1189
|
+
x: number;
|
|
1190
|
+
y: number;
|
|
1191
|
+
targetTable: Table$1<any> | null;
|
|
1192
|
+
targetColumnId: string | undefined;
|
|
1193
|
+
open: <TData extends RowData>(clientX: number, clientY: number, table: Table$1<TData>, columnId?: string) => void;
|
|
1194
|
+
close: () => void;
|
|
1195
|
+
};
|
|
1196
|
+
|
|
1197
|
+
interface SidebarProps<TData extends RowData> {
|
|
1198
|
+
table: Table$1<TData>;
|
|
1199
|
+
open: boolean;
|
|
1200
|
+
onClose: () => void;
|
|
1201
|
+
panels: ('columns' | 'filters')[];
|
|
1202
|
+
activePanel: 'columns' | 'filters';
|
|
1203
|
+
onPanelChange: (panel: 'columns' | 'filters') => void;
|
|
1204
|
+
}
|
|
1205
|
+
declare function Sidebar<TData extends RowData>({ table, open, onClose, panels, activePanel, onPanelChange, }: SidebarProps<TData>): react_jsx_runtime.JSX.Element;
|
|
1206
|
+
|
|
1207
|
+
interface ColumnsPanelProps<TData extends RowData> {
|
|
1208
|
+
table: Table$1<TData>;
|
|
1209
|
+
}
|
|
1210
|
+
declare function ColumnsPanel<TData extends RowData>({ table }: ColumnsPanelProps<TData>): react_jsx_runtime.JSX.Element;
|
|
1211
|
+
|
|
1212
|
+
interface FiltersPanelProps<TData extends RowData> {
|
|
1213
|
+
table: Table$1<TData>;
|
|
1214
|
+
}
|
|
1215
|
+
declare function FiltersPanel<TData extends RowData>({ table, }: FiltersPanelProps<TData>): react_jsx_runtime.JSX.Element;
|
|
1216
|
+
|
|
1217
|
+
interface PrintLayoutProps<TData extends RowData> {
|
|
1218
|
+
table: Table$1<TData>;
|
|
1219
|
+
/** Print title displayed at the top */
|
|
1220
|
+
title?: string;
|
|
1221
|
+
/** Show print timestamp */
|
|
1222
|
+
showTimestamp?: boolean;
|
|
1223
|
+
}
|
|
1224
|
+
declare function PrintLayout<TData extends RowData>({ table, title, showTimestamp, }: PrintLayoutProps<TData>): react_jsx_runtime.JSX.Element;
|
|
1225
|
+
|
|
1226
|
+
interface UsePrintLayoutOptions {
|
|
1227
|
+
/** Custom print title */
|
|
1228
|
+
title?: string;
|
|
1229
|
+
/**
|
|
1230
|
+
* Additional CSS to inject for print.
|
|
1231
|
+
*
|
|
1232
|
+
* **Security warning:** Must be developer-provided CSS only.
|
|
1233
|
+
* User-generated CSS is not safe even with sanitization.
|
|
1234
|
+
* The library applies basic sanitization (removing @import, url(), expression())
|
|
1235
|
+
* but this cannot guarantee safety against all CSS-based attacks.
|
|
1236
|
+
*/
|
|
1237
|
+
additionalCSS?: string;
|
|
1238
|
+
}
|
|
1239
|
+
declare function usePrintLayout<TData extends RowData>(_table: Table$1<TData>, options?: UsePrintLayoutOptions): {
|
|
1240
|
+
preparePrint: () => void;
|
|
1241
|
+
isPrinting: boolean;
|
|
1242
|
+
};
|
|
1243
|
+
|
|
1244
|
+
interface UseThemeOptions {
|
|
1245
|
+
/** Initial theme name */
|
|
1246
|
+
defaultTheme?: string;
|
|
1247
|
+
/** Initial color scheme */
|
|
1248
|
+
defaultColorScheme?: 'light' | 'dark' | 'auto';
|
|
1249
|
+
}
|
|
1250
|
+
declare function useTheme(options?: UseThemeOptions): {
|
|
1251
|
+
theme: string;
|
|
1252
|
+
setTheme: (newTheme: string) => void;
|
|
1253
|
+
colorScheme: "auto" | "dark" | "light";
|
|
1254
|
+
setColorScheme: (scheme: "light" | "dark" | "auto") => void;
|
|
1255
|
+
toggleColorScheme: () => void;
|
|
1256
|
+
resolvedColorScheme: "dark" | "light";
|
|
1257
|
+
containerRef: React$1.RefObject<HTMLElement | null>;
|
|
1258
|
+
};
|
|
1259
|
+
|
|
1260
|
+
interface SelectColumnOptions {
|
|
1261
|
+
id?: string;
|
|
1262
|
+
size?: number;
|
|
1263
|
+
headerAriaLabel?: string;
|
|
1264
|
+
}
|
|
1265
|
+
declare function selectColumn<TData extends RowData>(options?: SelectColumnOptions): ColumnDef<TData, unknown>;
|
|
1266
|
+
|
|
1267
|
+
interface RowNumberColumnOptions {
|
|
1268
|
+
id?: string;
|
|
1269
|
+
header?: string;
|
|
1270
|
+
size?: number;
|
|
1271
|
+
startFrom?: number;
|
|
1272
|
+
}
|
|
1273
|
+
declare function rowNumberColumn<TData extends RowData>(options?: RowNumberColumnOptions): ColumnDef<TData, unknown>;
|
|
1274
|
+
|
|
1275
|
+
interface ActionItem<TData extends RowData> {
|
|
1276
|
+
label: string;
|
|
1277
|
+
icon?: ReactNode;
|
|
1278
|
+
onClick: (row: Row<TData>) => void;
|
|
1279
|
+
hidden?: (row: Row<TData>) => boolean;
|
|
1280
|
+
disabled?: (row: Row<TData>) => boolean;
|
|
1281
|
+
}
|
|
1282
|
+
interface ActionsColumnOptions<TData extends RowData> {
|
|
1283
|
+
id?: string;
|
|
1284
|
+
header?: string;
|
|
1285
|
+
size?: number;
|
|
1286
|
+
actions: ActionItem<TData>[] | ((row: Row<TData>) => ActionItem<TData>[]);
|
|
1287
|
+
}
|
|
1288
|
+
declare function actionsColumn<TData extends RowData>(options: ActionsColumnOptions<TData>): ColumnDef<TData, unknown>;
|
|
1289
|
+
|
|
1290
|
+
interface ExpandColumnOptions {
|
|
1291
|
+
id?: string;
|
|
1292
|
+
size?: number;
|
|
1293
|
+
}
|
|
1294
|
+
declare function expandColumn<TData extends RowData>(options?: ExpandColumnOptions): ColumnDef<TData, unknown>;
|
|
1295
|
+
|
|
1296
|
+
interface CellStackProps {
|
|
1297
|
+
children: React__default.ReactNode;
|
|
1298
|
+
gap?: number;
|
|
1299
|
+
}
|
|
1300
|
+
declare function CellStack({ children, gap }: CellStackProps): react_jsx_runtime.JSX.Element;
|
|
1301
|
+
|
|
1302
|
+
interface CellRowProps {
|
|
1303
|
+
children: React__default.ReactNode;
|
|
1304
|
+
gap?: number;
|
|
1305
|
+
align?: 'start' | 'center' | 'end' | 'baseline';
|
|
1306
|
+
justify?: 'start' | 'center' | 'end' | 'between';
|
|
1307
|
+
}
|
|
1308
|
+
declare function CellRow({ children, gap, align, justify }: CellRowProps): react_jsx_runtime.JSX.Element;
|
|
1309
|
+
|
|
1310
|
+
interface CellWithIconProps {
|
|
1311
|
+
icon: React__default.ReactNode;
|
|
1312
|
+
children: React__default.ReactNode;
|
|
1313
|
+
gap?: number;
|
|
1314
|
+
iconSize?: number;
|
|
1315
|
+
}
|
|
1316
|
+
declare function CellWithIcon({ icon, children, gap, iconSize }: CellWithIconProps): react_jsx_runtime.JSX.Element;
|
|
1317
|
+
|
|
1318
|
+
interface CellTextProps {
|
|
1319
|
+
children: React__default.ReactNode;
|
|
1320
|
+
variant?: 'primary' | 'secondary' | 'muted';
|
|
1321
|
+
bold?: boolean;
|
|
1322
|
+
truncate?: boolean;
|
|
1323
|
+
size?: 'sm' | 'md' | 'lg';
|
|
1324
|
+
}
|
|
1325
|
+
declare function CellText({ children, variant, bold, truncate, size, }: CellTextProps): react_jsx_runtime.JSX.Element;
|
|
1326
|
+
|
|
1327
|
+
/**
|
|
1328
|
+
* Merges edit-commit changes into a data array, returning a new array
|
|
1329
|
+
* with matching rows shallow-merged. Rows without changes keep their
|
|
1330
|
+
* original reference so downstream memoisation works.
|
|
1331
|
+
*
|
|
1332
|
+
* @param data Current data array
|
|
1333
|
+
* @param changes Map of row ID -> partial row values (same shape as `onEditCommit`)
|
|
1334
|
+
* @param getRowId Optional row-ID resolver; defaults to string index
|
|
1335
|
+
*/
|
|
1336
|
+
declare function mergeEditChanges<TData>(data: TData[], changes: Record<string, Partial<TData>>, getRowId?: (row: TData, index: number) => string): TData[];
|
|
1337
|
+
|
|
1338
|
+
export { type ActionItem, type ActionsColumnOptions, 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, CellRow, type CellRowProps, CellSelect, CellStack, type CellStackProps, CellStatus, CellStatusBadge, type CellStatusBadgeProps, type CellStatusProps, CellText, type CellTextProps, CellToggle, CellWithIcon, type CellWithIconProps, ColumnsPanel, ContextMenu, ContextMenuItem, type ContextMenuItemDef, DEFAULT_TEXT_RECIPE, DragHandle, ErrorBoundary, type ExpandColumnOptions, ExpandIcon, FillHandle, type FillHandleDragState, type FillHandleProps, FiltersPanel, FlashCell, FloatingFilter, GlobalFilter, LoadingOverlay, type LoadingOverlayProps, MasterDetail, NoRowsOverlay, type NoRowsOverlayProps, Pagination, PivotConfigPanel, type PivotConfigProps, type PivotFieldItem, type PivotValueItem, PrintLayout, type ResolvedYableProfile, type RowNumberColumnOptions, type SelectColumnOptions, type ServerTableController, type ServerTableFetchArgs, type ServerTableFetchResult, type ServerTableUpdateArgs, SetFilter, 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 UseColumnVirtualizationOptions, type UseColumnVirtualizationResult, type UseFillHandleOptions, type UseFillHandleReturn, type UseKeyboardNavigationOptions, type UsePretextMeasurementOptions, type UsePretextMeasurementResult, type UsePrintLayoutOptions, type UseRowAnimationOptions, type UseRowDragOptions, type UseRowDragReturn, type UseServerTableOptions, type UseTableOptions, type UseTablePersistenceOptions, type UseTablePersistenceReturn, type UseTableRowHeightsOptions, type UseThemeOptions, type UseTooltipOptions, type UseVirtualizationOptions, type UseVirtualizationResult, type VirtualColumn, type VirtualRow, type YableCellConfig, type YableCellConfigSet, type YableColumnConfig, type YableColumnConfigSet, type YableConfig, type YableDefaults, YableProvider, type YableRowConfig, type YableTableProfile, type YableTableVisualConfig, actionsColumn, applyYableConfigToColumns, createYableConfig, expandColumn, getMeasureRecipeForCellType, getRegisteredCellTypes, getYableDefaultColumnDef, mergeEditChanges, resolveMeasureRecipe, resolveYableProfile, rowNumberColumn, selectColumn, useAutoMeasurements, useCellFlash, useClipboard, useColumnVirtualization, useContextMenu, useFillHandle, useKeyboardNavigation, usePretextMeasurement, usePrintLayout, useRowAnimation, useRowDrag, useServerTable, useTable, useTableContext, useTablePersistence, useTableRowHeights, useTheme, useTooltip, useVirtualization, useYableDefaults };
|