@dynostack/react-grid 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +201 -0
- package/NOTICE +25 -0
- package/README.md +572 -0
- package/dist/index.cjs +2689 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +316 -0
- package/dist/index.d.ts +316 -0
- package/dist/index.js +2671 -0
- package/dist/index.js.map +1 -0
- package/dist/styles.css +71 -0
- package/package.json +79 -0
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,316 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { RowData, ColumnDef, ColumnPinningState, VisibilityState, Column, Table, CellContext, FilterFn } from '@tanstack/react-table';
|
|
3
|
+
import { CSSProperties } from 'react';
|
|
4
|
+
|
|
5
|
+
type RowActionId = "view" | "edit" | "duplicate" | "delete" | string;
|
|
6
|
+
type CustomRowAction<TData> = {
|
|
7
|
+
id: string;
|
|
8
|
+
label: string;
|
|
9
|
+
icon?: React.ReactNode;
|
|
10
|
+
danger?: boolean;
|
|
11
|
+
show?: (row: TData) => boolean;
|
|
12
|
+
};
|
|
13
|
+
type DataTableRowActionsProps<TData> = {
|
|
14
|
+
row: TData;
|
|
15
|
+
actions?: ("view" | "edit" | "duplicate" | "delete")[];
|
|
16
|
+
customActions?: CustomRowAction<TData>[];
|
|
17
|
+
onAction?: (action: RowActionId, row: TData) => void;
|
|
18
|
+
isEditing?: boolean;
|
|
19
|
+
onSaveEdit?: () => void;
|
|
20
|
+
onCancelEdit?: () => void;
|
|
21
|
+
};
|
|
22
|
+
declare function DataTableRowActions<TData>({ row, actions, customActions, onAction, isEditing, onSaveEdit, onCancelEdit, }: DataTableRowActionsProps<TData>): react_jsx_runtime.JSX.Element;
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* CSS variable overrides for a single DataTable instance.
|
|
26
|
+
*
|
|
27
|
+
* The component is built on shadcn/ui's CSS custom properties. By default it
|
|
28
|
+
* inherits whatever is defined on the consumer's :root (e.g. when shadcn is
|
|
29
|
+
* already set up). Pass any of these to override on a specific instance —
|
|
30
|
+
* values are emitted as inline CSS variables on the table root, scoped
|
|
31
|
+
* through CSS cascade to that instance only.
|
|
32
|
+
*/
|
|
33
|
+
type DataTableTheme = {
|
|
34
|
+
background?: string;
|
|
35
|
+
foreground?: string;
|
|
36
|
+
card?: string;
|
|
37
|
+
cardForeground?: string;
|
|
38
|
+
popover?: string;
|
|
39
|
+
popoverForeground?: string;
|
|
40
|
+
primary?: string;
|
|
41
|
+
primaryForeground?: string;
|
|
42
|
+
secondary?: string;
|
|
43
|
+
secondaryForeground?: string;
|
|
44
|
+
muted?: string;
|
|
45
|
+
mutedForeground?: string;
|
|
46
|
+
accent?: string;
|
|
47
|
+
accentForeground?: string;
|
|
48
|
+
destructive?: string;
|
|
49
|
+
destructiveForeground?: string;
|
|
50
|
+
border?: string;
|
|
51
|
+
input?: string;
|
|
52
|
+
ring?: string;
|
|
53
|
+
/** Border radius (e.g. "0.5rem"). */
|
|
54
|
+
radius?: string;
|
|
55
|
+
/** Font family for the table body. */
|
|
56
|
+
fontFamily?: string;
|
|
57
|
+
};
|
|
58
|
+
/** Convert a DataTableTheme into a `style` object of CSS variables. */
|
|
59
|
+
declare function themeToStyle(theme?: DataTableTheme): CSSProperties;
|
|
60
|
+
/** A handful of ready-to-use theme presets. */
|
|
61
|
+
declare const themePresets: {
|
|
62
|
+
light: {
|
|
63
|
+
background: string;
|
|
64
|
+
foreground: string;
|
|
65
|
+
card: string;
|
|
66
|
+
cardForeground: string;
|
|
67
|
+
primary: string;
|
|
68
|
+
primaryForeground: string;
|
|
69
|
+
border: string;
|
|
70
|
+
};
|
|
71
|
+
dark: {
|
|
72
|
+
background: string;
|
|
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;
|
|
100
|
+
};
|
|
101
|
+
};
|
|
102
|
+
type DataTableThemeName = keyof typeof themePresets;
|
|
103
|
+
|
|
104
|
+
type CellEditorType = "text" | "number" | "currency" | "date" | "select" | "switch" | "checkbox";
|
|
105
|
+
type FilterType = "text" | "number" | "select" | "multi-select" | "boolean" | "date";
|
|
106
|
+
type SelectOption = {
|
|
107
|
+
value: string;
|
|
108
|
+
label: string;
|
|
109
|
+
};
|
|
110
|
+
declare module "@tanstack/react-table" {
|
|
111
|
+
interface ColumnMeta<TData extends RowData, TValue> {
|
|
112
|
+
label?: string;
|
|
113
|
+
editor?: CellEditorType;
|
|
114
|
+
filterType?: FilterType;
|
|
115
|
+
selectOptions?: SelectOption[];
|
|
116
|
+
align?: "left" | "right" | "center";
|
|
117
|
+
cellClassName?: string;
|
|
118
|
+
headerClassName?: string;
|
|
119
|
+
exportable?: boolean;
|
|
120
|
+
isEditable?: boolean | ((row: TData) => boolean);
|
|
121
|
+
badgeMap?: Partial<Record<string, "default" | "secondary" | "destructive" | "success" | "warning" | "outline">>;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
type RowAction<TData> = "view" | "edit" | "duplicate" | "delete" | {
|
|
125
|
+
id: string;
|
|
126
|
+
label: string;
|
|
127
|
+
icon?: React.ReactNode;
|
|
128
|
+
danger?: boolean;
|
|
129
|
+
show?: (row: TData) => boolean;
|
|
130
|
+
};
|
|
131
|
+
type DataTableColumn<TData> = ColumnDef<TData>;
|
|
132
|
+
|
|
133
|
+
type DataTableFeatures = {
|
|
134
|
+
/** Toolbar global search input (default: true). */
|
|
135
|
+
search?: boolean;
|
|
136
|
+
/** Toolbar refresh button (default: true when onRefresh is provided). */
|
|
137
|
+
refresh?: boolean;
|
|
138
|
+
/** Column visibility menu (default: true). */
|
|
139
|
+
columnVisibility?: boolean;
|
|
140
|
+
/** CSV / Excel export menu (default: true). */
|
|
141
|
+
export?: boolean;
|
|
142
|
+
/** "Add row" toolbar button (default: true when onAddRow is provided). */
|
|
143
|
+
addRow?: boolean;
|
|
144
|
+
/** Bottom pagination controls (default: true). */
|
|
145
|
+
pagination?: boolean;
|
|
146
|
+
/** Sort headers (default: true). */
|
|
147
|
+
sorting?: boolean;
|
|
148
|
+
/** Per-column filtering (default: true). */
|
|
149
|
+
filtering?: boolean;
|
|
150
|
+
/** Column resizing handles (default: true). */
|
|
151
|
+
resizing?: boolean;
|
|
152
|
+
/** Drag-to-reorder columns (default: true). */
|
|
153
|
+
reordering?: boolean;
|
|
154
|
+
/** Pin / unpin column controls (default: true). */
|
|
155
|
+
pinning?: boolean;
|
|
156
|
+
};
|
|
157
|
+
type DataTableLabels = {
|
|
158
|
+
search?: string;
|
|
159
|
+
addRow?: string;
|
|
160
|
+
delete?: string;
|
|
161
|
+
clear?: string;
|
|
162
|
+
selected?: string;
|
|
163
|
+
refresh?: string;
|
|
164
|
+
columns?: string;
|
|
165
|
+
export?: string;
|
|
166
|
+
csv?: string;
|
|
167
|
+
excel?: string;
|
|
168
|
+
total?: string;
|
|
169
|
+
noData?: string;
|
|
170
|
+
noResults?: string;
|
|
171
|
+
refreshing?: string;
|
|
172
|
+
rowsPerPage?: string;
|
|
173
|
+
page?: string;
|
|
174
|
+
of?: string;
|
|
175
|
+
};
|
|
176
|
+
type DataTableDensity = "compact" | "default" | "comfortable";
|
|
177
|
+
type DataTableProps<TData extends {
|
|
178
|
+
id: string | number;
|
|
179
|
+
}> = {
|
|
180
|
+
data: TData[];
|
|
181
|
+
columns: ColumnDef<TData>[];
|
|
182
|
+
isLoading?: boolean;
|
|
183
|
+
isFetching?: boolean;
|
|
184
|
+
onRefresh?: () => void;
|
|
185
|
+
totalRecords?: number;
|
|
186
|
+
exportFileName?: string;
|
|
187
|
+
/** Hide the row-selection checkbox column. */
|
|
188
|
+
enableSelection?: boolean;
|
|
189
|
+
/** Render an expandable detail panel under the row. */
|
|
190
|
+
renderSubRow?: (row: TData) => React.ReactNode;
|
|
191
|
+
/** Use TanStack's built-in nested rows via this accessor. */
|
|
192
|
+
getSubRows?: (row: TData) => TData[] | undefined;
|
|
193
|
+
rowActions?: ("view" | "edit" | "duplicate" | "delete")[];
|
|
194
|
+
customRowActions?: CustomRowAction<TData>[];
|
|
195
|
+
onRowAction?: (action: RowActionId, row: TData) => void;
|
|
196
|
+
/** Commit a single edited cell. Receives the row, column id and new value. */
|
|
197
|
+
onCellEdit?: (row: TData, columnId: string, value: unknown) => void;
|
|
198
|
+
/** Commit an entire row in row-edit mode. */
|
|
199
|
+
onRowSave?: (row: TData, draft: Partial<TData>) => void;
|
|
200
|
+
/** Build a fresh empty row when "Add row" is clicked. */
|
|
201
|
+
onAddRow?: () => Partial<TData>;
|
|
202
|
+
/** Bulk delete selected rows. */
|
|
203
|
+
onBulkDelete?: (rows: TData[]) => void;
|
|
204
|
+
initialPageSize?: number;
|
|
205
|
+
pageSizeOptions?: number[];
|
|
206
|
+
initialColumnPinning?: ColumnPinningState;
|
|
207
|
+
initialColumnVisibility?: VisibilityState;
|
|
208
|
+
/** Optional controlled global filter (for cross-tab persistence). */
|
|
209
|
+
globalFilter?: string;
|
|
210
|
+
onGlobalFilterChange?: (value: string) => void;
|
|
211
|
+
className?: string;
|
|
212
|
+
toolbarSlot?: React.ReactNode;
|
|
213
|
+
/** Toggle individual table features. */
|
|
214
|
+
features?: DataTableFeatures;
|
|
215
|
+
/** Override every user-facing string. */
|
|
216
|
+
labels?: DataTableLabels;
|
|
217
|
+
/** Row + cell padding density. Defaults to "default". */
|
|
218
|
+
density?: DataTableDensity;
|
|
219
|
+
/** CSS-variable overrides (shadcn-compatible) scoped to this instance. */
|
|
220
|
+
theme?: DataTableTheme;
|
|
221
|
+
};
|
|
222
|
+
declare function DataTable<TData extends {
|
|
223
|
+
id: string | number;
|
|
224
|
+
}>({ data, columns, 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;
|
|
225
|
+
|
|
226
|
+
type Props$2<TData, TValue> = {
|
|
227
|
+
column: Column<TData, TValue>;
|
|
228
|
+
title: string;
|
|
229
|
+
};
|
|
230
|
+
declare function DataTableColumnHeader<TData, TValue>({ column, title, }: Props$2<TData, TValue>): react_jsx_runtime.JSX.Element;
|
|
231
|
+
|
|
232
|
+
type Props$1<TData> = {
|
|
233
|
+
table: Table<TData>;
|
|
234
|
+
pageSizeOptions?: number[];
|
|
235
|
+
};
|
|
236
|
+
declare function DataTablePagination<TData>({ table, pageSizeOptions, }: Props$1<TData>): react_jsx_runtime.JSX.Element;
|
|
237
|
+
|
|
238
|
+
type ToolbarFeatureFlags = {
|
|
239
|
+
search?: boolean;
|
|
240
|
+
refresh?: boolean;
|
|
241
|
+
columnVisibility?: boolean;
|
|
242
|
+
export?: boolean;
|
|
243
|
+
addRow?: boolean;
|
|
244
|
+
};
|
|
245
|
+
type ToolbarLabels = {
|
|
246
|
+
search?: string;
|
|
247
|
+
addRow?: string;
|
|
248
|
+
delete?: string;
|
|
249
|
+
clear?: string;
|
|
250
|
+
selected?: string;
|
|
251
|
+
refresh?: string;
|
|
252
|
+
columns?: string;
|
|
253
|
+
export?: string;
|
|
254
|
+
csv?: string;
|
|
255
|
+
excel?: string;
|
|
256
|
+
total?: string;
|
|
257
|
+
};
|
|
258
|
+
type Props<TData> = {
|
|
259
|
+
table: Table<TData>;
|
|
260
|
+
totalRecords: number;
|
|
261
|
+
isFetching?: boolean;
|
|
262
|
+
onRefresh?: () => void;
|
|
263
|
+
onAddRow?: () => void;
|
|
264
|
+
onBulkDelete?: (rows: TData[]) => void;
|
|
265
|
+
exportFileName?: string;
|
|
266
|
+
globalFilter: string;
|
|
267
|
+
onGlobalFilterChange: (value: string) => void;
|
|
268
|
+
toolbarSlot?: React.ReactNode;
|
|
269
|
+
features?: ToolbarFeatureFlags;
|
|
270
|
+
labels?: ToolbarLabels;
|
|
271
|
+
};
|
|
272
|
+
declare function DataTableToolbar<TData>({ table, totalRecords, isFetching, onRefresh, onAddRow, onBulkDelete, exportFileName, globalFilter, onGlobalFilterChange, toolbarSlot, features, labels: labelsProp, }: Props<TData>): react_jsx_runtime.JSX.Element;
|
|
273
|
+
|
|
274
|
+
type EditableCellProps<TData, TValue> = CellContext<TData, TValue> & {
|
|
275
|
+
isEditing: boolean;
|
|
276
|
+
/** True only when this cell was directly opened for edit (double-click). Row-edit mode keeps this false to avoid auto-opening every editor at once. */
|
|
277
|
+
autoOpen?: boolean;
|
|
278
|
+
onCommit: (value: unknown) => void;
|
|
279
|
+
onCancel: () => void;
|
|
280
|
+
onStartEdit: () => void;
|
|
281
|
+
};
|
|
282
|
+
declare function EditableCell<TData, TValue>({ getValue, column, row, isEditing, autoOpen, onCommit, onCancel, onStartEdit, }: EditableCellProps<TData, TValue>): react_jsx_runtime.JSX.Element;
|
|
283
|
+
|
|
284
|
+
type TextOp = "contains" | "notContains" | "equals" | "notEqual" | "startsWith" | "endsWith" | "blank" | "notBlank";
|
|
285
|
+
type NumberOp = "equals" | "notEqual" | "lessThan" | "lessThanOrEqual" | "greaterThan" | "greaterThanOrEqual" | "inRange" | "blank" | "notBlank";
|
|
286
|
+
type DateOp = "equals" | "notEqual" | "before" | "after" | "inRange" | "blank" | "notBlank";
|
|
287
|
+
type Combine = "AND" | "OR";
|
|
288
|
+
type Condition<Op extends string, V> = {
|
|
289
|
+
op: Op;
|
|
290
|
+
v?: V;
|
|
291
|
+
v2?: V;
|
|
292
|
+
};
|
|
293
|
+
type AdvFilter<Op extends string, V> = {
|
|
294
|
+
c1: Condition<Op, V>;
|
|
295
|
+
combine?: Combine;
|
|
296
|
+
c2?: Condition<Op, V>;
|
|
297
|
+
};
|
|
298
|
+
type SetFilter = {
|
|
299
|
+
selected: string[];
|
|
300
|
+
};
|
|
301
|
+
declare const textFilterFn: FilterFn<unknown>;
|
|
302
|
+
declare const numberFilterFn: FilterFn<unknown>;
|
|
303
|
+
declare const dateFilterFn: FilterFn<unknown>;
|
|
304
|
+
declare const setFilterFn: FilterFn<unknown>;
|
|
305
|
+
declare const booleanFilterFn: FilterFn<unknown>;
|
|
306
|
+
declare function isFilterActive(filterType: string | undefined, value: unknown): boolean;
|
|
307
|
+
type CommonProps<TData, TValue> = {
|
|
308
|
+
column: Column<TData, TValue>;
|
|
309
|
+
onClose: () => void;
|
|
310
|
+
};
|
|
311
|
+
declare function ColumnFilterPanel<TData, TValue>(props: CommonProps<TData, TValue>): react_jsx_runtime.JSX.Element | null;
|
|
312
|
+
|
|
313
|
+
declare function exportToCsv<TData>(table: Table<TData>, fileName?: string): void;
|
|
314
|
+
declare function exportToExcel<TData>(table: Table<TData>, fileName?: string): void;
|
|
315
|
+
|
|
316
|
+
export { type AdvFilter, type CellEditorType, ColumnFilterPanel, type Combine, type Condition, type CustomRowAction, DataTable, type DataTableColumn, DataTableColumnHeader, type DataTableDensity, type DataTableFeatures, 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 };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,316 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { RowData, ColumnDef, ColumnPinningState, VisibilityState, Column, Table, CellContext, FilterFn } from '@tanstack/react-table';
|
|
3
|
+
import { CSSProperties } from 'react';
|
|
4
|
+
|
|
5
|
+
type RowActionId = "view" | "edit" | "duplicate" | "delete" | string;
|
|
6
|
+
type CustomRowAction<TData> = {
|
|
7
|
+
id: string;
|
|
8
|
+
label: string;
|
|
9
|
+
icon?: React.ReactNode;
|
|
10
|
+
danger?: boolean;
|
|
11
|
+
show?: (row: TData) => boolean;
|
|
12
|
+
};
|
|
13
|
+
type DataTableRowActionsProps<TData> = {
|
|
14
|
+
row: TData;
|
|
15
|
+
actions?: ("view" | "edit" | "duplicate" | "delete")[];
|
|
16
|
+
customActions?: CustomRowAction<TData>[];
|
|
17
|
+
onAction?: (action: RowActionId, row: TData) => void;
|
|
18
|
+
isEditing?: boolean;
|
|
19
|
+
onSaveEdit?: () => void;
|
|
20
|
+
onCancelEdit?: () => void;
|
|
21
|
+
};
|
|
22
|
+
declare function DataTableRowActions<TData>({ row, actions, customActions, onAction, isEditing, onSaveEdit, onCancelEdit, }: DataTableRowActionsProps<TData>): react_jsx_runtime.JSX.Element;
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* CSS variable overrides for a single DataTable instance.
|
|
26
|
+
*
|
|
27
|
+
* The component is built on shadcn/ui's CSS custom properties. By default it
|
|
28
|
+
* inherits whatever is defined on the consumer's :root (e.g. when shadcn is
|
|
29
|
+
* already set up). Pass any of these to override on a specific instance —
|
|
30
|
+
* values are emitted as inline CSS variables on the table root, scoped
|
|
31
|
+
* through CSS cascade to that instance only.
|
|
32
|
+
*/
|
|
33
|
+
type DataTableTheme = {
|
|
34
|
+
background?: string;
|
|
35
|
+
foreground?: string;
|
|
36
|
+
card?: string;
|
|
37
|
+
cardForeground?: string;
|
|
38
|
+
popover?: string;
|
|
39
|
+
popoverForeground?: string;
|
|
40
|
+
primary?: string;
|
|
41
|
+
primaryForeground?: string;
|
|
42
|
+
secondary?: string;
|
|
43
|
+
secondaryForeground?: string;
|
|
44
|
+
muted?: string;
|
|
45
|
+
mutedForeground?: string;
|
|
46
|
+
accent?: string;
|
|
47
|
+
accentForeground?: string;
|
|
48
|
+
destructive?: string;
|
|
49
|
+
destructiveForeground?: string;
|
|
50
|
+
border?: string;
|
|
51
|
+
input?: string;
|
|
52
|
+
ring?: string;
|
|
53
|
+
/** Border radius (e.g. "0.5rem"). */
|
|
54
|
+
radius?: string;
|
|
55
|
+
/** Font family for the table body. */
|
|
56
|
+
fontFamily?: string;
|
|
57
|
+
};
|
|
58
|
+
/** Convert a DataTableTheme into a `style` object of CSS variables. */
|
|
59
|
+
declare function themeToStyle(theme?: DataTableTheme): CSSProperties;
|
|
60
|
+
/** A handful of ready-to-use theme presets. */
|
|
61
|
+
declare const themePresets: {
|
|
62
|
+
light: {
|
|
63
|
+
background: string;
|
|
64
|
+
foreground: string;
|
|
65
|
+
card: string;
|
|
66
|
+
cardForeground: string;
|
|
67
|
+
primary: string;
|
|
68
|
+
primaryForeground: string;
|
|
69
|
+
border: string;
|
|
70
|
+
};
|
|
71
|
+
dark: {
|
|
72
|
+
background: string;
|
|
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;
|
|
100
|
+
};
|
|
101
|
+
};
|
|
102
|
+
type DataTableThemeName = keyof typeof themePresets;
|
|
103
|
+
|
|
104
|
+
type CellEditorType = "text" | "number" | "currency" | "date" | "select" | "switch" | "checkbox";
|
|
105
|
+
type FilterType = "text" | "number" | "select" | "multi-select" | "boolean" | "date";
|
|
106
|
+
type SelectOption = {
|
|
107
|
+
value: string;
|
|
108
|
+
label: string;
|
|
109
|
+
};
|
|
110
|
+
declare module "@tanstack/react-table" {
|
|
111
|
+
interface ColumnMeta<TData extends RowData, TValue> {
|
|
112
|
+
label?: string;
|
|
113
|
+
editor?: CellEditorType;
|
|
114
|
+
filterType?: FilterType;
|
|
115
|
+
selectOptions?: SelectOption[];
|
|
116
|
+
align?: "left" | "right" | "center";
|
|
117
|
+
cellClassName?: string;
|
|
118
|
+
headerClassName?: string;
|
|
119
|
+
exportable?: boolean;
|
|
120
|
+
isEditable?: boolean | ((row: TData) => boolean);
|
|
121
|
+
badgeMap?: Partial<Record<string, "default" | "secondary" | "destructive" | "success" | "warning" | "outline">>;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
type RowAction<TData> = "view" | "edit" | "duplicate" | "delete" | {
|
|
125
|
+
id: string;
|
|
126
|
+
label: string;
|
|
127
|
+
icon?: React.ReactNode;
|
|
128
|
+
danger?: boolean;
|
|
129
|
+
show?: (row: TData) => boolean;
|
|
130
|
+
};
|
|
131
|
+
type DataTableColumn<TData> = ColumnDef<TData>;
|
|
132
|
+
|
|
133
|
+
type DataTableFeatures = {
|
|
134
|
+
/** Toolbar global search input (default: true). */
|
|
135
|
+
search?: boolean;
|
|
136
|
+
/** Toolbar refresh button (default: true when onRefresh is provided). */
|
|
137
|
+
refresh?: boolean;
|
|
138
|
+
/** Column visibility menu (default: true). */
|
|
139
|
+
columnVisibility?: boolean;
|
|
140
|
+
/** CSV / Excel export menu (default: true). */
|
|
141
|
+
export?: boolean;
|
|
142
|
+
/** "Add row" toolbar button (default: true when onAddRow is provided). */
|
|
143
|
+
addRow?: boolean;
|
|
144
|
+
/** Bottom pagination controls (default: true). */
|
|
145
|
+
pagination?: boolean;
|
|
146
|
+
/** Sort headers (default: true). */
|
|
147
|
+
sorting?: boolean;
|
|
148
|
+
/** Per-column filtering (default: true). */
|
|
149
|
+
filtering?: boolean;
|
|
150
|
+
/** Column resizing handles (default: true). */
|
|
151
|
+
resizing?: boolean;
|
|
152
|
+
/** Drag-to-reorder columns (default: true). */
|
|
153
|
+
reordering?: boolean;
|
|
154
|
+
/** Pin / unpin column controls (default: true). */
|
|
155
|
+
pinning?: boolean;
|
|
156
|
+
};
|
|
157
|
+
type DataTableLabels = {
|
|
158
|
+
search?: string;
|
|
159
|
+
addRow?: string;
|
|
160
|
+
delete?: string;
|
|
161
|
+
clear?: string;
|
|
162
|
+
selected?: string;
|
|
163
|
+
refresh?: string;
|
|
164
|
+
columns?: string;
|
|
165
|
+
export?: string;
|
|
166
|
+
csv?: string;
|
|
167
|
+
excel?: string;
|
|
168
|
+
total?: string;
|
|
169
|
+
noData?: string;
|
|
170
|
+
noResults?: string;
|
|
171
|
+
refreshing?: string;
|
|
172
|
+
rowsPerPage?: string;
|
|
173
|
+
page?: string;
|
|
174
|
+
of?: string;
|
|
175
|
+
};
|
|
176
|
+
type DataTableDensity = "compact" | "default" | "comfortable";
|
|
177
|
+
type DataTableProps<TData extends {
|
|
178
|
+
id: string | number;
|
|
179
|
+
}> = {
|
|
180
|
+
data: TData[];
|
|
181
|
+
columns: ColumnDef<TData>[];
|
|
182
|
+
isLoading?: boolean;
|
|
183
|
+
isFetching?: boolean;
|
|
184
|
+
onRefresh?: () => void;
|
|
185
|
+
totalRecords?: number;
|
|
186
|
+
exportFileName?: string;
|
|
187
|
+
/** Hide the row-selection checkbox column. */
|
|
188
|
+
enableSelection?: boolean;
|
|
189
|
+
/** Render an expandable detail panel under the row. */
|
|
190
|
+
renderSubRow?: (row: TData) => React.ReactNode;
|
|
191
|
+
/** Use TanStack's built-in nested rows via this accessor. */
|
|
192
|
+
getSubRows?: (row: TData) => TData[] | undefined;
|
|
193
|
+
rowActions?: ("view" | "edit" | "duplicate" | "delete")[];
|
|
194
|
+
customRowActions?: CustomRowAction<TData>[];
|
|
195
|
+
onRowAction?: (action: RowActionId, row: TData) => void;
|
|
196
|
+
/** Commit a single edited cell. Receives the row, column id and new value. */
|
|
197
|
+
onCellEdit?: (row: TData, columnId: string, value: unknown) => void;
|
|
198
|
+
/** Commit an entire row in row-edit mode. */
|
|
199
|
+
onRowSave?: (row: TData, draft: Partial<TData>) => void;
|
|
200
|
+
/** Build a fresh empty row when "Add row" is clicked. */
|
|
201
|
+
onAddRow?: () => Partial<TData>;
|
|
202
|
+
/** Bulk delete selected rows. */
|
|
203
|
+
onBulkDelete?: (rows: TData[]) => void;
|
|
204
|
+
initialPageSize?: number;
|
|
205
|
+
pageSizeOptions?: number[];
|
|
206
|
+
initialColumnPinning?: ColumnPinningState;
|
|
207
|
+
initialColumnVisibility?: VisibilityState;
|
|
208
|
+
/** Optional controlled global filter (for cross-tab persistence). */
|
|
209
|
+
globalFilter?: string;
|
|
210
|
+
onGlobalFilterChange?: (value: string) => void;
|
|
211
|
+
className?: string;
|
|
212
|
+
toolbarSlot?: React.ReactNode;
|
|
213
|
+
/** Toggle individual table features. */
|
|
214
|
+
features?: DataTableFeatures;
|
|
215
|
+
/** Override every user-facing string. */
|
|
216
|
+
labels?: DataTableLabels;
|
|
217
|
+
/** Row + cell padding density. Defaults to "default". */
|
|
218
|
+
density?: DataTableDensity;
|
|
219
|
+
/** CSS-variable overrides (shadcn-compatible) scoped to this instance. */
|
|
220
|
+
theme?: DataTableTheme;
|
|
221
|
+
};
|
|
222
|
+
declare function DataTable<TData extends {
|
|
223
|
+
id: string | number;
|
|
224
|
+
}>({ data, columns, 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;
|
|
225
|
+
|
|
226
|
+
type Props$2<TData, TValue> = {
|
|
227
|
+
column: Column<TData, TValue>;
|
|
228
|
+
title: string;
|
|
229
|
+
};
|
|
230
|
+
declare function DataTableColumnHeader<TData, TValue>({ column, title, }: Props$2<TData, TValue>): react_jsx_runtime.JSX.Element;
|
|
231
|
+
|
|
232
|
+
type Props$1<TData> = {
|
|
233
|
+
table: Table<TData>;
|
|
234
|
+
pageSizeOptions?: number[];
|
|
235
|
+
};
|
|
236
|
+
declare function DataTablePagination<TData>({ table, pageSizeOptions, }: Props$1<TData>): react_jsx_runtime.JSX.Element;
|
|
237
|
+
|
|
238
|
+
type ToolbarFeatureFlags = {
|
|
239
|
+
search?: boolean;
|
|
240
|
+
refresh?: boolean;
|
|
241
|
+
columnVisibility?: boolean;
|
|
242
|
+
export?: boolean;
|
|
243
|
+
addRow?: boolean;
|
|
244
|
+
};
|
|
245
|
+
type ToolbarLabels = {
|
|
246
|
+
search?: string;
|
|
247
|
+
addRow?: string;
|
|
248
|
+
delete?: string;
|
|
249
|
+
clear?: string;
|
|
250
|
+
selected?: string;
|
|
251
|
+
refresh?: string;
|
|
252
|
+
columns?: string;
|
|
253
|
+
export?: string;
|
|
254
|
+
csv?: string;
|
|
255
|
+
excel?: string;
|
|
256
|
+
total?: string;
|
|
257
|
+
};
|
|
258
|
+
type Props<TData> = {
|
|
259
|
+
table: Table<TData>;
|
|
260
|
+
totalRecords: number;
|
|
261
|
+
isFetching?: boolean;
|
|
262
|
+
onRefresh?: () => void;
|
|
263
|
+
onAddRow?: () => void;
|
|
264
|
+
onBulkDelete?: (rows: TData[]) => void;
|
|
265
|
+
exportFileName?: string;
|
|
266
|
+
globalFilter: string;
|
|
267
|
+
onGlobalFilterChange: (value: string) => void;
|
|
268
|
+
toolbarSlot?: React.ReactNode;
|
|
269
|
+
features?: ToolbarFeatureFlags;
|
|
270
|
+
labels?: ToolbarLabels;
|
|
271
|
+
};
|
|
272
|
+
declare function DataTableToolbar<TData>({ table, totalRecords, isFetching, onRefresh, onAddRow, onBulkDelete, exportFileName, globalFilter, onGlobalFilterChange, toolbarSlot, features, labels: labelsProp, }: Props<TData>): react_jsx_runtime.JSX.Element;
|
|
273
|
+
|
|
274
|
+
type EditableCellProps<TData, TValue> = CellContext<TData, TValue> & {
|
|
275
|
+
isEditing: boolean;
|
|
276
|
+
/** True only when this cell was directly opened for edit (double-click). Row-edit mode keeps this false to avoid auto-opening every editor at once. */
|
|
277
|
+
autoOpen?: boolean;
|
|
278
|
+
onCommit: (value: unknown) => void;
|
|
279
|
+
onCancel: () => void;
|
|
280
|
+
onStartEdit: () => void;
|
|
281
|
+
};
|
|
282
|
+
declare function EditableCell<TData, TValue>({ getValue, column, row, isEditing, autoOpen, onCommit, onCancel, onStartEdit, }: EditableCellProps<TData, TValue>): react_jsx_runtime.JSX.Element;
|
|
283
|
+
|
|
284
|
+
type TextOp = "contains" | "notContains" | "equals" | "notEqual" | "startsWith" | "endsWith" | "blank" | "notBlank";
|
|
285
|
+
type NumberOp = "equals" | "notEqual" | "lessThan" | "lessThanOrEqual" | "greaterThan" | "greaterThanOrEqual" | "inRange" | "blank" | "notBlank";
|
|
286
|
+
type DateOp = "equals" | "notEqual" | "before" | "after" | "inRange" | "blank" | "notBlank";
|
|
287
|
+
type Combine = "AND" | "OR";
|
|
288
|
+
type Condition<Op extends string, V> = {
|
|
289
|
+
op: Op;
|
|
290
|
+
v?: V;
|
|
291
|
+
v2?: V;
|
|
292
|
+
};
|
|
293
|
+
type AdvFilter<Op extends string, V> = {
|
|
294
|
+
c1: Condition<Op, V>;
|
|
295
|
+
combine?: Combine;
|
|
296
|
+
c2?: Condition<Op, V>;
|
|
297
|
+
};
|
|
298
|
+
type SetFilter = {
|
|
299
|
+
selected: string[];
|
|
300
|
+
};
|
|
301
|
+
declare const textFilterFn: FilterFn<unknown>;
|
|
302
|
+
declare const numberFilterFn: FilterFn<unknown>;
|
|
303
|
+
declare const dateFilterFn: FilterFn<unknown>;
|
|
304
|
+
declare const setFilterFn: FilterFn<unknown>;
|
|
305
|
+
declare const booleanFilterFn: FilterFn<unknown>;
|
|
306
|
+
declare function isFilterActive(filterType: string | undefined, value: unknown): boolean;
|
|
307
|
+
type CommonProps<TData, TValue> = {
|
|
308
|
+
column: Column<TData, TValue>;
|
|
309
|
+
onClose: () => void;
|
|
310
|
+
};
|
|
311
|
+
declare function ColumnFilterPanel<TData, TValue>(props: CommonProps<TData, TValue>): react_jsx_runtime.JSX.Element | null;
|
|
312
|
+
|
|
313
|
+
declare function exportToCsv<TData>(table: Table<TData>, fileName?: string): void;
|
|
314
|
+
declare function exportToExcel<TData>(table: Table<TData>, fileName?: string): void;
|
|
315
|
+
|
|
316
|
+
export { type AdvFilter, type CellEditorType, ColumnFilterPanel, type Combine, type Condition, type CustomRowAction, DataTable, type DataTableColumn, DataTableColumnHeader, type DataTableDensity, type DataTableFeatures, 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 };
|