@ackplus/react-tanstack-data-table 1.0.19-beta-0.7 → 1.0.19-beta-0.8
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 +599 -0
- package/package.json +1 -1
- package/src/index.d.ts +19 -0
- package/src/index.js +31 -0
- package/src/lib/components/droupdown/menu-dropdown.d.ts +17 -0
- package/src/lib/components/droupdown/menu-dropdown.js +52 -0
- package/src/lib/components/filters/filter-value-input.d.ts +9 -0
- package/src/lib/components/filters/filter-value-input.js +58 -0
- package/src/lib/components/filters/index.d.ts +23 -0
- package/src/lib/components/filters/index.js +129 -0
- package/src/lib/components/headers/draggable-header.d.ts +12 -0
- package/src/lib/components/headers/draggable-header.js +212 -0
- package/src/lib/components/headers/index.d.ts +2 -0
- package/src/lib/components/headers/index.js +5 -0
- package/src/lib/components/headers/table-header.d.ts +10 -0
- package/src/lib/components/headers/table-header.js +48 -0
- package/src/lib/components/index.d.ts +7 -0
- package/src/lib/components/index.js +10 -0
- package/src/lib/components/pagination/data-table-pagination.d.ts +11 -0
- package/src/lib/components/pagination/data-table-pagination.js +25 -0
- package/src/lib/components/pagination/index.d.ts +1 -0
- package/src/lib/components/pagination/index.js +4 -0
- package/src/lib/components/rows/data-table-row.d.ts +13 -0
- package/src/lib/components/rows/data-table-row.js +31 -0
- package/src/lib/components/rows/empty-data-row.d.ts +6 -0
- package/src/lib/components/rows/empty-data-row.js +11 -0
- package/src/lib/components/rows/index.d.ts +3 -0
- package/src/lib/components/rows/index.js +6 -0
- package/src/lib/components/rows/loading-rows.d.ts +5 -0
- package/src/lib/components/rows/loading-rows.js +49 -0
- package/src/lib/components/table/data-table.d.ts +3 -0
- package/src/lib/components/table/data-table.js +492 -0
- package/src/lib/components/table/data-table.types.d.ts +114 -0
- package/src/lib/components/table/data-table.types.js +2 -0
- package/src/lib/components/table/index.d.ts +2 -0
- package/src/lib/components/table/index.js +5 -0
- package/src/lib/components/toolbar/bulk-actions-toolbar.d.ts +9 -0
- package/src/lib/components/toolbar/bulk-actions-toolbar.js +25 -0
- package/src/lib/components/toolbar/column-custom-filter-control.d.ts +1 -0
- package/src/lib/components/toolbar/column-custom-filter-control.js +137 -0
- package/src/lib/components/toolbar/column-pinning-control.d.ts +1 -0
- package/src/lib/components/toolbar/column-pinning-control.js +105 -0
- package/src/lib/components/toolbar/column-reset-control.d.ts +1 -0
- package/src/lib/components/toolbar/column-reset-control.js +16 -0
- package/src/lib/components/toolbar/column-visibility-control.d.ts +1 -0
- package/src/lib/components/toolbar/column-visibility-control.js +31 -0
- package/src/lib/components/toolbar/data-table-toolbar.d.ts +14 -0
- package/src/lib/components/toolbar/data-table-toolbar.js +26 -0
- package/src/lib/components/toolbar/index.d.ts +8 -0
- package/src/lib/components/toolbar/index.js +17 -0
- package/src/lib/components/toolbar/table-export-control.d.ts +25 -0
- package/src/lib/components/toolbar/table-export-control.js +93 -0
- package/src/lib/components/toolbar/table-search-control.d.ts +1 -0
- package/src/lib/components/toolbar/table-search-control.js +61 -0
- package/src/lib/components/toolbar/table-size-control.d.ts +1 -0
- package/src/lib/components/toolbar/table-size-control.js +36 -0
- package/src/lib/contexts/data-table-context.d.ts +43 -0
- package/src/lib/contexts/data-table-context.js +54 -0
- package/src/lib/examples/advanced-features-example.d.ts +1 -0
- package/src/lib/examples/advanced-features-example.js +264 -0
- package/src/lib/examples/bulk-actions-test.d.ts +1 -0
- package/src/lib/examples/bulk-actions-test.js +44 -0
- package/src/lib/examples/custom-column-filter-example.d.ts +1 -0
- package/src/lib/examples/custom-column-filter-example.js +60 -0
- package/src/lib/examples/index.d.ts +5 -0
- package/src/lib/examples/index.js +13 -0
- package/src/lib/examples/selection-test-example.d.ts +1 -0
- package/src/lib/examples/selection-test-example.js +101 -0
- package/src/lib/examples/simple-local-example.d.ts +1 -0
- package/src/lib/examples/simple-local-example.js +97 -0
- package/src/lib/features/custom-column-filter.feature.d.ts +45 -0
- package/src/lib/features/custom-column-filter.feature.js +247 -0
- package/src/lib/features/custom-selection.feature.d.ts +46 -0
- package/src/lib/features/custom-selection.feature.js +172 -0
- package/src/lib/features/index.d.ts +2 -0
- package/src/lib/features/index.js +8 -0
- package/src/lib/hooks/index.d.ts +1 -0
- package/src/lib/hooks/index.js +4 -0
- package/src/lib/hooks/use-data-table-api.d.ts +56 -0
- package/src/lib/hooks/use-data-table-api.js +616 -0
- package/src/lib/icons/add-icon.d.ts +2 -0
- package/src/lib/icons/add-icon.js +8 -0
- package/src/lib/icons/csv-icon.d.ts +2 -0
- package/src/lib/icons/csv-icon.js +8 -0
- package/src/lib/icons/delete-icon.d.ts +2 -0
- package/src/lib/icons/delete-icon.js +8 -0
- package/src/lib/icons/excel-icon.d.ts +2 -0
- package/src/lib/icons/excel-icon.js +8 -0
- package/src/lib/icons/index.d.ts +7 -0
- package/src/lib/icons/index.js +17 -0
- package/src/lib/icons/unpin-icon.d.ts +2 -0
- package/src/lib/icons/unpin-icon.js +8 -0
- package/src/lib/icons/view-comfortable-icon.d.ts +2 -0
- package/src/lib/icons/view-comfortable-icon.js +8 -0
- package/src/lib/icons/view-compact-icon.d.ts +2 -0
- package/src/lib/icons/view-compact-icon.js +8 -0
- package/src/lib/types/column.types.d.ts +29 -0
- package/src/lib/types/column.types.js +5 -0
- package/src/lib/types/data-table-api.d.ts +134 -0
- package/src/lib/types/data-table-api.js +2 -0
- package/src/lib/types/export.types.d.ts +99 -0
- package/src/lib/types/export.types.js +2 -0
- package/src/lib/types/index.d.ts +6 -0
- package/src/lib/types/index.js +8 -0
- package/src/lib/types/slots.types.d.ts +272 -0
- package/src/lib/types/slots.types.js +2 -0
- package/src/lib/types/table.types.d.ts +63 -0
- package/src/lib/types/table.types.js +2 -0
- package/src/lib/utils/column-helpers.d.ts +7 -0
- package/src/lib/utils/column-helpers.js +43 -0
- package/src/lib/utils/debounced-fetch.utils.d.ts +11 -0
- package/src/lib/utils/debounced-fetch.utils.js +49 -0
- package/src/lib/utils/export-utils.d.ts +30 -0
- package/src/lib/utils/export-utils.js +152 -0
- package/src/lib/utils/index.d.ts +7 -0
- package/src/lib/utils/index.js +10 -0
- package/src/lib/utils/slot-helpers.d.ts +9 -0
- package/src/lib/utils/slot-helpers.js +21 -0
- package/src/lib/utils/special-columns.utils.d.ts +6 -0
- package/src/lib/utils/special-columns.utils.js +52 -0
- package/src/lib/utils/styling-helpers.d.ts +36 -0
- package/src/lib/utils/styling-helpers.js +61 -0
- package/src/lib/utils/table-helpers.d.ts +9 -0
- package/src/lib/utils/table-helpers.js +57 -0
- package/tsconfig.tsbuildinfo +1 -0
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.ExcelIcon = exports.CsvIcon = exports.ViewComfortableIcon = exports.ViewCompactIcon = exports.DeleteIcon = exports.AddIcon = exports.UnpinIcon = void 0;
|
|
4
|
+
var unpin_icon_1 = require("./unpin-icon");
|
|
5
|
+
Object.defineProperty(exports, "UnpinIcon", { enumerable: true, get: function () { return unpin_icon_1.UnpinIcon; } });
|
|
6
|
+
var add_icon_1 = require("./add-icon");
|
|
7
|
+
Object.defineProperty(exports, "AddIcon", { enumerable: true, get: function () { return add_icon_1.AddIcon; } });
|
|
8
|
+
var delete_icon_1 = require("./delete-icon");
|
|
9
|
+
Object.defineProperty(exports, "DeleteIcon", { enumerable: true, get: function () { return delete_icon_1.DeleteIcon; } });
|
|
10
|
+
var view_compact_icon_1 = require("./view-compact-icon");
|
|
11
|
+
Object.defineProperty(exports, "ViewCompactIcon", { enumerable: true, get: function () { return view_compact_icon_1.ViewCompactIcon; } });
|
|
12
|
+
var view_comfortable_icon_1 = require("./view-comfortable-icon");
|
|
13
|
+
Object.defineProperty(exports, "ViewComfortableIcon", { enumerable: true, get: function () { return view_comfortable_icon_1.ViewComfortableIcon; } });
|
|
14
|
+
var csv_icon_1 = require("./csv-icon");
|
|
15
|
+
Object.defineProperty(exports, "CsvIcon", { enumerable: true, get: function () { return csv_icon_1.CsvIcon; } });
|
|
16
|
+
var excel_icon_1 = require("./excel-icon");
|
|
17
|
+
Object.defineProperty(exports, "ExcelIcon", { enumerable: true, get: function () { return excel_icon_1.ExcelIcon; } });
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.UnpinIcon = UnpinIcon;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const material_1 = require("@mui/material");
|
|
6
|
+
function UnpinIcon(props) {
|
|
7
|
+
return ((0, jsx_runtime_1.jsxs)(material_1.SvgIcon, Object.assign({}, props, { viewBox: "0 0 24 24", children: [(0, jsx_runtime_1.jsx)("path", { d: "M2 5.27L3.28 4 20 20.72 18.73 22l-3.41-3.41V22h-1.6v-6H8v-2l2-2V9.27L2 5.27zM16 12V4h1V2H7v2h1v3.73l8 8z", opacity: "0.7" }), (0, jsx_runtime_1.jsx)("path", { d: "M14.73 12L16 10.73V4h1V2H7v2h1v3.73l2.27 2.27z" })] })));
|
|
8
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.ViewComfortableIcon = ViewComfortableIcon;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const material_1 = require("@mui/material");
|
|
6
|
+
function ViewComfortableIcon(props) {
|
|
7
|
+
return ((0, jsx_runtime_1.jsxs)(material_1.SvgIcon, Object.assign({}, props, { viewBox: "0 0 24 24", children: [(0, jsx_runtime_1.jsx)("rect", { x: "3", y: "3", width: "18", height: "3", fill: "currentColor", rx: "1" }), (0, jsx_runtime_1.jsx)("rect", { x: "3", y: "8", width: "18", height: "3", fill: "currentColor", rx: "1" }), (0, jsx_runtime_1.jsx)("rect", { x: "3", y: "13", width: "18", height: "3", fill: "currentColor", rx: "1" }), (0, jsx_runtime_1.jsx)("rect", { x: "3", y: "18", width: "18", height: "3", fill: "currentColor", rx: "1" })] })));
|
|
8
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.ViewCompactIcon = ViewCompactIcon;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const material_1 = require("@mui/material");
|
|
6
|
+
function ViewCompactIcon(props) {
|
|
7
|
+
return ((0, jsx_runtime_1.jsxs)(material_1.SvgIcon, Object.assign({}, props, { viewBox: "0 0 24 24", children: [(0, jsx_runtime_1.jsx)("rect", { x: "3", y: "4", width: "18", height: "2", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("rect", { x: "3", y: "7", width: "18", height: "2", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("rect", { x: "3", y: "10", width: "18", height: "2", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("rect", { x: "3", y: "13", width: "18", height: "2", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("rect", { x: "3", y: "16", width: "18", height: "2", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("rect", { x: "3", y: "19", width: "18", height: "2", fill: "currentColor" })] })));
|
|
8
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { ColumnDef, RowData, Column } from '@tanstack/react-table';
|
|
2
|
+
import { ColumnFilterRule } from '../features';
|
|
3
|
+
export declare const DEFAULT_SELECTION_COLUMN_NAME = "_selection";
|
|
4
|
+
export declare const DEFAULT_EXPANDING_COLUMN_NAME = "_expanding";
|
|
5
|
+
declare module '@tanstack/table-core' {
|
|
6
|
+
interface ColumnDefBase<TData extends RowData, TValue> {
|
|
7
|
+
type?: 'boolean' | 'number' | 'date' | 'select' | 'text';
|
|
8
|
+
options?: {
|
|
9
|
+
label: string;
|
|
10
|
+
value: string;
|
|
11
|
+
}[];
|
|
12
|
+
align?: 'left' | 'center' | 'right';
|
|
13
|
+
filterable?: boolean;
|
|
14
|
+
hideInExport?: boolean;
|
|
15
|
+
editComponent?: React.ComponentType<{
|
|
16
|
+
value: any;
|
|
17
|
+
onChange: (value: any) => void;
|
|
18
|
+
filter: ColumnFilterRule;
|
|
19
|
+
column: Column<TData, TValue>;
|
|
20
|
+
}>;
|
|
21
|
+
filterComponent?: React.ComponentType<{
|
|
22
|
+
value: any;
|
|
23
|
+
onChange: (value: any) => void;
|
|
24
|
+
filter: ColumnFilterRule;
|
|
25
|
+
column: Column<TData, TValue>;
|
|
26
|
+
}>;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
export type DataTableColumn<TData extends RowData, TValue = unknown> = ColumnDef<TData, TValue> & {};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.DEFAULT_EXPANDING_COLUMN_NAME = exports.DEFAULT_SELECTION_COLUMN_NAME = void 0;
|
|
4
|
+
exports.DEFAULT_SELECTION_COLUMN_NAME = '_selection';
|
|
5
|
+
exports.DEFAULT_EXPANDING_COLUMN_NAME = '_expanding';
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
import { ColumnPinningState, SortingState, ColumnOrderState, TableState, Row } from '@tanstack/react-table';
|
|
2
|
+
import { CustomColumnFilterState } from './table.types';
|
|
3
|
+
import { SelectionState } from '../features/custom-selection.feature';
|
|
4
|
+
export interface DataTableApi<T = any> {
|
|
5
|
+
columnVisibility: {
|
|
6
|
+
showColumn: (columnId: string) => void;
|
|
7
|
+
hideColumn: (columnId: string) => void;
|
|
8
|
+
toggleColumn: (columnId: string) => void;
|
|
9
|
+
showAllColumns: () => void;
|
|
10
|
+
hideAllColumns: () => void;
|
|
11
|
+
resetColumnVisibility: () => void;
|
|
12
|
+
};
|
|
13
|
+
columnOrdering: {
|
|
14
|
+
setColumnOrder: (columnOrder: ColumnOrderState) => void;
|
|
15
|
+
moveColumn: (columnId: string, toIndex: number) => void;
|
|
16
|
+
resetColumnOrder: () => void;
|
|
17
|
+
};
|
|
18
|
+
columnPinning: {
|
|
19
|
+
pinColumnLeft: (columnId: string) => void;
|
|
20
|
+
pinColumnRight: (columnId: string) => void;
|
|
21
|
+
unpinColumn: (columnId: string) => void;
|
|
22
|
+
setPinning: (pinning: ColumnPinningState) => void;
|
|
23
|
+
resetColumnPinning: () => void;
|
|
24
|
+
};
|
|
25
|
+
columnResizing: {
|
|
26
|
+
resizeColumn: (columnId: string, width: number) => void;
|
|
27
|
+
autoSizeColumn: (columnId: string) => void;
|
|
28
|
+
autoSizeAllColumns: () => void;
|
|
29
|
+
resetColumnSizing: () => void;
|
|
30
|
+
};
|
|
31
|
+
filtering: {
|
|
32
|
+
setGlobalFilter: (filter: string) => void;
|
|
33
|
+
clearGlobalFilter: () => void;
|
|
34
|
+
setCustomColumnFilters: (filters: CustomColumnFilterState) => void;
|
|
35
|
+
addColumnFilter: (columnId: string, operator: string, value: any) => void;
|
|
36
|
+
removeColumnFilter: (filterId: string) => void;
|
|
37
|
+
clearAllFilters: () => void;
|
|
38
|
+
resetFilters: () => void;
|
|
39
|
+
};
|
|
40
|
+
sorting: {
|
|
41
|
+
setSorting: (sorting: SortingState) => void;
|
|
42
|
+
sortColumn: (columnId: string, direction: 'asc' | 'desc' | false) => void;
|
|
43
|
+
clearSorting: () => void;
|
|
44
|
+
resetSorting: () => void;
|
|
45
|
+
};
|
|
46
|
+
pagination: {
|
|
47
|
+
goToPage: (pageIndex: number) => void;
|
|
48
|
+
nextPage: () => void;
|
|
49
|
+
previousPage: () => void;
|
|
50
|
+
setPageSize: (pageSize: number) => void;
|
|
51
|
+
goToFirstPage: () => void;
|
|
52
|
+
goToLastPage: () => void;
|
|
53
|
+
};
|
|
54
|
+
selection: {
|
|
55
|
+
selectRow: (rowId: string) => void;
|
|
56
|
+
deselectRow: (rowId: string) => void;
|
|
57
|
+
toggleRowSelection: (rowId: string) => void;
|
|
58
|
+
selectAll: () => void;
|
|
59
|
+
deselectAll: () => void;
|
|
60
|
+
toggleSelectAll: () => void;
|
|
61
|
+
getSelectionState: () => SelectionState;
|
|
62
|
+
getSelectedCount: () => number;
|
|
63
|
+
getSelectedRows: () => Row<T>[];
|
|
64
|
+
isRowSelected: (rowId: string) => boolean;
|
|
65
|
+
};
|
|
66
|
+
data: {
|
|
67
|
+
refresh: () => void;
|
|
68
|
+
reload: () => void;
|
|
69
|
+
getAllData: () => T[];
|
|
70
|
+
getRowData: (rowId: string) => T | undefined;
|
|
71
|
+
getRowByIndex: (index: number) => T | undefined;
|
|
72
|
+
updateRow: (rowId: string, updates: Partial<T>) => void;
|
|
73
|
+
updateRowByIndex: (index: number, updates: Partial<T>) => void;
|
|
74
|
+
insertRow: (newRow: T, index?: number) => void;
|
|
75
|
+
deleteRow: (rowId: string) => void;
|
|
76
|
+
deleteRowByIndex: (index: number) => void;
|
|
77
|
+
deleteSelectedRows: () => void;
|
|
78
|
+
replaceAllData: (newData: T[]) => void;
|
|
79
|
+
updateMultipleRows: (updates: Array<{
|
|
80
|
+
rowId: string;
|
|
81
|
+
data: Partial<T>;
|
|
82
|
+
}>) => void;
|
|
83
|
+
insertMultipleRows: (newRows: T[], startIndex?: number) => void;
|
|
84
|
+
deleteMultipleRows: (rowIds: string[]) => void;
|
|
85
|
+
updateField: (rowId: string, fieldName: keyof T, value: any) => void;
|
|
86
|
+
updateFieldByIndex: (index: number, fieldName: keyof T, value: any) => void;
|
|
87
|
+
findRows: (predicate: (row: T) => boolean) => T[];
|
|
88
|
+
findRowIndex: (predicate: (row: T) => boolean) => number;
|
|
89
|
+
getDataCount: () => number;
|
|
90
|
+
getFilteredDataCount: () => number;
|
|
91
|
+
};
|
|
92
|
+
layout: {
|
|
93
|
+
resetLayout: () => void;
|
|
94
|
+
resetAll: () => void;
|
|
95
|
+
saveLayout: () => any;
|
|
96
|
+
restoreLayout: (layout: any) => void;
|
|
97
|
+
};
|
|
98
|
+
state: {
|
|
99
|
+
getTableState: () => any;
|
|
100
|
+
getCurrentFilters: () => CustomColumnFilterState;
|
|
101
|
+
getCurrentSorting: () => SortingState;
|
|
102
|
+
getCurrentPagination: () => {
|
|
103
|
+
pageIndex: number;
|
|
104
|
+
pageSize: number;
|
|
105
|
+
};
|
|
106
|
+
getCurrentSelection: () => string[];
|
|
107
|
+
};
|
|
108
|
+
export: {
|
|
109
|
+
exportCSV: (options?: {
|
|
110
|
+
filename?: string;
|
|
111
|
+
onlyVisibleColumns?: boolean;
|
|
112
|
+
onlySelectedRows?: boolean;
|
|
113
|
+
includeHeaders?: boolean;
|
|
114
|
+
}) => Promise<void>;
|
|
115
|
+
exportExcel: (options?: {
|
|
116
|
+
filename?: string;
|
|
117
|
+
onlyVisibleColumns?: boolean;
|
|
118
|
+
onlySelectedRows?: boolean;
|
|
119
|
+
includeHeaders?: boolean;
|
|
120
|
+
}) => Promise<void>;
|
|
121
|
+
exportServerData: (options: {
|
|
122
|
+
format: 'csv' | 'excel';
|
|
123
|
+
filename?: string;
|
|
124
|
+
fetchData: (filters?: Partial<TableState>) => Promise<{
|
|
125
|
+
data: T[];
|
|
126
|
+
total: number;
|
|
127
|
+
}>;
|
|
128
|
+
pageSize?: number;
|
|
129
|
+
includeHeaders?: boolean;
|
|
130
|
+
}) => Promise<void>;
|
|
131
|
+
isExporting: () => boolean;
|
|
132
|
+
cancelExport: () => void;
|
|
133
|
+
};
|
|
134
|
+
}
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
import { TableState } from './table.types';
|
|
2
|
+
export interface ServerExportColumn<T = any> {
|
|
3
|
+
id: string;
|
|
4
|
+
header: string;
|
|
5
|
+
accessor: keyof T | string;
|
|
6
|
+
formatter?: (value: any, row: T) => string;
|
|
7
|
+
}
|
|
8
|
+
export interface ExportOptions {
|
|
9
|
+
filename?: string;
|
|
10
|
+
format: 'csv' | 'excel';
|
|
11
|
+
includeHeaders?: boolean;
|
|
12
|
+
onlyVisibleColumns?: boolean;
|
|
13
|
+
onlyFilteredData?: boolean;
|
|
14
|
+
chunkSize?: number;
|
|
15
|
+
onProgress?: (progress: ExportProgress) => void;
|
|
16
|
+
onComplete?: (result: ExportResult) => void;
|
|
17
|
+
onError?: (error: ExportError) => void;
|
|
18
|
+
signal?: AbortSignal;
|
|
19
|
+
}
|
|
20
|
+
export interface ExportProgress {
|
|
21
|
+
processedRows: number;
|
|
22
|
+
totalRows: number;
|
|
23
|
+
percentage: number;
|
|
24
|
+
currentChunk: number;
|
|
25
|
+
totalChunks: number;
|
|
26
|
+
estimatedTimeRemaining?: number;
|
|
27
|
+
}
|
|
28
|
+
export interface ExportResult {
|
|
29
|
+
success: boolean;
|
|
30
|
+
filename: string;
|
|
31
|
+
totalRows: number;
|
|
32
|
+
totalColumns: number;
|
|
33
|
+
processingTime: number;
|
|
34
|
+
fileSize?: number;
|
|
35
|
+
}
|
|
36
|
+
export interface ExportError {
|
|
37
|
+
message: string;
|
|
38
|
+
code: 'CANCELLED' | 'MEMORY_ERROR' | 'PROCESSING_ERROR' | 'UNKNOWN';
|
|
39
|
+
details?: any;
|
|
40
|
+
}
|
|
41
|
+
export interface ExportConfig {
|
|
42
|
+
enabled: boolean;
|
|
43
|
+
formats: ('csv' | 'excel')[];
|
|
44
|
+
filename?: string;
|
|
45
|
+
includeHeaders?: boolean;
|
|
46
|
+
onlyVisibleColumns?: boolean;
|
|
47
|
+
onlyFilteredData?: boolean;
|
|
48
|
+
chunkSize?: number;
|
|
49
|
+
enableProgressTracking?: boolean;
|
|
50
|
+
maxMemoryThreshold?: number;
|
|
51
|
+
}
|
|
52
|
+
export interface ExportState {
|
|
53
|
+
isExporting: boolean;
|
|
54
|
+
progress?: ExportProgress;
|
|
55
|
+
controller?: AbortController;
|
|
56
|
+
startTime?: number;
|
|
57
|
+
}
|
|
58
|
+
export interface ChunkProcessingConfig {
|
|
59
|
+
chunkSize: number;
|
|
60
|
+
delayBetweenChunks: number;
|
|
61
|
+
useWebWorker: boolean;
|
|
62
|
+
}
|
|
63
|
+
export interface PinnedColumnStyleOptions {
|
|
64
|
+
width?: number | string;
|
|
65
|
+
isPinned?: 'left' | 'right' | false;
|
|
66
|
+
pinnedPosition?: number;
|
|
67
|
+
pinnedRightPosition?: number;
|
|
68
|
+
zIndex?: number;
|
|
69
|
+
disableStickyHeader?: boolean;
|
|
70
|
+
isLastLeftPinnedColumn?: boolean;
|
|
71
|
+
isFirstRightPinnedColumn?: boolean;
|
|
72
|
+
}
|
|
73
|
+
export interface SimpleExportOptions {
|
|
74
|
+
filename?: string;
|
|
75
|
+
format: 'csv' | 'excel';
|
|
76
|
+
includeHeaders?: boolean;
|
|
77
|
+
onlyVisibleColumns?: boolean;
|
|
78
|
+
onlySelectedRows?: boolean;
|
|
79
|
+
}
|
|
80
|
+
export interface SelectionExportData {
|
|
81
|
+
selectAllMatching?: boolean;
|
|
82
|
+
excludedIds?: string[];
|
|
83
|
+
selectedIds?: string[];
|
|
84
|
+
hasSelection?: boolean;
|
|
85
|
+
}
|
|
86
|
+
export interface ServerExportOptions extends SimpleExportOptions {
|
|
87
|
+
fetchData: (filters?: Partial<TableState>, selection?: SelectionExportData) => Promise<{
|
|
88
|
+
data: any[];
|
|
89
|
+
total: number;
|
|
90
|
+
}>;
|
|
91
|
+
currentFilters?: any;
|
|
92
|
+
pageSize?: number;
|
|
93
|
+
selection?: SelectionExportData;
|
|
94
|
+
}
|
|
95
|
+
export interface ExportCallbacks {
|
|
96
|
+
onProgress?: (progress: ExportProgress) => void;
|
|
97
|
+
onComplete?: (result: ExportResult) => void;
|
|
98
|
+
onError?: (error: ExportError) => void;
|
|
99
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const tslib_1 = require("tslib");
|
|
4
|
+
tslib_1.__exportStar(require("./column.types"), exports);
|
|
5
|
+
tslib_1.__exportStar(require("./table.types"), exports);
|
|
6
|
+
tslib_1.__exportStar(require("./export.types"), exports);
|
|
7
|
+
tslib_1.__exportStar(require("./data-table-api"), exports);
|
|
8
|
+
tslib_1.__exportStar(require("./slots.types"), exports);
|
|
@@ -0,0 +1,272 @@
|
|
|
1
|
+
import { TableProps, TableContainerProps, BoxProps } from '@mui/material';
|
|
2
|
+
import { Table, Row, Column } from '@tanstack/react-table';
|
|
3
|
+
import { ComponentType, ReactNode } from 'react';
|
|
4
|
+
import { DataTableColumn, TableFilters, ExportProgress, ExportResult, ExportError, ServerExportColumn } from './index';
|
|
5
|
+
import { DataTableSize } from '../utils/table-helpers';
|
|
6
|
+
import { DataTablePaginationProps } from "../components/pagination";
|
|
7
|
+
export interface DataTableSlots<T = any> {
|
|
8
|
+
root?: ComponentType<DataTableSlotProps<T>['root']>;
|
|
9
|
+
tableContainer?: ComponentType<DataTableSlotProps<T>['tableContainer']>;
|
|
10
|
+
table?: ComponentType<DataTableSlotProps<T>['table']>;
|
|
11
|
+
toolbar?: ComponentType<DataTableSlotProps<T>['toolbar']>;
|
|
12
|
+
header?: ComponentType<DataTableSlotProps<T>['header']>;
|
|
13
|
+
headerRow?: ComponentType<DataTableSlotProps<T>['headerRow']>;
|
|
14
|
+
headerCell?: ComponentType<DataTableSlotProps<T>['headerCell']>;
|
|
15
|
+
sortIconAsc?: ComponentType<DataTableSlotProps<T>['sortIconAsc']>;
|
|
16
|
+
sortIconDesc?: ComponentType<DataTableSlotProps<T>['sortIconDesc']>;
|
|
17
|
+
body?: ComponentType<DataTableSlotProps<T>['body']>;
|
|
18
|
+
row?: ComponentType<DataTableSlotProps<T>['row']>;
|
|
19
|
+
cell?: ComponentType<DataTableSlotProps<T>['cell']>;
|
|
20
|
+
loadingRow?: ComponentType<DataTableSlotProps<T>['loadingRow']>;
|
|
21
|
+
emptyRow?: ComponentType<DataTableSlotProps<T>['emptyRow']>;
|
|
22
|
+
expandedRow?: ComponentType<DataTableSlotProps<T>['expandedRow']>;
|
|
23
|
+
footer?: ComponentType<DataTableSlotProps<T>['footer']>;
|
|
24
|
+
pagination?: ComponentType<DataTableSlotProps<T>['pagination']>;
|
|
25
|
+
searchInput?: ComponentType<DataTableSlotProps<T>['searchInput']>;
|
|
26
|
+
columnVisibilityControl?: ComponentType<DataTableSlotProps<T>['columnVisibilityControl']>;
|
|
27
|
+
columnCustomFilterControl?: ComponentType<DataTableSlotProps<T>['columnCustomFilterControl']>;
|
|
28
|
+
columnPinningControl?: ComponentType<DataTableSlotProps<T>['columnPinningControl']>;
|
|
29
|
+
exportButton?: ComponentType<DataTableSlotProps<T>['exportButton']>;
|
|
30
|
+
resetButton?: ComponentType<DataTableSlotProps<T>['resetButton']>;
|
|
31
|
+
tableSizeControl?: ComponentType<DataTableSlotProps<T>['tableSizeControl']>;
|
|
32
|
+
bulkActionsToolbar?: ComponentType<DataTableSlotProps<T>['bulkActionsToolbar']>;
|
|
33
|
+
searchIcon?: ComponentType<DataTableSlotProps<T>['searchIcon']>;
|
|
34
|
+
clearIcon?: ComponentType<DataTableSlotProps<T>['clearIcon']>;
|
|
35
|
+
exportIcon?: ComponentType<DataTableSlotProps<T>['exportIcon']>;
|
|
36
|
+
columnIcon?: ComponentType<DataTableSlotProps<T>['columnIcon']>;
|
|
37
|
+
resetIcon?: ComponentType<DataTableSlotProps<T>['resetIcon']>;
|
|
38
|
+
moreIcon?: ComponentType<DataTableSlotProps<T>['moreIcon']>;
|
|
39
|
+
filterIcon?: ComponentType<DataTableSlotProps<T>['filterIcon']>;
|
|
40
|
+
pinIcon?: ComponentType<DataTableSlotProps<T>['pinIcon']>;
|
|
41
|
+
unpinIcon?: ComponentType<DataTableSlotProps<T>['unpinIcon']>;
|
|
42
|
+
leftIcon?: ComponentType<DataTableSlotProps<T>['leftIcon']>;
|
|
43
|
+
rightIcon?: ComponentType<DataTableSlotProps<T>['rightIcon']>;
|
|
44
|
+
csvIcon?: ComponentType<DataTableSlotProps<T>['csvIcon']>;
|
|
45
|
+
excelIcon?: ComponentType<DataTableSlotProps<T>['excelIcon']>;
|
|
46
|
+
selectAllIcon?: ComponentType<DataTableSlotProps<T>['selectAllIcon']>;
|
|
47
|
+
deselectIcon?: ComponentType<DataTableSlotProps<T>['deselectIcon']>;
|
|
48
|
+
tableSizeIcon?: ComponentType<DataTableSlotProps<T>['tableSizeIcon']>;
|
|
49
|
+
tableSizeSmallIcon?: ComponentType<DataTableSlotProps<T>['tableSizeSmallIcon']>;
|
|
50
|
+
tableSizeMediumIcon?: ComponentType<DataTableSlotProps<T>['tableSizeMediumIcon']>;
|
|
51
|
+
checkboxSelection?: ComponentType<DataTableSlotProps<T>['checkboxSelection']>;
|
|
52
|
+
expandIcon?: ComponentType<DataTableSlotProps<T>['expandIcon']>;
|
|
53
|
+
collapseIcon?: ComponentType<DataTableSlotProps<T>['collapseIcon']>;
|
|
54
|
+
loadingSkeleton?: ComponentType<DataTableSlotProps<T>['loadingSkeleton']>;
|
|
55
|
+
noDataOverlay?: ComponentType<DataTableSlotProps<T>['noDataOverlay']>;
|
|
56
|
+
exportProgressDialog?: ComponentType<DataTableSlotProps<T>['exportProgressDialog']>;
|
|
57
|
+
}
|
|
58
|
+
export interface BaseSlotProps<T = any> {
|
|
59
|
+
table: Table<T>;
|
|
60
|
+
data: T[];
|
|
61
|
+
columns: DataTableColumn<T>[];
|
|
62
|
+
}
|
|
63
|
+
export interface DataTableSlotProps<T = any> {
|
|
64
|
+
root: BaseSlotProps<T> & BoxProps & {
|
|
65
|
+
children: ReactNode;
|
|
66
|
+
};
|
|
67
|
+
tableContainer: BaseSlotProps<T> & TableContainerProps & {
|
|
68
|
+
children: ReactNode;
|
|
69
|
+
enableStickyHeader?: boolean;
|
|
70
|
+
maxHeight?: string | number;
|
|
71
|
+
enableVirtualization?: boolean;
|
|
72
|
+
};
|
|
73
|
+
table: BaseSlotProps<T> & TableProps & {
|
|
74
|
+
children: ReactNode;
|
|
75
|
+
tableSize?: DataTableSize;
|
|
76
|
+
enableStickyHeader?: boolean;
|
|
77
|
+
fitToScreen?: boolean;
|
|
78
|
+
tableStyle?: React.CSSProperties;
|
|
79
|
+
};
|
|
80
|
+
toolbar: BaseSlotProps<T> & {
|
|
81
|
+
title?: string;
|
|
82
|
+
subtitle?: string;
|
|
83
|
+
enableGlobalFilter?: boolean;
|
|
84
|
+
enableColumnVisibility?: boolean;
|
|
85
|
+
enableColumnFilter?: boolean;
|
|
86
|
+
enableExport?: boolean;
|
|
87
|
+
enableReset?: boolean;
|
|
88
|
+
enableTableSizeControl?: boolean;
|
|
89
|
+
enableColumnPinning?: boolean;
|
|
90
|
+
extraFilter?: ReactNode;
|
|
91
|
+
serverExport?: {
|
|
92
|
+
fetchData: (page: number, pageSize: number, filters: TableFilters) => Promise<{
|
|
93
|
+
data: T[];
|
|
94
|
+
total: number;
|
|
95
|
+
}>;
|
|
96
|
+
columns: ServerExportColumn<T>[];
|
|
97
|
+
pageSize?: number;
|
|
98
|
+
};
|
|
99
|
+
currentFilters?: TableFilters;
|
|
100
|
+
onExportStart?: (format: 'csv' | 'excel', summary: {
|
|
101
|
+
mode: 'client' | 'server';
|
|
102
|
+
totalRows: number;
|
|
103
|
+
estimatedMemoryMB?: number;
|
|
104
|
+
}) => void;
|
|
105
|
+
onExportProgress?: (progress: ExportProgress) => void;
|
|
106
|
+
onExportComplete?: (result: ExportResult) => void;
|
|
107
|
+
onExportError?: (error: ExportError) => void;
|
|
108
|
+
onExportCancel?: () => void;
|
|
109
|
+
};
|
|
110
|
+
header: BaseSlotProps<T> & {
|
|
111
|
+
enableSorting?: boolean;
|
|
112
|
+
draggable?: boolean;
|
|
113
|
+
enableColumnResizing?: boolean;
|
|
114
|
+
enableStickyHeader?: boolean;
|
|
115
|
+
fitToScreen?: boolean;
|
|
116
|
+
onColumnReorder?: (draggedColumnId: string, targetColumnId: string) => void;
|
|
117
|
+
};
|
|
118
|
+
headerRow: BaseSlotProps<T> & {
|
|
119
|
+
headerGroups: any[];
|
|
120
|
+
};
|
|
121
|
+
headerCell: BaseSlotProps<T> & {
|
|
122
|
+
header: any;
|
|
123
|
+
column: Column<T>;
|
|
124
|
+
enableSorting?: boolean;
|
|
125
|
+
draggable?: boolean;
|
|
126
|
+
enableColumnResizing?: boolean;
|
|
127
|
+
onColumnReorder?: (draggedColumnId: string, targetColumnId: string) => void;
|
|
128
|
+
isPinned?: boolean | 'left' | 'right';
|
|
129
|
+
pinnedPosition?: number;
|
|
130
|
+
pinnedRightPosition?: number;
|
|
131
|
+
};
|
|
132
|
+
sortIconAsc: Record<string, any>;
|
|
133
|
+
sortIconDesc: Record<string, any>;
|
|
134
|
+
body: BaseSlotProps<T> & {
|
|
135
|
+
children: ReactNode;
|
|
136
|
+
rows: Row<T>[];
|
|
137
|
+
loading?: boolean;
|
|
138
|
+
emptyMessage?: string;
|
|
139
|
+
enableVirtualization?: boolean;
|
|
140
|
+
enablePagination?: boolean;
|
|
141
|
+
};
|
|
142
|
+
row: BaseSlotProps<T> & {
|
|
143
|
+
row: Row<T>;
|
|
144
|
+
index: number;
|
|
145
|
+
enableHover?: boolean;
|
|
146
|
+
enableStripes?: boolean;
|
|
147
|
+
isOdd?: boolean;
|
|
148
|
+
renderSubComponent?: (row: Row<T>) => ReactNode;
|
|
149
|
+
disableStickyHeader?: boolean;
|
|
150
|
+
};
|
|
151
|
+
cell: BaseSlotProps<T> & {
|
|
152
|
+
row: Row<T>;
|
|
153
|
+
cell: any;
|
|
154
|
+
column: Column<T>;
|
|
155
|
+
value: any;
|
|
156
|
+
isPinned?: boolean | 'left' | 'right';
|
|
157
|
+
pinnedPosition?: number;
|
|
158
|
+
pinnedRightPosition?: number;
|
|
159
|
+
alignment?: 'left' | 'center' | 'right';
|
|
160
|
+
};
|
|
161
|
+
loadingRow: BaseSlotProps<T> & {
|
|
162
|
+
rowCount: number;
|
|
163
|
+
colSpan: number;
|
|
164
|
+
};
|
|
165
|
+
emptyRow: BaseSlotProps<T> & {
|
|
166
|
+
colSpan: number;
|
|
167
|
+
message: string;
|
|
168
|
+
};
|
|
169
|
+
expandedRow: BaseSlotProps<T> & {
|
|
170
|
+
row: Row<T>;
|
|
171
|
+
colSpan: number;
|
|
172
|
+
children: ReactNode;
|
|
173
|
+
};
|
|
174
|
+
footer: BaseSlotProps<T> & {
|
|
175
|
+
children: ReactNode;
|
|
176
|
+
enableStickyFooter?: boolean;
|
|
177
|
+
};
|
|
178
|
+
pagination: BaseSlotProps<T> & DataTablePaginationProps;
|
|
179
|
+
searchInput: BaseSlotProps<T> & {
|
|
180
|
+
value: string;
|
|
181
|
+
onChange: (value: string) => void;
|
|
182
|
+
placeholder?: string;
|
|
183
|
+
autoFocus?: boolean;
|
|
184
|
+
};
|
|
185
|
+
columnsPanel: BaseSlotProps<T> & {
|
|
186
|
+
getTogglableColumns: (columns: DataTableColumn<T>[]) => DataTableColumn<T>[];
|
|
187
|
+
getPinnableColumns: (columns: DataTableColumn<T>[]) => DataTableColumn<T>[];
|
|
188
|
+
};
|
|
189
|
+
columnVisibilityControl: BaseSlotProps<T>;
|
|
190
|
+
columnCustomFilterControl: BaseSlotProps<T>;
|
|
191
|
+
columnPinningControl: BaseSlotProps<T>;
|
|
192
|
+
resetButton: BaseSlotProps<T>;
|
|
193
|
+
tableSizeControl: BaseSlotProps<T>;
|
|
194
|
+
bulkActionsToolbar: BaseSlotProps<T> & {
|
|
195
|
+
selectionState: any;
|
|
196
|
+
selectedRowCount: number;
|
|
197
|
+
bulkActions?: (selectionState: any) => ReactNode;
|
|
198
|
+
onBulkAction?: (action: string, selectionState: T[]) => void;
|
|
199
|
+
enableSelectAll?: boolean;
|
|
200
|
+
onSelectAll?: () => void;
|
|
201
|
+
onDeselectAll?: () => void;
|
|
202
|
+
};
|
|
203
|
+
exportButton: BaseSlotProps<T> & {
|
|
204
|
+
filename?: string;
|
|
205
|
+
dataMode?: 'client' | 'server';
|
|
206
|
+
serverExport?: {
|
|
207
|
+
fetchData: (page: number, pageSize: number, filters: TableFilters) => Promise<{
|
|
208
|
+
data: T[];
|
|
209
|
+
total: number;
|
|
210
|
+
}>;
|
|
211
|
+
columns: ServerExportColumn<T>[];
|
|
212
|
+
pageSize?: number;
|
|
213
|
+
};
|
|
214
|
+
currentFilters?: TableFilters;
|
|
215
|
+
onExportStart?: (format: 'csv' | 'excel', summary: {
|
|
216
|
+
mode: 'client' | 'server';
|
|
217
|
+
totalRows: number;
|
|
218
|
+
estimatedMemoryMB?: number;
|
|
219
|
+
}) => void;
|
|
220
|
+
onExportProgress?: (progress: ExportProgress) => void;
|
|
221
|
+
onExportComplete?: (result: ExportResult) => void;
|
|
222
|
+
onExportError?: (error: ExportError) => void;
|
|
223
|
+
onExportCancel?: () => void;
|
|
224
|
+
};
|
|
225
|
+
searchIcon: Record<string, any>;
|
|
226
|
+
clearIcon: Record<string, any>;
|
|
227
|
+
exportIcon: Record<string, any>;
|
|
228
|
+
columnIcon: Record<string, any>;
|
|
229
|
+
resetIcon: Record<string, any>;
|
|
230
|
+
moreIcon: Record<string, any>;
|
|
231
|
+
filterIcon: Record<string, any>;
|
|
232
|
+
pinIcon: Record<string, any>;
|
|
233
|
+
unpinIcon: Record<string, any>;
|
|
234
|
+
leftIcon: Record<string, any>;
|
|
235
|
+
rightIcon: Record<string, any>;
|
|
236
|
+
expandIcon: Record<string, any>;
|
|
237
|
+
collapseIcon: Record<string, any>;
|
|
238
|
+
csvIcon: Record<string, any>;
|
|
239
|
+
excelIcon: Record<string, any>;
|
|
240
|
+
selectAllIcon: Record<string, any>;
|
|
241
|
+
deselectIcon: Record<string, any>;
|
|
242
|
+
tableSizeIcon: Record<string, any>;
|
|
243
|
+
tableSizeSmallIcon: Record<string, any>;
|
|
244
|
+
tableSizeMediumIcon: Record<string, any>;
|
|
245
|
+
checkboxSelection: BaseSlotProps<T> & {
|
|
246
|
+
row?: Row<T>;
|
|
247
|
+
checked: boolean;
|
|
248
|
+
indeterminate?: boolean;
|
|
249
|
+
onChange: (checked: boolean) => void;
|
|
250
|
+
disabled?: boolean;
|
|
251
|
+
};
|
|
252
|
+
selectionColumn: DataTableColumn<T>;
|
|
253
|
+
expandColumn: DataTableColumn<T>;
|
|
254
|
+
loadingSkeleton: BaseSlotProps<T> & {
|
|
255
|
+
rows: number;
|
|
256
|
+
columns: number;
|
|
257
|
+
};
|
|
258
|
+
noDataOverlay: BaseSlotProps<T> & {
|
|
259
|
+
message: string;
|
|
260
|
+
};
|
|
261
|
+
exportProgressDialog: BaseSlotProps<T> & {
|
|
262
|
+
open: boolean;
|
|
263
|
+
progress: ExportProgress;
|
|
264
|
+
onCancel: () => void;
|
|
265
|
+
};
|
|
266
|
+
}
|
|
267
|
+
export interface DefaultSlots<T = any> extends DataTableSlots<T> {
|
|
268
|
+
}
|
|
269
|
+
export type PartialSlotProps<T = any> = {
|
|
270
|
+
[K in keyof DataTableSlotProps<T>]?: Partial<DataTableSlotProps<T>[K]>;
|
|
271
|
+
};
|
|
272
|
+
export type SlotComponentProps<TSlot extends keyof DataTableSlots<T>, T = any> = DataTableSlotProps<T>[TSlot];
|