@ackplus/react-tanstack-data-table 1.0.19-beta-0.14 → 1.0.19-beta-0.16
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/package.json +1 -1
- package/src/index.d.ts +1 -4
- package/src/index.js +2 -9
- package/src/lib/components/filters/filter-value-input.d.ts +8 -1
- package/src/lib/components/filters/filter-value-input.js +14 -31
- package/src/lib/components/headers/draggable-header.d.ts +6 -2
- package/src/lib/components/headers/draggable-header.js +42 -50
- package/src/lib/components/headers/table-header.d.ts +8 -2
- package/src/lib/components/headers/table-header.js +24 -18
- package/src/lib/components/pagination/data-table-pagination.d.ts +8 -2
- package/src/lib/components/pagination/data-table-pagination.js +27 -15
- package/src/lib/components/rows/data-table-row.d.ts +9 -2
- package/src/lib/components/rows/data-table-row.js +21 -7
- package/src/lib/components/rows/empty-data-row.d.ts +11 -4
- package/src/lib/components/rows/empty-data-row.js +14 -2
- package/src/lib/components/rows/loading-rows.d.ts +9 -2
- package/src/lib/components/rows/loading-rows.js +29 -19
- package/src/lib/components/table/data-table.js +47 -37
- package/src/lib/components/table/data-table.types.d.ts +4 -2
- package/src/lib/components/toolbar/bulk-actions-toolbar.d.ts +9 -3
- package/src/lib/components/toolbar/bulk-actions-toolbar.js +15 -10
- package/src/lib/components/toolbar/column-filter-control.d.ts +14 -1
- package/src/lib/components/toolbar/column-filter-control.js +14 -12
- package/src/lib/components/toolbar/column-pinning-control.d.ts +12 -1
- package/src/lib/components/toolbar/column-pinning-control.js +24 -42
- package/src/lib/components/toolbar/column-reset-control.d.ts +8 -1
- package/src/lib/components/toolbar/column-reset-control.js +34 -6
- package/src/lib/components/toolbar/column-visibility-control.d.ts +10 -1
- package/src/lib/components/toolbar/column-visibility-control.js +7 -7
- package/src/lib/components/toolbar/data-table-toolbar.d.ts +9 -2
- package/src/lib/components/toolbar/data-table-toolbar.js +15 -2
- package/src/lib/components/toolbar/table-export-control.d.ts +7 -1
- package/src/lib/components/toolbar/table-export-control.js +24 -68
- package/src/lib/components/toolbar/table-search-control.d.ts +12 -1
- package/src/lib/components/toolbar/table-search-control.js +24 -11
- package/src/lib/components/toolbar/table-size-control.d.ts +9 -1
- package/src/lib/components/toolbar/table-size-control.js +17 -9
- package/src/lib/examples/index.d.ts +2 -0
- package/src/lib/examples/index.js +5 -1
- package/src/lib/examples/simple-slots-example.d.ts +1 -0
- package/src/lib/examples/simple-slots-example.js +115 -0
- package/src/lib/types/slots.types.d.ts +142 -137
- package/src/lib/utils/slot-helpers.d.ts +12 -6
- package/src/lib/utils/slot-helpers.js +86 -12
|
@@ -1,18 +1,24 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.LoadingRows = LoadingRows;
|
|
4
|
+
const tslib_1 = require("tslib");
|
|
4
5
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
6
|
const material_1 = require("@mui/material");
|
|
6
|
-
const material_2 = require("@mui/material");
|
|
7
7
|
const data_table_context_1 = require("../../contexts/data-table-context");
|
|
8
8
|
const utils_1 = require("../../utils");
|
|
9
9
|
const slot_helpers_1 = require("../../utils/slot-helpers");
|
|
10
|
-
function LoadingRows(
|
|
10
|
+
function LoadingRows(props) {
|
|
11
|
+
const { rowCount = 5, rowProps, cellProps, skeletonProps, containerSx, slots, slotProps } = props, otherProps = tslib_1.__rest(props, ["rowCount", "rowProps", "cellProps", "skeletonProps", "containerSx", "slots", "slotProps"]);
|
|
11
12
|
const { table } = (0, data_table_context_1.useDataTableContext)();
|
|
12
13
|
const visibleColumns = table.getVisibleLeafColumns();
|
|
14
|
+
const cellSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'cell');
|
|
15
|
+
const rowSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'row');
|
|
13
16
|
const CellSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'cell', material_1.TableCell);
|
|
14
17
|
const TableRowSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'row', material_1.TableRow);
|
|
15
|
-
|
|
18
|
+
const mergedRowProps = (0, slot_helpers_1.mergeSlotProps)({
|
|
19
|
+
sx: containerSx,
|
|
20
|
+
}, rowSlotProps, rowProps || {});
|
|
21
|
+
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Array.from({ length: rowCount }, (_, rowIndex) => ((0, jsx_runtime_1.jsx)(TableRowSlot, Object.assign({}, mergedRowProps, { children: visibleColumns.map((column, colIndex) => {
|
|
16
22
|
var _a;
|
|
17
23
|
const isPinned = column.getIsPinned();
|
|
18
24
|
const pinnedPosition = isPinned ? column.getStart('left') : undefined;
|
|
@@ -22,7 +28,8 @@ function LoadingRows({ rowCount = 5, slots, slotProps, }) {
|
|
|
22
28
|
const isBooleanColumn = (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.type) === 'boolean';
|
|
23
29
|
const isNumberColumn = (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.type) === 'number';
|
|
24
30
|
const isSelectionColumn = column.id === 'select';
|
|
25
|
-
|
|
31
|
+
const mergedCellProps = (0, slot_helpers_1.mergeSlotProps)({
|
|
32
|
+
sx: Object.assign({}, (0, utils_1.getPinnedColumnStyle)({
|
|
26
33
|
width: column.getSize() || 'auto',
|
|
27
34
|
isPinned,
|
|
28
35
|
pinnedPosition,
|
|
@@ -30,20 +37,23 @@ function LoadingRows({ rowCount = 5, slots, slotProps, }) {
|
|
|
30
37
|
zIndex: isPinned ? 9 : 1,
|
|
31
38
|
isLastLeftPinnedColumn: isPinned === 'left' && column.getIsLastColumn('left'),
|
|
32
39
|
isFirstRightPinnedColumn: isPinned === 'right' && column.getIsFirstColumn('right'),
|
|
33
|
-
})
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
return ((0, jsx_runtime_1.jsx)(
|
|
47
|
-
}
|
|
40
|
+
})),
|
|
41
|
+
}, cellSlotProps, cellProps || {});
|
|
42
|
+
const getSkeletonContent = () => {
|
|
43
|
+
if (isSelectionColumn) {
|
|
44
|
+
return ((0, jsx_runtime_1.jsx)(material_1.Skeleton, Object.assign({ variant: "rectangular", width: 20, height: 20, animation: "wave" }, skeletonProps)));
|
|
45
|
+
}
|
|
46
|
+
if (isBooleanColumn) {
|
|
47
|
+
return ((0, jsx_runtime_1.jsx)(material_1.Skeleton, Object.assign({ variant: "circular", width: 16, height: 16, animation: "wave" }, skeletonProps)));
|
|
48
|
+
}
|
|
49
|
+
if (isDateColumn) {
|
|
50
|
+
return ((0, jsx_runtime_1.jsx)(material_1.Skeleton, Object.assign({ variant: "text", width: "80%", height: 20, animation: "wave" }, skeletonProps)));
|
|
51
|
+
}
|
|
52
|
+
if (isNumberColumn) {
|
|
53
|
+
return ((0, jsx_runtime_1.jsx)(material_1.Skeleton, Object.assign({ variant: "text", width: "60%", height: 20, animation: "wave" }, skeletonProps)));
|
|
54
|
+
}
|
|
55
|
+
return ((0, jsx_runtime_1.jsx)(material_1.Skeleton, Object.assign({ variant: "text", width: `${Math.random() * 40 + 60}%`, height: 20, animation: "wave" }, skeletonProps)));
|
|
56
|
+
};
|
|
57
|
+
return ((0, jsx_runtime_1.jsx)(CellSlot, Object.assign({}, mergedCellProps, { children: getSkeletonContent() }), `skeleton-${column.id || colIndex}-${rowIndex}`));
|
|
48
58
|
}) }), `skeleton-row-${rowIndex}`))) }));
|
|
49
59
|
}
|
|
@@ -40,7 +40,7 @@ const DEFAULT_INITIAL_STATE = {
|
|
|
40
40
|
pendingLogic: 'AND',
|
|
41
41
|
},
|
|
42
42
|
};
|
|
43
|
-
exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, columns, data = [], totalRow = 0, idKey = 'id', extraFilter = null, footerFilter = null, dataMode = 'client', initialLoadData = true, onFetchData, onDataStateChange, enableRowSelection = false, enableMultiRowSelection = true, selectMode = 'page', isRowSelectable, onSelectionChange, enableBulkActions = false, bulkActions, enableColumnResizing = false, columnResizeMode = 'onChange', enableColumnDragging = false, onColumnDragEnd, enableColumnPinning = false, onColumnPinningChange, enableExpanding = false, getRowCanExpand, renderSubComponent, enablePagination = true, paginationMode = 'client', enableGlobalFilter = true, enableColumnFilter = false, filterMode = 'client', enableSorting = true, sortingMode = 'client', onSortingChange, exportFilename = 'export', onExportProgress, onExportComplete, onExportError, onServerExport, onExportCancel, enableHover = true, enableStripes = false, tableContainerProps = {}, tableProps = {}, fitToScreen = true, tableSize: initialTableSize = 'medium', enableStickyHeaderOrFooter = false, maxHeight = '400px', enableVirtualization = false, estimateRowHeight = 52, enableColumnVisibility = true, enableTableSizeControl = true, enableExport = true, enableReset = true, loading = false, emptyMessage = 'No data available', skeletonRows = 5, onColumnFiltersChange, slots = {}, slotProps = {}, }, ref) {
|
|
43
|
+
exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, columns, data = [], totalRow = 0, idKey = 'id', extraFilter = null, footerFilter = null, dataMode = 'client', initialLoadData = true, onFetchData, onDataStateChange, enableRowSelection = false, enableMultiRowSelection = true, selectMode = 'page', isRowSelectable, onSelectionChange, enableBulkActions = false, bulkActions, enableColumnResizing = false, columnResizeMode = 'onChange', enableColumnDragging = false, onColumnDragEnd, enableColumnPinning = false, onColumnPinningChange, enableExpanding = false, getRowCanExpand, renderSubComponent, enablePagination = true, paginationMode = 'client', enableGlobalFilter = true, enableColumnFilter = false, filterMode = 'client', enableSorting = true, sortingMode = 'client', onSortingChange, exportFilename = 'export', onExportProgress, onExportComplete, onExportError, onServerExport, onExportCancel, enableHover = true, enableStripes = false, tableContainerProps = {}, tableProps = {}, fitToScreen = true, tableSize: initialTableSize = 'medium', enableStickyHeaderOrFooter = false, maxHeight = '400px', enableVirtualization = false, estimateRowHeight = 52, enableColumnVisibility = true, enableTableSizeControl = true, enableExport = true, enableReset = true, loading = false, emptyMessage = 'No data available', skeletonRows = 5, onColumnFiltersChange, onPaginationChange, onGlobalFilterChange, slots = {}, slotProps = {}, }, ref) {
|
|
44
44
|
var _a;
|
|
45
45
|
const isServerMode = dataMode === 'server';
|
|
46
46
|
const isServerPagination = paginationMode === 'server' || isServerMode;
|
|
@@ -75,11 +75,11 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
|
|
|
75
75
|
const enhancedColumns = (0, react_1.useMemo)(() => {
|
|
76
76
|
let columnsMap = [...columns];
|
|
77
77
|
if (enableExpanding) {
|
|
78
|
-
const expandingColumnMap = (0, special_columns_utils_1.createExpandingColumn)(Object.assign({}, ((slotProps === null || slotProps === void 0 ? void 0 : slotProps.expandColumn)
|
|
78
|
+
const expandingColumnMap = (0, special_columns_utils_1.createExpandingColumn)(Object.assign({}, ((slotProps === null || slotProps === void 0 ? void 0 : slotProps.expandColumn) && typeof slotProps.expandColumn === 'object' ? slotProps.expandColumn : {})));
|
|
79
79
|
columnsMap = [expandingColumnMap, ...columnsMap];
|
|
80
80
|
}
|
|
81
81
|
if (enableRowSelection) {
|
|
82
|
-
const selectionColumnMap = (0, special_columns_utils_1.createSelectionColumn)(Object.assign(Object.assign({}, ((slotProps === null || slotProps === void 0 ? void 0 : slotProps.selectionColumn)
|
|
82
|
+
const selectionColumnMap = (0, special_columns_utils_1.createSelectionColumn)(Object.assign(Object.assign({}, ((slotProps === null || slotProps === void 0 ? void 0 : slotProps.selectionColumn) && typeof slotProps.selectionColumn === 'object' ? slotProps.selectionColumn : {})), { multiSelect: enableMultiRowSelection }));
|
|
83
83
|
columnsMap = [selectionColumnMap, ...columnsMap];
|
|
84
84
|
}
|
|
85
85
|
return columnsMap;
|
|
@@ -164,11 +164,6 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
|
|
|
164
164
|
const handleColumnFilterStateChange = (0, react_1.useCallback)((filterState) => {
|
|
165
165
|
if (filterState && typeof filterState === 'object') {
|
|
166
166
|
setColumnFilter(filterState);
|
|
167
|
-
setTimeout(() => {
|
|
168
|
-
if (onColumnFiltersChange) {
|
|
169
|
-
onColumnFiltersChange(filterState);
|
|
170
|
-
}
|
|
171
|
-
}, 0);
|
|
172
167
|
}
|
|
173
168
|
}, [onColumnFiltersChange]);
|
|
174
169
|
const tableStateChange = (0, react_1.useCallback)((overrides = {}) => {
|
|
@@ -196,18 +191,19 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
|
|
|
196
191
|
: updaterOrValue;
|
|
197
192
|
newSorting = newSorting.filter((sort) => sort.id);
|
|
198
193
|
setSorting(newSorting);
|
|
199
|
-
|
|
200
|
-
onSortingChange(newSorting);
|
|
201
|
-
}
|
|
194
|
+
onSortingChange === null || onSortingChange === void 0 ? void 0 : onSortingChange(newSorting);
|
|
202
195
|
if (isServerMode || isServerSorting) {
|
|
203
|
-
|
|
196
|
+
const pagination = resetPageToFirst();
|
|
197
|
+
tableStateChange({ sorting: newSorting, pagination });
|
|
204
198
|
fetchData({
|
|
205
199
|
sorting: newSorting,
|
|
200
|
+
pagination,
|
|
206
201
|
});
|
|
207
202
|
}
|
|
208
203
|
else if (onDataStateChange) {
|
|
204
|
+
const pagination = resetPageToFirst();
|
|
209
205
|
setTimeout(() => {
|
|
210
|
-
tableStateChange({ sorting: newSorting });
|
|
206
|
+
tableStateChange({ sorting: newSorting, pagination });
|
|
211
207
|
}, 0);
|
|
212
208
|
}
|
|
213
209
|
}, [
|
|
@@ -251,6 +247,8 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
|
|
|
251
247
|
tableStateChange({ pagination: newPagination });
|
|
252
248
|
}, 0);
|
|
253
249
|
}
|
|
250
|
+
setPagination(newPagination);
|
|
251
|
+
onPaginationChange === null || onPaginationChange === void 0 ? void 0 : onPaginationChange(newPagination);
|
|
254
252
|
}, [pagination, isServerMode, isServerPagination, onDataStateChange, fetchData, tableStateChange]);
|
|
255
253
|
const handleGlobalFilterChange = (0, react_1.useCallback)((updaterOrValue) => {
|
|
256
254
|
const newFilter = typeof updaterOrValue === 'function'
|
|
@@ -258,16 +256,19 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
|
|
|
258
256
|
: updaterOrValue;
|
|
259
257
|
setGlobalFilter(newFilter);
|
|
260
258
|
if (isServerMode || isServerFiltering) {
|
|
259
|
+
const pagination = resetPageToFirst();
|
|
261
260
|
setTimeout(() => {
|
|
262
|
-
tableStateChange({ globalFilter: newFilter });
|
|
263
|
-
fetchData({ globalFilter: newFilter });
|
|
261
|
+
tableStateChange({ globalFilter: newFilter, pagination });
|
|
262
|
+
fetchData({ globalFilter: newFilter, pagination });
|
|
264
263
|
}, 0);
|
|
265
264
|
}
|
|
266
265
|
else if (onDataStateChange) {
|
|
266
|
+
const pagination = resetPageToFirst();
|
|
267
267
|
setTimeout(() => {
|
|
268
|
-
tableStateChange({ globalFilter: newFilter });
|
|
268
|
+
tableStateChange({ globalFilter: newFilter, pagination });
|
|
269
269
|
}, 0);
|
|
270
270
|
}
|
|
271
|
+
onGlobalFilterChange === null || onGlobalFilterChange === void 0 ? void 0 : onGlobalFilterChange(newFilter);
|
|
271
272
|
}, [globalFilter, isServerMode, isServerFiltering, onDataStateChange, fetchData, tableStateChange]);
|
|
272
273
|
const onColumnFilterChangeHandler = (0, react_1.useCallback)((updater) => {
|
|
273
274
|
const currentState = columnFilter;
|
|
@@ -283,6 +284,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
|
|
|
283
284
|
handleColumnFilterStateChange(legacyFilterState);
|
|
284
285
|
}, [columnFilter, handleColumnFilterStateChange]);
|
|
285
286
|
const onColumnFilterApplyHandler = (0, react_1.useCallback)((appliedState) => {
|
|
287
|
+
const pagination = resetPageToFirst();
|
|
286
288
|
if (isServerFiltering) {
|
|
287
289
|
const serverFilterState = {
|
|
288
290
|
filters: appliedState.filters,
|
|
@@ -292,11 +294,18 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
|
|
|
292
294
|
};
|
|
293
295
|
tableStateChange({
|
|
294
296
|
columnFilter: serverFilterState,
|
|
297
|
+
pagination,
|
|
295
298
|
});
|
|
296
299
|
fetchData({
|
|
297
300
|
columnFilter: serverFilterState,
|
|
301
|
+
pagination,
|
|
298
302
|
});
|
|
299
303
|
}
|
|
304
|
+
setTimeout(() => {
|
|
305
|
+
if (onColumnFiltersChange) {
|
|
306
|
+
onColumnFiltersChange(appliedState);
|
|
307
|
+
}
|
|
308
|
+
}, 0);
|
|
300
309
|
}, [isServerFiltering, fetchData, tableStateChange]);
|
|
301
310
|
const table = (0, react_table_1.useReactTable)(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ _features: [column_filter_feature_1.ColumnFilterFeature, features_1.SelectionFeature], data: tableData, columns: enhancedColumns, initialState: Object.assign({}, initialStateConfig), state: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (enableSorting ? { sorting } : {})), (enablePagination ? { pagination } : {})), (enableGlobalFilter ? { globalFilter } : {})), (enableExpanding ? { expanded } : {})), (enableColumnDragging ? { columnOrder } : {})), (enableColumnPinning ? { columnPinning } : {})), (enableColumnFilter ? { columnFilter } : {})), (enableRowSelection ? { selectionState } : {})), selectMode: selectMode, enableAdvanceSelection: !!enableRowSelection, isRowSelectable: isRowSelectable }, (enableRowSelection ? { onSelectionStateChange: handleSelectionStateChange } : {})), { enableAdvanceColumnFilter: enableColumnFilter, onColumnFilterChange: onColumnFilterChangeHandler, onColumnFilterApply: onColumnFilterApplyHandler }), (enableSorting ? { onSortingChange: handleSortingChange } : {})), (enablePagination ? { onPaginationChange: handlePaginationChange } : {})), (enableRowSelection ? { onRowSelectionChange: handleSelectionStateChange } : {})), (enableGlobalFilter ? { onGlobalFilterChange: handleGlobalFilterChange } : {})), (enableExpanding ? { onExpandedChange: setExpanded } : {})), (enableColumnDragging ? { onColumnOrderChange: handleColumnOrderChange } : {})), (enableColumnPinning ? { onColumnPinningChange: handleColumnPinningChange } : {})), { getCoreRowModel: (0, react_table_1.getCoreRowModel)() }), (enableSorting ? { getSortedRowModel: (0, react_table_1.getSortedRowModel)() } : {})), (enableColumnFilter ? { getFilteredRowModel: (0, column_filter_feature_1.getCombinedFilteredRowModel)() } : {})), (enablePagination ? { getPaginationRowModel: (0, react_table_1.getPaginationRowModel)() } : {})), { enableSorting: enableSorting, manualSorting: isServerSorting, manualFiltering: isServerFiltering, enableColumnResizing: enableColumnResizing, columnResizeMode: columnResizeMode, enableColumnPinning: enableColumnPinning }), (enableExpanding ? { getRowCanExpand: getRowCanExpand } : {})), { manualPagination: isServerPagination, autoResetPageIndex: false, rowCount: tableTotalRow, getRowId: (row, index) => (0, utils_1.generateRowId)(row, index, idKey), debugAll: false }));
|
|
302
311
|
const rows = ((_a = table.getRowModel()) === null || _a === void 0 ? void 0 : _a.rows) || [];
|
|
@@ -307,6 +316,12 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
|
|
|
307
316
|
overscan: 10,
|
|
308
317
|
enabled: enableVirtualization && !enablePagination && rows.length > 0,
|
|
309
318
|
});
|
|
319
|
+
const resetPageToFirst = () => {
|
|
320
|
+
const newPagination = { pageIndex: 0, pageSize: pagination.pageSize };
|
|
321
|
+
setPagination(newPagination);
|
|
322
|
+
onPaginationChange === null || onPaginationChange === void 0 ? void 0 : onPaginationChange(newPagination);
|
|
323
|
+
return newPagination;
|
|
324
|
+
};
|
|
310
325
|
const handleColumnReorder = (0, react_1.useCallback)((draggedColumnId, targetColumnId) => {
|
|
311
326
|
const currentOrder = columnOrder.length > 0 ? columnOrder : enhancedColumns.map((col, index) => {
|
|
312
327
|
if (col.id)
|
|
@@ -953,15 +968,15 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
|
|
|
953
968
|
selectMode,
|
|
954
969
|
onSelectionChange,
|
|
955
970
|
]);
|
|
956
|
-
const LoadingRowSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'loadingRow', rows_1.LoadingRows);
|
|
957
|
-
const EmptyRowSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'emptyRow', rows_1.EmptyDataRow);
|
|
958
971
|
const renderTableRows = (0, react_1.useCallback)(() => {
|
|
959
972
|
var _a, _b, _c, _d;
|
|
960
973
|
if (tableLoading) {
|
|
961
|
-
|
|
974
|
+
const { component: LoadingRowComponent, props: loadingRowProps } = (0, slot_helpers_1.getSlotComponentWithProps)(slots, slotProps || {}, 'loadingRow', rows_1.LoadingRows, {});
|
|
975
|
+
return ((0, jsx_runtime_1.jsx)(LoadingRowComponent, Object.assign({ rowCount: enablePagination ? Math.min(pagination.pageSize, skeletonRows) : skeletonRows, colSpan: table.getAllColumns().length, slots: slots, slotProps: slotProps }, loadingRowProps)));
|
|
962
976
|
}
|
|
963
977
|
if (rows.length === 0) {
|
|
964
|
-
|
|
978
|
+
const { component: EmptyRowComponent, props: emptyRowProps } = (0, slot_helpers_1.getSlotComponentWithProps)(slots, slotProps || {}, 'emptyRow', rows_1.EmptyDataRow, {});
|
|
979
|
+
return ((0, jsx_runtime_1.jsx)(EmptyRowComponent, Object.assign({ colSpan: table.getAllColumns().length, message: emptyMessage, slots: slots, slotProps: slotProps }, emptyRowProps)));
|
|
965
980
|
}
|
|
966
981
|
if (enableVirtualization && !enablePagination && rows.length > 0) {
|
|
967
982
|
const virtualItems = rowVirtualizer.getVirtualItems();
|
|
@@ -973,7 +988,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
|
|
|
973
988
|
const row = rows[virtualRow.index];
|
|
974
989
|
if (!row)
|
|
975
990
|
return null;
|
|
976
|
-
return ((0, jsx_runtime_1.jsx)(rows_1.DataTableRow,
|
|
991
|
+
return ((0, jsx_runtime_1.jsx)(rows_1.DataTableRow, { row: row, enableHover: enableHover, enableStripes: enableStripes, isOdd: virtualRow.index % 2 === 1, renderSubComponent: renderSubComponent, disableStickyHeader: enableStickyHeaderOrFooter, slots: slots, slotProps: slotProps }, row.id));
|
|
977
992
|
}), virtualItems.length > 0 && ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { colSpan: table.getAllColumns().length, style: {
|
|
978
993
|
height: `${rowVirtualizer.getTotalSize() -
|
|
979
994
|
((_d = (_c = virtualItems[virtualItems.length - 1]) === null || _c === void 0 ? void 0 : _c.end) !== null && _d !== void 0 ? _d : 0)}px`,
|
|
@@ -987,12 +1002,10 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
|
|
|
987
1002
|
rows,
|
|
988
1003
|
enableVirtualization,
|
|
989
1004
|
enablePagination,
|
|
990
|
-
LoadingRowSlot,
|
|
991
1005
|
pagination.pageSize,
|
|
992
1006
|
skeletonRows,
|
|
993
1007
|
table,
|
|
994
1008
|
slotProps,
|
|
995
|
-
EmptyRowSlot,
|
|
996
1009
|
emptyMessage,
|
|
997
1010
|
rowVirtualizer,
|
|
998
1011
|
enableHover,
|
|
@@ -1010,31 +1023,28 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
|
|
|
1010
1023
|
}
|
|
1011
1024
|
}
|
|
1012
1025
|
}, [exportController, onExportCancel]);
|
|
1013
|
-
const
|
|
1014
|
-
const
|
|
1015
|
-
const
|
|
1016
|
-
const
|
|
1017
|
-
const
|
|
1018
|
-
const
|
|
1019
|
-
const
|
|
1020
|
-
const
|
|
1026
|
+
const { component: RootComponent, props: rootSlotProps } = (0, slot_helpers_1.getSlotComponentWithProps)(slots, slotProps || {}, 'root', material_1.Box, {});
|
|
1027
|
+
const { component: ToolbarComponent, props: toolbarSlotProps } = (0, slot_helpers_1.getSlotComponentWithProps)(slots, slotProps || {}, 'toolbar', toolbar_1.DataTableToolbar, {});
|
|
1028
|
+
const { component: BulkActionsComponent, props: bulkActionsSlotProps } = (0, slot_helpers_1.getSlotComponentWithProps)(slots, slotProps || {}, 'bulkActionsToolbar', toolbar_1.BulkActionsToolbar, {});
|
|
1029
|
+
const { component: TableContainerComponent, props: tableContainerSlotProps } = (0, slot_helpers_1.getSlotComponentWithProps)(slots, slotProps || {}, 'tableContainer', material_1.TableContainer, {});
|
|
1030
|
+
const { component: TableComponent, props: tableComponentSlotProps } = (0, slot_helpers_1.getSlotComponentWithProps)(slots, slotProps || {}, 'table', material_1.Table, {});
|
|
1031
|
+
const { component: BodyComponent, props: bodySlotProps } = (0, slot_helpers_1.getSlotComponentWithProps)(slots, slotProps || {}, 'body', material_1.TableBody, {});
|
|
1032
|
+
const { component: FooterComponent, props: footerSlotProps } = (0, slot_helpers_1.getSlotComponentWithProps)(slots, slotProps || {}, 'footer', material_1.Box, {});
|
|
1033
|
+
const { component: PaginationComponent, props: paginationSlotProps } = (0, slot_helpers_1.getSlotComponentWithProps)(slots, slotProps || {}, 'pagination', pagination_1.DataTablePagination, {});
|
|
1021
1034
|
return ((0, jsx_runtime_1.jsx)(data_table_context_1.DataTableProvider, { table: table, apiRef: internalApiRef, dataMode: dataMode, tableSize: tableSize, onTableSizeChange: (size) => {
|
|
1022
1035
|
setTableSize(size);
|
|
1023
|
-
}, columnFilter: columnFilter, onChangeColumnFilter: handleColumnFilterStateChange, slots: slots, slotProps: slotProps, isExporting: isExporting, exportController: exportController, onCancelExport: handleCancelExport, exportFilename: exportFilename, onExportProgress: onExportProgress, onExportComplete: onExportComplete, onExportError: onExportError, onServerExport: onServerExport, children: (0, jsx_runtime_1.jsxs)(
|
|
1024
|
-
position: 'relative',
|
|
1025
|
-
zIndex: 2,
|
|
1026
|
-
} }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.bulkActionsToolbar))) : null, (0, jsx_runtime_1.jsx)(TableContainerSlot, Object.assign({ component: material_1.Paper, ref: tableContainerRef, sx: Object.assign(Object.assign(Object.assign({ width: '100%', overflowX: 'auto' }, (enableStickyHeaderOrFooter && {
|
|
1036
|
+
}, columnFilter: columnFilter, onChangeColumnFilter: handleColumnFilterStateChange, slots: slots, slotProps: slotProps, isExporting: isExporting, exportController: exportController, onCancelExport: handleCancelExport, exportFilename: exportFilename, onExportProgress: onExportProgress, onExportComplete: onExportComplete, onExportError: onExportError, onServerExport: onServerExport, children: (0, jsx_runtime_1.jsxs)(RootComponent, Object.assign({}, rootSlotProps, { children: [(enableGlobalFilter || extraFilter) ? ((0, jsx_runtime_1.jsx)(ToolbarComponent, Object.assign({ extraFilter: extraFilter, enableGlobalFilter: enableGlobalFilter, enableColumnVisibility: enableColumnVisibility, enableColumnFilter: enableColumnFilter, enableExport: enableExport, enableReset: enableReset, enableTableSizeControl: enableTableSizeControl, enableColumnPinning: enableColumnPinning }, toolbarSlotProps))) : null, enableBulkActions && enableRowSelection && isSomeRowsSelected ? ((0, jsx_runtime_1.jsx)(BulkActionsComponent, Object.assign({ selectionState: selectionState, selectedRowCount: selectedRowCount, bulkActions: bulkActions, sx: Object.assign({ position: 'relative', zIndex: 2 }, bulkActionsSlotProps.sx) }, bulkActionsSlotProps))) : null, (0, jsx_runtime_1.jsx)(TableContainerComponent, Object.assign({ component: material_1.Paper, ref: tableContainerRef, sx: Object.assign(Object.assign(Object.assign({ width: '100%', overflowX: 'auto' }, (enableStickyHeaderOrFooter && {
|
|
1027
1037
|
maxHeight: maxHeight,
|
|
1028
1038
|
overflowY: 'auto',
|
|
1029
1039
|
})), (enableVirtualization && {
|
|
1030
1040
|
maxHeight: maxHeight,
|
|
1031
1041
|
overflowY: 'auto',
|
|
1032
|
-
})),
|
|
1042
|
+
})), tableContainerSlotProps === null || tableContainerSlotProps === void 0 ? void 0 : tableContainerSlotProps.sx) }, tableContainerSlotProps, { children: (0, jsx_runtime_1.jsxs)(TableComponent, Object.assign({ size: tableSize, stickyHeader: enableStickyHeaderOrFooter, style: Object.assign(Object.assign(Object.assign({}, tableStyle), { tableLayout: fitToScreen ? 'fixed' : 'auto' }), tableProps === null || tableProps === void 0 ? void 0 : tableProps.style) }, (0, slot_helpers_1.mergeSlotProps)(tableProps || {}, tableComponentSlotProps), { children: [(0, jsx_runtime_1.jsx)(headers_1.TableHeader, { draggable: enableColumnDragging, enableColumnResizing: enableColumnResizing, enableStickyHeader: enableStickyHeaderOrFooter, fitToScreen: fitToScreen, onColumnReorder: handleColumnReorder, slots: slots, slotProps: slotProps }), (0, jsx_runtime_1.jsx)(BodyComponent, Object.assign({}, bodySlotProps, { children: renderTableRows() }))] })) })), enablePagination ? ((0, jsx_runtime_1.jsx)(FooterComponent, Object.assign({ sx: Object.assign(Object.assign({}, (enableStickyHeaderOrFooter && {
|
|
1033
1043
|
position: 'sticky',
|
|
1034
1044
|
bottom: 0,
|
|
1035
1045
|
backgroundColor: 'background.paper',
|
|
1036
1046
|
borderTop: '1px solid',
|
|
1037
1047
|
borderColor: 'divider',
|
|
1038
1048
|
zIndex: 1,
|
|
1039
|
-
})) },
|
|
1049
|
+
})), footerSlotProps.sx) }, footerSlotProps, { children: (0, jsx_runtime_1.jsx)(PaginationComponent, Object.assign({ footerFilter: footerFilter, pagination: pagination, totalRow: tableTotalRow }, paginationSlotProps)) }))) : null] })) }));
|
|
1040
1050
|
});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Row, SortingState, ColumnResizeMode, ColumnPinningState, RowData } from '@tanstack/react-table';
|
|
1
|
+
import { Row, SortingState, ColumnResizeMode, ColumnPinningState, RowData, PaginationState } from '@tanstack/react-table';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
3
|
import type { ColumnFilterState, TableFilters, TableState } from '../../types';
|
|
4
4
|
import { DataTableColumn } from '../../types';
|
|
@@ -91,7 +91,9 @@ export interface DataTableProps<T> {
|
|
|
91
91
|
emptyMessage?: string;
|
|
92
92
|
skeletonRows?: number;
|
|
93
93
|
onColumnFiltersChange?: (filterState: ColumnFilterState) => void;
|
|
94
|
-
|
|
94
|
+
onPaginationChange?: (pagination: PaginationState) => void;
|
|
95
|
+
onGlobalFilterChange?: (globalFilter: string) => void;
|
|
96
|
+
onColumnFilterChange?: (columnFilter: ColumnFilterState) => void;
|
|
95
97
|
selectionColumn?: {
|
|
96
98
|
width?: number;
|
|
97
99
|
pinLeft?: boolean;
|
|
@@ -1,9 +1,15 @@
|
|
|
1
|
+
import { ToolbarProps, SxProps } from '@mui/material';
|
|
1
2
|
import { ReactNode } from 'react';
|
|
2
3
|
import { SelectionState } from '../../features';
|
|
3
|
-
export interface BulkActionsToolbarProps<T = any> {
|
|
4
|
+
export interface BulkActionsToolbarProps<T = any> extends ToolbarProps {
|
|
4
5
|
selectionState: SelectionState;
|
|
5
6
|
selectedRowCount: number;
|
|
6
7
|
bulkActions?: (selectionState: SelectionState) => ReactNode;
|
|
7
|
-
|
|
8
|
+
chipProps?: any;
|
|
9
|
+
containerSx?: SxProps;
|
|
10
|
+
leftSectionSx?: SxProps;
|
|
11
|
+
rightSectionSx?: SxProps;
|
|
12
|
+
fadeProps?: any;
|
|
13
|
+
[key: string]: any;
|
|
8
14
|
}
|
|
9
|
-
export declare function BulkActionsToolbar<T = any>(
|
|
15
|
+
export declare function BulkActionsToolbar<T = any>(props: BulkActionsToolbarProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,25 +1,30 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.BulkActionsToolbar = BulkActionsToolbar;
|
|
4
|
+
const tslib_1 = require("tslib");
|
|
4
5
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
6
|
const material_1 = require("@mui/material");
|
|
6
7
|
const react_1 = require("react");
|
|
7
8
|
const data_table_context_1 = require("../../contexts/data-table-context");
|
|
8
9
|
const slot_helpers_1 = require("../../utils/slot-helpers");
|
|
9
|
-
function BulkActionsToolbar(
|
|
10
|
+
function BulkActionsToolbar(props) {
|
|
11
|
+
const { selectionState, selectedRowCount, bulkActions, chipProps, containerSx, leftSectionSx, rightSectionSx, fadeProps, sx } = props, otherProps = tslib_1.__rest(props, ["selectionState", "selectedRowCount", "bulkActions", "chipProps", "containerSx", "leftSectionSx", "rightSectionSx", "fadeProps", "sx"]);
|
|
10
12
|
const { slots, slotProps } = (0, data_table_context_1.useDataTableContext)();
|
|
11
|
-
const
|
|
13
|
+
const toolbarSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'bulkActionsToolbar');
|
|
14
|
+
const ToolbarSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'bulkActionsToolbar', material_1.Toolbar);
|
|
12
15
|
const renderedBulkActions = (0, react_1.useMemo)(() => {
|
|
13
16
|
if (!bulkActions)
|
|
14
17
|
return null;
|
|
15
18
|
return bulkActions(selectionState);
|
|
16
19
|
}, [bulkActions, selectionState]);
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
20
|
+
const mergedToolbarProps = (0, slot_helpers_1.mergeSlotProps)({
|
|
21
|
+
sx: Object.assign(Object.assign({ pl: { sm: 2 }, pr: { xs: 1, sm: 1 }, bgcolor: (theme) => (0, material_1.alpha)(theme.palette.primary.main, 0.05), mb: 1, position: 'relative', zIndex: 1 }, sx), containerSx),
|
|
22
|
+
}, toolbarSlotProps, otherProps);
|
|
23
|
+
const mergedChipProps = (0, slot_helpers_1.mergeSlotProps)({
|
|
24
|
+
label: `${selectedRowCount} selected`,
|
|
25
|
+
size: 'small',
|
|
26
|
+
color: 'primary',
|
|
27
|
+
variant: 'outlined',
|
|
28
|
+
}, chipProps || {});
|
|
29
|
+
return ((0, jsx_runtime_1.jsx)(material_1.Fade, Object.assign({ in: selectedRowCount > 0 }, fadeProps, { children: (0, jsx_runtime_1.jsxs)(ToolbarSlot, Object.assign({}, mergedToolbarProps, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: Object.assign({ flex: '1 1 100%' }, leftSectionSx), children: (0, jsx_runtime_1.jsx)(material_1.Typography, { color: "inherit", variant: "subtitle1", component: "div", children: (0, jsx_runtime_1.jsx)(material_1.Chip, Object.assign({}, mergedChipProps)) }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: Object.assign({ display: 'flex', alignItems: 'center', gap: 1 }, rightSectionSx), children: renderedBulkActions })] })) })));
|
|
25
30
|
}
|
|
@@ -1 +1,14 @@
|
|
|
1
|
-
|
|
1
|
+
import { IconButtonProps, SxProps } from '@mui/material';
|
|
2
|
+
export interface ColumnFilterControlProps {
|
|
3
|
+
title?: string;
|
|
4
|
+
titleSx?: SxProps;
|
|
5
|
+
menuSx?: SxProps;
|
|
6
|
+
iconButtonProps?: IconButtonProps;
|
|
7
|
+
badgeProps?: any;
|
|
8
|
+
clearButtonProps?: any;
|
|
9
|
+
applyButtonProps?: any;
|
|
10
|
+
addButtonProps?: any;
|
|
11
|
+
logicSelectProps?: any;
|
|
12
|
+
[key: string]: any;
|
|
13
|
+
}
|
|
14
|
+
export declare function ColumnFilterControl(props?: ColumnFilterControlProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -12,9 +12,10 @@ const column_helpers_1 = require("../../utils/column-helpers");
|
|
|
12
12
|
const slot_helpers_1 = require("../../utils/slot-helpers");
|
|
13
13
|
const filters_1 = require("../filters");
|
|
14
14
|
const filter_value_input_1 = require("../filters/filter-value-input");
|
|
15
|
-
function ColumnFilterControl() {
|
|
15
|
+
function ColumnFilterControl(props = {}) {
|
|
16
16
|
var _a, _b, _c;
|
|
17
17
|
const { table, slots, slotProps } = (0, data_table_context_1.useDataTableContext)();
|
|
18
|
+
const iconSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'filterIcon');
|
|
18
19
|
const FilterIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'filterIcon', icons_material_1.FilterList);
|
|
19
20
|
const filterState = ((_a = table === null || table === void 0 ? void 0 : table.getColumnFilterState) === null || _a === void 0 ? void 0 : _a.call(table)) || {
|
|
20
21
|
filters: [],
|
|
@@ -122,15 +123,16 @@ function ColumnFilterControl() {
|
|
|
122
123
|
addFilter(firstColumn === null || firstColumn === void 0 ? void 0 : firstColumn.id, defaultOperator);
|
|
123
124
|
}
|
|
124
125
|
}, [filters.length, filterableColumns, addFilter, activeFiltersCount]);
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
126
|
+
const mergedProps = (0, slot_helpers_1.mergeSlotProps)({
|
|
127
|
+
size: 'small',
|
|
128
|
+
sx: { flexShrink: 0 },
|
|
129
|
+
}, (slotProps === null || slotProps === void 0 ? void 0 : slotProps.columnFilterControl) || {}, props);
|
|
130
|
+
return ((0, jsx_runtime_1.jsx)(menu_dropdown_1.MenuDropdown, { anchor: ((0, jsx_runtime_1.jsx)(material_1.Badge, Object.assign({ badgeContent: activeFiltersCount > 0 ? activeFiltersCount : 0, color: "primary", invisible: activeFiltersCount === 0 }, mergedProps.badgeProps, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({}, mergedProps, { children: (0, jsx_runtime_1.jsx)(FilterIconSlot, Object.assign({}, iconSlotProps)) })) }))), children: ({ handleClose }) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: Object.assign({ p: 2, minWidth: 400, maxWidth: 600 }, mergedProps.menuSx), children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", sx: Object.assign({ mb: 1 }, mergedProps.titleSx), children: mergedProps.title || 'Column Filters' }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { mb: 2 } }), filters.length > 1 && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { mb: 2 }, children: (0, jsx_runtime_1.jsxs)(material_1.FormControl, { size: "small", sx: { minWidth: 120 }, children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: "Logic" }), (0, jsx_runtime_1.jsxs)(material_1.Select, Object.assign({ value: filterLogic, label: "Logic", onChange: (e) => handleLogicChange(e.target.value) }, mergedProps.logicSelectProps, { children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: "AND", children: "AND" }), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: "OR", children: "OR" })] }))] }) })), (0, jsx_runtime_1.jsx)(material_1.Stack, { spacing: 2, sx: { mb: 2 }, children: filters.map((filter, index) => {
|
|
131
|
+
const selectedColumn = filterableColumns === null || filterableColumns === void 0 ? void 0 : filterableColumns.find(col => col.id === filter.columnId);
|
|
132
|
+
const operators = filter.columnId ? getOperatorsForColumn(filter.columnId) : [];
|
|
133
|
+
const needsValue = !['isEmpty', 'isNotEmpty'].includes(filter.operator);
|
|
134
|
+
return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 1, alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(material_1.FormControl, { size: "small", sx: { minWidth: 120 }, children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: "Column" }), (0, jsx_runtime_1.jsx)(material_1.Select, { value: filter.columnId || '', label: "Column", onChange: (e) => handleColumnChange(filter.id, e.target.value, filter), children: filterableColumns === null || filterableColumns === void 0 ? void 0 : filterableColumns.map(column => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: column.id, children: typeof column.columnDef.header === 'string'
|
|
135
|
+
? column.columnDef.header
|
|
136
|
+
: column.id }, column.id))) })] }), (0, jsx_runtime_1.jsxs)(material_1.FormControl, { size: "small", sx: { minWidth: 120 }, children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: "Operator" }), (0, jsx_runtime_1.jsx)(material_1.Select, { value: filter.operator || '', label: "Operator", onChange: (e) => handleOperatorChange(filter.id, e.target.value, filter), disabled: !filter.columnId, children: operators.map(op => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: op.value, children: op.label }, op.value))) })] }), needsValue && selectedColumn && ((0, jsx_runtime_1.jsx)(filter_value_input_1.FilterValueInput, { filter: filter, column: selectedColumn, onValueChange: (value) => handleFilterValueChange(filter.id, value) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "small", onClick: () => handleRemoveFilter(filter.id), color: "error" }, mergedProps.deleteButtonProps, { children: (0, jsx_runtime_1.jsx)(icons_1.DeleteIcon, { fontSize: "small" }) }))] }, filter.id));
|
|
137
|
+
}) }), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", startIcon: (0, jsx_runtime_1.jsx)(icons_1.AddIcon, {}), onClick: handleAddFilter, disabled: !filterableColumns || filterableColumns.length === 0, sx: { mb: 2 } }, mergedProps.addButtonProps, { children: "Add Filter" })), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 1, justifyContent: "flex-end", children: [hasAppliedFilters && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", onClick: () => clearAllFilters(handleClose), color: "error" }, mergedProps.clearButtonProps, { children: "Clear All" }))), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", size: "small", onClick: () => handleApplyFilters(handleClose), disabled: !hasPendingChanges }, mergedProps.applyButtonProps, { children: "Apply" }))] })] })) }));
|
|
136
138
|
}
|
|
@@ -1 +1,12 @@
|
|
|
1
|
-
|
|
1
|
+
import { IconButtonProps, SxProps } from '@mui/material';
|
|
2
|
+
export interface ColumnPinningControlProps {
|
|
3
|
+
title?: string;
|
|
4
|
+
titleSx?: SxProps;
|
|
5
|
+
menuSx?: SxProps;
|
|
6
|
+
iconButtonProps?: IconButtonProps;
|
|
7
|
+
tooltipProps?: any;
|
|
8
|
+
badgeProps?: any;
|
|
9
|
+
clearButtonProps?: any;
|
|
10
|
+
[key: string]: any;
|
|
11
|
+
}
|
|
12
|
+
export declare function ColumnPinningControl(props?: ColumnPinningControlProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -9,9 +9,13 @@ const menu_dropdown_1 = require("../droupdown/menu-dropdown");
|
|
|
9
9
|
const data_table_context_1 = require("../../contexts/data-table-context");
|
|
10
10
|
const icons_1 = require("../../icons");
|
|
11
11
|
const slot_helpers_1 = require("../../utils/slot-helpers");
|
|
12
|
-
function ColumnPinningControl() {
|
|
13
|
-
var _a, _b;
|
|
12
|
+
function ColumnPinningControl(props = {}) {
|
|
13
|
+
var _a, _b, _c;
|
|
14
14
|
const { table, slots, slotProps } = (0, data_table_context_1.useDataTableContext)();
|
|
15
|
+
const pinIconSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'pinIcon');
|
|
16
|
+
const unpinIconSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'unpinIcon');
|
|
17
|
+
const leftIconSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'leftIcon');
|
|
18
|
+
const rightIconSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'rightIcon');
|
|
15
19
|
const PinIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'pinIcon', icons_material_1.PushPinOutlined);
|
|
16
20
|
const UnpinIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'unpinIcon', icons_1.UnpinIcon);
|
|
17
21
|
const LeftIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'leftIcon', icons_material_1.ArrowLeftOutlined);
|
|
@@ -57,49 +61,27 @@ function ColumnPinningControl() {
|
|
|
57
61
|
const userPinnedLeft = (((_a = columnPinning.left) === null || _a === void 0 ? void 0 : _a.filter((id) => allColumns.some((column) => column.id === id))) || []);
|
|
58
62
|
const userPinnedRight = (((_b = columnPinning.right) === null || _b === void 0 ? void 0 : _b.filter((id) => allColumns.some((column) => column.id === id))) || []);
|
|
59
63
|
const totalPinned = userPinnedLeft.length + userPinnedRight.length;
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
right: -2,
|
|
66
|
-
backgroundColor: 'primary.main',
|
|
67
|
-
color: 'white',
|
|
68
|
-
borderRadius: '50%',
|
|
69
|
-
width: 16,
|
|
70
|
-
height: 16,
|
|
71
|
-
fontSize: 10,
|
|
72
|
-
display: 'flex',
|
|
73
|
-
alignItems: 'center',
|
|
74
|
-
justifyContent: 'center',
|
|
75
|
-
}, children: totalPinned }))] }) })), children: ({ handleClose }) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
|
|
76
|
-
minWidth: 300,
|
|
77
|
-
maxHeight: 400,
|
|
78
|
-
overflow: 'auto',
|
|
79
|
-
}, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
|
|
80
|
-
p: 2,
|
|
81
|
-
pb: 1,
|
|
82
|
-
}, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", sx: { mb: 1 }, children: "Pin Columns" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", color: "text.secondary", children: "Pin columns to keep them visible while scrolling" })] }), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsx)(material_1.List, { dense: true, sx: { py: 0 }, children: allColumns.map((column) => {
|
|
64
|
+
const mergedIconButtonProps = (0, slot_helpers_1.mergeSlotProps)({
|
|
65
|
+
size: 'small',
|
|
66
|
+
sx: { flexShrink: 0 },
|
|
67
|
+
}, pinIconSlotProps, props.iconButtonProps || {});
|
|
68
|
+
return ((0, jsx_runtime_1.jsx)(menu_dropdown_1.MenuDropdown, { anchor: ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: "Pin columns" }, props.tooltipProps, { children: (0, jsx_runtime_1.jsxs)(material_1.IconButton, Object.assign({}, mergedIconButtonProps, { children: [(0, jsx_runtime_1.jsx)(PinIconSlot, Object.assign({}, pinIconSlotProps)), totalPinned > 0 && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: Object.assign({ position: 'absolute', top: -2, right: -2, backgroundColor: 'primary.main', color: 'white', borderRadius: '50%', width: 16, height: 16, fontSize: 10, display: 'flex', alignItems: 'center', justifyContent: 'center' }, (_c = props.badgeProps) === null || _c === void 0 ? void 0 : _c.sx) }, props.badgeProps, { children: totalPinned })))] })) }))), children: ({ handleClose }) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: Object.assign({ p: 2, minWidth: 300, maxWidth: 400 }, props.menuSx), children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", sx: Object.assign({ mb: 1 }, props.titleSx), children: props.title || 'Pin Columns' }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { mb: 2 } }), totalPinned > 0 && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { mb: 2 }, children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "small", onClick: handleUnpinAll, color: "warning" }, props.clearButtonProps, { children: (0, jsx_runtime_1.jsx)(UnpinIconSlot, Object.assign({}, unpinIconSlotProps)) })), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", sx: { ml: 1 }, children: "Unpin all columns" })] })), (0, jsx_runtime_1.jsx)(material_1.List, { dense: true, sx: { py: 0 }, children: allColumns.map((column) => {
|
|
83
69
|
const pinStatus = getColumnPinStatus(column.id);
|
|
84
70
|
const displayName = getColumnDisplayName(column);
|
|
85
71
|
return ((0, jsx_runtime_1.jsx)(material_1.ListItem, { sx: { py: 0.5 }, secondaryAction: ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
|
|
86
72
|
display: 'flex',
|
|
87
73
|
gap: 0.5,
|
|
88
|
-
}, children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Pin left", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: () => handlePinColumn(column.id, pinStatus === 'left' ? 'none' : 'left'), color: pinStatus === 'left' ? 'primary' : 'default', children: (0, jsx_runtime_1.jsx)(LeftIconSlot, Object.assign({ fontSize: "small" },
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
}, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", color: "text.secondary", children: "Quick actions:" }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
|
|
102
|
-
display: 'flex',
|
|
103
|
-
gap: 1,
|
|
104
|
-
}, children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Unpin all user columns", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: handleUnpinAll, disabled: totalPinned === 0, children: (0, jsx_runtime_1.jsx)(icons_1.UnpinIcon, { fontSize: "small" }) }) }) })] }) })] })) }));
|
|
74
|
+
}, children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Pin left", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: () => handlePinColumn(column.id, pinStatus === 'left' ? 'none' : 'left'), color: pinStatus === 'left' ? 'primary' : 'default', children: (0, jsx_runtime_1.jsx)(LeftIconSlot, Object.assign({ fontSize: "small" }, leftIconSlotProps)) }) }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Pin right", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: () => handlePinColumn(column.id, pinStatus === 'right' ? 'none' : 'right'), color: pinStatus === 'right' ? 'secondary' : 'default', children: (0, jsx_runtime_1.jsx)(RightIconSlot, Object.assign({ fontSize: "small" }, rightIconSlotProps)) }) }), pinStatus !== 'none' && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Unpin", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: () => handlePinColumn(column.id, 'none'), children: (0, jsx_runtime_1.jsx)(UnpinIconSlot, Object.assign({ fontSize: "small" }, unpinIconSlotProps)) }) }))] })), children: (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: displayName, secondary: pinStatus === 'left' ? 'Pinned left' :
|
|
75
|
+
pinStatus === 'right' ? 'Pinned right' :
|
|
76
|
+
'Not pinned', slotProps: {
|
|
77
|
+
primary: {
|
|
78
|
+
variant: 'body2',
|
|
79
|
+
fontWeight: pinStatus !== 'none' ? 600 : 400,
|
|
80
|
+
},
|
|
81
|
+
secondary: {
|
|
82
|
+
variant: 'caption',
|
|
83
|
+
color: pinStatus !== 'none' ? 'primary.main' : 'text.secondary',
|
|
84
|
+
},
|
|
85
|
+
} }) }, column.id));
|
|
86
|
+
}) })] })) }));
|
|
105
87
|
}
|
|
@@ -1 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
import { IconButtonProps } from '@mui/material';
|
|
2
|
+
export interface ColumnResetControlProps {
|
|
3
|
+
iconButtonProps?: IconButtonProps;
|
|
4
|
+
tooltipProps?: any;
|
|
5
|
+
resetActions?: ('columnOrder' | 'columnPinning' | 'columnSizing' | 'columnVisibility' | 'filters' | 'sorting' | 'pagination')[];
|
|
6
|
+
[key: string]: any;
|
|
7
|
+
}
|
|
8
|
+
export declare function ColumnResetControl(props?: ColumnResetControlProps): import("react/jsx-runtime").JSX.Element;
|