@dynostack/react-grid 0.1.3 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +281 -20
- package/dist/index.cjs +607 -58
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +204 -42
- package/dist/index.d.ts +204 -42
- package/dist/index.js +603 -62
- package/dist/index.js.map +1 -1
- package/dist/page.css +24 -0
- package/dist/styles.css +145 -46
- package/package.json +2 -1
package/dist/index.d.cts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { RowData, ColumnDef, SortingState, ColumnFiltersState, ColumnPinningState, VisibilityState,
|
|
2
|
+
import { Column, RowData, ColumnDef, SortingState, ColumnFiltersState, ColumnPinningState, VisibilityState, Table, CellContext, FilterFn } from '@tanstack/react-table';
|
|
3
|
+
import * as React$1 from 'react';
|
|
3
4
|
import { CSSProperties } from 'react';
|
|
4
5
|
|
|
5
6
|
type RowActionId = "view" | "edit" | "duplicate" | "delete" | string;
|
|
@@ -30,7 +31,7 @@ declare function DataTableRowActions<TData>({ row, actions, customActions, onAct
|
|
|
30
31
|
* values are emitted as inline CSS variables on the table root, scoped
|
|
31
32
|
* through CSS cascade to that instance only.
|
|
32
33
|
*/
|
|
33
|
-
type
|
|
34
|
+
type DataTableTokens = {
|
|
34
35
|
background?: string;
|
|
35
36
|
foreground?: string;
|
|
36
37
|
card?: string;
|
|
@@ -55,51 +56,141 @@ type DataTableTheme = {
|
|
|
55
56
|
/** Font family for the table body. */
|
|
56
57
|
fontFamily?: string;
|
|
57
58
|
};
|
|
58
|
-
/**
|
|
59
|
+
/**
|
|
60
|
+
* A theme passed to `<DataTable theme={…}>`.
|
|
61
|
+
*
|
|
62
|
+
* Two accepted shapes:
|
|
63
|
+
*
|
|
64
|
+
* 1. A flat token map (`DataTableTokens`) — applied as-is, no dark variant.
|
|
65
|
+
* 2. A moded map (`DataTableModedTheme`) — `light` is applied by default,
|
|
66
|
+
* `dark` is swapped in automatically inside `@media (prefers-color-scheme: dark)`
|
|
67
|
+
* *and* inside any `.dark` ancestor.
|
|
68
|
+
*/
|
|
69
|
+
type DataTableModedTheme = {
|
|
70
|
+
light?: DataTableTokens;
|
|
71
|
+
dark?: DataTableTokens;
|
|
72
|
+
};
|
|
73
|
+
type DataTableTheme = DataTableTokens | DataTableModedTheme;
|
|
74
|
+
/** Convert a DataTableTokens map into a CSS `style` object. */
|
|
75
|
+
declare function tokensToStyle(tokens?: DataTableTokens): CSSProperties;
|
|
76
|
+
/**
|
|
77
|
+
* Back-compat: original API accepted a flat `DataTableTheme`. Still works,
|
|
78
|
+
* but if a moded theme is passed it returns the `light` variant only — use
|
|
79
|
+
* `splitTheme` if you need both variants.
|
|
80
|
+
*/
|
|
59
81
|
declare function themeToStyle(theme?: DataTableTheme): CSSProperties;
|
|
60
|
-
/**
|
|
82
|
+
/**
|
|
83
|
+
* Split a theme into its `light` (always applied) and optional `dark` (applied
|
|
84
|
+
* via `@media (prefers-color-scheme: dark)` and `.dark` ancestor) variants.
|
|
85
|
+
*
|
|
86
|
+
* For flat themes, returns `{ light: theme, dark: undefined }`.
|
|
87
|
+
*/
|
|
88
|
+
declare function splitTheme(theme?: DataTableTheme): {
|
|
89
|
+
light: DataTableTokens | undefined;
|
|
90
|
+
dark: DataTableTokens | undefined;
|
|
91
|
+
};
|
|
92
|
+
/**
|
|
93
|
+
* Build a full light+dark token set from a single OKLCH hue.
|
|
94
|
+
*
|
|
95
|
+
* @param hue Hue angle 0–360 (e.g. 285 for violet, 162 for emerald).
|
|
96
|
+
* @param chroma Optional base chroma for tinted neutrals (default 0.03).
|
|
97
|
+
*/
|
|
98
|
+
declare function buildPreset(hue: number, chroma?: number): DataTableModedTheme;
|
|
99
|
+
/**
|
|
100
|
+
* Convert a tokens map into a CSS declaration string (no selector, no braces),
|
|
101
|
+
* e.g. `--background:oklch(1 0 0);--foreground:oklch(0.145 0 0)`.
|
|
102
|
+
*
|
|
103
|
+
* Used internally to inject scoped <style> blocks for moded themes.
|
|
104
|
+
*/
|
|
105
|
+
declare function tokensToCssBlock(tokens?: DataTableTokens): string;
|
|
106
|
+
/**
|
|
107
|
+
* Ready-to-use theme presets.
|
|
108
|
+
*
|
|
109
|
+
* Each preset is a full light + dark token set — passing one to
|
|
110
|
+
* `<DataTable theme={…}>` repaints the entire table and auto-flips on OS
|
|
111
|
+
* dark mode (or when a `.dark` ancestor is added).
|
|
112
|
+
*
|
|
113
|
+
* Custom hues:
|
|
114
|
+
*
|
|
115
|
+
* ```ts
|
|
116
|
+
* import { buildPreset } from "@dynostack/react-grid"
|
|
117
|
+
* const tealPreset = buildPreset(180)
|
|
118
|
+
* ```
|
|
119
|
+
*/
|
|
61
120
|
declare const themePresets: {
|
|
121
|
+
neutral: DataTableModedTheme;
|
|
62
122
|
light: {
|
|
63
|
-
|
|
64
|
-
foreground: string;
|
|
65
|
-
card: string;
|
|
66
|
-
cardForeground: string;
|
|
67
|
-
primary: string;
|
|
68
|
-
primaryForeground: string;
|
|
69
|
-
border: string;
|
|
123
|
+
light: DataTableTokens | undefined;
|
|
70
124
|
};
|
|
71
125
|
dark: {
|
|
72
|
-
|
|
73
|
-
foreground: string;
|
|
74
|
-
card: string;
|
|
75
|
-
cardForeground: string;
|
|
76
|
-
primary: string;
|
|
77
|
-
primaryForeground: string;
|
|
78
|
-
border: string;
|
|
79
|
-
};
|
|
80
|
-
emerald: {
|
|
81
|
-
primary: string;
|
|
82
|
-
primaryForeground: string;
|
|
83
|
-
accent: string;
|
|
84
|
-
accentForeground: string;
|
|
85
|
-
ring: string;
|
|
86
|
-
};
|
|
87
|
-
violet: {
|
|
88
|
-
primary: string;
|
|
89
|
-
primaryForeground: string;
|
|
90
|
-
accent: string;
|
|
91
|
-
accentForeground: string;
|
|
92
|
-
ring: string;
|
|
93
|
-
};
|
|
94
|
-
amber: {
|
|
95
|
-
primary: string;
|
|
96
|
-
primaryForeground: string;
|
|
97
|
-
accent: string;
|
|
98
|
-
accentForeground: string;
|
|
99
|
-
ring: string;
|
|
126
|
+
light: DataTableTokens | undefined;
|
|
100
127
|
};
|
|
128
|
+
violet: DataTableModedTheme;
|
|
129
|
+
emerald: DataTableModedTheme;
|
|
130
|
+
amber: DataTableModedTheme;
|
|
131
|
+
rose: DataTableModedTheme;
|
|
132
|
+
sky: DataTableModedTheme;
|
|
133
|
+
slate: DataTableModedTheme;
|
|
101
134
|
};
|
|
102
135
|
type DataTableThemeName = keyof typeof themePresets;
|
|
136
|
+
/**
|
|
137
|
+
* Bundled fallback tokens used when `<DataTable isolate>` is set. These let
|
|
138
|
+
* the grid render correctly even when the consumer hasn't imported
|
|
139
|
+
* `styles.css` or provided any theme of their own.
|
|
140
|
+
*/
|
|
141
|
+
declare const ISOLATE_LIGHT_TOKENS: DataTableTokens;
|
|
142
|
+
declare const ISOLATE_DARK_TOKENS: DataTableTokens;
|
|
143
|
+
|
|
144
|
+
type SheetSide = "right" | "left" | "top" | "bottom";
|
|
145
|
+
|
|
146
|
+
type ViewSheetDensity = "compact" | "relaxed" | "comfy";
|
|
147
|
+
type ViewSheetLabels = {
|
|
148
|
+
title?: (row: any) => React.ReactNode;
|
|
149
|
+
description?: (row: any) => React.ReactNode;
|
|
150
|
+
emptyValue?: string;
|
|
151
|
+
density?: {
|
|
152
|
+
compact?: string;
|
|
153
|
+
relaxed?: string;
|
|
154
|
+
comfy?: string;
|
|
155
|
+
};
|
|
156
|
+
};
|
|
157
|
+
type ViewSheetConfig<TData> = {
|
|
158
|
+
/** Side of the screen to slide in from. Defaults to "right". */
|
|
159
|
+
side?: SheetSide;
|
|
160
|
+
/** Initial column count. Defaults to "compact" (1 column). */
|
|
161
|
+
defaultDensity?: ViewSheetDensity;
|
|
162
|
+
/** Hide the density tabs entirely if you want a fixed layout. */
|
|
163
|
+
hideDensityTabs?: boolean;
|
|
164
|
+
/** Override how a field's value is rendered. */
|
|
165
|
+
renderField?: (args: {
|
|
166
|
+
column: Column<TData, unknown>;
|
|
167
|
+
value: unknown;
|
|
168
|
+
row: TData;
|
|
169
|
+
}) => React.ReactNode;
|
|
170
|
+
/** Custom header for the sheet. */
|
|
171
|
+
renderHeader?: (row: TData) => React.ReactNode;
|
|
172
|
+
/** Filter / reorder which columns appear. Defaults to all visible columns. */
|
|
173
|
+
fields?: string[];
|
|
174
|
+
/** Override label / placeholder strings. */
|
|
175
|
+
labels?: ViewSheetLabels;
|
|
176
|
+
};
|
|
177
|
+
|
|
178
|
+
type ConfirmDeleteContext<TData> = {
|
|
179
|
+
/** The rows being deleted. Single-row delete passes one row; bulk passes many. */
|
|
180
|
+
rows: TData[];
|
|
181
|
+
/** "single" when triggered from the row actions menu; "bulk" from the toolbar. */
|
|
182
|
+
source: "single" | "bulk";
|
|
183
|
+
};
|
|
184
|
+
type ConfirmDeleteConfig<TData> = {
|
|
185
|
+
/** Modal title. Receives the same context the resolver receives. */
|
|
186
|
+
title?: (ctx: ConfirmDeleteContext<TData>) => React.ReactNode;
|
|
187
|
+
/** Modal description / body. */
|
|
188
|
+
description?: (ctx: ConfirmDeleteContext<TData>) => React.ReactNode;
|
|
189
|
+
/** Confirm button label. Defaults to "Delete". */
|
|
190
|
+
confirmLabel?: string;
|
|
191
|
+
/** Cancel button label. Defaults to "Cancel". */
|
|
192
|
+
cancelLabel?: string;
|
|
193
|
+
};
|
|
103
194
|
|
|
104
195
|
type CellEditorType = "text" | "number" | "currency" | "date" | "select" | "switch" | "checkbox";
|
|
105
196
|
type FilterType = "text" | "number" | "select" | "multi-select" | "boolean" | "date";
|
|
@@ -230,6 +321,30 @@ type DataTableProps<TData extends {
|
|
|
230
321
|
rowActions?: ("view" | "edit" | "duplicate" | "delete")[];
|
|
231
322
|
customRowActions?: CustomRowAction<TData>[];
|
|
232
323
|
onRowAction?: (action: RowActionId, row: TData) => void;
|
|
324
|
+
/**
|
|
325
|
+
* Handler for the built-in "View" action. If omitted, the grid still opens
|
|
326
|
+
* the View sheet (unless `viewSheet={false}`). Use this to also log,
|
|
327
|
+
* navigate, or fetch detail data when a user opens View.
|
|
328
|
+
*/
|
|
329
|
+
onView?: (row: TData) => void;
|
|
330
|
+
/**
|
|
331
|
+
* Handler for the built-in "Delete" action. Fires *after* the user confirms
|
|
332
|
+
* in the delete modal (or immediately if `confirmDelete={false}`).
|
|
333
|
+
* If omitted, the grid only emits via `onRowAction("delete", row)`.
|
|
334
|
+
*/
|
|
335
|
+
onDelete?: (row: TData) => void;
|
|
336
|
+
/**
|
|
337
|
+
* Configure the built-in View sheet — side, density, custom renderers.
|
|
338
|
+
* Pass `false` to disable; clicking "View" will then only fire
|
|
339
|
+
* `onView` / `onRowAction` without opening a sheet.
|
|
340
|
+
*/
|
|
341
|
+
viewSheet?: ViewSheetConfig<TData> | false;
|
|
342
|
+
/**
|
|
343
|
+
* Configure the delete confirmation modal. Pass `false` to disable it and
|
|
344
|
+
* fire delete handlers immediately. Pass an object to customize title,
|
|
345
|
+
* description, and button labels. Defaults to enabled with built-in copy.
|
|
346
|
+
*/
|
|
347
|
+
confirmDelete?: ConfirmDeleteConfig<TData> | boolean;
|
|
233
348
|
/** Commit a single edited cell. Receives the row, column id and new value. */
|
|
234
349
|
onCellEdit?: (row: TData, columnId: string, value: unknown) => void;
|
|
235
350
|
/** Commit an entire row in row-edit mode. */
|
|
@@ -253,12 +368,59 @@ type DataTableProps<TData extends {
|
|
|
253
368
|
labels?: DataTableLabels;
|
|
254
369
|
/** Row + cell padding density. Defaults to "default". */
|
|
255
370
|
density?: DataTableDensity;
|
|
256
|
-
/**
|
|
371
|
+
/**
|
|
372
|
+
* CSS-variable overrides (shadcn-compatible) scoped to this instance.
|
|
373
|
+
*
|
|
374
|
+
* Two accepted shapes:
|
|
375
|
+
*
|
|
376
|
+
* theme={{ primary: "...", accent: "..." }} // flat tokens
|
|
377
|
+
* theme={{ light: { ... }, dark: { ... } }} // moded — auto-flips
|
|
378
|
+
*
|
|
379
|
+
* Moded themes apply `light` always and swap to `dark` inside
|
|
380
|
+
* `@media (prefers-color-scheme: dark)` *and* inside any `.dark` ancestor.
|
|
381
|
+
*
|
|
382
|
+
* Use `themePresets.violet` (or any preset) for a ready-made moded theme.
|
|
383
|
+
*/
|
|
257
384
|
theme?: DataTableTheme;
|
|
385
|
+
/**
|
|
386
|
+
* When `true`, the grid does NOT inherit CSS variables from the app's
|
|
387
|
+
* `:root` (shadcn, custom theme, etc.). Instead it renders with the
|
|
388
|
+
* package's bundled defaults (or whatever you pass via `theme`).
|
|
389
|
+
*
|
|
390
|
+
* Useful when embedding the grid inside a heavily-themed shell where you
|
|
391
|
+
* want the table to keep its own look regardless of surrounding context.
|
|
392
|
+
*
|
|
393
|
+
* Defaults to `false` (inherit app theme).
|
|
394
|
+
*/
|
|
395
|
+
isolate?: boolean;
|
|
258
396
|
};
|
|
259
397
|
declare function DataTable<TData extends {
|
|
260
398
|
id: string | number;
|
|
261
|
-
}>({ data, columns, dataSource, isLoading, isFetching, onRefresh, totalRecords, exportFileName, enableSelection, renderSubRow, getSubRows, rowActions, customRowActions, onRowAction, onCellEdit, onRowSave, onAddRow, onBulkDelete, initialPageSize, pageSizeOptions, initialColumnPinning, initialColumnVisibility, globalFilter: globalFilterProp, onGlobalFilterChange, className, toolbarSlot, features, labels: labelsProp, density, theme, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
|
|
399
|
+
}>({ data, columns, dataSource, isLoading, isFetching, onRefresh, totalRecords, exportFileName, enableSelection, renderSubRow, getSubRows, rowActions, customRowActions, onRowAction, onCellEdit, onRowSave, onAddRow, onBulkDelete, initialPageSize, pageSizeOptions, initialColumnPinning, initialColumnVisibility, globalFilter: globalFilterProp, onGlobalFilterChange, className, toolbarSlot, features, labels: labelsProp, density, theme, isolate, onView, onDelete, viewSheet, confirmDelete, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
|
|
400
|
+
|
|
401
|
+
/**
|
|
402
|
+
* Shared portal container for every overlay inside a DataTable (popover,
|
|
403
|
+
* dropdown, select, sheet, alert-dialog, …).
|
|
404
|
+
*
|
|
405
|
+
* `<DataTable>` provides a ref pointing to a `<div>` rendered *inside* the
|
|
406
|
+
* themed grid root. When the value is non-null, every overlay primitive
|
|
407
|
+
* mounts its portal into that div instead of `document.body`.
|
|
408
|
+
*
|
|
409
|
+
* Why this matters
|
|
410
|
+
* ----------------
|
|
411
|
+
* CSS variables cascade only down the DOM tree. The grid's `theme` prop
|
|
412
|
+
* applies inline tokens to the grid root — if a popover portals to
|
|
413
|
+
* `document.body` (Radix default), those tokens never reach the popover and
|
|
414
|
+
* its `bg-primary` / `bg-popover` / `border` etc. resolve from `:root`
|
|
415
|
+
* instead. That's why a `theme={themePresets.rose}` table can show a black
|
|
416
|
+
* "Apply" button on a white popover surrounded by a rose grid.
|
|
417
|
+
*
|
|
418
|
+
* Mounting overlays inside the themed root fixes this cleanly with no global
|
|
419
|
+
* CSS pollution.
|
|
420
|
+
*/
|
|
421
|
+
declare const PortalContainerContext: React$1.Context<HTMLElement | null>;
|
|
422
|
+
/** Read the current grid's portal container, or `null` when outside a DataTable. */
|
|
423
|
+
declare function usePortalContainer(): HTMLElement | null;
|
|
262
424
|
|
|
263
425
|
type Props$2<TData, TValue> = {
|
|
264
426
|
column: Column<TData, TValue>;
|
|
@@ -350,4 +512,4 @@ declare function ColumnFilterPanel<TData, TValue>(props: CommonProps<TData, TVal
|
|
|
350
512
|
declare function exportToCsv<TData>(table: Table<TData>, fileName?: string): void;
|
|
351
513
|
declare function exportToExcel<TData>(table: Table<TData>, fileName?: string): void;
|
|
352
514
|
|
|
353
|
-
export { type AdvFilter, type CellEditorType, ColumnFilterPanel, type Combine, type Condition, type CustomRowAction, DataTable, type DataTableColumn, DataTableColumnHeader, type DataTableDataSource, type DataTableDataSourceResult, type DataTableDensity, type DataTableErrorContext, type DataTableFeatures, type DataTableFetchParams, type DataTableLabels, DataTablePagination, type DataTableProps, DataTableRowActions, type DataTableRowActionsProps, type DataTableTheme, type DataTableThemeName, DataTableToolbar, type DateOp, EditableCell, type FilterType, type NumberOp, type RowAction, type RowActionId, type SelectOption, type SetFilter, type TextOp, booleanFilterFn, dateFilterFn, exportToCsv, exportToExcel, isFilterActive, numberFilterFn, setFilterFn, textFilterFn, themePresets, themeToStyle };
|
|
515
|
+
export { type AdvFilter, type CellEditorType, ColumnFilterPanel, type Combine, type Condition, type ConfirmDeleteConfig, type ConfirmDeleteContext, type CustomRowAction, DataTable, type DataTableColumn, DataTableColumnHeader, type DataTableDataSource, type DataTableDataSourceResult, type DataTableDensity, type DataTableErrorContext, type DataTableFeatures, type DataTableFetchParams, type DataTableLabels, type DataTableModedTheme, DataTablePagination, type DataTableProps, DataTableRowActions, type DataTableRowActionsProps, type DataTableTheme, type DataTableThemeName, type DataTableTokens, DataTableToolbar, type DateOp, EditableCell, type FilterType, ISOLATE_DARK_TOKENS, ISOLATE_LIGHT_TOKENS, type NumberOp, PortalContainerContext, type RowAction, type RowActionId, type SelectOption, type SetFilter, type TextOp, type ViewSheetConfig, type ViewSheetDensity, type ViewSheetLabels, booleanFilterFn, buildPreset, dateFilterFn, exportToCsv, exportToExcel, isFilterActive, numberFilterFn, setFilterFn, splitTheme, textFilterFn, themePresets, themeToStyle, tokensToCssBlock, tokensToStyle, usePortalContainer };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { RowData, ColumnDef, SortingState, ColumnFiltersState, ColumnPinningState, VisibilityState,
|
|
2
|
+
import { Column, RowData, ColumnDef, SortingState, ColumnFiltersState, ColumnPinningState, VisibilityState, Table, CellContext, FilterFn } from '@tanstack/react-table';
|
|
3
|
+
import * as React$1 from 'react';
|
|
3
4
|
import { CSSProperties } from 'react';
|
|
4
5
|
|
|
5
6
|
type RowActionId = "view" | "edit" | "duplicate" | "delete" | string;
|
|
@@ -30,7 +31,7 @@ declare function DataTableRowActions<TData>({ row, actions, customActions, onAct
|
|
|
30
31
|
* values are emitted as inline CSS variables on the table root, scoped
|
|
31
32
|
* through CSS cascade to that instance only.
|
|
32
33
|
*/
|
|
33
|
-
type
|
|
34
|
+
type DataTableTokens = {
|
|
34
35
|
background?: string;
|
|
35
36
|
foreground?: string;
|
|
36
37
|
card?: string;
|
|
@@ -55,51 +56,141 @@ type DataTableTheme = {
|
|
|
55
56
|
/** Font family for the table body. */
|
|
56
57
|
fontFamily?: string;
|
|
57
58
|
};
|
|
58
|
-
/**
|
|
59
|
+
/**
|
|
60
|
+
* A theme passed to `<DataTable theme={…}>`.
|
|
61
|
+
*
|
|
62
|
+
* Two accepted shapes:
|
|
63
|
+
*
|
|
64
|
+
* 1. A flat token map (`DataTableTokens`) — applied as-is, no dark variant.
|
|
65
|
+
* 2. A moded map (`DataTableModedTheme`) — `light` is applied by default,
|
|
66
|
+
* `dark` is swapped in automatically inside `@media (prefers-color-scheme: dark)`
|
|
67
|
+
* *and* inside any `.dark` ancestor.
|
|
68
|
+
*/
|
|
69
|
+
type DataTableModedTheme = {
|
|
70
|
+
light?: DataTableTokens;
|
|
71
|
+
dark?: DataTableTokens;
|
|
72
|
+
};
|
|
73
|
+
type DataTableTheme = DataTableTokens | DataTableModedTheme;
|
|
74
|
+
/** Convert a DataTableTokens map into a CSS `style` object. */
|
|
75
|
+
declare function tokensToStyle(tokens?: DataTableTokens): CSSProperties;
|
|
76
|
+
/**
|
|
77
|
+
* Back-compat: original API accepted a flat `DataTableTheme`. Still works,
|
|
78
|
+
* but if a moded theme is passed it returns the `light` variant only — use
|
|
79
|
+
* `splitTheme` if you need both variants.
|
|
80
|
+
*/
|
|
59
81
|
declare function themeToStyle(theme?: DataTableTheme): CSSProperties;
|
|
60
|
-
/**
|
|
82
|
+
/**
|
|
83
|
+
* Split a theme into its `light` (always applied) and optional `dark` (applied
|
|
84
|
+
* via `@media (prefers-color-scheme: dark)` and `.dark` ancestor) variants.
|
|
85
|
+
*
|
|
86
|
+
* For flat themes, returns `{ light: theme, dark: undefined }`.
|
|
87
|
+
*/
|
|
88
|
+
declare function splitTheme(theme?: DataTableTheme): {
|
|
89
|
+
light: DataTableTokens | undefined;
|
|
90
|
+
dark: DataTableTokens | undefined;
|
|
91
|
+
};
|
|
92
|
+
/**
|
|
93
|
+
* Build a full light+dark token set from a single OKLCH hue.
|
|
94
|
+
*
|
|
95
|
+
* @param hue Hue angle 0–360 (e.g. 285 for violet, 162 for emerald).
|
|
96
|
+
* @param chroma Optional base chroma for tinted neutrals (default 0.03).
|
|
97
|
+
*/
|
|
98
|
+
declare function buildPreset(hue: number, chroma?: number): DataTableModedTheme;
|
|
99
|
+
/**
|
|
100
|
+
* Convert a tokens map into a CSS declaration string (no selector, no braces),
|
|
101
|
+
* e.g. `--background:oklch(1 0 0);--foreground:oklch(0.145 0 0)`.
|
|
102
|
+
*
|
|
103
|
+
* Used internally to inject scoped <style> blocks for moded themes.
|
|
104
|
+
*/
|
|
105
|
+
declare function tokensToCssBlock(tokens?: DataTableTokens): string;
|
|
106
|
+
/**
|
|
107
|
+
* Ready-to-use theme presets.
|
|
108
|
+
*
|
|
109
|
+
* Each preset is a full light + dark token set — passing one to
|
|
110
|
+
* `<DataTable theme={…}>` repaints the entire table and auto-flips on OS
|
|
111
|
+
* dark mode (or when a `.dark` ancestor is added).
|
|
112
|
+
*
|
|
113
|
+
* Custom hues:
|
|
114
|
+
*
|
|
115
|
+
* ```ts
|
|
116
|
+
* import { buildPreset } from "@dynostack/react-grid"
|
|
117
|
+
* const tealPreset = buildPreset(180)
|
|
118
|
+
* ```
|
|
119
|
+
*/
|
|
61
120
|
declare const themePresets: {
|
|
121
|
+
neutral: DataTableModedTheme;
|
|
62
122
|
light: {
|
|
63
|
-
|
|
64
|
-
foreground: string;
|
|
65
|
-
card: string;
|
|
66
|
-
cardForeground: string;
|
|
67
|
-
primary: string;
|
|
68
|
-
primaryForeground: string;
|
|
69
|
-
border: string;
|
|
123
|
+
light: DataTableTokens | undefined;
|
|
70
124
|
};
|
|
71
125
|
dark: {
|
|
72
|
-
|
|
73
|
-
foreground: string;
|
|
74
|
-
card: string;
|
|
75
|
-
cardForeground: string;
|
|
76
|
-
primary: string;
|
|
77
|
-
primaryForeground: string;
|
|
78
|
-
border: string;
|
|
79
|
-
};
|
|
80
|
-
emerald: {
|
|
81
|
-
primary: string;
|
|
82
|
-
primaryForeground: string;
|
|
83
|
-
accent: string;
|
|
84
|
-
accentForeground: string;
|
|
85
|
-
ring: string;
|
|
86
|
-
};
|
|
87
|
-
violet: {
|
|
88
|
-
primary: string;
|
|
89
|
-
primaryForeground: string;
|
|
90
|
-
accent: string;
|
|
91
|
-
accentForeground: string;
|
|
92
|
-
ring: string;
|
|
93
|
-
};
|
|
94
|
-
amber: {
|
|
95
|
-
primary: string;
|
|
96
|
-
primaryForeground: string;
|
|
97
|
-
accent: string;
|
|
98
|
-
accentForeground: string;
|
|
99
|
-
ring: string;
|
|
126
|
+
light: DataTableTokens | undefined;
|
|
100
127
|
};
|
|
128
|
+
violet: DataTableModedTheme;
|
|
129
|
+
emerald: DataTableModedTheme;
|
|
130
|
+
amber: DataTableModedTheme;
|
|
131
|
+
rose: DataTableModedTheme;
|
|
132
|
+
sky: DataTableModedTheme;
|
|
133
|
+
slate: DataTableModedTheme;
|
|
101
134
|
};
|
|
102
135
|
type DataTableThemeName = keyof typeof themePresets;
|
|
136
|
+
/**
|
|
137
|
+
* Bundled fallback tokens used when `<DataTable isolate>` is set. These let
|
|
138
|
+
* the grid render correctly even when the consumer hasn't imported
|
|
139
|
+
* `styles.css` or provided any theme of their own.
|
|
140
|
+
*/
|
|
141
|
+
declare const ISOLATE_LIGHT_TOKENS: DataTableTokens;
|
|
142
|
+
declare const ISOLATE_DARK_TOKENS: DataTableTokens;
|
|
143
|
+
|
|
144
|
+
type SheetSide = "right" | "left" | "top" | "bottom";
|
|
145
|
+
|
|
146
|
+
type ViewSheetDensity = "compact" | "relaxed" | "comfy";
|
|
147
|
+
type ViewSheetLabels = {
|
|
148
|
+
title?: (row: any) => React.ReactNode;
|
|
149
|
+
description?: (row: any) => React.ReactNode;
|
|
150
|
+
emptyValue?: string;
|
|
151
|
+
density?: {
|
|
152
|
+
compact?: string;
|
|
153
|
+
relaxed?: string;
|
|
154
|
+
comfy?: string;
|
|
155
|
+
};
|
|
156
|
+
};
|
|
157
|
+
type ViewSheetConfig<TData> = {
|
|
158
|
+
/** Side of the screen to slide in from. Defaults to "right". */
|
|
159
|
+
side?: SheetSide;
|
|
160
|
+
/** Initial column count. Defaults to "compact" (1 column). */
|
|
161
|
+
defaultDensity?: ViewSheetDensity;
|
|
162
|
+
/** Hide the density tabs entirely if you want a fixed layout. */
|
|
163
|
+
hideDensityTabs?: boolean;
|
|
164
|
+
/** Override how a field's value is rendered. */
|
|
165
|
+
renderField?: (args: {
|
|
166
|
+
column: Column<TData, unknown>;
|
|
167
|
+
value: unknown;
|
|
168
|
+
row: TData;
|
|
169
|
+
}) => React.ReactNode;
|
|
170
|
+
/** Custom header for the sheet. */
|
|
171
|
+
renderHeader?: (row: TData) => React.ReactNode;
|
|
172
|
+
/** Filter / reorder which columns appear. Defaults to all visible columns. */
|
|
173
|
+
fields?: string[];
|
|
174
|
+
/** Override label / placeholder strings. */
|
|
175
|
+
labels?: ViewSheetLabels;
|
|
176
|
+
};
|
|
177
|
+
|
|
178
|
+
type ConfirmDeleteContext<TData> = {
|
|
179
|
+
/** The rows being deleted. Single-row delete passes one row; bulk passes many. */
|
|
180
|
+
rows: TData[];
|
|
181
|
+
/** "single" when triggered from the row actions menu; "bulk" from the toolbar. */
|
|
182
|
+
source: "single" | "bulk";
|
|
183
|
+
};
|
|
184
|
+
type ConfirmDeleteConfig<TData> = {
|
|
185
|
+
/** Modal title. Receives the same context the resolver receives. */
|
|
186
|
+
title?: (ctx: ConfirmDeleteContext<TData>) => React.ReactNode;
|
|
187
|
+
/** Modal description / body. */
|
|
188
|
+
description?: (ctx: ConfirmDeleteContext<TData>) => React.ReactNode;
|
|
189
|
+
/** Confirm button label. Defaults to "Delete". */
|
|
190
|
+
confirmLabel?: string;
|
|
191
|
+
/** Cancel button label. Defaults to "Cancel". */
|
|
192
|
+
cancelLabel?: string;
|
|
193
|
+
};
|
|
103
194
|
|
|
104
195
|
type CellEditorType = "text" | "number" | "currency" | "date" | "select" | "switch" | "checkbox";
|
|
105
196
|
type FilterType = "text" | "number" | "select" | "multi-select" | "boolean" | "date";
|
|
@@ -230,6 +321,30 @@ type DataTableProps<TData extends {
|
|
|
230
321
|
rowActions?: ("view" | "edit" | "duplicate" | "delete")[];
|
|
231
322
|
customRowActions?: CustomRowAction<TData>[];
|
|
232
323
|
onRowAction?: (action: RowActionId, row: TData) => void;
|
|
324
|
+
/**
|
|
325
|
+
* Handler for the built-in "View" action. If omitted, the grid still opens
|
|
326
|
+
* the View sheet (unless `viewSheet={false}`). Use this to also log,
|
|
327
|
+
* navigate, or fetch detail data when a user opens View.
|
|
328
|
+
*/
|
|
329
|
+
onView?: (row: TData) => void;
|
|
330
|
+
/**
|
|
331
|
+
* Handler for the built-in "Delete" action. Fires *after* the user confirms
|
|
332
|
+
* in the delete modal (or immediately if `confirmDelete={false}`).
|
|
333
|
+
* If omitted, the grid only emits via `onRowAction("delete", row)`.
|
|
334
|
+
*/
|
|
335
|
+
onDelete?: (row: TData) => void;
|
|
336
|
+
/**
|
|
337
|
+
* Configure the built-in View sheet — side, density, custom renderers.
|
|
338
|
+
* Pass `false` to disable; clicking "View" will then only fire
|
|
339
|
+
* `onView` / `onRowAction` without opening a sheet.
|
|
340
|
+
*/
|
|
341
|
+
viewSheet?: ViewSheetConfig<TData> | false;
|
|
342
|
+
/**
|
|
343
|
+
* Configure the delete confirmation modal. Pass `false` to disable it and
|
|
344
|
+
* fire delete handlers immediately. Pass an object to customize title,
|
|
345
|
+
* description, and button labels. Defaults to enabled with built-in copy.
|
|
346
|
+
*/
|
|
347
|
+
confirmDelete?: ConfirmDeleteConfig<TData> | boolean;
|
|
233
348
|
/** Commit a single edited cell. Receives the row, column id and new value. */
|
|
234
349
|
onCellEdit?: (row: TData, columnId: string, value: unknown) => void;
|
|
235
350
|
/** Commit an entire row in row-edit mode. */
|
|
@@ -253,12 +368,59 @@ type DataTableProps<TData extends {
|
|
|
253
368
|
labels?: DataTableLabels;
|
|
254
369
|
/** Row + cell padding density. Defaults to "default". */
|
|
255
370
|
density?: DataTableDensity;
|
|
256
|
-
/**
|
|
371
|
+
/**
|
|
372
|
+
* CSS-variable overrides (shadcn-compatible) scoped to this instance.
|
|
373
|
+
*
|
|
374
|
+
* Two accepted shapes:
|
|
375
|
+
*
|
|
376
|
+
* theme={{ primary: "...", accent: "..." }} // flat tokens
|
|
377
|
+
* theme={{ light: { ... }, dark: { ... } }} // moded — auto-flips
|
|
378
|
+
*
|
|
379
|
+
* Moded themes apply `light` always and swap to `dark` inside
|
|
380
|
+
* `@media (prefers-color-scheme: dark)` *and* inside any `.dark` ancestor.
|
|
381
|
+
*
|
|
382
|
+
* Use `themePresets.violet` (or any preset) for a ready-made moded theme.
|
|
383
|
+
*/
|
|
257
384
|
theme?: DataTableTheme;
|
|
385
|
+
/**
|
|
386
|
+
* When `true`, the grid does NOT inherit CSS variables from the app's
|
|
387
|
+
* `:root` (shadcn, custom theme, etc.). Instead it renders with the
|
|
388
|
+
* package's bundled defaults (or whatever you pass via `theme`).
|
|
389
|
+
*
|
|
390
|
+
* Useful when embedding the grid inside a heavily-themed shell where you
|
|
391
|
+
* want the table to keep its own look regardless of surrounding context.
|
|
392
|
+
*
|
|
393
|
+
* Defaults to `false` (inherit app theme).
|
|
394
|
+
*/
|
|
395
|
+
isolate?: boolean;
|
|
258
396
|
};
|
|
259
397
|
declare function DataTable<TData extends {
|
|
260
398
|
id: string | number;
|
|
261
|
-
}>({ data, columns, dataSource, isLoading, isFetching, onRefresh, totalRecords, exportFileName, enableSelection, renderSubRow, getSubRows, rowActions, customRowActions, onRowAction, onCellEdit, onRowSave, onAddRow, onBulkDelete, initialPageSize, pageSizeOptions, initialColumnPinning, initialColumnVisibility, globalFilter: globalFilterProp, onGlobalFilterChange, className, toolbarSlot, features, labels: labelsProp, density, theme, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
|
|
399
|
+
}>({ data, columns, dataSource, isLoading, isFetching, onRefresh, totalRecords, exportFileName, enableSelection, renderSubRow, getSubRows, rowActions, customRowActions, onRowAction, onCellEdit, onRowSave, onAddRow, onBulkDelete, initialPageSize, pageSizeOptions, initialColumnPinning, initialColumnVisibility, globalFilter: globalFilterProp, onGlobalFilterChange, className, toolbarSlot, features, labels: labelsProp, density, theme, isolate, onView, onDelete, viewSheet, confirmDelete, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
|
|
400
|
+
|
|
401
|
+
/**
|
|
402
|
+
* Shared portal container for every overlay inside a DataTable (popover,
|
|
403
|
+
* dropdown, select, sheet, alert-dialog, …).
|
|
404
|
+
*
|
|
405
|
+
* `<DataTable>` provides a ref pointing to a `<div>` rendered *inside* the
|
|
406
|
+
* themed grid root. When the value is non-null, every overlay primitive
|
|
407
|
+
* mounts its portal into that div instead of `document.body`.
|
|
408
|
+
*
|
|
409
|
+
* Why this matters
|
|
410
|
+
* ----------------
|
|
411
|
+
* CSS variables cascade only down the DOM tree. The grid's `theme` prop
|
|
412
|
+
* applies inline tokens to the grid root — if a popover portals to
|
|
413
|
+
* `document.body` (Radix default), those tokens never reach the popover and
|
|
414
|
+
* its `bg-primary` / `bg-popover` / `border` etc. resolve from `:root`
|
|
415
|
+
* instead. That's why a `theme={themePresets.rose}` table can show a black
|
|
416
|
+
* "Apply" button on a white popover surrounded by a rose grid.
|
|
417
|
+
*
|
|
418
|
+
* Mounting overlays inside the themed root fixes this cleanly with no global
|
|
419
|
+
* CSS pollution.
|
|
420
|
+
*/
|
|
421
|
+
declare const PortalContainerContext: React$1.Context<HTMLElement | null>;
|
|
422
|
+
/** Read the current grid's portal container, or `null` when outside a DataTable. */
|
|
423
|
+
declare function usePortalContainer(): HTMLElement | null;
|
|
262
424
|
|
|
263
425
|
type Props$2<TData, TValue> = {
|
|
264
426
|
column: Column<TData, TValue>;
|
|
@@ -350,4 +512,4 @@ declare function ColumnFilterPanel<TData, TValue>(props: CommonProps<TData, TVal
|
|
|
350
512
|
declare function exportToCsv<TData>(table: Table<TData>, fileName?: string): void;
|
|
351
513
|
declare function exportToExcel<TData>(table: Table<TData>, fileName?: string): void;
|
|
352
514
|
|
|
353
|
-
export { type AdvFilter, type CellEditorType, ColumnFilterPanel, type Combine, type Condition, type CustomRowAction, DataTable, type DataTableColumn, DataTableColumnHeader, type DataTableDataSource, type DataTableDataSourceResult, type DataTableDensity, type DataTableErrorContext, type DataTableFeatures, type DataTableFetchParams, type DataTableLabels, DataTablePagination, type DataTableProps, DataTableRowActions, type DataTableRowActionsProps, type DataTableTheme, type DataTableThemeName, DataTableToolbar, type DateOp, EditableCell, type FilterType, type NumberOp, type RowAction, type RowActionId, type SelectOption, type SetFilter, type TextOp, booleanFilterFn, dateFilterFn, exportToCsv, exportToExcel, isFilterActive, numberFilterFn, setFilterFn, textFilterFn, themePresets, themeToStyle };
|
|
515
|
+
export { type AdvFilter, type CellEditorType, ColumnFilterPanel, type Combine, type Condition, type ConfirmDeleteConfig, type ConfirmDeleteContext, type CustomRowAction, DataTable, type DataTableColumn, DataTableColumnHeader, type DataTableDataSource, type DataTableDataSourceResult, type DataTableDensity, type DataTableErrorContext, type DataTableFeatures, type DataTableFetchParams, type DataTableLabels, type DataTableModedTheme, DataTablePagination, type DataTableProps, DataTableRowActions, type DataTableRowActionsProps, type DataTableTheme, type DataTableThemeName, type DataTableTokens, DataTableToolbar, type DateOp, EditableCell, type FilterType, ISOLATE_DARK_TOKENS, ISOLATE_LIGHT_TOKENS, type NumberOp, PortalContainerContext, type RowAction, type RowActionId, type SelectOption, type SetFilter, type TextOp, type ViewSheetConfig, type ViewSheetDensity, type ViewSheetLabels, booleanFilterFn, buildPreset, dateFilterFn, exportToCsv, exportToExcel, isFilterActive, numberFilterFn, setFilterFn, splitTheme, textFilterFn, themePresets, themeToStyle, tokensToCssBlock, tokensToStyle, usePortalContainer };
|