@ackplus/react-tanstack-data-table 1.0.19-beta-0.15 → 1.0.20
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 +868 -38
- 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 +27 -32
- package/src/lib/components/table/data-table.types.d.ts +0 -18
- 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/data-table-api.d.ts +4 -1
- 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
|
}
|
|
@@ -46,9 +46,12 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
|
|
|
46
46
|
const isServerPagination = paginationMode === 'server' || isServerMode;
|
|
47
47
|
const isServerFiltering = filterMode === 'server' || isServerMode;
|
|
48
48
|
const isServerSorting = sortingMode === 'server' || isServerMode;
|
|
49
|
-
const
|
|
50
|
-
|
|
51
|
-
|
|
49
|
+
const initialStateConfig = (0, react_1.useMemo)(() => {
|
|
50
|
+
return Object.assign(Object.assign({}, DEFAULT_INITIAL_STATE), initialState);
|
|
51
|
+
}, [initialState]);
|
|
52
|
+
const [sorting, setSorting] = (0, react_1.useState)(initialStateConfig.sorting);
|
|
53
|
+
const [pagination, setPagination] = (0, react_1.useState)(initialStateConfig.pagination);
|
|
54
|
+
const [globalFilter, setGlobalFilter] = (0, react_1.useState)(initialStateConfig.globalFilter);
|
|
52
55
|
const [selectionState, setSelectionState] = (0, react_1.useState)((initialState === null || initialState === void 0 ? void 0 : initialState.selectionState) || { ids: [], type: 'include' });
|
|
53
56
|
const [columnFilter, setColumnFilter] = (0, react_1.useState)({
|
|
54
57
|
filters: [],
|
|
@@ -56,18 +59,15 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
|
|
|
56
59
|
pendingFilters: [],
|
|
57
60
|
pendingLogic: 'AND'
|
|
58
61
|
});
|
|
59
|
-
const [expanded, setExpanded] = (0, react_1.useState)(
|
|
62
|
+
const [expanded, setExpanded] = (0, react_1.useState)(initialStateConfig.expanded);
|
|
60
63
|
const [tableSize, setTableSize] = (0, react_1.useState)(initialTableSize);
|
|
61
|
-
const [columnOrder, setColumnOrder] = (0, react_1.useState)(
|
|
62
|
-
const [columnPinning, setColumnPinning] = (0, react_1.useState)(
|
|
64
|
+
const [columnOrder, setColumnOrder] = (0, react_1.useState)(initialStateConfig.columnOrder);
|
|
65
|
+
const [columnPinning, setColumnPinning] = (0, react_1.useState)(initialStateConfig.columnPinning);
|
|
63
66
|
const [serverData, setServerData] = (0, react_1.useState)(null);
|
|
64
67
|
const [serverTotal, setServerTotal] = (0, react_1.useState)(0);
|
|
65
68
|
const [exportController, setExportController] = (0, react_1.useState)(null);
|
|
66
69
|
const tableContainerRef = (0, react_1.useRef)(null);
|
|
67
70
|
const internalApiRef = (0, react_1.useRef)(null);
|
|
68
|
-
const initialStateConfig = (0, react_1.useMemo)(() => {
|
|
69
|
-
return Object.assign(Object.assign({}, DEFAULT_INITIAL_STATE), initialState);
|
|
70
|
-
}, [initialState]);
|
|
71
71
|
const { debouncedFetch, isLoading: fetchLoading } = (0, debounced_fetch_utils_1.useDebouncedFetch)(onFetchData);
|
|
72
72
|
const tableData = (0, react_1.useMemo)(() => serverData ? serverData : data, [onFetchData, serverData, data]);
|
|
73
73
|
const tableTotalRow = (0, react_1.useMemo)(() => serverData ? serverTotal : totalRow, [onFetchData, serverTotal, totalRow]);
|
|
@@ -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;
|
|
@@ -968,15 +968,15 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
|
|
|
968
968
|
selectMode,
|
|
969
969
|
onSelectionChange,
|
|
970
970
|
]);
|
|
971
|
-
const LoadingRowSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'loadingRow', rows_1.LoadingRows);
|
|
972
|
-
const EmptyRowSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'emptyRow', rows_1.EmptyDataRow);
|
|
973
971
|
const renderTableRows = (0, react_1.useCallback)(() => {
|
|
974
972
|
var _a, _b, _c, _d;
|
|
975
973
|
if (tableLoading) {
|
|
976
|
-
|
|
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)));
|
|
977
976
|
}
|
|
978
977
|
if (rows.length === 0) {
|
|
979
|
-
|
|
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)));
|
|
980
980
|
}
|
|
981
981
|
if (enableVirtualization && !enablePagination && rows.length > 0) {
|
|
982
982
|
const virtualItems = rowVirtualizer.getVirtualItems();
|
|
@@ -988,7 +988,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
|
|
|
988
988
|
const row = rows[virtualRow.index];
|
|
989
989
|
if (!row)
|
|
990
990
|
return null;
|
|
991
|
-
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));
|
|
992
992
|
}), virtualItems.length > 0 && ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { colSpan: table.getAllColumns().length, style: {
|
|
993
993
|
height: `${rowVirtualizer.getTotalSize() -
|
|
994
994
|
((_d = (_c = virtualItems[virtualItems.length - 1]) === null || _c === void 0 ? void 0 : _c.end) !== null && _d !== void 0 ? _d : 0)}px`,
|
|
@@ -1002,12 +1002,10 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
|
|
|
1002
1002
|
rows,
|
|
1003
1003
|
enableVirtualization,
|
|
1004
1004
|
enablePagination,
|
|
1005
|
-
LoadingRowSlot,
|
|
1006
1005
|
pagination.pageSize,
|
|
1007
1006
|
skeletonRows,
|
|
1008
1007
|
table,
|
|
1009
1008
|
slotProps,
|
|
1010
|
-
EmptyRowSlot,
|
|
1011
1009
|
emptyMessage,
|
|
1012
1010
|
rowVirtualizer,
|
|
1013
1011
|
enableHover,
|
|
@@ -1025,31 +1023,28 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
|
|
|
1025
1023
|
}
|
|
1026
1024
|
}
|
|
1027
1025
|
}, [exportController, onExportCancel]);
|
|
1028
|
-
const
|
|
1029
|
-
const
|
|
1030
|
-
const
|
|
1031
|
-
const
|
|
1032
|
-
const
|
|
1033
|
-
const
|
|
1034
|
-
const
|
|
1035
|
-
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, {});
|
|
1036
1034
|
return ((0, jsx_runtime_1.jsx)(data_table_context_1.DataTableProvider, { table: table, apiRef: internalApiRef, dataMode: dataMode, tableSize: tableSize, onTableSizeChange: (size) => {
|
|
1037
1035
|
setTableSize(size);
|
|
1038
|
-
}, 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)(
|
|
1039
|
-
position: 'relative',
|
|
1040
|
-
zIndex: 2,
|
|
1041
|
-
} }, 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 && {
|
|
1042
1037
|
maxHeight: maxHeight,
|
|
1043
1038
|
overflowY: 'auto',
|
|
1044
1039
|
})), (enableVirtualization && {
|
|
1045
1040
|
maxHeight: maxHeight,
|
|
1046
1041
|
overflowY: 'auto',
|
|
1047
|
-
})),
|
|
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 && {
|
|
1048
1043
|
position: 'sticky',
|
|
1049
1044
|
bottom: 0,
|
|
1050
1045
|
backgroundColor: 'background.paper',
|
|
1051
1046
|
borderTop: '1px solid',
|
|
1052
1047
|
borderColor: 'divider',
|
|
1053
1048
|
zIndex: 1,
|
|
1054
|
-
})) },
|
|
1049
|
+
})), footerSlotProps.sx) }, footerSlotProps, { children: (0, jsx_runtime_1.jsx)(PaginationComponent, Object.assign({ footerFilter: footerFilter, pagination: pagination, totalRow: tableTotalRow }, paginationSlotProps)) }))) : null] })) }));
|
|
1055
1050
|
});
|
|
@@ -52,7 +52,6 @@ export interface DataTableProps<T> {
|
|
|
52
52
|
row: T;
|
|
53
53
|
id: string;
|
|
54
54
|
}) => boolean;
|
|
55
|
-
onRowSelectionChange?: (selectedRows: T[], selection?: SelectionState) => void;
|
|
56
55
|
onSelectionChange?: (selection: SelectionState) => void;
|
|
57
56
|
enableBulkActions?: boolean;
|
|
58
57
|
bulkActions?: (selectionState: SelectionState) => ReactNode;
|
|
@@ -94,23 +93,6 @@ export interface DataTableProps<T> {
|
|
|
94
93
|
onPaginationChange?: (pagination: PaginationState) => void;
|
|
95
94
|
onGlobalFilterChange?: (globalFilter: string) => void;
|
|
96
95
|
onColumnFilterChange?: (columnFilter: ColumnFilterState) => void;
|
|
97
|
-
selectionColumn?: {
|
|
98
|
-
width?: number;
|
|
99
|
-
pinLeft?: boolean;
|
|
100
|
-
customColumn?: DataTableColumn<T>;
|
|
101
|
-
id?: string;
|
|
102
|
-
};
|
|
103
|
-
actionColumn?: {
|
|
104
|
-
pinRight?: boolean;
|
|
105
|
-
customColumn?: DataTableColumn<T>;
|
|
106
|
-
id?: string;
|
|
107
|
-
};
|
|
108
|
-
expandingColumn?: {
|
|
109
|
-
width?: number;
|
|
110
|
-
pinLeft?: boolean;
|
|
111
|
-
customColumn?: DataTableColumn<T>;
|
|
112
|
-
id?: string;
|
|
113
|
-
};
|
|
114
96
|
slots?: Partial<DataTableSlots<T>>;
|
|
115
97
|
slotProps?: PartialSlotProps<T>;
|
|
116
98
|
}
|
|
@@ -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;
|
|
@@ -5,12 +5,40 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
5
5
|
const icons_material_1 = require("@mui/icons-material");
|
|
6
6
|
const material_1 = require("@mui/material");
|
|
7
7
|
const data_table_context_1 = require("../../contexts/data-table-context");
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
const slot_helpers_1 = require("../../utils/slot-helpers");
|
|
9
|
+
function ColumnResetControl(props = {}) {
|
|
10
|
+
const { table, slots, slotProps } = (0, data_table_context_1.useDataTableContext)();
|
|
11
|
+
const resetIconSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'resetIcon');
|
|
12
|
+
const ResetIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'resetIcon', icons_material_1.Autorenew);
|
|
10
13
|
const handleResetLayout = () => {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
+
const actions = props.resetActions || ['columnOrder', 'columnPinning', 'columnSizing'];
|
|
15
|
+
if (actions.includes('columnOrder')) {
|
|
16
|
+
table.resetColumnOrder();
|
|
17
|
+
}
|
|
18
|
+
if (actions.includes('columnPinning')) {
|
|
19
|
+
table.resetColumnPinning();
|
|
20
|
+
}
|
|
21
|
+
if (actions.includes('columnSizing')) {
|
|
22
|
+
table.resetColumnSizing();
|
|
23
|
+
}
|
|
24
|
+
if (actions.includes('columnVisibility')) {
|
|
25
|
+
table.resetColumnVisibility();
|
|
26
|
+
}
|
|
27
|
+
if (actions.includes('filters')) {
|
|
28
|
+
table.resetColumnFilters();
|
|
29
|
+
table.resetGlobalFilter();
|
|
30
|
+
}
|
|
31
|
+
if (actions.includes('sorting')) {
|
|
32
|
+
table.resetSorting();
|
|
33
|
+
}
|
|
34
|
+
if (actions.includes('pagination')) {
|
|
35
|
+
table.resetPagination();
|
|
36
|
+
}
|
|
14
37
|
};
|
|
15
|
-
|
|
38
|
+
const mergedIconButtonProps = (0, slot_helpers_1.mergeSlotProps)({
|
|
39
|
+
size: 'small',
|
|
40
|
+
onClick: handleResetLayout,
|
|
41
|
+
sx: { flexShrink: 0 },
|
|
42
|
+
}, resetIconSlotProps, props.iconButtonProps || {});
|
|
43
|
+
return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: "Reset layout" }, props.tooltipProps, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({}, mergedIconButtonProps, { children: (0, jsx_runtime_1.jsx)(ResetIconSlot, Object.assign({}, resetIconSlotProps)) })) })));
|
|
16
44
|
}
|
|
@@ -1 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
import { CheckboxProps, SxProps, FormControlLabelProps } from '@mui/material';
|
|
2
|
+
export interface ColumnVisibilityControlProps {
|
|
3
|
+
title?: string;
|
|
4
|
+
titleSx?: SxProps;
|
|
5
|
+
menuSx?: SxProps;
|
|
6
|
+
checkboxProps?: CheckboxProps;
|
|
7
|
+
labelProps?: FormControlLabelProps;
|
|
8
|
+
[key: string]: any;
|
|
9
|
+
}
|
|
10
|
+
export declare function ColumnVisibilityControl(props?: ColumnVisibilityControlProps): import("react/jsx-runtime").JSX.Element;
|