react-table-craft 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/CHANGELOG.md +21 -0
- package/LICENSE +21 -0
- package/README.md +407 -0
- package/dist/index.d.mts +639 -0
- package/dist/index.d.ts +639 -0
- package/dist/index.js +3487 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +3431 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +76 -0
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,639 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as React$1 from 'react';
|
|
3
|
+
import React__default, { ComponentType, ReactNode } from 'react';
|
|
4
|
+
import { ColumnDef, Table, Column } from '@tanstack/react-table';
|
|
5
|
+
import { ClassValue } from 'clsx';
|
|
6
|
+
import * as export_to_csv from 'export-to-csv';
|
|
7
|
+
|
|
8
|
+
/** A selectable option used in filter dropdowns. */
|
|
9
|
+
interface Option {
|
|
10
|
+
label: string;
|
|
11
|
+
value: string;
|
|
12
|
+
icon?: ComponentType<{
|
|
13
|
+
className?: string;
|
|
14
|
+
}>;
|
|
15
|
+
}
|
|
16
|
+
/** Configuration for a text-searchable column (client-side filtering). */
|
|
17
|
+
interface DataTableSearchableColumn<TData> {
|
|
18
|
+
id: keyof TData;
|
|
19
|
+
title: string;
|
|
20
|
+
type?: 'text' | 'number' | 'checkbox' | 'date';
|
|
21
|
+
}
|
|
22
|
+
/** Configuration for a server-side searchable column with a custom input handler. */
|
|
23
|
+
interface DataTableQuerySearchable<TData> {
|
|
24
|
+
id: keyof TData;
|
|
25
|
+
title: string;
|
|
26
|
+
type?: 'text' | 'number';
|
|
27
|
+
handleInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
28
|
+
defaultSearch?: string;
|
|
29
|
+
}
|
|
30
|
+
/** Configuration for a filterable column with predefined selectable options. */
|
|
31
|
+
interface DataTableFilterableColumn<TData> {
|
|
32
|
+
id: keyof TData;
|
|
33
|
+
title: string;
|
|
34
|
+
options: Option[];
|
|
35
|
+
/** When true, only one option can be selected at a time (radio behavior). */
|
|
36
|
+
isSingleSelect?: boolean;
|
|
37
|
+
}
|
|
38
|
+
/** Configuration for an advanced filter option (used in the filter builder UI). */
|
|
39
|
+
interface DataTableFilterOption<TData> {
|
|
40
|
+
id: string;
|
|
41
|
+
label: string;
|
|
42
|
+
value: keyof TData | string;
|
|
43
|
+
items: Option[];
|
|
44
|
+
/** When true, this filter is part of a multi-condition group. */
|
|
45
|
+
isMulti?: boolean;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
interface FilterOptions {
|
|
49
|
+
[key: string]: string | number | undefined;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
interface CustomButtonProps {
|
|
53
|
+
text?: string;
|
|
54
|
+
function?: () => void;
|
|
55
|
+
className?: string;
|
|
56
|
+
icon?: React__default.ReactElement;
|
|
57
|
+
attr?: any;
|
|
58
|
+
children?: React__default.ReactNode;
|
|
59
|
+
toolTip?: string;
|
|
60
|
+
}
|
|
61
|
+
interface MoreActionsProps {
|
|
62
|
+
text?: string;
|
|
63
|
+
function?: () => void;
|
|
64
|
+
icon?: React__default.ReactElement;
|
|
65
|
+
disabled?: boolean;
|
|
66
|
+
attr?: any;
|
|
67
|
+
toolTip?: string;
|
|
68
|
+
}
|
|
69
|
+
interface CommonActionProps {
|
|
70
|
+
action?: () => void;
|
|
71
|
+
disabled?: boolean;
|
|
72
|
+
tooltip?: string;
|
|
73
|
+
}
|
|
74
|
+
interface Props {
|
|
75
|
+
editAction?: CommonActionProps;
|
|
76
|
+
showAction?: CommonActionProps;
|
|
77
|
+
deleteAction?: CommonActionProps;
|
|
78
|
+
cancelAction?: CommonActionProps;
|
|
79
|
+
downloadAction?: CommonActionProps;
|
|
80
|
+
className?: string;
|
|
81
|
+
customButtons?: CustomButtonProps[] | React__default.ReactElement;
|
|
82
|
+
text?: string;
|
|
83
|
+
dropMoreActions?: MoreActionsProps[];
|
|
84
|
+
useDropdown?: boolean;
|
|
85
|
+
}
|
|
86
|
+
declare const ButtonTooltip: ({ content }: {
|
|
87
|
+
content: string;
|
|
88
|
+
}) => react_jsx_runtime.JSX.Element;
|
|
89
|
+
declare const TableActionsRow: ({ editAction, showAction, deleteAction, downloadAction, className, customButtons, text, dropMoreActions, useDropdown, cancelAction, }: Props) => react_jsx_runtime.JSX.Element;
|
|
90
|
+
|
|
91
|
+
/** Deep-partial helper: makes every property (and nested property) optional. */
|
|
92
|
+
type DeepPartial<T> = {
|
|
93
|
+
[P in keyof T]?: T[P] extends (infer U)[] ? U[] : T[P] extends object ? DeepPartial<T[P]> : T[P];
|
|
94
|
+
};
|
|
95
|
+
/** Adapter for framework-agnostic routing. */
|
|
96
|
+
interface TableRouterAdapter {
|
|
97
|
+
/** Navigate to a URL string. */
|
|
98
|
+
push: (url: string) => void;
|
|
99
|
+
/** Replace current URL without adding to history. */
|
|
100
|
+
replace?: (url: string) => void;
|
|
101
|
+
/** Get current URL search params. */
|
|
102
|
+
getSearchParams: () => URLSearchParams;
|
|
103
|
+
/** Get current pathname. */
|
|
104
|
+
getPathname: () => string;
|
|
105
|
+
}
|
|
106
|
+
/** Feature flags controlling which UI elements are rendered. */
|
|
107
|
+
interface TableFeatureFlags {
|
|
108
|
+
/** Show search inputs. */
|
|
109
|
+
search: boolean;
|
|
110
|
+
/** Show filter dropdowns. */
|
|
111
|
+
filter: boolean;
|
|
112
|
+
/** Show pagination controls. */
|
|
113
|
+
pagination: boolean;
|
|
114
|
+
/** Show column visibility toggle. */
|
|
115
|
+
columnVisibility: boolean;
|
|
116
|
+
/** Show CSV export button. */
|
|
117
|
+
csvExport: boolean;
|
|
118
|
+
/** Enable row selection checkboxes. */
|
|
119
|
+
rowSelection: boolean;
|
|
120
|
+
/** Show table/card view toggle. */
|
|
121
|
+
viewToggle: boolean;
|
|
122
|
+
/** Show floating action bar for selected rows. */
|
|
123
|
+
floatingBar: boolean;
|
|
124
|
+
/** Enable advanced filter builder UI. */
|
|
125
|
+
advancedFilter: boolean;
|
|
126
|
+
/** Enable column sorting. */
|
|
127
|
+
sorting: boolean;
|
|
128
|
+
}
|
|
129
|
+
/** Pagination configuration. */
|
|
130
|
+
interface TablePaginationConfig {
|
|
131
|
+
/** Available page size options in the dropdown. */
|
|
132
|
+
pageSizeOptions: number[];
|
|
133
|
+
/** Default number of rows per page. */
|
|
134
|
+
defaultPageSize: number;
|
|
135
|
+
}
|
|
136
|
+
/** Search configuration. */
|
|
137
|
+
interface TableSearchConfig {
|
|
138
|
+
/** Debounce delay in milliseconds for search input. */
|
|
139
|
+
debounceMs: number;
|
|
140
|
+
/** Minimum number of characters before search triggers. */
|
|
141
|
+
minSearchLength: number;
|
|
142
|
+
}
|
|
143
|
+
/** Internationalization configuration. */
|
|
144
|
+
interface TableI18nConfig {
|
|
145
|
+
/** Current locale string (e.g. 'en', 'ar'). */
|
|
146
|
+
locale: string;
|
|
147
|
+
/** Text direction: 'ltr', 'rtl', or 'auto' (derived from locale). */
|
|
148
|
+
direction: 'ltr' | 'rtl' | 'auto';
|
|
149
|
+
/** Custom translation function. When provided, used for all UI strings. */
|
|
150
|
+
translationFn?: (key: string) => string;
|
|
151
|
+
/** Translation namespace (for organizational purposes). */
|
|
152
|
+
namespace: string;
|
|
153
|
+
}
|
|
154
|
+
/** Performance tuning configuration. */
|
|
155
|
+
interface TablePerformanceConfig {
|
|
156
|
+
/** Memoization strategy: 'smart' (default), 'aggressive', or 'manual'. */
|
|
157
|
+
memoStrategy: 'smart' | 'aggressive' | 'manual';
|
|
158
|
+
/** Number of extra rows rendered above/below the visible area for virtualization. */
|
|
159
|
+
virtualizationOverscan: number;
|
|
160
|
+
/** Whether to batch state updates. */
|
|
161
|
+
batchUpdates: boolean;
|
|
162
|
+
}
|
|
163
|
+
/** Enterprise-grade configuration. */
|
|
164
|
+
interface TableEnterpriseConfig {
|
|
165
|
+
/** Enforce strict ARIA compliance. */
|
|
166
|
+
strictAccessibility: boolean;
|
|
167
|
+
/** Wrap table in error boundary for graceful recovery. */
|
|
168
|
+
errorRecovery: boolean;
|
|
169
|
+
/** Enable debug mode with extra logging. */
|
|
170
|
+
debugMode: boolean;
|
|
171
|
+
}
|
|
172
|
+
/** Developer experience configuration (dev-only). */
|
|
173
|
+
interface TableDevConfig {
|
|
174
|
+
/** Show console warnings for misconfigurations. */
|
|
175
|
+
warnings: boolean;
|
|
176
|
+
/** Show performance optimization hints. */
|
|
177
|
+
performanceHints: boolean;
|
|
178
|
+
/** Threshold in ms for flagging slow renders. */
|
|
179
|
+
renderCostThresholdMs: number;
|
|
180
|
+
}
|
|
181
|
+
/** Plugin interface for extending table config. */
|
|
182
|
+
interface TablePlugin {
|
|
183
|
+
/** Unique plugin name. */
|
|
184
|
+
name: string;
|
|
185
|
+
/** Merge priority (lower = applied first). */
|
|
186
|
+
priority: number;
|
|
187
|
+
/** Partial config to deep-merge. */
|
|
188
|
+
config: DeepPartial<TableConfig>;
|
|
189
|
+
/** Callback invoked after config resolution. */
|
|
190
|
+
onResolve?: (resolvedConfig: TableConfig) => void;
|
|
191
|
+
}
|
|
192
|
+
/** Root config interface — the fully resolved config shape. */
|
|
193
|
+
interface TableConfig {
|
|
194
|
+
features: TableFeatureFlags;
|
|
195
|
+
pagination: TablePaginationConfig;
|
|
196
|
+
search: TableSearchConfig;
|
|
197
|
+
i18n: TableI18nConfig;
|
|
198
|
+
performance: TablePerformanceConfig;
|
|
199
|
+
enterprise: TableEnterpriseConfig;
|
|
200
|
+
dev: TableDevConfig;
|
|
201
|
+
plugins: TablePlugin[];
|
|
202
|
+
/** Optional router adapter for URL synchronization. */
|
|
203
|
+
router?: TableRouterAdapter;
|
|
204
|
+
}
|
|
205
|
+
/** What consumers pass — everything optional via DeepPartial. */
|
|
206
|
+
type TableConfigInput = DeepPartial<TableConfig>;
|
|
207
|
+
|
|
208
|
+
interface PaginationMeta {
|
|
209
|
+
current_page: number;
|
|
210
|
+
last_page: number;
|
|
211
|
+
per_page: number;
|
|
212
|
+
total: number;
|
|
213
|
+
from?: number;
|
|
214
|
+
to?: number;
|
|
215
|
+
}
|
|
216
|
+
interface PaginationLinks {
|
|
217
|
+
first?: string;
|
|
218
|
+
last?: string;
|
|
219
|
+
prev?: string | null;
|
|
220
|
+
next?: string | null;
|
|
221
|
+
}
|
|
222
|
+
interface Pagination {
|
|
223
|
+
meta: PaginationMeta;
|
|
224
|
+
links?: PaginationLinks;
|
|
225
|
+
}
|
|
226
|
+
interface BackendPagination {
|
|
227
|
+
meta: PaginationMeta;
|
|
228
|
+
links?: PaginationLinks;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
type BaseProps$3<TData, TValue> = {
|
|
232
|
+
columns: ColumnDef<TData, TValue>[];
|
|
233
|
+
data: TData[];
|
|
234
|
+
pageCount: number;
|
|
235
|
+
pageSize?: number;
|
|
236
|
+
filterableColumns?: DataTableFilterableColumn<TData>[];
|
|
237
|
+
showFilter?: boolean;
|
|
238
|
+
showPagination?: boolean;
|
|
239
|
+
floatingBar?: boolean;
|
|
240
|
+
addItemPagePath?: {
|
|
241
|
+
url: string;
|
|
242
|
+
text?: string;
|
|
243
|
+
};
|
|
244
|
+
deleteRowsAction?: React$1.MouseEventHandler<HTMLButtonElement>;
|
|
245
|
+
isShowExportButtons?: {
|
|
246
|
+
isShow: boolean;
|
|
247
|
+
ignoredCols?: string[];
|
|
248
|
+
fileName?: string;
|
|
249
|
+
};
|
|
250
|
+
customButtons?: CustomButtonProps[] | React$1.ReactElement;
|
|
251
|
+
isLoading?: boolean;
|
|
252
|
+
customCss?: string;
|
|
253
|
+
isShowAdvancedFilter?: boolean;
|
|
254
|
+
config?: TableConfigInput;
|
|
255
|
+
};
|
|
256
|
+
type QueryFilterProps$4<TData, TValue> = {
|
|
257
|
+
isQueryFilter: true;
|
|
258
|
+
handleFilterChange: (key: keyof FilterOptions, value: string | number | undefined) => void;
|
|
259
|
+
filterableQuery: DataTableFilterableColumn<TData>[];
|
|
260
|
+
filterableColumns?: never;
|
|
261
|
+
currentFilters?: FilterOptions;
|
|
262
|
+
onClearFilters?: () => void;
|
|
263
|
+
};
|
|
264
|
+
type LocalFilterProps$4<TData, TValue> = {
|
|
265
|
+
isQueryFilter?: false;
|
|
266
|
+
handleFilterChange?: never;
|
|
267
|
+
filterableQuery?: never;
|
|
268
|
+
filterableColumns?: DataTableFilterableColumn<TData>[];
|
|
269
|
+
currentFilters?: never;
|
|
270
|
+
onClearFilters?: never;
|
|
271
|
+
};
|
|
272
|
+
type QuerySearchProps$2<TData, TValue> = {
|
|
273
|
+
isQuerySearch: true;
|
|
274
|
+
searchableQuery: DataTableQuerySearchable<TData>[];
|
|
275
|
+
searchableColumns?: never;
|
|
276
|
+
};
|
|
277
|
+
type LocalSearchProps$1<TData, TValue> = {
|
|
278
|
+
isQuerySearch?: false;
|
|
279
|
+
searchableQuery?: never;
|
|
280
|
+
searchableColumns?: DataTableSearchableColumn<TData>[];
|
|
281
|
+
};
|
|
282
|
+
type QueryPaginationProps$2<TData, TValue> = {
|
|
283
|
+
isQueryPagination: true;
|
|
284
|
+
paginationData: {
|
|
285
|
+
paginationResponse: Pagination;
|
|
286
|
+
onPageChange: (page: number) => void;
|
|
287
|
+
onPageSizeChange: (size: number) => void;
|
|
288
|
+
};
|
|
289
|
+
};
|
|
290
|
+
type LocalPaginationProps$2<TData, TValue> = {
|
|
291
|
+
isQueryPagination?: false;
|
|
292
|
+
paginationData?: never;
|
|
293
|
+
};
|
|
294
|
+
type DataTableProps<TData, TValue> = BaseProps$3<TData, TValue> & (QuerySearchProps$2<TData, TValue> | LocalSearchProps$1<TData, TValue>) & (QueryPaginationProps$2<TData, TValue> | LocalPaginationProps$2<TData, TValue>) & (QueryFilterProps$4<TData, TValue> | LocalFilterProps$4<TData, TValue>);
|
|
295
|
+
declare function DataTable<TData, TValue>({ columns, data, pageCount, pageSize: defaultPageSize, filterableColumns, searchableColumns, showFilter, showPagination, floatingBar, deleteRowsAction, addItemPagePath, isShowExportButtons, customButtons, isQueryPagination, paginationData, isQuerySearch, searchableQuery, isLoading, isQueryFilter, handleFilterChange, filterableQuery, currentFilters, onClearFilters, customCss, isShowAdvancedFilter, config: instanceConfig, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
|
|
296
|
+
|
|
297
|
+
type BaseProps$2<TData, TValue> = {
|
|
298
|
+
data: TData[];
|
|
299
|
+
pageCount: number;
|
|
300
|
+
pageSize?: number;
|
|
301
|
+
columns: ColumnDef<TData, TValue>[];
|
|
302
|
+
showFilter?: boolean;
|
|
303
|
+
showPagination?: boolean;
|
|
304
|
+
addItemPagePath?: {
|
|
305
|
+
url: string;
|
|
306
|
+
text?: string;
|
|
307
|
+
};
|
|
308
|
+
isShowExportButtons?: {
|
|
309
|
+
isShow: boolean;
|
|
310
|
+
ignoredCols?: string[];
|
|
311
|
+
fileName?: string;
|
|
312
|
+
};
|
|
313
|
+
customButtons?: CustomButtonProps[] | React$1.ReactElement;
|
|
314
|
+
withIndex?: boolean;
|
|
315
|
+
isLoading?: boolean;
|
|
316
|
+
customCss?: string;
|
|
317
|
+
isShowAdvancedFilter?: boolean;
|
|
318
|
+
config?: TableConfigInput;
|
|
319
|
+
};
|
|
320
|
+
type QueryFilterProps$3<TData, TValue> = {
|
|
321
|
+
isQueryFilter: true;
|
|
322
|
+
handleFilterChange: (key: keyof FilterOptions, value: string | number | undefined) => void;
|
|
323
|
+
filterableQuery: DataTableFilterableColumn<TData>[];
|
|
324
|
+
filterableColumns?: never;
|
|
325
|
+
currentFilters?: FilterOptions;
|
|
326
|
+
onClearFilters?: () => void;
|
|
327
|
+
};
|
|
328
|
+
type LocalFilterProps$3<TData, TValue> = {
|
|
329
|
+
isQueryFilter?: false;
|
|
330
|
+
handleFilterChange?: never;
|
|
331
|
+
filterableQuery?: never;
|
|
332
|
+
filterableColumns?: DataTableFilterableColumn<TData>[];
|
|
333
|
+
currentFilters?: never;
|
|
334
|
+
onClearFilters?: never;
|
|
335
|
+
};
|
|
336
|
+
type QuerySearchProps$1<TData, TValue> = {
|
|
337
|
+
isQuerySearch: true;
|
|
338
|
+
searchableQuery: DataTableQuerySearchable<TData>[];
|
|
339
|
+
searchableColumns?: never;
|
|
340
|
+
};
|
|
341
|
+
type LocalSearchProps<TData, TValue> = {
|
|
342
|
+
isQuerySearch?: false;
|
|
343
|
+
searchableQuery?: never;
|
|
344
|
+
searchableColumns?: DataTableSearchableColumn<TData>[];
|
|
345
|
+
};
|
|
346
|
+
type QueryPaginationProps$1<TData, TValue> = {
|
|
347
|
+
isQueryPagination: true;
|
|
348
|
+
paginationData: {
|
|
349
|
+
paginationResponse: Pagination;
|
|
350
|
+
onPageChange: (page: number) => void;
|
|
351
|
+
onPageSizeChange: (size: number) => void;
|
|
352
|
+
};
|
|
353
|
+
};
|
|
354
|
+
type LocalPaginationProps$1<TData, TValue> = {
|
|
355
|
+
isQueryPagination?: false;
|
|
356
|
+
paginationData?: never;
|
|
357
|
+
};
|
|
358
|
+
type TasksTableShellProps<TData, TValue> = BaseProps$2<TData, TValue> & (QuerySearchProps$1<TData, TValue> | LocalSearchProps<TData, TValue>) & (QueryPaginationProps$1<TData, TValue> | LocalPaginationProps$1<TData, TValue>) & (QueryFilterProps$3<TData, TValue> | LocalFilterProps$3<TData, TValue>);
|
|
359
|
+
declare function ClientSideTable<TData, TValue>({ data, pageCount, pageSize, columns: initialColumns, searchableColumns, showFilter, showPagination, filterableColumns, addItemPagePath, isShowExportButtons, customButtons, withIndex, isQueryPagination, paginationData, isLoading, isQuerySearch, searchableQuery, isQueryFilter, handleFilterChange, filterableQuery, currentFilters, onClearFilters, customCss, isShowAdvancedFilter, config, }: TasksTableShellProps<TData, TValue>): react_jsx_runtime.JSX.Element;
|
|
360
|
+
|
|
361
|
+
type ViewMode = 'table' | 'cards';
|
|
362
|
+
type BaseProps$1<TData> = {
|
|
363
|
+
table: Table<TData>;
|
|
364
|
+
viewMode?: ViewMode;
|
|
365
|
+
onViewModeChange?: (mode: ViewMode) => void;
|
|
366
|
+
newRowLink?: string;
|
|
367
|
+
deleteRowsAction?: React$1.MouseEventHandler<HTMLButtonElement>;
|
|
368
|
+
addItemPagePath?: {
|
|
369
|
+
url: string;
|
|
370
|
+
text?: string;
|
|
371
|
+
};
|
|
372
|
+
isShowExportButtons?: {
|
|
373
|
+
isShow: boolean;
|
|
374
|
+
ignoredCols?: string[];
|
|
375
|
+
fileName?: string;
|
|
376
|
+
};
|
|
377
|
+
customButtons?: CustomButtonProps[] | React$1.ReactElement;
|
|
378
|
+
customCss?: string;
|
|
379
|
+
};
|
|
380
|
+
type QueryFilterProps$2<TData> = {
|
|
381
|
+
isQueryFilter: true;
|
|
382
|
+
handleFilterChange: (key: keyof FilterOptions, value: string | number | undefined) => void;
|
|
383
|
+
filterableQuery: DataTableFilterableColumn<TData>[];
|
|
384
|
+
filterableColumns?: never;
|
|
385
|
+
currentFilters?: FilterOptions;
|
|
386
|
+
onClearFilters?: () => void;
|
|
387
|
+
};
|
|
388
|
+
type LocalFilterProps$2<TData> = {
|
|
389
|
+
isQueryFilter?: false;
|
|
390
|
+
handleFilterChange?: never;
|
|
391
|
+
filterableQuery?: never;
|
|
392
|
+
filterableColumns?: DataTableFilterableColumn<TData>[];
|
|
393
|
+
currentFilters?: never;
|
|
394
|
+
onClearFilters?: never;
|
|
395
|
+
};
|
|
396
|
+
type QuerySearchProps<TData> = BaseProps$1<TData> & {
|
|
397
|
+
isQuerySearch: true;
|
|
398
|
+
searchableQuery: DataTableQuerySearchable<TData>[];
|
|
399
|
+
searchableColumns?: never;
|
|
400
|
+
};
|
|
401
|
+
type LocalQuerySearchProps<TData> = BaseProps$1<TData> & {
|
|
402
|
+
isQuerySearch?: false;
|
|
403
|
+
searchableQuery?: never;
|
|
404
|
+
searchableColumns?: DataTableSearchableColumn<TData>[];
|
|
405
|
+
};
|
|
406
|
+
type DataTableToolbarProps$1<TData> = BaseProps$1<TData> & (QuerySearchProps<TData> | LocalQuerySearchProps<TData>) & (QueryFilterProps$2<TData> | LocalFilterProps$2<TData>);
|
|
407
|
+
declare function DataTableToolbar<TData>({ table, viewMode, onViewModeChange, filterableColumns, searchableColumns, newRowLink, addItemPagePath, deleteRowsAction, isShowExportButtons, customButtons, isQuerySearch, searchableQuery, isQueryFilter, handleFilterChange, filterableQuery, currentFilters, onClearFilters, customCss, }: DataTableToolbarProps$1<TData>): react_jsx_runtime.JSX.Element;
|
|
408
|
+
|
|
409
|
+
interface DataTableToolbarProps<TData> {
|
|
410
|
+
table: Table<TData>;
|
|
411
|
+
filterableColumns?: DataTableFilterableColumn<TData>[];
|
|
412
|
+
searchableColumns?: DataTableSearchableColumn<TData>[];
|
|
413
|
+
addItemPagePath?: {
|
|
414
|
+
url: string;
|
|
415
|
+
text?: string;
|
|
416
|
+
};
|
|
417
|
+
isShowExportButtons?: {
|
|
418
|
+
isShow: boolean;
|
|
419
|
+
ignoredCols?: string[];
|
|
420
|
+
fileName?: string;
|
|
421
|
+
};
|
|
422
|
+
customButtons?: CustomButtonProps[] | React$1.ReactElement;
|
|
423
|
+
}
|
|
424
|
+
declare function DataTableMobileToolbar<TData>({ table, filterableColumns, searchableColumns, addItemPagePath, isShowExportButtons, customButtons, }: DataTableToolbarProps<TData>): react_jsx_runtime.JSX.Element;
|
|
425
|
+
|
|
426
|
+
type BaseProps<TData> = {
|
|
427
|
+
table: Table<TData>;
|
|
428
|
+
pageSizeOptions?: number[];
|
|
429
|
+
};
|
|
430
|
+
type QueryPaginationProps<TData> = BaseProps<TData> & {
|
|
431
|
+
isQueryPagination: true;
|
|
432
|
+
paginationData: {
|
|
433
|
+
paginationResponse: Pagination;
|
|
434
|
+
onPageChange: (page: number) => void;
|
|
435
|
+
onPageSizeChange: (size: number) => void;
|
|
436
|
+
};
|
|
437
|
+
};
|
|
438
|
+
type LocalPaginationProps<TData> = BaseProps<TData> & {
|
|
439
|
+
isQueryPagination?: false;
|
|
440
|
+
paginationData?: never | undefined;
|
|
441
|
+
};
|
|
442
|
+
type DataTablePaginationProps<TData> = QueryPaginationProps<TData> | LocalPaginationProps<TData>;
|
|
443
|
+
declare function DataTablePagination<TData>({ table, pageSizeOptions, isQueryPagination, paginationData, }: DataTablePaginationProps<TData>): react_jsx_runtime.JSX.Element;
|
|
444
|
+
|
|
445
|
+
interface DataTableColumnHeaderProps<TData, TValue> extends React.HTMLAttributes<HTMLDivElement> {
|
|
446
|
+
column: Column<TData, TValue>;
|
|
447
|
+
title: string;
|
|
448
|
+
}
|
|
449
|
+
declare function DataTableColumnHeader<TData, TValue>({ column, title, className, }: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime.JSX.Element;
|
|
450
|
+
|
|
451
|
+
interface DataTableViewOptionsProps<TData> {
|
|
452
|
+
table: Table<TData>;
|
|
453
|
+
}
|
|
454
|
+
declare function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps<TData>): react_jsx_runtime.JSX.Element;
|
|
455
|
+
|
|
456
|
+
interface DataTableCardViewProps<TData> {
|
|
457
|
+
table: Table<TData>;
|
|
458
|
+
}
|
|
459
|
+
declare function DataTableCardView<TData>({ table }: DataTableCardViewProps<TData>): react_jsx_runtime.JSX.Element;
|
|
460
|
+
|
|
461
|
+
interface DataTableFloatingBarProps<TData> extends React.HTMLAttributes<HTMLElement> {
|
|
462
|
+
table: Table<TData>;
|
|
463
|
+
deleteRowsAction?: React.MouseEventHandler<HTMLButtonElement>;
|
|
464
|
+
}
|
|
465
|
+
declare function DataTableFloatingBar<TData>({ table, deleteRowsAction, className, ...props }: DataTableFloatingBarProps<TData>): react_jsx_runtime.JSX.Element | null;
|
|
466
|
+
|
|
467
|
+
interface DataTableRoleFilterProps<TData> {
|
|
468
|
+
column?: Column<TData, unknown>;
|
|
469
|
+
title?: string;
|
|
470
|
+
options: {
|
|
471
|
+
label: string;
|
|
472
|
+
value: string;
|
|
473
|
+
}[];
|
|
474
|
+
paramKey?: string;
|
|
475
|
+
}
|
|
476
|
+
declare function DataTableRoleFilter<TData>({ column, title, options, paramKey, }: DataTableRoleFilterProps<TData>): react_jsx_runtime.JSX.Element;
|
|
477
|
+
|
|
478
|
+
interface DataTableFacetedFilterBase<TData, TValue> {
|
|
479
|
+
title?: string;
|
|
480
|
+
options: Option[];
|
|
481
|
+
variant?: 'popover' | 'command';
|
|
482
|
+
className?: string;
|
|
483
|
+
}
|
|
484
|
+
type QueryFilterProps$1<TData> = {
|
|
485
|
+
isQueryFilter: true;
|
|
486
|
+
column?: DataTableFilterableColumn<TData>;
|
|
487
|
+
handleFilterChange: (key: keyof FilterOptions, value: string | undefined) => void;
|
|
488
|
+
currentValue?: string;
|
|
489
|
+
};
|
|
490
|
+
type LocalFilterProps$1<TData, TValue> = {
|
|
491
|
+
isQueryFilter?: false;
|
|
492
|
+
handleFilterChange?: never;
|
|
493
|
+
column?: Column<TData, TValue>;
|
|
494
|
+
currentValue?: never;
|
|
495
|
+
};
|
|
496
|
+
type DataTableFacetedFilterProps<TData, TValue> = DataTableFacetedFilterBase<TData, TValue> & (QueryFilterProps$1<TData> | LocalFilterProps$1<TData, TValue>);
|
|
497
|
+
declare function DataTableFacetedFilter<TData, TValue>({ column, title, options, variant, className, isQueryFilter, handleFilterChange, currentValue, }: DataTableFacetedFilterProps<TData, TValue>): react_jsx_runtime.JSX.Element;
|
|
498
|
+
|
|
499
|
+
interface DataTableSingleSelectFilterBase<TData, TValue> {
|
|
500
|
+
title?: string;
|
|
501
|
+
options: Option[];
|
|
502
|
+
className?: string;
|
|
503
|
+
placeholder?: string;
|
|
504
|
+
}
|
|
505
|
+
type QueryFilterProps<TData> = {
|
|
506
|
+
isQueryFilter: true;
|
|
507
|
+
column?: DataTableFilterableColumn<TData>;
|
|
508
|
+
handleFilterChange: (key: keyof FilterOptions, value: string | undefined) => void;
|
|
509
|
+
currentValue?: string;
|
|
510
|
+
};
|
|
511
|
+
type LocalFilterProps<TData, TValue> = {
|
|
512
|
+
isQueryFilter?: false;
|
|
513
|
+
handleFilterChange?: never;
|
|
514
|
+
column?: Column<TData, TValue>;
|
|
515
|
+
currentValue?: never;
|
|
516
|
+
};
|
|
517
|
+
type DataTableSingleSelectFilterProps<TData, TValue> = DataTableSingleSelectFilterBase<TData, TValue> & (QueryFilterProps<TData> | LocalFilterProps<TData, TValue>);
|
|
518
|
+
declare function DataTableSingleSelectFilter<TData, TValue>({ column, title, options, className, isQueryFilter, handleFilterChange, currentValue, }: DataTableSingleSelectFilterProps<TData, TValue>): react_jsx_runtime.JSX.Element;
|
|
519
|
+
|
|
520
|
+
interface DataTableLoadingProps {
|
|
521
|
+
columnCount: number;
|
|
522
|
+
rowCount?: number;
|
|
523
|
+
}
|
|
524
|
+
declare const DataTableLoading: React__default.NamedExoticComponent<DataTableLoadingProps>;
|
|
525
|
+
|
|
526
|
+
interface DataTableAdvancedFilterProps<TData> {
|
|
527
|
+
options: DataTableFilterOption<TData>[];
|
|
528
|
+
selectedOptions: DataTableFilterOption<TData>[];
|
|
529
|
+
setSelectedOptions: React$1.Dispatch<React$1.SetStateAction<DataTableFilterOption<TData>[]>>;
|
|
530
|
+
children?: React$1.ReactNode;
|
|
531
|
+
}
|
|
532
|
+
declare function DataTableAdvancedFilter<TData>({ options, selectedOptions, setSelectedOptions, children, }: DataTableAdvancedFilterProps<TData>): react_jsx_runtime.JSX.Element;
|
|
533
|
+
|
|
534
|
+
interface DataTableAdvancedFilterItemProps<TData> {
|
|
535
|
+
table: Table<TData>;
|
|
536
|
+
selectedOption: DataTableFilterOption<TData>;
|
|
537
|
+
setSelectedOptions: React$1.Dispatch<React$1.SetStateAction<DataTableFilterOption<TData>[]>>;
|
|
538
|
+
}
|
|
539
|
+
declare function DataTableAdvancedFilterItem<TData>({ table, selectedOption, setSelectedOptions, }: DataTableAdvancedFilterItemProps<TData>): react_jsx_runtime.JSX.Element;
|
|
540
|
+
|
|
541
|
+
interface DataTableAdvancedToolbarProps<TData> {
|
|
542
|
+
table: Table<TData>;
|
|
543
|
+
searchableColumns?: DataTableSearchableColumn<TData>[];
|
|
544
|
+
filterableColumns?: DataTableFilterableColumn<TData>[];
|
|
545
|
+
addItemPagePath?: string;
|
|
546
|
+
}
|
|
547
|
+
declare function DataTableAdvancedToolbar<TData>({ table, filterableColumns, searchableColumns, addItemPagePath, }: DataTableAdvancedToolbarProps<TData>): react_jsx_runtime.JSX.Element;
|
|
548
|
+
|
|
549
|
+
declare const operators: {
|
|
550
|
+
label: string;
|
|
551
|
+
value: string;
|
|
552
|
+
}[];
|
|
553
|
+
interface DataTableMultiFilterProps<TData> {
|
|
554
|
+
table: Table<TData>;
|
|
555
|
+
allOptions: DataTableFilterOption<TData>[];
|
|
556
|
+
options: DataTableFilterOption<TData>[];
|
|
557
|
+
setSelectedOptions: React$1.Dispatch<React$1.SetStateAction<DataTableFilterOption<TData>[]>>;
|
|
558
|
+
}
|
|
559
|
+
declare function DataTableMultiFilter<TData>({ table, allOptions, options, setSelectedOptions, }: DataTableMultiFilterProps<TData>): react_jsx_runtime.JSX.Element;
|
|
560
|
+
interface MultiFilterRowProps<TData> extends DataTableMultiFilterProps<TData> {
|
|
561
|
+
i: number;
|
|
562
|
+
option: DataTableFilterOption<TData>;
|
|
563
|
+
operator?: (typeof operators)[number];
|
|
564
|
+
setOperator: React$1.Dispatch<React$1.SetStateAction<(typeof operators)[number]>>;
|
|
565
|
+
}
|
|
566
|
+
declare function MultiFilterRow<TData>({ i, table, option, allOptions, options, setSelectedOptions, operator, setOperator, }: MultiFilterRowProps<TData>): react_jsx_runtime.JSX.Element;
|
|
567
|
+
|
|
568
|
+
/**
|
|
569
|
+
* Core default config (Layer 1).
|
|
570
|
+
* All values match the current hardcoded behavior across components.
|
|
571
|
+
* Frozen to prevent accidental mutation.
|
|
572
|
+
*/
|
|
573
|
+
declare const DEFAULT_TABLE_CONFIG: Readonly<TableConfig>;
|
|
574
|
+
|
|
575
|
+
/**
|
|
576
|
+
* Deep-merge two config objects.
|
|
577
|
+
* - Arrays replace entirely (not concatenated).
|
|
578
|
+
* - `undefined` values in overrides are skipped.
|
|
579
|
+
* - Only merges 2 levels deep (sufficient for TableConfig shape).
|
|
580
|
+
*/
|
|
581
|
+
declare function deepMergeConfig(base: TableConfig, overrides: DeepPartial<TableConfig>): TableConfig;
|
|
582
|
+
|
|
583
|
+
/**
|
|
584
|
+
* Factory function to create a resolved, frozen TableConfig.
|
|
585
|
+
* Can be used outside React to pre-build configs in constants files.
|
|
586
|
+
*/
|
|
587
|
+
declare function createTableConfig(input?: TableConfigInput): TableConfig;
|
|
588
|
+
|
|
589
|
+
interface TableProviderProps {
|
|
590
|
+
config: TableConfigInput;
|
|
591
|
+
children: ReactNode;
|
|
592
|
+
}
|
|
593
|
+
/**
|
|
594
|
+
* Optional global config provider (Layer 2).
|
|
595
|
+
* Wrapping your app or page with this merges your config with defaults.
|
|
596
|
+
* If omitted, all components fall back to DEFAULT_TABLE_CONFIG.
|
|
597
|
+
*/
|
|
598
|
+
declare function TableProvider({ config, children }: TableProviderProps): React__default.FunctionComponentElement<React__default.ProviderProps<TableConfig | null>>;
|
|
599
|
+
/**
|
|
600
|
+
* Internal hook: returns the provider's config or defaults if no provider exists.
|
|
601
|
+
*/
|
|
602
|
+
declare function useGlobalTableConfig(): TableConfig;
|
|
603
|
+
|
|
604
|
+
/**
|
|
605
|
+
* Resolves config across all layers: Core Defaults -> Provider -> Instance -> Plugins.
|
|
606
|
+
* Memoized and runs dev validation.
|
|
607
|
+
*/
|
|
608
|
+
declare function useResolvedTableConfig(instanceConfig?: TableConfigInput): TableConfig;
|
|
609
|
+
|
|
610
|
+
/**
|
|
611
|
+
* Consumer hook for reading the resolved table config.
|
|
612
|
+
*
|
|
613
|
+
* Overloaded:
|
|
614
|
+
* - `useTableConfig()` — returns the full config object
|
|
615
|
+
* - `useTableConfig(selector)` — returns a derived slice (prevents unnecessary re-renders)
|
|
616
|
+
*/
|
|
617
|
+
declare function useTableConfig(): TableConfig;
|
|
618
|
+
declare function useTableConfig<T>(selector: (config: TableConfig) => T): T;
|
|
619
|
+
|
|
620
|
+
/**
|
|
621
|
+
* Translation hook for table components.
|
|
622
|
+
*
|
|
623
|
+
* If config provides a custom `translationFn`, uses that.
|
|
624
|
+
* Otherwise falls back to built-in English strings.
|
|
625
|
+
*/
|
|
626
|
+
declare function useTableTranslations(): (key: string) => string;
|
|
627
|
+
|
|
628
|
+
declare function useDebounce<T>(value: T, delay: number): T;
|
|
629
|
+
|
|
630
|
+
declare function cn(...inputs: ClassValue[]): string;
|
|
631
|
+
|
|
632
|
+
interface CsvExportOptions {
|
|
633
|
+
fileName?: string;
|
|
634
|
+
ignoredCols?: string[];
|
|
635
|
+
}
|
|
636
|
+
declare function createCsvConfig(options?: CsvExportOptions): Required<export_to_csv.ConfigOptions>;
|
|
637
|
+
declare function exportSelectedRowsCsv<TData>(table: Table<TData>, options?: CsvExportOptions): void;
|
|
638
|
+
|
|
639
|
+
export { type BackendPagination, ButtonTooltip, ClientSideTable, type CustomButtonProps, DEFAULT_TABLE_CONFIG, DataTable, DataTableAdvancedFilter, DataTableAdvancedFilterItem, DataTableAdvancedToolbar, DataTableCardView, DataTableColumnHeader, DataTableFacetedFilter, type DataTableFilterOption, type DataTableFilterableColumn, DataTableFloatingBar, DataTableLoading, DataTableMobileToolbar, DataTableMultiFilter, DataTablePagination, type DataTableQuerySearchable, DataTableRoleFilter, type DataTableSearchableColumn, DataTableSingleSelectFilter, DataTableToolbar, DataTableViewOptions, type DeepPartial, type FilterOptions, type MoreActionsProps, MultiFilterRow, type Option, type Pagination, type PaginationLinks, type PaginationMeta, TableActionsRow, type TableConfig, type TableConfigInput, type TableDevConfig, type TableEnterpriseConfig, type TableFeatureFlags, type TableI18nConfig, type TablePaginationConfig, type TablePerformanceConfig, type TablePlugin, TableProvider, type TableRouterAdapter, type TableSearchConfig, type ViewMode, cn, createCsvConfig, createTableConfig, deepMergeConfig, exportSelectedRowsCsv, useDebounce, useGlobalTableConfig, useResolvedTableConfig, useTableConfig, useTableTranslations };
|