@caffeinebounce/ui 0.62.3 → 0.63.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 +1 -1
- package/dist/blog.js +7 -6
- package/dist/blog.mjs +2 -1
- package/dist/charts.d.cts +1 -1
- package/dist/charts.d.ts +1 -1
- package/dist/{chunk-6DVWMJ3H.mjs → chunk-2EFVMX6V.mjs} +3 -3
- package/dist/{chunk-6ZJCK6KH.js → chunk-375DECW4.js} +31 -31
- package/dist/{chunk-PZRI43EZ.js → chunk-46JYKBRX.js} +0 -43
- package/dist/chunk-5D55OVD5.js +75 -0
- package/dist/{chunk-JORVSG52.js → chunk-663CFAHS.js} +211 -269
- package/dist/chunk-6HKJDV43.mjs +48 -0
- package/dist/chunk-6NCRGHV3.mjs +64 -0
- package/dist/{chunk-OLAAXLXY.mjs → chunk-6QAKQG57.mjs} +4 -4
- package/dist/{chunk-N6AFNFZR.mjs → chunk-7ERVZXIN.mjs} +214 -270
- package/dist/chunk-APFEP5B7.mjs +100 -0
- package/dist/chunk-C3OADNSG.js +348 -0
- package/dist/{chunk-GIJQE3JR.js → chunk-DH5Z3ETN.js} +66 -45
- package/dist/chunk-DYWZ23QT.mjs +90 -0
- package/dist/{chunk-DTVWRRFN.mjs → chunk-E67IR6HU.mjs} +30 -9
- package/dist/{chunk-OVNLC5RD.mjs → chunk-EXQSWHLD.mjs} +6 -6
- package/dist/{chunk-ZOA7B32D.js → chunk-F35KL6TX.js} +9 -9
- package/dist/{chunk-YSLD2HLP.mjs → chunk-FFJC66KO.mjs} +1 -1
- package/dist/{chunk-MPZFPU4X.js → chunk-GMBLPQ3I.js} +3 -3
- package/dist/chunk-IJFPPLQW.js +50 -0
- package/dist/{chunk-BMFQG6RA.mjs → chunk-KJIX6V32.mjs} +107 -1885
- package/dist/chunk-LABHD4PU.js +109 -0
- package/dist/{chunk-GAIQJCAZ.js → chunk-LT5VD4KR.js} +149 -1953
- package/dist/{chunk-7DHKQODW.mjs → chunk-LTLCIRZY.mjs} +256 -474
- package/dist/chunk-N5BHXWR3.mjs +34 -0
- package/dist/chunk-OCO3Z5YA.js +37 -0
- package/dist/chunk-OIJ7XMDV.mjs +71 -0
- package/dist/chunk-ORBH4IBC.mjs +316 -0
- package/dist/chunk-OWWOAYIY.js +2652 -0
- package/dist/chunk-PFHOXDSW.mjs +10 -0
- package/dist/chunk-QRS7DJGS.js +103 -0
- package/dist/{chunk-NXPEJ2UR.mjs → chunk-R3X4B4JJ.mjs} +53 -6
- package/dist/chunk-RM7ACPTM.mjs +2601 -0
- package/dist/chunk-RODSGPBB.mjs +75 -0
- package/dist/{chunk-T6ZBA6VJ.js → chunk-UHAV34YX.js} +8 -8
- package/dist/{chunk-GUSTCU2W.mjs → chunk-ULANYJ7Y.mjs} +1 -59
- package/dist/chunk-ULDE7QSN.js +70 -0
- package/dist/chunk-UT36VNVZ.mjs +47 -0
- package/dist/chunk-UY3H4PKB.js +71 -0
- package/dist/{chunk-KB7UXIQZ.mjs → chunk-VIVWFQG5.mjs} +2 -1
- package/dist/{chunk-ESZ7CBA2.js → chunk-VKBJ3SGT.js} +6 -5
- package/dist/{chunk-UM7WMXIU.js → chunk-W3YOQ5ZD.js} +264 -505
- package/dist/{chunk-GHOFYK2E.js → chunk-XGJL6DLV.js} +55 -5
- package/dist/chunk-YRIBFIQ5.js +116 -0
- package/dist/chunk-ZWWJ3RRA.js +15 -0
- package/dist/data-grid.d.cts +241 -0
- package/dist/data-grid.d.ts +241 -0
- package/dist/data-grid.js +6486 -0
- package/dist/data-grid.mjs +6459 -0
- package/dist/data-table-CDQBo-Ve.d.ts +818 -0
- package/dist/data-table-jLzt6plY.d.cts +818 -0
- package/dist/data-table.d.cts +8 -42
- package/dist/data-table.d.ts +8 -42
- package/dist/data-table.js +61 -187
- package/dist/data-table.mjs +11 -5
- package/dist/finance.d.cts +534 -0
- package/dist/finance.d.ts +534 -0
- package/dist/finance.js +188 -0
- package/dist/finance.mjs +15 -0
- package/dist/forms.js +9 -6
- package/dist/forms.mjs +7 -4
- package/dist/{hooks-B2jU1GVT.d.ts → hooks-A55E0fgf.d.ts} +3 -2
- package/dist/{hooks-8ORd7T1A.d.cts → hooks-Bys_AZPI.d.cts} +3 -2
- package/dist/hooks.d.cts +1 -1
- package/dist/hooks.d.ts +1 -1
- package/dist/hooks.js +26 -23
- package/dist/hooks.mjs +6 -3
- package/dist/index.d.cts +536 -665
- package/dist/index.d.ts +536 -665
- package/dist/index.js +3829 -3408
- package/dist/index.mjs +2067 -1767
- package/dist/layouts.js +25 -25
- package/dist/layouts.mjs +4 -4
- package/dist/marketing.js +74 -74
- package/dist/marketing.mjs +4 -4
- package/dist/navigation.js +28 -28
- package/dist/navigation.mjs +6 -6
- package/dist/primitives.d.cts +72 -109
- package/dist/primitives.d.ts +72 -109
- package/dist/primitives.js +78 -72
- package/dist/primitives.mjs +8 -6
- package/dist/settings.js +9 -9
- package/dist/settings.mjs +4 -4
- package/package.json +17 -1
- package/dist/UnifiedTableControls-CG299y9h.d.ts +0 -1233
- package/dist/UnifiedTableControls-CIjRpNhy.d.cts +0 -1233
- package/dist/chunk-GMBGWOCR.mjs +0 -49
- package/dist/chunk-HBLKVQIQ.mjs +0 -23
- package/dist/chunk-HMAMMC72.js +0 -26
- package/dist/chunk-MVYRNJA6.js +0 -75
- /package/dist/{chunk-RVEFPVZF.mjs → chunk-C57MX3BG.mjs} +0 -0
- /package/dist/{chunk-C4UT5V3P.js → chunk-OWHI5VGJ.js} +0 -0
|
@@ -0,0 +1,818 @@
|
|
|
1
|
+
import { Table, VisibilityState, ColumnFiltersState, SortingState, Row, Column, RowData, ColumnSort, TableOptions, TableState, ColumnMeta } from '@tanstack/react-table';
|
|
2
|
+
import * as nuqs_server from 'nuqs/server';
|
|
3
|
+
import { z } from 'zod';
|
|
4
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
5
|
+
import * as React$1 from 'react';
|
|
6
|
+
import { c as ButtonProps } from './button-BHnoRUkF.cjs';
|
|
7
|
+
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
|
|
8
|
+
import * as PopoverPrimitive from '@radix-ui/react-popover';
|
|
9
|
+
import * as _tanstack_table_core from '@tanstack/table-core';
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* Props for DataTableAddButton
|
|
13
|
+
*/
|
|
14
|
+
interface DataTableAddButtonProps extends Omit<ButtonProps, "variant" | "size"> {
|
|
15
|
+
/** Label text to display (defaults to "Add") */
|
|
16
|
+
label?: string;
|
|
17
|
+
/** Custom icon to use instead of Plus */
|
|
18
|
+
icon?: React$1.ReactNode;
|
|
19
|
+
/** Hide label on small screens (responsive) */
|
|
20
|
+
responsiveLabel?: boolean;
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* Standardized "Add" button for DataTable headers.
|
|
24
|
+
*
|
|
25
|
+
* Provides a consistent styling pattern:
|
|
26
|
+
* - Ghost variant with muted text that highlights on hover
|
|
27
|
+
* - Small size with compact height (h-7)
|
|
28
|
+
* - Plus icon by default
|
|
29
|
+
* - Optional responsive label (hidden on small screens)
|
|
30
|
+
*
|
|
31
|
+
* @example
|
|
32
|
+
* ```tsx
|
|
33
|
+
* <DataTableTopper>
|
|
34
|
+
* <DataTableViews ... />
|
|
35
|
+
* <DataTableSearch ... />
|
|
36
|
+
* <DataTableAddButton onClick={() => setShowDialog(true)} />
|
|
37
|
+
* </DataTableTopper>
|
|
38
|
+
* ```
|
|
39
|
+
*
|
|
40
|
+
* @example With custom label
|
|
41
|
+
* ```tsx
|
|
42
|
+
* <DataTableAddButton label="New User" onClick={handleAdd} />
|
|
43
|
+
* ```
|
|
44
|
+
*
|
|
45
|
+
* @example Non-responsive (always show label)
|
|
46
|
+
* ```tsx
|
|
47
|
+
* <DataTableAddButton label="Add" responsiveLabel={false} onClick={handleAdd} />
|
|
48
|
+
* ```
|
|
49
|
+
*/
|
|
50
|
+
declare function DataTableAddButton({ label, icon, responsiveLabel, className, children, ...props }: DataTableAddButtonProps): react_jsx_runtime.JSX.Element;
|
|
51
|
+
|
|
52
|
+
/**
|
|
53
|
+
* Options for CSV export
|
|
54
|
+
*/
|
|
55
|
+
interface ExportToCsvOptions<TData> {
|
|
56
|
+
/** TanStack Table instance */
|
|
57
|
+
table: Table<TData>;
|
|
58
|
+
/** Custom filename (without extension) */
|
|
59
|
+
filename?: string;
|
|
60
|
+
/** Whether to include only visible columns (default: true) */
|
|
61
|
+
visibleColumnsOnly?: boolean;
|
|
62
|
+
/** Whether to include only selected rows (default: false, exports all rows) */
|
|
63
|
+
selectedRowsOnly?: boolean;
|
|
64
|
+
/** Custom column headers mapping (columnId -> headerText) */
|
|
65
|
+
customHeaders?: Record<string, string>;
|
|
66
|
+
/** Column IDs to exclude from export */
|
|
67
|
+
excludeColumns?: string[];
|
|
68
|
+
/** Custom value formatter for specific columns */
|
|
69
|
+
formatters?: Record<string, (value: unknown) => string>;
|
|
70
|
+
}
|
|
71
|
+
/**
|
|
72
|
+
* Exports table data to CSV and triggers download
|
|
73
|
+
*/
|
|
74
|
+
declare function exportToCsv<TData>({ table, filename, visibleColumnsOnly, selectedRowsOnly, customHeaders, excludeColumns, formatters, }: ExportToCsvOptions<TData>): void;
|
|
75
|
+
/**
|
|
76
|
+
* Options for Excel export
|
|
77
|
+
*/
|
|
78
|
+
interface ExportToExcelOptions<TData> {
|
|
79
|
+
/** TanStack Table instance */
|
|
80
|
+
table: Table<TData>;
|
|
81
|
+
/** Custom filename (without extension) */
|
|
82
|
+
filename?: string;
|
|
83
|
+
/** Whether to include only visible columns (default: true) */
|
|
84
|
+
visibleColumnsOnly?: boolean;
|
|
85
|
+
/** Whether to include only selected rows (default: false, exports all rows) */
|
|
86
|
+
selectedRowsOnly?: boolean;
|
|
87
|
+
/** Custom column headers mapping (columnId -> headerText) */
|
|
88
|
+
customHeaders?: Record<string, string>;
|
|
89
|
+
/** Column IDs to exclude from export */
|
|
90
|
+
excludeColumns?: string[];
|
|
91
|
+
/** Custom value formatter for specific columns */
|
|
92
|
+
formatters?: Record<string, (value: unknown) => string>;
|
|
93
|
+
}
|
|
94
|
+
/**
|
|
95
|
+
* Exports table data to Excel (XML Spreadsheet format) and triggers download
|
|
96
|
+
*/
|
|
97
|
+
declare function exportToExcel<TData>({ table, filename, visibleColumnsOnly, selectedRowsOnly, customHeaders, excludeColumns, formatters, }: ExportToExcelOptions<TData>): void;
|
|
98
|
+
type ExportFormat = "csv" | "excel";
|
|
99
|
+
interface DataTableExportButtonProps<TData = unknown> {
|
|
100
|
+
/**
|
|
101
|
+
* TanStack Table instance for built-in export.
|
|
102
|
+
* If provided, the component will handle CSV/Excel export automatically.
|
|
103
|
+
*/
|
|
104
|
+
table?: Table<TData>;
|
|
105
|
+
/**
|
|
106
|
+
* Custom export callback for CSV. If provided (and table is not), this will be called instead.
|
|
107
|
+
* Should return a Promise that resolves when export is complete.
|
|
108
|
+
*/
|
|
109
|
+
onExportCsv?: () => Promise<void>;
|
|
110
|
+
/**
|
|
111
|
+
* Custom export callback for Excel. If provided (and table is not), this will be called instead.
|
|
112
|
+
* Should return a Promise that resolves when export is complete.
|
|
113
|
+
*/
|
|
114
|
+
onExportExcel?: () => Promise<void>;
|
|
115
|
+
/**
|
|
116
|
+
* @deprecated Use onExportCsv instead. Kept for backwards compatibility.
|
|
117
|
+
*/
|
|
118
|
+
onExport?: () => Promise<void>;
|
|
119
|
+
/** Custom filename for export (without extension) */
|
|
120
|
+
filename?: string;
|
|
121
|
+
/** Label for the tooltip */
|
|
122
|
+
label?: string;
|
|
123
|
+
/** Whether the button is disabled */
|
|
124
|
+
disabled?: boolean;
|
|
125
|
+
/** Whether to export only selected rows (default: false) */
|
|
126
|
+
selectedRowsOnly?: boolean;
|
|
127
|
+
/** Column IDs to exclude from export */
|
|
128
|
+
excludeColumns?: string[];
|
|
129
|
+
/** Custom column headers mapping (columnId -> headerText) */
|
|
130
|
+
customHeaders?: Record<string, string>;
|
|
131
|
+
/** Custom value formatters for specific columns */
|
|
132
|
+
formatters?: Record<string, (value: unknown) => string>;
|
|
133
|
+
}
|
|
134
|
+
/**
|
|
135
|
+
* Export dropdown button for DataTable with CSV and Excel options.
|
|
136
|
+
* Styled consistently with other DataTable topper buttons.
|
|
137
|
+
*
|
|
138
|
+
* @example Built-in export (CSV and Excel)
|
|
139
|
+
* ```tsx
|
|
140
|
+
* <DataTableExportButton
|
|
141
|
+
* table={table}
|
|
142
|
+
* filename="my-data"
|
|
143
|
+
* excludeColumns={["actions"]}
|
|
144
|
+
* />
|
|
145
|
+
* ```
|
|
146
|
+
*
|
|
147
|
+
* @example Custom export handlers
|
|
148
|
+
* ```tsx
|
|
149
|
+
* <DataTableExportButton
|
|
150
|
+
* onExportCsv={async () => { ... }}
|
|
151
|
+
* onExportExcel={async () => { ... }}
|
|
152
|
+
* />
|
|
153
|
+
* ```
|
|
154
|
+
*/
|
|
155
|
+
declare function DataTableExportButton<TData = unknown>({ table, onExportCsv, onExportExcel, onExport, // deprecated, maps to CSV
|
|
156
|
+
filename, label, disabled, selectedRowsOnly, excludeColumns, customHeaders, formatters, }: DataTableExportButtonProps<TData>): react_jsx_runtime.JSX.Element;
|
|
157
|
+
|
|
158
|
+
interface DataTableRowAction$1 {
|
|
159
|
+
/** Label for the action */
|
|
160
|
+
label: string;
|
|
161
|
+
/** Icon component to display */
|
|
162
|
+
icon?: React$1.ReactNode;
|
|
163
|
+
/** Callback when action is clicked */
|
|
164
|
+
onClick: () => void;
|
|
165
|
+
/** Whether the action is destructive (shows in red on hover) */
|
|
166
|
+
destructive?: boolean;
|
|
167
|
+
/** Whether the action is a success action (shows in green on hover) */
|
|
168
|
+
success?: boolean;
|
|
169
|
+
/** Whether the action is active/enabled (shows green, goes muted on hover) */
|
|
170
|
+
successActive?: boolean;
|
|
171
|
+
/** Whether to show separator before this action */
|
|
172
|
+
separatorBefore?: boolean;
|
|
173
|
+
/** Whether the action is disabled */
|
|
174
|
+
disabled?: boolean;
|
|
175
|
+
}
|
|
176
|
+
interface DataTableRowActionsProps {
|
|
177
|
+
/** Array of actions to display */
|
|
178
|
+
actions: DataTableRowAction$1[];
|
|
179
|
+
/**
|
|
180
|
+
* Display mode for actions:
|
|
181
|
+
* - "dropdown": Always show as dropdown menu (default, original behavior)
|
|
182
|
+
* - "inline": Always show as inline icon buttons
|
|
183
|
+
* - "responsive": Show inline buttons on larger screens, dropdown on mobile
|
|
184
|
+
*/
|
|
185
|
+
mode?: "dropdown" | "inline" | "responsive";
|
|
186
|
+
}
|
|
187
|
+
/**
|
|
188
|
+
* Row actions component with multiple display modes.
|
|
189
|
+
*
|
|
190
|
+
* Modes:
|
|
191
|
+
* - "dropdown": Always shows as ellipsis dropdown menu (original behavior)
|
|
192
|
+
* - "inline": Always shows icon buttons inline with tooltips
|
|
193
|
+
* - "responsive": Shows inline on larger screens, collapses to dropdown on mobile
|
|
194
|
+
*
|
|
195
|
+
* @example Dropdown mode (default)
|
|
196
|
+
* ```tsx
|
|
197
|
+
* <DataTableRowActions actions={actions} />
|
|
198
|
+
* ```
|
|
199
|
+
*
|
|
200
|
+
* @example Responsive mode
|
|
201
|
+
* ```tsx
|
|
202
|
+
* <DataTableRowActions actions={actions} mode="responsive" />
|
|
203
|
+
* ```
|
|
204
|
+
*
|
|
205
|
+
* @example Inline mode
|
|
206
|
+
* ```tsx
|
|
207
|
+
* <DataTableRowActions actions={actions} mode="inline" />
|
|
208
|
+
* ```
|
|
209
|
+
*/
|
|
210
|
+
declare function DataTableRowActions({ actions, mode, }: DataTableRowActionsProps): react_jsx_runtime.JSX.Element | null;
|
|
211
|
+
|
|
212
|
+
/**
|
|
213
|
+
* Expandable search input for the data table.
|
|
214
|
+
* Starts as a search icon and expands into a full input on click.
|
|
215
|
+
*/
|
|
216
|
+
declare function DataTableSearch({ searchValue, searchPlaceholder, onSearchChange, className, }: {
|
|
217
|
+
searchValue?: string;
|
|
218
|
+
searchPlaceholder?: string;
|
|
219
|
+
onSearchChange?: (value: string) => void;
|
|
220
|
+
className?: string;
|
|
221
|
+
}): react_jsx_runtime.JSX.Element;
|
|
222
|
+
|
|
223
|
+
/** Summary calculation type */
|
|
224
|
+
type SummaryType = "none" | "count" | "count_unique" | "sum" | "average" | "median" | "min" | "max" | "range" | "percent_empty" | "percent_filled";
|
|
225
|
+
/** Column type for determining available summaries */
|
|
226
|
+
type ColumnDataType = "text" | "number" | "boolean" | "date";
|
|
227
|
+
/** Summary configuration for a column */
|
|
228
|
+
interface ColumnSummaryConfig {
|
|
229
|
+
/** Column ID */
|
|
230
|
+
columnId: string;
|
|
231
|
+
/** Active summary type */
|
|
232
|
+
type: SummaryType;
|
|
233
|
+
}
|
|
234
|
+
interface DataTableSummaryProps<TData> {
|
|
235
|
+
/** TanStack Table instance */
|
|
236
|
+
table: Table<TData>;
|
|
237
|
+
/** All data (not just current page) for accurate calculations */
|
|
238
|
+
allData: TData[];
|
|
239
|
+
/** Summary configuration per column */
|
|
240
|
+
summaryConfig: Record<string, SummaryType>;
|
|
241
|
+
/** Callback when summary type changes */
|
|
242
|
+
onSummaryChange: (columnId: string, type: SummaryType) => void;
|
|
243
|
+
/** Get the data type of a column (for showing appropriate options) */
|
|
244
|
+
getColumnDataType?: (columnId: string) => ColumnDataType;
|
|
245
|
+
/** Width of gutter column (for alignment with DataTable gutter) */
|
|
246
|
+
gutterWidth?: number;
|
|
247
|
+
/** Optional class name */
|
|
248
|
+
className?: string;
|
|
249
|
+
}
|
|
250
|
+
/**
|
|
251
|
+
* DataTable Summary row component.
|
|
252
|
+
* Displays calculated statistics for each column below the table.
|
|
253
|
+
*
|
|
254
|
+
* Features:
|
|
255
|
+
* - Count (with null/undefined excluded)
|
|
256
|
+
* - Sum, Average, Median, Min, Max for numeric columns
|
|
257
|
+
* - Unique count for text columns
|
|
258
|
+
* - Percent empty/filled
|
|
259
|
+
* - Click to change summary type
|
|
260
|
+
*/
|
|
261
|
+
declare function DataTableSummary<TData>({ table, allData, summaryConfig, onSummaryChange, getColumnDataType, gutterWidth, className, }: DataTableSummaryProps<TData>): react_jsx_runtime.JSX.Element;
|
|
262
|
+
|
|
263
|
+
interface DataTableTab {
|
|
264
|
+
/** Unique identifier for the tab */
|
|
265
|
+
id: string;
|
|
266
|
+
/** Display label */
|
|
267
|
+
label: string;
|
|
268
|
+
/** Optional count badge */
|
|
269
|
+
count?: number;
|
|
270
|
+
}
|
|
271
|
+
interface DataTableTopperProps extends React$1.ComponentProps<"div"> {
|
|
272
|
+
/** Tabs to display on the left side */
|
|
273
|
+
tabs?: DataTableTab[];
|
|
274
|
+
/** Currently active tab ID */
|
|
275
|
+
activeTab?: string;
|
|
276
|
+
/** Callback when tab changes */
|
|
277
|
+
onTabChange?: (tabId: string) => void;
|
|
278
|
+
/** Gutter width for left offset (aligns with DataTable gutter) */
|
|
279
|
+
gutterWidth?: number;
|
|
280
|
+
}
|
|
281
|
+
/**
|
|
282
|
+
* The DataTable Topper - a full-width header bar that combines:
|
|
283
|
+
* - Tabs on the left (for filtering views)
|
|
284
|
+
* - Actions on the right (search, view options, etc.)
|
|
285
|
+
*
|
|
286
|
+
* This component is decoupled from table width - it always spans
|
|
287
|
+
* the full container width while the table can scroll independently.
|
|
288
|
+
*
|
|
289
|
+
* @example
|
|
290
|
+
* ```tsx
|
|
291
|
+
* <DataTableTopper
|
|
292
|
+
* tabs={[
|
|
293
|
+
* { id: "all", label: "All", count: 100 },
|
|
294
|
+
* { id: "active", label: "Active", count: 45 },
|
|
295
|
+
* ]}
|
|
296
|
+
* activeTab="all"
|
|
297
|
+
* onTabChange={setActiveTab}
|
|
298
|
+
* >
|
|
299
|
+
* <DataTableSearch ... />
|
|
300
|
+
* <DataTableViewOptions ... />
|
|
301
|
+
* </DataTableTopper>
|
|
302
|
+
* ```
|
|
303
|
+
*/
|
|
304
|
+
declare function DataTableTopper({ tabs, activeTab, onTabChange, gutterWidth, className, children, ...props }: DataTableTopperProps): react_jsx_runtime.JSX.Element;
|
|
305
|
+
|
|
306
|
+
/** Represents a saved table view configuration */
|
|
307
|
+
interface DataTableView {
|
|
308
|
+
/** Unique identifier */
|
|
309
|
+
id: string;
|
|
310
|
+
/** Display name for the view */
|
|
311
|
+
name: string;
|
|
312
|
+
/** Column visibility state */
|
|
313
|
+
columnVisibility?: VisibilityState;
|
|
314
|
+
/** Column order (array of column IDs) */
|
|
315
|
+
columnOrder?: string[];
|
|
316
|
+
/** Column wrapping state (map of column ID to wrap boolean) */
|
|
317
|
+
columnWrapping?: Record<string, boolean>;
|
|
318
|
+
/** Row order (array of row IDs) - for custom row ordering */
|
|
319
|
+
rowOrder?: string[];
|
|
320
|
+
/** Active filters */
|
|
321
|
+
filters?: ColumnFiltersState;
|
|
322
|
+
/** Sorting state */
|
|
323
|
+
sorting?: SortingState;
|
|
324
|
+
/** Whether this is the default view */
|
|
325
|
+
isDefault?: boolean;
|
|
326
|
+
/** When the view was created */
|
|
327
|
+
createdAt?: string;
|
|
328
|
+
/** When the view was last updated */
|
|
329
|
+
updatedAt?: string;
|
|
330
|
+
}
|
|
331
|
+
/** Current table state that can be compared to a view */
|
|
332
|
+
interface DataTableViewState {
|
|
333
|
+
columnVisibility?: VisibilityState;
|
|
334
|
+
columnOrder?: string[];
|
|
335
|
+
columnWrapping?: Record<string, boolean>;
|
|
336
|
+
rowOrder?: string[];
|
|
337
|
+
filters?: ColumnFiltersState;
|
|
338
|
+
sorting?: SortingState;
|
|
339
|
+
}
|
|
340
|
+
interface DataTableViewsProps {
|
|
341
|
+
/** List of saved views */
|
|
342
|
+
views: DataTableView[];
|
|
343
|
+
/** Currently active view ID */
|
|
344
|
+
activeViewId?: string;
|
|
345
|
+
/** Current table state */
|
|
346
|
+
currentState: DataTableViewState;
|
|
347
|
+
/** Callback when a view is selected */
|
|
348
|
+
onSelectView: (view: DataTableView) => void;
|
|
349
|
+
/** Callback to save a new view */
|
|
350
|
+
onSaveView?: (view: Omit<DataTableView, "id" | "createdAt" | "updatedAt">) => void;
|
|
351
|
+
/** Callback to update an existing view */
|
|
352
|
+
onUpdateView?: (id: string, updates: Partial<DataTableView>) => void;
|
|
353
|
+
/** Callback to delete a view */
|
|
354
|
+
onDeleteView?: (id: string) => void;
|
|
355
|
+
/** Callback to set default view */
|
|
356
|
+
onSetDefaultView?: (id: string) => void;
|
|
357
|
+
/** Optional class name */
|
|
358
|
+
className?: string;
|
|
359
|
+
}
|
|
360
|
+
/**
|
|
361
|
+
* DataTable Views component for saving and loading table configurations.
|
|
362
|
+
*
|
|
363
|
+
* Features:
|
|
364
|
+
* - Save current view with a custom name
|
|
365
|
+
* - Load saved views
|
|
366
|
+
* - Set a default view
|
|
367
|
+
* - Delete views
|
|
368
|
+
* - Shows "Save" button when view has unsaved changes
|
|
369
|
+
*/
|
|
370
|
+
declare function DataTableViews({ views, activeViewId, currentState, onSelectView, onSaveView, onUpdateView, onDeleteView, onSetDefaultView, className, }: DataTableViewsProps): react_jsx_runtime.JSX.Element;
|
|
371
|
+
|
|
372
|
+
/**
|
|
373
|
+
* Shared styling constants for DataTable topper action buttons.
|
|
374
|
+
*
|
|
375
|
+
* These ensure consistent appearance across all DataTable header actions:
|
|
376
|
+
* - Views dropdown
|
|
377
|
+
* - Column picker
|
|
378
|
+
* - Add button
|
|
379
|
+
* - Search (when implemented as button)
|
|
380
|
+
*
|
|
381
|
+
* Uses the ghost-icon variant for:
|
|
382
|
+
* - No background hover effect
|
|
383
|
+
* - Icon scale animation on hover
|
|
384
|
+
* - Consistent text-icon color
|
|
385
|
+
*/
|
|
386
|
+
/**
|
|
387
|
+
* Standard button props for DataTable topper actions.
|
|
388
|
+
* Apply these to buttons that appear in the DataTableTopper.
|
|
389
|
+
*/
|
|
390
|
+
declare const dataTableTopperButtonProps: {
|
|
391
|
+
readonly variant: "ghost-icon";
|
|
392
|
+
readonly size: "icon-sm";
|
|
393
|
+
};
|
|
394
|
+
/**
|
|
395
|
+
* CSS classes for responsive topper buttons with labels.
|
|
396
|
+
* Use when button has both icon and text label that hides on small screens.
|
|
397
|
+
*/
|
|
398
|
+
declare const dataTableTopperResponsiveClasses = "w-8 @min-[450px]:w-auto @min-[450px]:px-2";
|
|
399
|
+
/**
|
|
400
|
+
* CSS classes for the button when dropdown is open.
|
|
401
|
+
*/
|
|
402
|
+
declare const dataTableTopperOpenStateClasses = "data-[state=open]:text-foreground";
|
|
403
|
+
/**
|
|
404
|
+
* CSS classes for icon-only elements in the topper (matching ghost-icon variant).
|
|
405
|
+
* Use for custom buttons or icon elements that aren't using the Button component.
|
|
406
|
+
*/
|
|
407
|
+
declare const dataTableTopperIconClasses = "text-icon hover:text-icon-hover [&_svg]:transition-transform [&_svg]:duration-200 hover:[&_svg]:scale-110";
|
|
408
|
+
|
|
409
|
+
type DataTableConfig = typeof dataTableConfig;
|
|
410
|
+
declare const dataTableConfig: {
|
|
411
|
+
textOperators: ({
|
|
412
|
+
label: string;
|
|
413
|
+
value: "iLike";
|
|
414
|
+
} | {
|
|
415
|
+
label: string;
|
|
416
|
+
value: "notILike";
|
|
417
|
+
} | {
|
|
418
|
+
label: string;
|
|
419
|
+
value: "eq";
|
|
420
|
+
} | {
|
|
421
|
+
label: string;
|
|
422
|
+
value: "ne";
|
|
423
|
+
} | {
|
|
424
|
+
label: string;
|
|
425
|
+
value: "isEmpty";
|
|
426
|
+
} | {
|
|
427
|
+
label: string;
|
|
428
|
+
value: "isNotEmpty";
|
|
429
|
+
})[];
|
|
430
|
+
numericOperators: ({
|
|
431
|
+
label: string;
|
|
432
|
+
value: "eq";
|
|
433
|
+
} | {
|
|
434
|
+
label: string;
|
|
435
|
+
value: "ne";
|
|
436
|
+
} | {
|
|
437
|
+
label: string;
|
|
438
|
+
value: "lt";
|
|
439
|
+
} | {
|
|
440
|
+
label: string;
|
|
441
|
+
value: "lte";
|
|
442
|
+
} | {
|
|
443
|
+
label: string;
|
|
444
|
+
value: "gt";
|
|
445
|
+
} | {
|
|
446
|
+
label: string;
|
|
447
|
+
value: "gte";
|
|
448
|
+
} | {
|
|
449
|
+
label: string;
|
|
450
|
+
value: "isBetween";
|
|
451
|
+
} | {
|
|
452
|
+
label: string;
|
|
453
|
+
value: "isEmpty";
|
|
454
|
+
} | {
|
|
455
|
+
label: string;
|
|
456
|
+
value: "isNotEmpty";
|
|
457
|
+
})[];
|
|
458
|
+
dateOperators: ({
|
|
459
|
+
label: string;
|
|
460
|
+
value: "eq";
|
|
461
|
+
} | {
|
|
462
|
+
label: string;
|
|
463
|
+
value: "ne";
|
|
464
|
+
} | {
|
|
465
|
+
label: string;
|
|
466
|
+
value: "lt";
|
|
467
|
+
} | {
|
|
468
|
+
label: string;
|
|
469
|
+
value: "gt";
|
|
470
|
+
} | {
|
|
471
|
+
label: string;
|
|
472
|
+
value: "lte";
|
|
473
|
+
} | {
|
|
474
|
+
label: string;
|
|
475
|
+
value: "gte";
|
|
476
|
+
} | {
|
|
477
|
+
label: string;
|
|
478
|
+
value: "isBetween";
|
|
479
|
+
} | {
|
|
480
|
+
label: string;
|
|
481
|
+
value: "isRelativeToToday";
|
|
482
|
+
} | {
|
|
483
|
+
label: string;
|
|
484
|
+
value: "isEmpty";
|
|
485
|
+
} | {
|
|
486
|
+
label: string;
|
|
487
|
+
value: "isNotEmpty";
|
|
488
|
+
})[];
|
|
489
|
+
selectOperators: ({
|
|
490
|
+
label: string;
|
|
491
|
+
value: "eq";
|
|
492
|
+
} | {
|
|
493
|
+
label: string;
|
|
494
|
+
value: "ne";
|
|
495
|
+
} | {
|
|
496
|
+
label: string;
|
|
497
|
+
value: "isEmpty";
|
|
498
|
+
} | {
|
|
499
|
+
label: string;
|
|
500
|
+
value: "isNotEmpty";
|
|
501
|
+
})[];
|
|
502
|
+
multiSelectOperators: ({
|
|
503
|
+
label: string;
|
|
504
|
+
value: "inArray";
|
|
505
|
+
} | {
|
|
506
|
+
label: string;
|
|
507
|
+
value: "notInArray";
|
|
508
|
+
} | {
|
|
509
|
+
label: string;
|
|
510
|
+
value: "isEmpty";
|
|
511
|
+
} | {
|
|
512
|
+
label: string;
|
|
513
|
+
value: "isNotEmpty";
|
|
514
|
+
})[];
|
|
515
|
+
booleanOperators: ({
|
|
516
|
+
label: string;
|
|
517
|
+
value: "eq";
|
|
518
|
+
} | {
|
|
519
|
+
label: string;
|
|
520
|
+
value: "ne";
|
|
521
|
+
})[];
|
|
522
|
+
sortOrders: ({
|
|
523
|
+
label: string;
|
|
524
|
+
value: "asc";
|
|
525
|
+
} | {
|
|
526
|
+
label: string;
|
|
527
|
+
value: "desc";
|
|
528
|
+
})[];
|
|
529
|
+
filterVariants: readonly ["text", "number", "range", "date", "dateRange", "boolean", "select", "multiSelect"];
|
|
530
|
+
operators: readonly ["iLike", "notILike", "eq", "ne", "inArray", "notInArray", "isEmpty", "isNotEmpty", "lt", "lte", "gt", "gte", "isBetween", "isRelativeToToday"];
|
|
531
|
+
joinOperators: readonly ["and", "or"];
|
|
532
|
+
};
|
|
533
|
+
|
|
534
|
+
interface DataTableProps<TData> extends React$1.ComponentProps<"div"> {
|
|
535
|
+
table: Table<TData>;
|
|
536
|
+
actionBar?: React$1.ReactNode;
|
|
537
|
+
/**
|
|
538
|
+
* Rows rendered inside a `<TableFooter>` after the body (summary/totals).
|
|
539
|
+
* Local extension over tablecn; pass `<DataTableSummary …/>` here.
|
|
540
|
+
*/
|
|
541
|
+
footer?: React$1.ReactNode;
|
|
542
|
+
/**
|
|
543
|
+
* Called when a body row is clicked. Local extension over tablecn; the row
|
|
544
|
+
* gets `cursor-pointer` when set.
|
|
545
|
+
*/
|
|
546
|
+
onRowClick?: (row: Row<TData>) => void;
|
|
547
|
+
/**
|
|
548
|
+
* Extra classes for a body row (e.g. tint group rows). Local extension over
|
|
549
|
+
* tablecn.
|
|
550
|
+
*/
|
|
551
|
+
getRowClassName?: (row: Row<TData>) => string | undefined;
|
|
552
|
+
}
|
|
553
|
+
declare function DataTable<TData>({ table, actionBar, footer, onRowClick, getRowClassName, children, className, ...props }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
|
|
554
|
+
|
|
555
|
+
/**
|
|
556
|
+
* DropdownMenu - Context menu dropdown component
|
|
557
|
+
*
|
|
558
|
+
* @example
|
|
559
|
+
* <DropdownMenu>
|
|
560
|
+
* <DropdownMenuTrigger asChild>
|
|
561
|
+
* <Button variant="outline">Open Menu</Button>
|
|
562
|
+
* </DropdownMenuTrigger>
|
|
563
|
+
* <DropdownMenuContent>
|
|
564
|
+
* <DropdownMenuItem>Profile</DropdownMenuItem>
|
|
565
|
+
* <DropdownMenuItem>Settings</DropdownMenuItem>
|
|
566
|
+
* <DropdownMenuSeparator />
|
|
567
|
+
* <DropdownMenuItem variant="destructive">Logout</DropdownMenuItem>
|
|
568
|
+
* </DropdownMenuContent>
|
|
569
|
+
* </DropdownMenu>
|
|
570
|
+
*/
|
|
571
|
+
declare function DropdownMenu({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Root>): react_jsx_runtime.JSX.Element;
|
|
572
|
+
/**
|
|
573
|
+
* DropdownMenuPortal - Portal container for dropdown menu
|
|
574
|
+
*/
|
|
575
|
+
declare function DropdownMenuPortal({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Portal>): react_jsx_runtime.JSX.Element;
|
|
576
|
+
/**
|
|
577
|
+
* DropdownMenuTrigger - Element that triggers the dropdown menu
|
|
578
|
+
*/
|
|
579
|
+
declare function DropdownMenuTrigger({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
|
|
580
|
+
/**
|
|
581
|
+
* DropdownMenuContent - Container for dropdown menu items
|
|
582
|
+
*/
|
|
583
|
+
declare function DropdownMenuContent({ className, sideOffset, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Content>): react_jsx_runtime.JSX.Element;
|
|
584
|
+
/**
|
|
585
|
+
* DropdownMenuItem - Individual item in dropdown menu
|
|
586
|
+
*/
|
|
587
|
+
declare function DropdownMenuItem({ className, inset, variant, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
|
|
588
|
+
inset?: boolean;
|
|
589
|
+
variant?: "default" | "destructive";
|
|
590
|
+
}): react_jsx_runtime.JSX.Element;
|
|
591
|
+
/**
|
|
592
|
+
* DropdownMenuCheckboxItem - Checkbox item in dropdown menu
|
|
593
|
+
*/
|
|
594
|
+
declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>): react_jsx_runtime.JSX.Element;
|
|
595
|
+
/**
|
|
596
|
+
* DropdownMenuRadioItem - Radio button item in dropdown menu
|
|
597
|
+
*/
|
|
598
|
+
declare function DropdownMenuRadioItem({ className, children, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>): react_jsx_runtime.JSX.Element;
|
|
599
|
+
/**
|
|
600
|
+
* DropdownMenuLabel - Section label in dropdown menu
|
|
601
|
+
*/
|
|
602
|
+
declare function DropdownMenuLabel({ className, inset, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
|
|
603
|
+
inset?: boolean;
|
|
604
|
+
}): react_jsx_runtime.JSX.Element;
|
|
605
|
+
/**
|
|
606
|
+
* DropdownMenuSeparator - Visual separator between menu items
|
|
607
|
+
*/
|
|
608
|
+
declare function DropdownMenuSeparator({ className, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Separator>): react_jsx_runtime.JSX.Element;
|
|
609
|
+
/**
|
|
610
|
+
* DropdownMenuGroup - Container for grouping related menu items
|
|
611
|
+
*/
|
|
612
|
+
declare function DropdownMenuGroup({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Group>): react_jsx_runtime.JSX.Element;
|
|
613
|
+
/**
|
|
614
|
+
* DropdownMenuRadioGroup - Container for radio button items
|
|
615
|
+
*/
|
|
616
|
+
declare function DropdownMenuRadioGroup({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): react_jsx_runtime.JSX.Element;
|
|
617
|
+
/**
|
|
618
|
+
* DropdownMenuSub - Nested submenu container
|
|
619
|
+
*/
|
|
620
|
+
declare function DropdownMenuSub({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Sub>): react_jsx_runtime.JSX.Element;
|
|
621
|
+
/**
|
|
622
|
+
* DropdownMenuSubTrigger - Trigger for opening a submenu
|
|
623
|
+
*/
|
|
624
|
+
declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
|
|
625
|
+
inset?: boolean;
|
|
626
|
+
}): react_jsx_runtime.JSX.Element;
|
|
627
|
+
declare function DropdownMenuSubContent({ className, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): react_jsx_runtime.JSX.Element;
|
|
628
|
+
declare function DropdownMenuShortcut({ className, ...props }: React$1.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
|
|
629
|
+
|
|
630
|
+
interface DataTableColumnHeaderProps<TData, TValue> extends React.ComponentProps<typeof DropdownMenuTrigger> {
|
|
631
|
+
column: Column<TData, TValue>;
|
|
632
|
+
label: string;
|
|
633
|
+
}
|
|
634
|
+
declare function DataTableColumnHeader<TData, TValue>({ column, label, className, ...props }: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime.JSX.Element;
|
|
635
|
+
|
|
636
|
+
interface DataTableDateFilterProps<TData> {
|
|
637
|
+
column: Column<TData, unknown>;
|
|
638
|
+
title?: string;
|
|
639
|
+
multiple?: boolean;
|
|
640
|
+
}
|
|
641
|
+
declare function DataTableDateFilter<TData>({ column, title, multiple, }: DataTableDateFilterProps<TData>): react_jsx_runtime.JSX.Element;
|
|
642
|
+
|
|
643
|
+
declare const getSortingStateParser: <TData>(columnIds?: string[] | Set<string>) => nuqs_server.SingleParserBuilder<ExtendedColumnSort<TData>[]>;
|
|
644
|
+
declare const filterItemSchema: z.ZodObject<{
|
|
645
|
+
id: z.ZodString;
|
|
646
|
+
value: z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>;
|
|
647
|
+
variant: z.ZodEnum<{
|
|
648
|
+
number: "number";
|
|
649
|
+
boolean: "boolean";
|
|
650
|
+
select: "select";
|
|
651
|
+
text: "text";
|
|
652
|
+
date: "date";
|
|
653
|
+
range: "range";
|
|
654
|
+
dateRange: "dateRange";
|
|
655
|
+
multiSelect: "multiSelect";
|
|
656
|
+
}>;
|
|
657
|
+
operator: z.ZodEnum<{
|
|
658
|
+
iLike: "iLike";
|
|
659
|
+
notILike: "notILike";
|
|
660
|
+
eq: "eq";
|
|
661
|
+
ne: "ne";
|
|
662
|
+
isEmpty: "isEmpty";
|
|
663
|
+
isNotEmpty: "isNotEmpty";
|
|
664
|
+
lt: "lt";
|
|
665
|
+
lte: "lte";
|
|
666
|
+
gt: "gt";
|
|
667
|
+
gte: "gte";
|
|
668
|
+
isBetween: "isBetween";
|
|
669
|
+
isRelativeToToday: "isRelativeToToday";
|
|
670
|
+
inArray: "inArray";
|
|
671
|
+
notInArray: "notInArray";
|
|
672
|
+
}>;
|
|
673
|
+
filterId: z.ZodString;
|
|
674
|
+
}, z.core.$strip>;
|
|
675
|
+
type FilterItemSchema = z.infer<typeof filterItemSchema>;
|
|
676
|
+
declare const getFiltersStateParser: <TData>(columnIds?: string[] | Set<string>) => nuqs_server.SingleParserBuilder<ExtendedColumnFilter<TData>[]>;
|
|
677
|
+
|
|
678
|
+
declare module "@tanstack/react-table" {
|
|
679
|
+
interface TableMeta<TData extends RowData> {
|
|
680
|
+
queryKeys?: QueryKeys;
|
|
681
|
+
}
|
|
682
|
+
interface ColumnMeta<TData extends RowData, TValue> {
|
|
683
|
+
label?: string;
|
|
684
|
+
placeholder?: string;
|
|
685
|
+
variant?: FilterVariant;
|
|
686
|
+
options?: Option[];
|
|
687
|
+
range?: [number, number];
|
|
688
|
+
unit?: string;
|
|
689
|
+
icon?: React.ComponentType<React.ComponentProps<"svg">>;
|
|
690
|
+
}
|
|
691
|
+
}
|
|
692
|
+
interface QueryKeys {
|
|
693
|
+
page: string;
|
|
694
|
+
perPage: string;
|
|
695
|
+
sort: string;
|
|
696
|
+
filters: string;
|
|
697
|
+
joinOperator: string;
|
|
698
|
+
}
|
|
699
|
+
interface Option {
|
|
700
|
+
label: string;
|
|
701
|
+
value: string;
|
|
702
|
+
count?: number;
|
|
703
|
+
icon?: React.ComponentType<React.ComponentProps<"svg">>;
|
|
704
|
+
}
|
|
705
|
+
type FilterOperator = DataTableConfig["operators"][number];
|
|
706
|
+
type FilterVariant = DataTableConfig["filterVariants"][number];
|
|
707
|
+
type JoinOperator = DataTableConfig["joinOperators"][number];
|
|
708
|
+
interface ExtendedColumnSort<TData> extends Omit<ColumnSort, "id"> {
|
|
709
|
+
id: Extract<keyof TData, string>;
|
|
710
|
+
}
|
|
711
|
+
interface ExtendedColumnFilter<TData> extends FilterItemSchema {
|
|
712
|
+
id: Extract<keyof TData, string>;
|
|
713
|
+
}
|
|
714
|
+
interface DataTableRowAction<TData> {
|
|
715
|
+
row: Row<TData>;
|
|
716
|
+
variant: "update" | "delete";
|
|
717
|
+
}
|
|
718
|
+
|
|
719
|
+
interface DataTableFacetedFilterProps<TData, TValue> {
|
|
720
|
+
column?: Column<TData, TValue>;
|
|
721
|
+
title?: string;
|
|
722
|
+
options: Option[];
|
|
723
|
+
multiple?: boolean;
|
|
724
|
+
}
|
|
725
|
+
declare function DataTableFacetedFilter<TData, TValue>({ column, title, options, multiple, }: DataTableFacetedFilterProps<TData, TValue>): react_jsx_runtime.JSX.Element;
|
|
726
|
+
|
|
727
|
+
interface DataTablePaginationProps<TData> extends React.ComponentProps<"div"> {
|
|
728
|
+
table: Table<TData>;
|
|
729
|
+
pageSizeOptions?: number[];
|
|
730
|
+
}
|
|
731
|
+
declare function DataTablePagination<TData>({ table, pageSizeOptions, className, ...props }: DataTablePaginationProps<TData>): react_jsx_runtime.JSX.Element;
|
|
732
|
+
|
|
733
|
+
interface DataTableSkeletonProps extends React.ComponentProps<"div"> {
|
|
734
|
+
columnCount: number;
|
|
735
|
+
rowCount?: number;
|
|
736
|
+
filterCount?: number;
|
|
737
|
+
cellWidths?: string[];
|
|
738
|
+
withViewOptions?: boolean;
|
|
739
|
+
withPagination?: boolean;
|
|
740
|
+
shrinkZero?: boolean;
|
|
741
|
+
}
|
|
742
|
+
declare function DataTableSkeleton({ columnCount, rowCount, filterCount, cellWidths, withViewOptions, withPagination, shrinkZero, className, ...props }: DataTableSkeletonProps): react_jsx_runtime.JSX.Element;
|
|
743
|
+
|
|
744
|
+
interface DataTableSliderFilterProps<TData> {
|
|
745
|
+
column: Column<TData, unknown>;
|
|
746
|
+
title?: string;
|
|
747
|
+
}
|
|
748
|
+
declare function DataTableSliderFilter<TData>({ column, title, }: DataTableSliderFilterProps<TData>): react_jsx_runtime.JSX.Element;
|
|
749
|
+
|
|
750
|
+
interface DataTableToolbarProps<TData> extends React$1.ComponentProps<"div"> {
|
|
751
|
+
table: Table<TData>;
|
|
752
|
+
}
|
|
753
|
+
declare function DataTableToolbar<TData>({ table, children, className, ...props }: DataTableToolbarProps<TData>): react_jsx_runtime.JSX.Element;
|
|
754
|
+
|
|
755
|
+
declare function Popover({ ...props }: React$1.ComponentProps<typeof PopoverPrimitive.Root>): react_jsx_runtime.JSX.Element;
|
|
756
|
+
declare function PopoverTrigger({ ...props }: React$1.ComponentProps<typeof PopoverPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
|
|
757
|
+
declare function PopoverContent({ className, align, sideOffset, ...props }: React$1.ComponentProps<typeof PopoverPrimitive.Content>): react_jsx_runtime.JSX.Element;
|
|
758
|
+
declare function PopoverAnchor({ ...props }: React$1.ComponentProps<typeof PopoverPrimitive.Anchor>): react_jsx_runtime.JSX.Element;
|
|
759
|
+
declare function PopoverHeader({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
|
|
760
|
+
declare function PopoverTitle({ className, ...props }: React$1.ComponentProps<"h2">): react_jsx_runtime.JSX.Element;
|
|
761
|
+
declare function PopoverDescription({ className, ...props }: React$1.ComponentProps<"p">): react_jsx_runtime.JSX.Element;
|
|
762
|
+
|
|
763
|
+
interface DataTableViewOptionsProps<TData> extends React$1.ComponentProps<typeof PopoverContent> {
|
|
764
|
+
table: Table<TData>;
|
|
765
|
+
disabled?: boolean;
|
|
766
|
+
}
|
|
767
|
+
declare function DataTableViewOptions<TData>({ table, disabled, className, ...props }: DataTableViewOptionsProps<TData>): react_jsx_runtime.JSX.Element;
|
|
768
|
+
|
|
769
|
+
declare function getColumnPinningStyle<TData>({ column, withBorder, }: {
|
|
770
|
+
column: Column<TData>;
|
|
771
|
+
withBorder?: boolean;
|
|
772
|
+
}): React.CSSProperties;
|
|
773
|
+
declare function getFilterOperators(filterVariant: FilterVariant): {
|
|
774
|
+
label: string;
|
|
775
|
+
value: FilterOperator;
|
|
776
|
+
}[];
|
|
777
|
+
declare function getDefaultFilterOperator(filterVariant: FilterVariant): "iLike" | "notILike" | "eq" | "ne" | "isEmpty" | "isNotEmpty" | "lt" | "lte" | "gt" | "gte" | "isBetween" | "isRelativeToToday" | "inArray" | "notInArray";
|
|
778
|
+
declare function getValidFilters<TData>(filters: ExtendedColumnFilter<TData>[]): ExtendedColumnFilter<TData>[];
|
|
779
|
+
|
|
780
|
+
interface UseDataTableProps<TData> extends Omit<TableOptions<TData>, "state" | "pageCount" | "getCoreRowModel" | "manualFiltering" | "manualPagination" | "manualSorting">, Required<Pick<TableOptions<TData>, "pageCount">> {
|
|
781
|
+
initialState?: Omit<Partial<TableState>, "sorting"> & {
|
|
782
|
+
sorting?: ExtendedColumnSort<TData>[];
|
|
783
|
+
};
|
|
784
|
+
queryKeys?: Partial<QueryKeys>;
|
|
785
|
+
history?: "push" | "replace";
|
|
786
|
+
debounceMs?: number;
|
|
787
|
+
throttleMs?: number;
|
|
788
|
+
clearOnDefault?: boolean;
|
|
789
|
+
enableAdvancedFilter?: boolean;
|
|
790
|
+
scroll?: boolean;
|
|
791
|
+
shallow?: boolean;
|
|
792
|
+
startTransition?: React$1.TransitionStartFunction;
|
|
793
|
+
}
|
|
794
|
+
declare function useDataTable<TData>(props: UseDataTableProps<TData>): {
|
|
795
|
+
table: _tanstack_table_core.Table<TData>;
|
|
796
|
+
shallow: boolean;
|
|
797
|
+
debounceMs: number;
|
|
798
|
+
throttleMs: number;
|
|
799
|
+
};
|
|
800
|
+
|
|
801
|
+
/**
|
|
802
|
+
* Data table — tablecn (sadmann7/shadcn-table) components over TanStack Table,
|
|
803
|
+
* vendored under `blocks/table`, plus local add-ons under `./addons`.
|
|
804
|
+
*
|
|
805
|
+
* The tablecn pieces are kept as close to upstream as possible so they can be
|
|
806
|
+
* re-vendored; local changes are marked in-file. `useDataTable` keeps table
|
|
807
|
+
* state in the URL via nuqs and needs a `NuqsAdapter` at the app root; the
|
|
808
|
+
* components work with any TanStack table instance and need no adapter.
|
|
809
|
+
*/
|
|
810
|
+
|
|
811
|
+
/**
|
|
812
|
+
* Column `meta` shape the toolbar and header read (`label`, `variant`,
|
|
813
|
+
* `options`, `placeholder`, `icon`, …). Alias of the augmented TanStack
|
|
814
|
+
* `ColumnMeta` so column files can write `satisfies DataTableColumnMeta`.
|
|
815
|
+
*/
|
|
816
|
+
type DataTableColumnMeta<TData = unknown, TValue = unknown> = ColumnMeta<TData, TValue>;
|
|
817
|
+
|
|
818
|
+
export { type JoinOperator as $, type DataTableViewState as A, DataTableViews as B, type ColumnDataType as C, DataTable as D, type DataTableViewsProps as E, DropdownMenu as F, DropdownMenuCheckboxItem as G, DropdownMenuContent as H, DropdownMenuGroup as I, DropdownMenuItem as J, DropdownMenuLabel as K, DropdownMenuPortal as L, DropdownMenuRadioGroup as M, DropdownMenuRadioItem as N, DropdownMenuSeparator as O, DropdownMenuShortcut as P, DropdownMenuSub as Q, DropdownMenuSubContent as R, DropdownMenuSubTrigger as S, DropdownMenuTrigger as T, type ExportFormat as U, type ExportToCsvOptions as V, type ExportToExcelOptions as W, type ExtendedColumnFilter as X, type ExtendedColumnSort as Y, type FilterOperator as Z, type FilterVariant as _, type ColumnSummaryConfig as a, type Option as a0, Popover as a1, PopoverAnchor as a2, PopoverContent as a3, PopoverDescription as a4, PopoverHeader as a5, PopoverTitle as a6, PopoverTrigger as a7, type QueryKeys as a8, type SummaryType as a9, dataTableConfig as aa, dataTableTopperButtonProps as ab, dataTableTopperIconClasses as ac, dataTableTopperOpenStateClasses as ad, dataTableTopperResponsiveClasses as ae, exportToCsv as af, exportToExcel as ag, getColumnPinningStyle as ah, getDefaultFilterOperator as ai, getFilterOperators as aj, getFiltersStateParser as ak, getSortingStateParser as al, getValidFilters as am, useDataTable as an, DataTableAddButton as b, type DataTableAddButtonProps as c, DataTableColumnHeader as d, type DataTableColumnMeta as e, type DataTableConfig as f, DataTableDateFilter as g, DataTableExportButton as h, type DataTableExportButtonProps as i, DataTableFacetedFilter as j, DataTablePagination as k, type DataTableRowAction$1 as l, type DataTableRowAction as m, DataTableRowActions as n, type DataTableRowActionsProps as o, DataTableSearch as p, DataTableSkeleton as q, DataTableSliderFilter as r, DataTableSummary as s, type DataTableSummaryProps as t, type DataTableTab as u, DataTableToolbar as v, DataTableTopper as w, type DataTableTopperProps as x, type DataTableView as y, DataTableViewOptions as z };
|