@zvndev/yable-react 0.3.0 → 0.4.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/dist/index.cjs +575 -93
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +214 -11
- package/dist/index.d.ts +214 -11
- package/dist/index.js +565 -95
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
package/dist/index.d.cts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { Table as Table$1, RowData, Cell, Header, Row, TableOptions, Column, ColumnDef, SortDirection, CellContext, ClipboardOptions, CellFlashInfo } from '@zvndev/yable-core';
|
|
1
|
+
import { Table as Table$1, RowData, Cell, Header, Row, TableOptions, TableState, Updater, Column, ColumnDef, ColumnDefBase, SortDirection, CellContext, ClipboardOptions, CellFlashInfo } from '@zvndev/yable-core';
|
|
2
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
3
|
import * as React$1 from 'react';
|
|
4
|
-
import React__default, { HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react';
|
|
4
|
+
import React__default, { HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes, ReactNode } from 'react';
|
|
5
5
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
6
6
|
import { RowDragState } from '@zvndev/yable-core/features/rowDragging';
|
|
7
7
|
|
|
@@ -99,6 +99,69 @@ interface TableHeaderCellProps<TData extends RowData, TValue = unknown> extends
|
|
|
99
99
|
*/
|
|
100
100
|
declare function useTable<TData extends RowData>(options: TableOptions<TData>): Table$1<TData>;
|
|
101
101
|
|
|
102
|
+
interface UseTablePersistenceOptions {
|
|
103
|
+
/** Storage key used for getItem/setItem. */
|
|
104
|
+
key: string;
|
|
105
|
+
/** Which TableState slices to persist. Defaults to column layout keys. */
|
|
106
|
+
persistedKeys?: (keyof TableState)[];
|
|
107
|
+
/** Milliseconds to debounce storage writes. Default: 100. */
|
|
108
|
+
debounce?: number;
|
|
109
|
+
/** Schema version — bumping this discards any stale stored data. */
|
|
110
|
+
version?: number;
|
|
111
|
+
/** Custom Storage implementation. Default: localStorage. */
|
|
112
|
+
storage?: Storage;
|
|
113
|
+
}
|
|
114
|
+
interface UseTablePersistenceReturn {
|
|
115
|
+
/**
|
|
116
|
+
* Partial state hydrated from storage — pass to `useTable({ initialState })`.
|
|
117
|
+
* Only useful when NOT passing `onStateChange` (i.e., uncontrolled mode).
|
|
118
|
+
*/
|
|
119
|
+
initialState: Partial<TableState>;
|
|
120
|
+
/**
|
|
121
|
+
* State-change handler that persists relevant slices on each update.
|
|
122
|
+
* When passed to `useTable({ onStateChange })`, the persistence hook
|
|
123
|
+
* takes over state management (controlled mode). You MUST also pass
|
|
124
|
+
* `state` to useTable in this case.
|
|
125
|
+
*/
|
|
126
|
+
onStateChange: (updater: Updater<TableState>) => void;
|
|
127
|
+
/**
|
|
128
|
+
* Current table state managed by the persistence hook.
|
|
129
|
+
* Pass to `useTable({ state })` alongside `onStateChange`.
|
|
130
|
+
*/
|
|
131
|
+
state: Partial<TableState>;
|
|
132
|
+
/** Manually clear all persisted state for this key. */
|
|
133
|
+
clearPersistedState: () => void;
|
|
134
|
+
}
|
|
135
|
+
/**
|
|
136
|
+
* React hook that persists selected table state slices to storage.
|
|
137
|
+
*
|
|
138
|
+
* Returns `initialState` (hydrated from storage), `state`, and
|
|
139
|
+
* `onStateChange` — pass all three to `useTable` so that persisted
|
|
140
|
+
* slices survive page reloads.
|
|
141
|
+
*
|
|
142
|
+
* @example
|
|
143
|
+
* ```tsx
|
|
144
|
+
* const persistence = useTablePersistence({ key: 'my-table', version: 1 })
|
|
145
|
+
*
|
|
146
|
+
* // Controlled mode (recommended) — persistence manages state:
|
|
147
|
+
* const table = useTable({
|
|
148
|
+
* data,
|
|
149
|
+
* columns,
|
|
150
|
+
* initialState: persistence.initialState,
|
|
151
|
+
* state: persistence.state,
|
|
152
|
+
* onStateChange: persistence.onStateChange,
|
|
153
|
+
* })
|
|
154
|
+
*
|
|
155
|
+
* // Uncontrolled mode — only hydrate, no live persistence:
|
|
156
|
+
* const table = useTable({
|
|
157
|
+
* data,
|
|
158
|
+
* columns,
|
|
159
|
+
* initialState: persistence.initialState,
|
|
160
|
+
* })
|
|
161
|
+
* ```
|
|
162
|
+
*/
|
|
163
|
+
declare function useTablePersistence(options: UseTablePersistenceOptions): UseTablePersistenceReturn;
|
|
164
|
+
|
|
102
165
|
interface VirtualRow {
|
|
103
166
|
index: number;
|
|
104
167
|
start: number;
|
|
@@ -114,6 +177,12 @@ interface UseVirtualizationOptions {
|
|
|
114
177
|
pretextHeights?: Float64Array | null;
|
|
115
178
|
/** Pre-computed prefix sums for O(log n) scroll lookups */
|
|
116
179
|
pretextPrefixSums?: Float64Array | null;
|
|
180
|
+
/**
|
|
181
|
+
* Opaque key that changes when column widths change.
|
|
182
|
+
* When this value changes the height cache is invalidated because column
|
|
183
|
+
* resizing can affect text wrapping and therefore row heights.
|
|
184
|
+
*/
|
|
185
|
+
columnSizingHash?: string | number;
|
|
117
186
|
}
|
|
118
187
|
interface UseVirtualizationResult {
|
|
119
188
|
virtualRows: VirtualRow[];
|
|
@@ -121,19 +190,26 @@ interface UseVirtualizationResult {
|
|
|
121
190
|
startIndex: number;
|
|
122
191
|
endIndex: number;
|
|
123
192
|
scrollTo: (index: number) => void;
|
|
193
|
+
/**
|
|
194
|
+
* Manually clear the row-height cache and force recalculation.
|
|
195
|
+
* Call this when cell content changes (data mutations, font-size changes, etc.)
|
|
196
|
+
* that may affect row heights.
|
|
197
|
+
*/
|
|
198
|
+
invalidateRowHeights: () => void;
|
|
124
199
|
}
|
|
125
200
|
/**
|
|
126
201
|
* Computes which rows are visible in a scrollable container and returns
|
|
127
202
|
* positioning data so only those rows (plus an overscan buffer) are rendered.
|
|
128
203
|
*
|
|
129
|
-
* Returns `{ virtualRows, totalHeight, startIndex, endIndex, scrollTo }`.
|
|
204
|
+
* Returns `{ virtualRows, totalHeight, startIndex, endIndex, scrollTo, invalidateRowHeights }`.
|
|
130
205
|
* Re-renders are triggered by scroll (rAF-throttled) and ResizeObserver
|
|
131
206
|
* container resize. Supports fixed, variable, and Pretext-pre-measured heights.
|
|
132
207
|
*
|
|
133
|
-
*
|
|
134
|
-
* `
|
|
208
|
+
* The height cache is automatically invalidated when `totalRows`, `isFixedHeight`,
|
|
209
|
+
* or `columnSizingHash` changes. For manual invalidation (e.g. after data mutations
|
|
210
|
+
* or font-size changes), call `invalidateRowHeights()`.
|
|
135
211
|
*/
|
|
136
|
-
declare function useVirtualization({ containerRef, totalRows, rowHeight, overscan, estimateRowHeight: _estimateRowHeight, pretextHeights, pretextPrefixSums, }: UseVirtualizationOptions): UseVirtualizationResult;
|
|
212
|
+
declare function useVirtualization({ containerRef, totalRows, rowHeight, overscan, estimateRowHeight: _estimateRowHeight, pretextHeights, pretextPrefixSums, columnSizingHash, }: UseVirtualizationOptions): UseVirtualizationResult;
|
|
137
213
|
|
|
138
214
|
interface VirtualColumn<TData extends RowData> {
|
|
139
215
|
column: Column<TData, unknown>;
|
|
@@ -393,7 +469,55 @@ declare function getRegisteredCellTypes(): readonly string[];
|
|
|
393
469
|
declare const TableProvider: React$1.Provider<Table$1<any> | null>;
|
|
394
470
|
declare function useTableContext<TData extends RowData>(): Table$1<TData>;
|
|
395
471
|
|
|
396
|
-
|
|
472
|
+
/**
|
|
473
|
+
* Project-wide default table and column options.
|
|
474
|
+
*
|
|
475
|
+
* Wrap your app (or a subtree) in `<YableProvider>` so every `<Table>` and
|
|
476
|
+
* `useTable` call inherits these defaults without repeating config.
|
|
477
|
+
*
|
|
478
|
+
* Component-level and hook-level values always take precedence over provider
|
|
479
|
+
* defaults.
|
|
480
|
+
*/
|
|
481
|
+
interface YableDefaults {
|
|
482
|
+
/** Default props applied to every `<Table>` in the subtree */
|
|
483
|
+
tableProps?: Partial<Pick<TableProps<any>, 'striped' | 'bordered' | 'compact' | 'stickyHeader' | 'theme' | 'direction' | 'ariaLabel'>>;
|
|
484
|
+
/** Default column definition merged under every table's own `defaultColumnDef` */
|
|
485
|
+
defaultColumnDef?: Partial<ColumnDefBase<any, unknown>>;
|
|
486
|
+
}
|
|
487
|
+
/**
|
|
488
|
+
* Read the nearest `YableProvider` defaults.
|
|
489
|
+
*
|
|
490
|
+
* Safe to call outside a provider — returns an empty object.
|
|
491
|
+
*/
|
|
492
|
+
declare function useYableDefaults(): YableDefaults;
|
|
493
|
+
/**
|
|
494
|
+
* Provide project-wide defaults for all Yable tables in a subtree.
|
|
495
|
+
*
|
|
496
|
+
* @example
|
|
497
|
+
* ```tsx
|
|
498
|
+
* <YableProvider
|
|
499
|
+
* striped
|
|
500
|
+
* stickyHeader
|
|
501
|
+
* theme="stripe"
|
|
502
|
+
* defaultColumnDef={{ enableSorting: true }}
|
|
503
|
+
* >
|
|
504
|
+
* <EmployeeTable />
|
|
505
|
+
* <ProjectTable />
|
|
506
|
+
* </YableProvider>
|
|
507
|
+
* ```
|
|
508
|
+
*/
|
|
509
|
+
declare function YableProvider({ children, defaultColumnDef, striped, stickyHeader, bordered, compact, theme, direction, ariaLabel, }: YableDefaults & {
|
|
510
|
+
children: ReactNode;
|
|
511
|
+
striped?: boolean;
|
|
512
|
+
stickyHeader?: boolean;
|
|
513
|
+
bordered?: boolean;
|
|
514
|
+
compact?: boolean;
|
|
515
|
+
theme?: string;
|
|
516
|
+
direction?: 'ltr' | 'rtl';
|
|
517
|
+
ariaLabel?: string;
|
|
518
|
+
}): react_jsx_runtime.JSX.Element;
|
|
519
|
+
|
|
520
|
+
declare function Table<TData extends RowData>({ table, stickyHeader: stickyHeaderProp, striped: stripedProp, bordered: borderedProp, compact: compactProp, theme: themeProp, 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;
|
|
397
521
|
|
|
398
522
|
interface TableHeaderProps<TData extends RowData> {
|
|
399
523
|
table: Table$1<TData>;
|
|
@@ -404,8 +528,9 @@ declare function TableHeader<TData extends RowData>({ table, floatingFilters, }:
|
|
|
404
528
|
interface TableBodyProps<TData extends RowData> {
|
|
405
529
|
table: Table$1<TData>;
|
|
406
530
|
clickableRows?: boolean;
|
|
531
|
+
colgroup?: React__default.ReactNode;
|
|
407
532
|
}
|
|
408
|
-
declare function TableBody<TData extends RowData>({ table, clickableRows }: TableBodyProps<TData>): react_jsx_runtime.JSX.Element;
|
|
533
|
+
declare function TableBody<TData extends RowData>({ table, clickableRows, colgroup, }: TableBodyProps<TData>): react_jsx_runtime.JSX.Element;
|
|
409
534
|
|
|
410
535
|
interface TableCellProps<TData extends RowData> {
|
|
411
536
|
cell: Cell<TData, unknown>;
|
|
@@ -1015,11 +1140,89 @@ interface UseThemeOptions {
|
|
|
1015
1140
|
declare function useTheme(options?: UseThemeOptions): {
|
|
1016
1141
|
theme: string;
|
|
1017
1142
|
setTheme: (newTheme: string) => void;
|
|
1018
|
-
colorScheme: "auto" | "
|
|
1143
|
+
colorScheme: "auto" | "dark" | "light";
|
|
1019
1144
|
setColorScheme: (scheme: "light" | "dark" | "auto") => void;
|
|
1020
1145
|
toggleColorScheme: () => void;
|
|
1021
|
-
resolvedColorScheme: "
|
|
1146
|
+
resolvedColorScheme: "dark" | "light";
|
|
1022
1147
|
containerRef: React$1.RefObject<HTMLElement | null>;
|
|
1023
1148
|
};
|
|
1024
1149
|
|
|
1025
|
-
|
|
1150
|
+
interface SelectColumnOptions {
|
|
1151
|
+
id?: string;
|
|
1152
|
+
size?: number;
|
|
1153
|
+
headerAriaLabel?: string;
|
|
1154
|
+
}
|
|
1155
|
+
declare function selectColumn<TData extends RowData>(options?: SelectColumnOptions): ColumnDef<TData, unknown>;
|
|
1156
|
+
|
|
1157
|
+
interface RowNumberColumnOptions {
|
|
1158
|
+
id?: string;
|
|
1159
|
+
header?: string;
|
|
1160
|
+
size?: number;
|
|
1161
|
+
startFrom?: number;
|
|
1162
|
+
}
|
|
1163
|
+
declare function rowNumberColumn<TData extends RowData>(options?: RowNumberColumnOptions): ColumnDef<TData, unknown>;
|
|
1164
|
+
|
|
1165
|
+
interface ActionItem<TData extends RowData> {
|
|
1166
|
+
label: string;
|
|
1167
|
+
icon?: ReactNode;
|
|
1168
|
+
onClick: (row: Row<TData>) => void;
|
|
1169
|
+
hidden?: (row: Row<TData>) => boolean;
|
|
1170
|
+
disabled?: (row: Row<TData>) => boolean;
|
|
1171
|
+
}
|
|
1172
|
+
interface ActionsColumnOptions<TData extends RowData> {
|
|
1173
|
+
id?: string;
|
|
1174
|
+
header?: string;
|
|
1175
|
+
size?: number;
|
|
1176
|
+
actions: ActionItem<TData>[] | ((row: Row<TData>) => ActionItem<TData>[]);
|
|
1177
|
+
}
|
|
1178
|
+
declare function actionsColumn<TData extends RowData>(options: ActionsColumnOptions<TData>): ColumnDef<TData, unknown>;
|
|
1179
|
+
|
|
1180
|
+
interface ExpandColumnOptions {
|
|
1181
|
+
id?: string;
|
|
1182
|
+
size?: number;
|
|
1183
|
+
}
|
|
1184
|
+
declare function expandColumn<TData extends RowData>(options?: ExpandColumnOptions): ColumnDef<TData, unknown>;
|
|
1185
|
+
|
|
1186
|
+
interface CellStackProps {
|
|
1187
|
+
children: React__default.ReactNode;
|
|
1188
|
+
gap?: number;
|
|
1189
|
+
}
|
|
1190
|
+
declare function CellStack({ children, gap }: CellStackProps): react_jsx_runtime.JSX.Element;
|
|
1191
|
+
|
|
1192
|
+
interface CellRowProps {
|
|
1193
|
+
children: React__default.ReactNode;
|
|
1194
|
+
gap?: number;
|
|
1195
|
+
align?: 'start' | 'center' | 'end' | 'baseline';
|
|
1196
|
+
justify?: 'start' | 'center' | 'end' | 'between';
|
|
1197
|
+
}
|
|
1198
|
+
declare function CellRow({ children, gap, align, justify }: CellRowProps): react_jsx_runtime.JSX.Element;
|
|
1199
|
+
|
|
1200
|
+
interface CellWithIconProps {
|
|
1201
|
+
icon: React__default.ReactNode;
|
|
1202
|
+
children: React__default.ReactNode;
|
|
1203
|
+
gap?: number;
|
|
1204
|
+
iconSize?: number;
|
|
1205
|
+
}
|
|
1206
|
+
declare function CellWithIcon({ icon, children, gap, iconSize }: CellWithIconProps): react_jsx_runtime.JSX.Element;
|
|
1207
|
+
|
|
1208
|
+
interface CellTextProps {
|
|
1209
|
+
children: React__default.ReactNode;
|
|
1210
|
+
variant?: 'primary' | 'secondary' | 'muted';
|
|
1211
|
+
bold?: boolean;
|
|
1212
|
+
truncate?: boolean;
|
|
1213
|
+
size?: 'sm' | 'md' | 'lg';
|
|
1214
|
+
}
|
|
1215
|
+
declare function CellText({ children, variant, bold, truncate, size, }: CellTextProps): react_jsx_runtime.JSX.Element;
|
|
1216
|
+
|
|
1217
|
+
/**
|
|
1218
|
+
* Merges edit-commit changes into a data array, returning a new array
|
|
1219
|
+
* with matching rows shallow-merged. Rows without changes keep their
|
|
1220
|
+
* original reference so downstream memoisation works.
|
|
1221
|
+
*
|
|
1222
|
+
* @param data Current data array
|
|
1223
|
+
* @param changes Map of row ID -> partial row values (same shape as `onEditCommit`)
|
|
1224
|
+
* @param getRowId Optional row-ID resolver; defaults to string index
|
|
1225
|
+
*/
|
|
1226
|
+
declare function mergeEditChanges<TData>(data: TData[], changes: Record<string, Partial<TData>>, getRowId?: (row: TData, index: number) => string): TData[];
|
|
1227
|
+
|
|
1228
|
+
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 RowNumberColumnOptions, type SelectColumnOptions, 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 UseTablePersistenceOptions, type UseTablePersistenceReturn, type UseTableRowHeightsOptions, type UseThemeOptions, type UseTooltipOptions, type UseVirtualizationOptions, type UseVirtualizationResult, type VirtualColumn, type VirtualRow, type YableDefaults, YableProvider, actionsColumn, expandColumn, getMeasureRecipeForCellType, getRegisteredCellTypes, mergeEditChanges, resolveMeasureRecipe, rowNumberColumn, selectColumn, useAutoMeasurements, useCellFlash, useClipboard, useColumnVirtualization, useContextMenu, useFillHandle, useKeyboardNavigation, usePretextMeasurement, usePrintLayout, useRowAnimation, useRowDrag, useTable, useTableContext, useTablePersistence, useTableRowHeights, useTheme, useTooltip, useVirtualization, useYableDefaults };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { Table as Table$1, RowData, Cell, Header, Row, TableOptions, Column, ColumnDef, SortDirection, CellContext, ClipboardOptions, CellFlashInfo } from '@zvndev/yable-core';
|
|
1
|
+
import { Table as Table$1, RowData, Cell, Header, Row, TableOptions, TableState, Updater, Column, ColumnDef, ColumnDefBase, SortDirection, CellContext, ClipboardOptions, CellFlashInfo } from '@zvndev/yable-core';
|
|
2
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
3
|
import * as React$1 from 'react';
|
|
4
|
-
import React__default, { HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react';
|
|
4
|
+
import React__default, { HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes, ReactNode } from 'react';
|
|
5
5
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
6
6
|
import { RowDragState } from '@zvndev/yable-core/features/rowDragging';
|
|
7
7
|
|
|
@@ -99,6 +99,69 @@ interface TableHeaderCellProps<TData extends RowData, TValue = unknown> extends
|
|
|
99
99
|
*/
|
|
100
100
|
declare function useTable<TData extends RowData>(options: TableOptions<TData>): Table$1<TData>;
|
|
101
101
|
|
|
102
|
+
interface UseTablePersistenceOptions {
|
|
103
|
+
/** Storage key used for getItem/setItem. */
|
|
104
|
+
key: string;
|
|
105
|
+
/** Which TableState slices to persist. Defaults to column layout keys. */
|
|
106
|
+
persistedKeys?: (keyof TableState)[];
|
|
107
|
+
/** Milliseconds to debounce storage writes. Default: 100. */
|
|
108
|
+
debounce?: number;
|
|
109
|
+
/** Schema version — bumping this discards any stale stored data. */
|
|
110
|
+
version?: number;
|
|
111
|
+
/** Custom Storage implementation. Default: localStorage. */
|
|
112
|
+
storage?: Storage;
|
|
113
|
+
}
|
|
114
|
+
interface UseTablePersistenceReturn {
|
|
115
|
+
/**
|
|
116
|
+
* Partial state hydrated from storage — pass to `useTable({ initialState })`.
|
|
117
|
+
* Only useful when NOT passing `onStateChange` (i.e., uncontrolled mode).
|
|
118
|
+
*/
|
|
119
|
+
initialState: Partial<TableState>;
|
|
120
|
+
/**
|
|
121
|
+
* State-change handler that persists relevant slices on each update.
|
|
122
|
+
* When passed to `useTable({ onStateChange })`, the persistence hook
|
|
123
|
+
* takes over state management (controlled mode). You MUST also pass
|
|
124
|
+
* `state` to useTable in this case.
|
|
125
|
+
*/
|
|
126
|
+
onStateChange: (updater: Updater<TableState>) => void;
|
|
127
|
+
/**
|
|
128
|
+
* Current table state managed by the persistence hook.
|
|
129
|
+
* Pass to `useTable({ state })` alongside `onStateChange`.
|
|
130
|
+
*/
|
|
131
|
+
state: Partial<TableState>;
|
|
132
|
+
/** Manually clear all persisted state for this key. */
|
|
133
|
+
clearPersistedState: () => void;
|
|
134
|
+
}
|
|
135
|
+
/**
|
|
136
|
+
* React hook that persists selected table state slices to storage.
|
|
137
|
+
*
|
|
138
|
+
* Returns `initialState` (hydrated from storage), `state`, and
|
|
139
|
+
* `onStateChange` — pass all three to `useTable` so that persisted
|
|
140
|
+
* slices survive page reloads.
|
|
141
|
+
*
|
|
142
|
+
* @example
|
|
143
|
+
* ```tsx
|
|
144
|
+
* const persistence = useTablePersistence({ key: 'my-table', version: 1 })
|
|
145
|
+
*
|
|
146
|
+
* // Controlled mode (recommended) — persistence manages state:
|
|
147
|
+
* const table = useTable({
|
|
148
|
+
* data,
|
|
149
|
+
* columns,
|
|
150
|
+
* initialState: persistence.initialState,
|
|
151
|
+
* state: persistence.state,
|
|
152
|
+
* onStateChange: persistence.onStateChange,
|
|
153
|
+
* })
|
|
154
|
+
*
|
|
155
|
+
* // Uncontrolled mode — only hydrate, no live persistence:
|
|
156
|
+
* const table = useTable({
|
|
157
|
+
* data,
|
|
158
|
+
* columns,
|
|
159
|
+
* initialState: persistence.initialState,
|
|
160
|
+
* })
|
|
161
|
+
* ```
|
|
162
|
+
*/
|
|
163
|
+
declare function useTablePersistence(options: UseTablePersistenceOptions): UseTablePersistenceReturn;
|
|
164
|
+
|
|
102
165
|
interface VirtualRow {
|
|
103
166
|
index: number;
|
|
104
167
|
start: number;
|
|
@@ -114,6 +177,12 @@ interface UseVirtualizationOptions {
|
|
|
114
177
|
pretextHeights?: Float64Array | null;
|
|
115
178
|
/** Pre-computed prefix sums for O(log n) scroll lookups */
|
|
116
179
|
pretextPrefixSums?: Float64Array | null;
|
|
180
|
+
/**
|
|
181
|
+
* Opaque key that changes when column widths change.
|
|
182
|
+
* When this value changes the height cache is invalidated because column
|
|
183
|
+
* resizing can affect text wrapping and therefore row heights.
|
|
184
|
+
*/
|
|
185
|
+
columnSizingHash?: string | number;
|
|
117
186
|
}
|
|
118
187
|
interface UseVirtualizationResult {
|
|
119
188
|
virtualRows: VirtualRow[];
|
|
@@ -121,19 +190,26 @@ interface UseVirtualizationResult {
|
|
|
121
190
|
startIndex: number;
|
|
122
191
|
endIndex: number;
|
|
123
192
|
scrollTo: (index: number) => void;
|
|
193
|
+
/**
|
|
194
|
+
* Manually clear the row-height cache and force recalculation.
|
|
195
|
+
* Call this when cell content changes (data mutations, font-size changes, etc.)
|
|
196
|
+
* that may affect row heights.
|
|
197
|
+
*/
|
|
198
|
+
invalidateRowHeights: () => void;
|
|
124
199
|
}
|
|
125
200
|
/**
|
|
126
201
|
* Computes which rows are visible in a scrollable container and returns
|
|
127
202
|
* positioning data so only those rows (plus an overscan buffer) are rendered.
|
|
128
203
|
*
|
|
129
|
-
* Returns `{ virtualRows, totalHeight, startIndex, endIndex, scrollTo }`.
|
|
204
|
+
* Returns `{ virtualRows, totalHeight, startIndex, endIndex, scrollTo, invalidateRowHeights }`.
|
|
130
205
|
* Re-renders are triggered by scroll (rAF-throttled) and ResizeObserver
|
|
131
206
|
* container resize. Supports fixed, variable, and Pretext-pre-measured heights.
|
|
132
207
|
*
|
|
133
|
-
*
|
|
134
|
-
* `
|
|
208
|
+
* The height cache is automatically invalidated when `totalRows`, `isFixedHeight`,
|
|
209
|
+
* or `columnSizingHash` changes. For manual invalidation (e.g. after data mutations
|
|
210
|
+
* or font-size changes), call `invalidateRowHeights()`.
|
|
135
211
|
*/
|
|
136
|
-
declare function useVirtualization({ containerRef, totalRows, rowHeight, overscan, estimateRowHeight: _estimateRowHeight, pretextHeights, pretextPrefixSums, }: UseVirtualizationOptions): UseVirtualizationResult;
|
|
212
|
+
declare function useVirtualization({ containerRef, totalRows, rowHeight, overscan, estimateRowHeight: _estimateRowHeight, pretextHeights, pretextPrefixSums, columnSizingHash, }: UseVirtualizationOptions): UseVirtualizationResult;
|
|
137
213
|
|
|
138
214
|
interface VirtualColumn<TData extends RowData> {
|
|
139
215
|
column: Column<TData, unknown>;
|
|
@@ -393,7 +469,55 @@ declare function getRegisteredCellTypes(): readonly string[];
|
|
|
393
469
|
declare const TableProvider: React$1.Provider<Table$1<any> | null>;
|
|
394
470
|
declare function useTableContext<TData extends RowData>(): Table$1<TData>;
|
|
395
471
|
|
|
396
|
-
|
|
472
|
+
/**
|
|
473
|
+
* Project-wide default table and column options.
|
|
474
|
+
*
|
|
475
|
+
* Wrap your app (or a subtree) in `<YableProvider>` so every `<Table>` and
|
|
476
|
+
* `useTable` call inherits these defaults without repeating config.
|
|
477
|
+
*
|
|
478
|
+
* Component-level and hook-level values always take precedence over provider
|
|
479
|
+
* defaults.
|
|
480
|
+
*/
|
|
481
|
+
interface YableDefaults {
|
|
482
|
+
/** Default props applied to every `<Table>` in the subtree */
|
|
483
|
+
tableProps?: Partial<Pick<TableProps<any>, 'striped' | 'bordered' | 'compact' | 'stickyHeader' | 'theme' | 'direction' | 'ariaLabel'>>;
|
|
484
|
+
/** Default column definition merged under every table's own `defaultColumnDef` */
|
|
485
|
+
defaultColumnDef?: Partial<ColumnDefBase<any, unknown>>;
|
|
486
|
+
}
|
|
487
|
+
/**
|
|
488
|
+
* Read the nearest `YableProvider` defaults.
|
|
489
|
+
*
|
|
490
|
+
* Safe to call outside a provider — returns an empty object.
|
|
491
|
+
*/
|
|
492
|
+
declare function useYableDefaults(): YableDefaults;
|
|
493
|
+
/**
|
|
494
|
+
* Provide project-wide defaults for all Yable tables in a subtree.
|
|
495
|
+
*
|
|
496
|
+
* @example
|
|
497
|
+
* ```tsx
|
|
498
|
+
* <YableProvider
|
|
499
|
+
* striped
|
|
500
|
+
* stickyHeader
|
|
501
|
+
* theme="stripe"
|
|
502
|
+
* defaultColumnDef={{ enableSorting: true }}
|
|
503
|
+
* >
|
|
504
|
+
* <EmployeeTable />
|
|
505
|
+
* <ProjectTable />
|
|
506
|
+
* </YableProvider>
|
|
507
|
+
* ```
|
|
508
|
+
*/
|
|
509
|
+
declare function YableProvider({ children, defaultColumnDef, striped, stickyHeader, bordered, compact, theme, direction, ariaLabel, }: YableDefaults & {
|
|
510
|
+
children: ReactNode;
|
|
511
|
+
striped?: boolean;
|
|
512
|
+
stickyHeader?: boolean;
|
|
513
|
+
bordered?: boolean;
|
|
514
|
+
compact?: boolean;
|
|
515
|
+
theme?: string;
|
|
516
|
+
direction?: 'ltr' | 'rtl';
|
|
517
|
+
ariaLabel?: string;
|
|
518
|
+
}): react_jsx_runtime.JSX.Element;
|
|
519
|
+
|
|
520
|
+
declare function Table<TData extends RowData>({ table, stickyHeader: stickyHeaderProp, striped: stripedProp, bordered: borderedProp, compact: compactProp, theme: themeProp, 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;
|
|
397
521
|
|
|
398
522
|
interface TableHeaderProps<TData extends RowData> {
|
|
399
523
|
table: Table$1<TData>;
|
|
@@ -404,8 +528,9 @@ declare function TableHeader<TData extends RowData>({ table, floatingFilters, }:
|
|
|
404
528
|
interface TableBodyProps<TData extends RowData> {
|
|
405
529
|
table: Table$1<TData>;
|
|
406
530
|
clickableRows?: boolean;
|
|
531
|
+
colgroup?: React__default.ReactNode;
|
|
407
532
|
}
|
|
408
|
-
declare function TableBody<TData extends RowData>({ table, clickableRows }: TableBodyProps<TData>): react_jsx_runtime.JSX.Element;
|
|
533
|
+
declare function TableBody<TData extends RowData>({ table, clickableRows, colgroup, }: TableBodyProps<TData>): react_jsx_runtime.JSX.Element;
|
|
409
534
|
|
|
410
535
|
interface TableCellProps<TData extends RowData> {
|
|
411
536
|
cell: Cell<TData, unknown>;
|
|
@@ -1015,11 +1140,89 @@ interface UseThemeOptions {
|
|
|
1015
1140
|
declare function useTheme(options?: UseThemeOptions): {
|
|
1016
1141
|
theme: string;
|
|
1017
1142
|
setTheme: (newTheme: string) => void;
|
|
1018
|
-
colorScheme: "auto" | "
|
|
1143
|
+
colorScheme: "auto" | "dark" | "light";
|
|
1019
1144
|
setColorScheme: (scheme: "light" | "dark" | "auto") => void;
|
|
1020
1145
|
toggleColorScheme: () => void;
|
|
1021
|
-
resolvedColorScheme: "
|
|
1146
|
+
resolvedColorScheme: "dark" | "light";
|
|
1022
1147
|
containerRef: React$1.RefObject<HTMLElement | null>;
|
|
1023
1148
|
};
|
|
1024
1149
|
|
|
1025
|
-
|
|
1150
|
+
interface SelectColumnOptions {
|
|
1151
|
+
id?: string;
|
|
1152
|
+
size?: number;
|
|
1153
|
+
headerAriaLabel?: string;
|
|
1154
|
+
}
|
|
1155
|
+
declare function selectColumn<TData extends RowData>(options?: SelectColumnOptions): ColumnDef<TData, unknown>;
|
|
1156
|
+
|
|
1157
|
+
interface RowNumberColumnOptions {
|
|
1158
|
+
id?: string;
|
|
1159
|
+
header?: string;
|
|
1160
|
+
size?: number;
|
|
1161
|
+
startFrom?: number;
|
|
1162
|
+
}
|
|
1163
|
+
declare function rowNumberColumn<TData extends RowData>(options?: RowNumberColumnOptions): ColumnDef<TData, unknown>;
|
|
1164
|
+
|
|
1165
|
+
interface ActionItem<TData extends RowData> {
|
|
1166
|
+
label: string;
|
|
1167
|
+
icon?: ReactNode;
|
|
1168
|
+
onClick: (row: Row<TData>) => void;
|
|
1169
|
+
hidden?: (row: Row<TData>) => boolean;
|
|
1170
|
+
disabled?: (row: Row<TData>) => boolean;
|
|
1171
|
+
}
|
|
1172
|
+
interface ActionsColumnOptions<TData extends RowData> {
|
|
1173
|
+
id?: string;
|
|
1174
|
+
header?: string;
|
|
1175
|
+
size?: number;
|
|
1176
|
+
actions: ActionItem<TData>[] | ((row: Row<TData>) => ActionItem<TData>[]);
|
|
1177
|
+
}
|
|
1178
|
+
declare function actionsColumn<TData extends RowData>(options: ActionsColumnOptions<TData>): ColumnDef<TData, unknown>;
|
|
1179
|
+
|
|
1180
|
+
interface ExpandColumnOptions {
|
|
1181
|
+
id?: string;
|
|
1182
|
+
size?: number;
|
|
1183
|
+
}
|
|
1184
|
+
declare function expandColumn<TData extends RowData>(options?: ExpandColumnOptions): ColumnDef<TData, unknown>;
|
|
1185
|
+
|
|
1186
|
+
interface CellStackProps {
|
|
1187
|
+
children: React__default.ReactNode;
|
|
1188
|
+
gap?: number;
|
|
1189
|
+
}
|
|
1190
|
+
declare function CellStack({ children, gap }: CellStackProps): react_jsx_runtime.JSX.Element;
|
|
1191
|
+
|
|
1192
|
+
interface CellRowProps {
|
|
1193
|
+
children: React__default.ReactNode;
|
|
1194
|
+
gap?: number;
|
|
1195
|
+
align?: 'start' | 'center' | 'end' | 'baseline';
|
|
1196
|
+
justify?: 'start' | 'center' | 'end' | 'between';
|
|
1197
|
+
}
|
|
1198
|
+
declare function CellRow({ children, gap, align, justify }: CellRowProps): react_jsx_runtime.JSX.Element;
|
|
1199
|
+
|
|
1200
|
+
interface CellWithIconProps {
|
|
1201
|
+
icon: React__default.ReactNode;
|
|
1202
|
+
children: React__default.ReactNode;
|
|
1203
|
+
gap?: number;
|
|
1204
|
+
iconSize?: number;
|
|
1205
|
+
}
|
|
1206
|
+
declare function CellWithIcon({ icon, children, gap, iconSize }: CellWithIconProps): react_jsx_runtime.JSX.Element;
|
|
1207
|
+
|
|
1208
|
+
interface CellTextProps {
|
|
1209
|
+
children: React__default.ReactNode;
|
|
1210
|
+
variant?: 'primary' | 'secondary' | 'muted';
|
|
1211
|
+
bold?: boolean;
|
|
1212
|
+
truncate?: boolean;
|
|
1213
|
+
size?: 'sm' | 'md' | 'lg';
|
|
1214
|
+
}
|
|
1215
|
+
declare function CellText({ children, variant, bold, truncate, size, }: CellTextProps): react_jsx_runtime.JSX.Element;
|
|
1216
|
+
|
|
1217
|
+
/**
|
|
1218
|
+
* Merges edit-commit changes into a data array, returning a new array
|
|
1219
|
+
* with matching rows shallow-merged. Rows without changes keep their
|
|
1220
|
+
* original reference so downstream memoisation works.
|
|
1221
|
+
*
|
|
1222
|
+
* @param data Current data array
|
|
1223
|
+
* @param changes Map of row ID -> partial row values (same shape as `onEditCommit`)
|
|
1224
|
+
* @param getRowId Optional row-ID resolver; defaults to string index
|
|
1225
|
+
*/
|
|
1226
|
+
declare function mergeEditChanges<TData>(data: TData[], changes: Record<string, Partial<TData>>, getRowId?: (row: TData, index: number) => string): TData[];
|
|
1227
|
+
|
|
1228
|
+
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 RowNumberColumnOptions, type SelectColumnOptions, 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 UseTablePersistenceOptions, type UseTablePersistenceReturn, type UseTableRowHeightsOptions, type UseThemeOptions, type UseTooltipOptions, type UseVirtualizationOptions, type UseVirtualizationResult, type VirtualColumn, type VirtualRow, type YableDefaults, YableProvider, actionsColumn, expandColumn, getMeasureRecipeForCellType, getRegisteredCellTypes, mergeEditChanges, resolveMeasureRecipe, rowNumberColumn, selectColumn, useAutoMeasurements, useCellFlash, useClipboard, useColumnVirtualization, useContextMenu, useFillHandle, useKeyboardNavigation, usePretextMeasurement, usePrintLayout, useRowAnimation, useRowDrag, useTable, useTableContext, useTablePersistence, useTableRowHeights, useTheme, useTooltip, useVirtualization, useYableDefaults };
|