material-react-table 2.11.2 → 2.12.0
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +29 -22
- package/dist/index.d.ts +30 -16
- package/dist/index.esm.js +161 -152
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +162 -156
- package/dist/index.js.map +1 -1
- package/package.json +24 -24
- package/src/components/body/MRT_TableBodyCell.tsx +11 -6
- package/src/components/body/MRT_TableBodyCellValue.tsx +5 -4
- package/src/components/body/MRT_TableBodyRow.tsx +10 -7
- package/src/components/body/MRT_TableDetailPanel.tsx +4 -9
- package/src/components/footer/MRT_TableFooterRow.tsx +6 -3
- package/src/components/head/MRT_TableHead.tsx +11 -11
- package/src/components/head/MRT_TableHeadCell.tsx +9 -3
- package/src/components/head/MRT_TableHeadCellFilterContainer.tsx +3 -4
- package/src/components/head/MRT_TableHeadCellFilterLabel.tsx +61 -37
- package/src/components/head/MRT_TableHeadRow.tsx +7 -3
- package/src/components/inputs/MRT_FilterRangeFields.tsx +8 -2
- package/src/components/inputs/MRT_FilterTextField.tsx +29 -38
- package/src/components/inputs/MRT_SelectCheckbox.tsx +2 -1
- package/src/components/menus/MRT_CellActionMenu.tsx +1 -5
- package/src/components/menus/MRT_ColumnActionMenu.tsx +1 -5
- package/src/components/menus/MRT_FilterOptionMenu.tsx +1 -5
- package/src/components/menus/MRT_RowActionMenu.tsx +1 -5
- package/src/components/menus/MRT_ShowHideColumnsMenu.tsx +1 -5
- package/src/components/menus/MRT_ShowHideColumnsMenuItems.tsx +3 -2
- package/src/components/table/MRT_TableLoadingOverlay.tsx +8 -8
- package/src/components/table/MRT_TablePaper.tsx +6 -6
- package/src/components/toolbar/MRT_ToolbarAlertBanner.tsx +3 -1
- package/src/components/toolbar/MRT_ToolbarDropZone.tsx +5 -0
- package/src/hooks/display-columns/getMRT_RowActionsColumnDef.tsx +1 -1
- package/src/hooks/display-columns/getMRT_RowDragColumnDef.tsx +1 -1
- package/src/hooks/display-columns/getMRT_RowExpandColumnDef.tsx +1 -1
- package/src/hooks/display-columns/getMRT_RowNumbersColumnDef.tsx +1 -1
- package/src/hooks/display-columns/getMRT_RowPinningColumnDef.tsx +1 -1
- package/src/hooks/display-columns/getMRT_RowSelectColumnDef.tsx +1 -1
- package/src/hooks/display-columns/getMRT_RowSpacerColumnDef.tsx +1 -1
- package/src/hooks/useMRT_TableOptions.ts +4 -0
- package/src/types.ts +15 -13
- package/src/utils/column.utils.ts +78 -40
- package/src/utils/row.utils.ts +2 -1
- package/src/utils/style.utils.ts +24 -26
- package/src/utils/utils.ts +1 -1
package/dist/index.js
CHANGED
@@ -3,8 +3,8 @@
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
4
4
|
|
5
5
|
var reactTable = require('@tanstack/react-table');
|
6
|
-
var matchSorterUtils = require('@tanstack/match-sorter-utils');
|
7
6
|
var react = require('react');
|
7
|
+
var matchSorterUtils = require('@tanstack/match-sorter-utils');
|
8
8
|
var jsxRuntime = require('react/jsx-runtime');
|
9
9
|
var IconButton = require('@mui/material/IconButton');
|
10
10
|
var Tooltip = require('@mui/material/Tooltip');
|
@@ -259,31 +259,53 @@ const getDefaultColumnFilterFn = (columnDef) => {
|
|
259
259
|
return 'equals';
|
260
260
|
return 'fuzzy';
|
261
261
|
};
|
262
|
-
const
|
263
|
-
|
264
|
-
|
265
|
-
|
266
|
-
|
267
|
-
};
|
268
|
-
const
|
269
|
-
const
|
270
|
-
const
|
271
|
-
|
272
|
-
|
273
|
-
|
274
|
-
|
275
|
-
|
276
|
-
|
277
|
-
|
278
|
-
|
279
|
-
|
280
|
-
|
262
|
+
const getColumnFilterInfo = ({ header, table, }) => {
|
263
|
+
var _a;
|
264
|
+
const { options: { columnFilterModeOptions }, } = table;
|
265
|
+
const { column } = header;
|
266
|
+
const { columnDef } = column;
|
267
|
+
const { filterVariant } = columnDef;
|
268
|
+
const isDateFilter = !!((filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('date')) || (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('time')));
|
269
|
+
const isAutocompleteFilter = filterVariant === 'autocomplete';
|
270
|
+
const isRangeFilter = (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.includes('range')) ||
|
271
|
+
['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn);
|
272
|
+
const isSelectFilter = filterVariant === 'select';
|
273
|
+
const isMultiSelectFilter = filterVariant === 'multi-select';
|
274
|
+
const isTextboxFilter = ['autocomplete', 'text'].includes(filterVariant) ||
|
275
|
+
(!isSelectFilter && !isMultiSelectFilter);
|
276
|
+
const currentFilterOption = columnDef._filterFn;
|
277
|
+
const allowedColumnFilterOptions = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _a !== void 0 ? _a : columnFilterModeOptions;
|
278
|
+
const facetedUniqueValues = column.getFacetedUniqueValues();
|
279
|
+
return {
|
280
|
+
allowedColumnFilterOptions,
|
281
|
+
currentFilterOption,
|
282
|
+
facetedUniqueValues,
|
283
|
+
isAutocompleteFilter,
|
284
|
+
isDateFilter,
|
285
|
+
isMultiSelectFilter,
|
286
|
+
isRangeFilter,
|
287
|
+
isSelectFilter,
|
288
|
+
isTextboxFilter,
|
289
|
+
};
|
281
290
|
};
|
282
|
-
const
|
283
|
-
|
284
|
-
|
285
|
-
|
286
|
-
|
291
|
+
const useDropdownOptions = ({ header, table, }) => {
|
292
|
+
const { column } = header;
|
293
|
+
const { columnDef } = column;
|
294
|
+
const { facetedUniqueValues, isAutocompleteFilter, isMultiSelectFilter, isSelectFilter, } = getColumnFilterInfo({ header, table });
|
295
|
+
return react.useMemo(() => {
|
296
|
+
var _a;
|
297
|
+
return (_a = columnDef.filterSelectOptions) !== null && _a !== void 0 ? _a : ((isSelectFilter || isMultiSelectFilter || isAutocompleteFilter) &&
|
298
|
+
facetedUniqueValues
|
299
|
+
? Array.from(facetedUniqueValues.keys())
|
300
|
+
.filter((value) => value !== null && value !== undefined)
|
301
|
+
.sort((a, b) => a.localeCompare(b))
|
302
|
+
: undefined);
|
303
|
+
}, [
|
304
|
+
columnDef.filterSelectOptions,
|
305
|
+
facetedUniqueValues,
|
306
|
+
isMultiSelectFilter,
|
307
|
+
isSelectFilter,
|
308
|
+
]);
|
287
309
|
};
|
288
310
|
|
289
311
|
const flexRender = reactTable.flexRender;
|
@@ -551,9 +573,9 @@ const getMRT_RowSelectionHandler = ({ row, staticRowIndex = 0, table, }) => (eve
|
|
551
573
|
});
|
552
574
|
}
|
553
575
|
};
|
554
|
-
const getMRT_SelectAllHandler = ({ table }) => (event, value) => {
|
576
|
+
const getMRT_SelectAllHandler = ({ table }) => (event, value, forceAll) => {
|
555
577
|
const { options: { enableRowPinning, rowPinningDisplayMode, selectAllMode }, refs: { lastSelectedRowId }, } = table;
|
556
|
-
selectAllMode === 'all'
|
578
|
+
selectAllMode === 'all' || forceAll
|
557
579
|
? table.toggleAllRowsSelected(value !== null && value !== void 0 ? value : event.target.checked)
|
558
580
|
: table.toggleAllPageRowsSelected(value !== null && value !== void 0 ? value : event.target.checked);
|
559
581
|
if (enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('select'))) {
|
@@ -729,15 +751,15 @@ const MRT_EditActionButtons = (_a) => {
|
|
729
751
|
};
|
730
752
|
|
731
753
|
const parseCSSVarId = (id) => id.replace(/[^a-zA-Z0-9]/g, '_');
|
732
|
-
const getMRTTheme = (
|
754
|
+
const getMRTTheme = (mrtTheme, muiTheme) => {
|
733
755
|
var _a;
|
734
|
-
const
|
735
|
-
const baseBackgroundColor = (_a =
|
736
|
-
? styles.lighten(
|
737
|
-
:
|
738
|
-
return Object.assign({ baseBackgroundColor, draggingBorderColor:
|
739
|
-
? styles.darken(
|
740
|
-
: styles.lighten(
|
756
|
+
const mrtThemeOverrides = parseFromValuesOrFunc(mrtTheme, muiTheme);
|
757
|
+
const baseBackgroundColor = (_a = mrtThemeOverrides === null || mrtThemeOverrides === void 0 ? void 0 : mrtThemeOverrides.baseBackgroundColor) !== null && _a !== void 0 ? _a : (muiTheme.palette.mode === 'dark'
|
758
|
+
? styles.lighten(muiTheme.palette.background.default, 0.05)
|
759
|
+
: muiTheme.palette.background.default);
|
760
|
+
return Object.assign({ baseBackgroundColor, draggingBorderColor: muiTheme.palette.primary.main, matchHighlightColor: muiTheme.palette.mode === 'dark'
|
761
|
+
? styles.darken(muiTheme.palette.warning.dark, 0.25)
|
762
|
+
: styles.lighten(muiTheme.palette.warning.light, 0.5), menuBackgroundColor: styles.lighten(baseBackgroundColor, 0.07), pinnedRowBackgroundColor: styles.alpha(muiTheme.palette.primary.main, 0.1), selectedRowBackgroundColor: styles.alpha(muiTheme.palette.primary.main, 0.2) }, mrtThemeOverrides);
|
741
763
|
};
|
742
764
|
const commonCellBeforeAfterStyles = {
|
743
765
|
content: '""',
|
@@ -749,13 +771,14 @@ const commonCellBeforeAfterStyles = {
|
|
749
771
|
zIndex: -1,
|
750
772
|
};
|
751
773
|
const getCommonPinnedCellStyles = ({ column, table, theme, }) => {
|
752
|
-
const { baseBackgroundColor } =
|
774
|
+
const { baseBackgroundColor } = table.options.mrtTheme;
|
775
|
+
const isPinned = column === null || column === void 0 ? void 0 : column.getIsPinned();
|
753
776
|
return {
|
754
777
|
'&[data-pinned="true"]': {
|
755
778
|
'&:before': Object.assign({ backgroundColor: styles.alpha(styles.darken(baseBackgroundColor, theme.palette.mode === 'dark' ? 0.05 : 0.01), 0.97), boxShadow: column
|
756
|
-
?
|
779
|
+
? isPinned === 'left' && column.getIsLastColumn(isPinned)
|
757
780
|
? `-4px 0 4px -4px ${styles.alpha(theme.palette.grey[700], 0.5)} inset`
|
758
|
-
:
|
781
|
+
: isPinned === 'right' && column.getIsFirstColumn(isPinned)
|
759
782
|
? `4px 0 4px -4px ${styles.alpha(theme.palette.grey[700], 0.5)} inset`
|
760
783
|
: undefined
|
761
784
|
: undefined }, commonCellBeforeAfterStyles),
|
@@ -785,7 +808,7 @@ const getCommonMRTCellStyles = ({ column, header, table, tableCellProps, theme,
|
|
785
808
|
? Object.assign(Object.assign({}, getCommonPinnedCellStyles({ column, table, theme })), { left: isColumnPinned === 'left'
|
786
809
|
? `${column.getStart('left')}px`
|
787
810
|
: undefined, opacity: 0.97, position: 'sticky', right: isColumnPinned === 'right'
|
788
|
-
? `${
|
811
|
+
? `${column.getAfter('right')}px`
|
789
812
|
: undefined }) : {};
|
790
813
|
return Object.assign(Object.assign(Object.assign({ backgroundColor: 'inherit', backgroundImage: 'inherit', display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, justifyContent: columnDefType === 'group'
|
791
814
|
? 'center'
|
@@ -802,9 +825,9 @@ const getCommonMRTCellStyles = ({ column, header, table, tableCellProps, theme,
|
|
802
825
|
? 1
|
803
826
|
: 0 }, pinnedStyles), widthStyles), parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme));
|
804
827
|
};
|
805
|
-
const getCommonToolbarStyles = ({ table,
|
828
|
+
const getCommonToolbarStyles = ({ table, }) => ({
|
806
829
|
alignItems: 'flex-start',
|
807
|
-
backgroundColor:
|
830
|
+
backgroundColor: table.options.mrtTheme.baseBackgroundColor,
|
808
831
|
display: 'grid',
|
809
832
|
flexWrap: 'wrap-reverse',
|
810
833
|
minHeight: '3.5rem',
|
@@ -840,10 +863,8 @@ const MRT_ActionMenuItem = (_a) => {
|
|
840
863
|
|
841
864
|
const MRT_RowActionMenu = (_a) => {
|
842
865
|
var { anchorEl, handleEdit, row, setAnchorEl, staticRowIndex, table } = _a, rest = __rest(_a, ["anchorEl", "handleEdit", "row", "setAnchorEl", "staticRowIndex", "table"]);
|
843
|
-
const { getState, options: { editDisplayMode, enableEditing, icons: { EditIcon }, localization, renderRowActionMenuItems, }, } = table;
|
866
|
+
const { getState, options: { editDisplayMode, enableEditing, icons: { EditIcon }, localization, mrtTheme: { menuBackgroundColor }, renderRowActionMenuItems, }, } = table;
|
844
867
|
const { density } = getState();
|
845
|
-
const theme = styles.useTheme();
|
846
|
-
const { menuBackgroundColor } = getMRTTheme(table, theme);
|
847
868
|
return (jsxRuntime.jsxs(Menu__default["default"], Object.assign({ MenuListProps: {
|
848
869
|
dense: density === 'compact',
|
849
870
|
sx: {
|
@@ -1120,6 +1141,7 @@ const MRT_SelectCheckbox = (_a) => {
|
|
1120
1141
|
? parseFromValuesOrFunc(muiSelectAllCheckboxProps, { table })
|
1121
1142
|
: parseFromValuesOrFunc(muiSelectCheckboxProps, {
|
1122
1143
|
row,
|
1144
|
+
staticRowIndex,
|
1123
1145
|
table,
|
1124
1146
|
}))), rest);
|
1125
1147
|
const onSelectionChange = row
|
@@ -1138,7 +1160,7 @@ const MRT_SelectCheckbox = (_a) => {
|
|
1138
1160
|
: localization.toggleSelectRow,
|
1139
1161
|
}, onChange: (event) => {
|
1140
1162
|
event.stopPropagation();
|
1141
|
-
|
1163
|
+
selectAll ? onSelectAllChange(event) : onSelectionChange(event);
|
1142
1164
|
}, size: (density === 'compact' ? 'small' : 'medium') }, checkboxProps), { onClick: (e) => {
|
1143
1165
|
var _a;
|
1144
1166
|
e.stopPropagation();
|
@@ -1316,10 +1338,11 @@ const MRT_DefaultDisplayColumn = {
|
|
1316
1338
|
};
|
1317
1339
|
const useMRT_TableOptions = (_a) => {
|
1318
1340
|
var _b;
|
1319
|
-
var { aggregationFns, autoResetExpanded = false, columnFilterDisplayMode = 'subheader', columnResizeDirection, columnResizeMode = 'onChange', createDisplayMode = 'modal', defaultColumn, defaultDisplayColumn, editDisplayMode = 'modal', enableBatchRowSelection = true, enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnPinning = false, enableColumnResizing = false, enableColumnVirtualization, enableDensityToggle = true, enableExpandAll = true, enableExpanding, enableFacetedValues = false, enableFilterMatchHighlighting = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enableRowPinning = false, enableRowSelection = false, enableRowVirtualization, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, layoutMode, localization, manualFiltering, manualGrouping, manualPagination, manualSorting, paginationDisplayMode = 'default', positionActionsColumn = 'first', positionCreatingRow = 'top', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberDisplayMode = 'static', rowPinningDisplayMode = 'sticky', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnFilterDisplayMode", "columnResizeDirection", "columnResizeMode", "createDisplayMode", "defaultColumn", "defaultDisplayColumn", "editDisplayMode", "enableBatchRowSelection", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnPinning", "enableColumnResizing", "enableColumnVirtualization", "enableDensityToggle", "enableExpandAll", "enableExpanding", "enableFacetedValues", "enableFilterMatchHighlighting", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enableRowPinning", "enableRowSelection", "enableRowVirtualization", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "layoutMode", "localization", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "paginationDisplayMode", "positionActionsColumn", "positionCreatingRow", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberDisplayMode", "rowPinningDisplayMode", "selectAllMode", "sortingFns"]);
|
1341
|
+
var { aggregationFns, autoResetExpanded = false, columnFilterDisplayMode = 'subheader', columnResizeDirection, columnResizeMode = 'onChange', createDisplayMode = 'modal', defaultColumn, defaultDisplayColumn, editDisplayMode = 'modal', enableBatchRowSelection = true, enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnPinning = false, enableColumnResizing = false, enableColumnVirtualization, enableDensityToggle = true, enableExpandAll = true, enableExpanding, enableFacetedValues = false, enableFilterMatchHighlighting = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enableRowPinning = false, enableRowSelection = false, enableRowVirtualization, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, layoutMode, localization, manualFiltering, manualGrouping, manualPagination, manualSorting, mrtTheme, paginationDisplayMode = 'default', positionActionsColumn = 'first', positionCreatingRow = 'top', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberDisplayMode = 'static', rowPinningDisplayMode = 'sticky', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnFilterDisplayMode", "columnResizeDirection", "columnResizeMode", "createDisplayMode", "defaultColumn", "defaultDisplayColumn", "editDisplayMode", "enableBatchRowSelection", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnPinning", "enableColumnResizing", "enableColumnVirtualization", "enableDensityToggle", "enableExpandAll", "enableExpanding", "enableFacetedValues", "enableFilterMatchHighlighting", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enableRowPinning", "enableRowSelection", "enableRowVirtualization", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "layoutMode", "localization", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "mrtTheme", "paginationDisplayMode", "positionActionsColumn", "positionCreatingRow", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberDisplayMode", "rowPinningDisplayMode", "selectAllMode", "sortingFns"]);
|
1320
1342
|
const theme = styles.useTheme();
|
1321
1343
|
icons = react.useMemo(() => (Object.assign(Object.assign({}, MRT_Default_Icons), icons)), [icons]);
|
1322
1344
|
localization = react.useMemo(() => (Object.assign(Object.assign({}, MRT_Localization_EN), localization)), [localization]);
|
1345
|
+
mrtTheme = react.useMemo(() => getMRTTheme(mrtTheme, theme), [mrtTheme, theme]);
|
1323
1346
|
aggregationFns = react.useMemo(() => (Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns)), []);
|
1324
1347
|
filterFns = react.useMemo(() => (Object.assign(Object.assign({}, MRT_FilterFns), filterFns)), []);
|
1325
1348
|
sortingFns = react.useMemo(() => (Object.assign(Object.assign({}, MRT_SortingFns), sortingFns)), []);
|
@@ -1404,6 +1427,7 @@ const useMRT_TableOptions = (_a) => {
|
|
1404
1427
|
manualGrouping,
|
1405
1428
|
manualPagination,
|
1406
1429
|
manualSorting,
|
1430
|
+
mrtTheme,
|
1407
1431
|
paginationDisplayMode,
|
1408
1432
|
positionActionsColumn,
|
1409
1433
|
positionCreatingRow,
|
@@ -1820,7 +1844,7 @@ const useMRT_Rows = (table) => {
|
|
1820
1844
|
const allowedTypes = ['string', 'number'];
|
1821
1845
|
const MRT_TableBodyCellValue = ({ cell, rowRef, staticColumnIndex, staticRowIndex, table, }) => {
|
1822
1846
|
var _a, _b, _c;
|
1823
|
-
const { getState, options: { enableFilterMatchHighlighting }, } = table;
|
1847
|
+
const { getState, options: { enableFilterMatchHighlighting, mrtTheme: { matchHighlightColor }, }, } = table;
|
1824
1848
|
const { column, row } = cell;
|
1825
1849
|
const { columnDef } = column;
|
1826
1850
|
const { globalFilter, globalFilterFn } = getState();
|
@@ -1864,7 +1888,7 @@ const MRT_TableBodyCellValue = ({ cell, rowRef, staticColumnIndex, staticRowInde
|
|
1864
1888
|
if ((chunks === null || chunks === void 0 ? void 0 : chunks.length) > 1 || ((_b = chunks === null || chunks === void 0 ? void 0 : chunks[0]) === null || _b === void 0 ? void 0 : _b.match)) {
|
1865
1889
|
renderedCellValue = (jsxRuntime.jsx("span", { "aria-label": renderedCellValue, role: "note", children: (_c = chunks === null || chunks === void 0 ? void 0 : chunks.map(({ key, match, text }) => (jsxRuntime.jsx(Box__default["default"], { "aria-hidden": "true", component: "span", sx: match
|
1866
1890
|
? {
|
1867
|
-
backgroundColor:
|
1891
|
+
backgroundColor: matchHighlightColor,
|
1868
1892
|
borderRadius: '2px',
|
1869
1893
|
color: (theme) => theme.palette.mode === 'dark'
|
1870
1894
|
? theme.palette.common.white
|
@@ -2016,7 +2040,7 @@ const MRT_TableBodyCell = (_a) => {
|
|
2016
2040
|
var _b, _c, _d, _e, _f;
|
2017
2041
|
var { cell, numRows, rowRef, staticColumnIndex, staticRowIndex, table } = _a, rest = __rest(_a, ["cell", "numRows", "rowRef", "staticColumnIndex", "staticRowIndex", "table"]);
|
2018
2042
|
const theme = styles.useTheme();
|
2019
|
-
const { getState, options: { columnResizeDirection, columnResizeMode, createDisplayMode, editDisplayMode, enableCellActions, enableClickToCopy, enableColumnOrdering, enableColumnPinning, enableGrouping, layoutMode, muiSkeletonProps, muiTableBodyCellProps, }, setHoveredColumn, } = table;
|
2043
|
+
const { getState, options: { columnResizeDirection, columnResizeMode, createDisplayMode, editDisplayMode, enableCellActions, enableClickToCopy, enableColumnOrdering, enableColumnPinning, enableGrouping, layoutMode, mrtTheme: { draggingBorderColor }, muiSkeletonProps, muiTableBodyCellProps, }, setHoveredColumn, } = table;
|
2020
2044
|
const { actionCell, columnSizingInfo, creatingRow, density, draggingColumn, draggingRow, editingCell, editingRow, hoveredColumn, hoveredRow, isLoading, showSkeletons, } = getState();
|
2021
2045
|
const { column, row } = cell;
|
2022
2046
|
const { columnDef } = column;
|
@@ -2029,7 +2053,6 @@ const MRT_TableBodyCell = (_a) => {
|
|
2029
2053
|
row,
|
2030
2054
|
table,
|
2031
2055
|
});
|
2032
|
-
const { draggingBorderColor } = getMRTTheme(table, theme);
|
2033
2056
|
const [skeletonWidth, setSkeletonWidth] = react.useState(100);
|
2034
2057
|
react.useEffect(() => {
|
2035
2058
|
if ((!isLoading && !showSkeletons) || skeletonWidth !== 100)
|
@@ -2044,8 +2067,8 @@ const MRT_TableBodyCell = (_a) => {
|
|
2044
2067
|
const isHoveredColumn = (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id;
|
2045
2068
|
const isDraggingRow = (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id;
|
2046
2069
|
const isHoveredRow = (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id;
|
2047
|
-
const isFirstColumn = getIsFirstColumn(
|
2048
|
-
const isLastColumn = getIsLastColumn(
|
2070
|
+
const isFirstColumn = column.getIsFirstColumn();
|
2071
|
+
const isLastColumn = column.getIsLastColumn();
|
2049
2072
|
const isLastRow = numRows && staticRowIndex === numRows - 1;
|
2050
2073
|
const isResizingColumn = columnSizingInfo.isResizingColumn === column.id;
|
2051
2074
|
const showResizeBorder = isResizingColumn && columnResizeMode === 'onChange';
|
@@ -2123,6 +2146,11 @@ const MRT_TableBodyCell = (_a) => {
|
|
2123
2146
|
setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
|
2124
2147
|
}
|
2125
2148
|
};
|
2149
|
+
const handleDragOver = (e) => {
|
2150
|
+
if (columnDef.enableColumnOrdering !== false) {
|
2151
|
+
e.preventDefault();
|
2152
|
+
}
|
2153
|
+
};
|
2126
2154
|
const handleContextMenu = (e) => {
|
2127
2155
|
var _a;
|
2128
2156
|
(_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onContextMenu) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, e);
|
@@ -2132,7 +2160,7 @@ const MRT_TableBodyCell = (_a) => {
|
|
2132
2160
|
table.refs.actionCellRef.current = e.currentTarget;
|
2133
2161
|
}
|
2134
2162
|
};
|
2135
|
-
return (jsxRuntime.jsx(TableCell__default["default"], Object.assign({ align: theme.direction === 'rtl' ? 'right' : 'left', "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined }, tableCellProps, { onContextMenu: handleContextMenu, onDoubleClick: handleDoubleClick, onDragEnter: handleDragEnter, sx: (theme) => (Object.assign(Object.assign({ '&:hover': {
|
2163
|
+
return (jsxRuntime.jsx(TableCell__default["default"], Object.assign({ align: theme.direction === 'rtl' ? 'right' : 'left', "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined }, tableCellProps, { onContextMenu: handleContextMenu, onDoubleClick: handleDoubleClick, onDragEnter: handleDragEnter, onDragOver: handleDragOver, sx: (theme) => (Object.assign(Object.assign({ '&:hover': {
|
2136
2164
|
outline: (actionCell === null || actionCell === void 0 ? void 0 : actionCell.id) === cell.id ||
|
2137
2165
|
(editDisplayMode === 'cell' && isEditable) ||
|
2138
2166
|
(editDisplayMode === 'table' && (isCreating || isEditing))
|
@@ -2177,7 +2205,7 @@ const Memo_MRT_TableBodyCell = react.memo(MRT_TableBodyCell, (prev, next) => nex
|
|
2177
2205
|
|
2178
2206
|
const MRT_TableDetailPanel = (_a) => {
|
2179
2207
|
var { parentRowRef, row, rowVirtualizer, staticRowIndex, table, virtualRow } = _a, rest = __rest(_a, ["parentRowRef", "row", "rowVirtualizer", "staticRowIndex", "table", "virtualRow"]);
|
2180
|
-
const { getState, getVisibleLeafColumns, options: {
|
2208
|
+
const { getState, getVisibleLeafColumns, options: { layoutMode, mrtTheme: { baseBackgroundColor }, muiDetailPanelProps, muiTableBodyRowProps, renderDetailPanel, }, } = table;
|
2181
2209
|
const { isLoading } = getState();
|
2182
2210
|
const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
|
2183
2211
|
isDetailPanel: true,
|
@@ -2202,18 +2230,14 @@ const MRT_TableDetailPanel = (_a) => {
|
|
2202
2230
|
: undefined, transform: virtualRow
|
2203
2231
|
? `translateY(${virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.start}px)`
|
2204
2232
|
: undefined, width: '100%' }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme)));
|
2205
|
-
}, children: jsxRuntime.jsx(TableCell__default["default"], Object.assign({ className: "Mui-TableBodyCell-DetailPanel", colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ backgroundColor: virtualRow
|
2206
|
-
? getMRTTheme(table, theme).baseBackgroundColor
|
2207
|
-
: undefined, borderBottom: !row.getIsExpanded() ? 'none' : undefined, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, py: !!DetailPanel && row.getIsExpanded() ? '1rem' : 0, transition: !enableRowVirtualization
|
2208
|
-
? 'all 150ms ease-in-out'
|
2209
|
-
: undefined, width: `100%` }, parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme))), children: enableRowVirtualization ? (row.getIsExpanded() && DetailPanel) : (jsxRuntime.jsx(Collapse__default["default"], { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true, children: DetailPanel })) })) })));
|
2233
|
+
}, children: jsxRuntime.jsx(TableCell__default["default"], Object.assign({ className: "Mui-TableBodyCell-DetailPanel", colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ backgroundColor: virtualRow ? baseBackgroundColor : undefined, borderBottom: !row.getIsExpanded() ? 'none' : undefined, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, py: !!DetailPanel && row.getIsExpanded() ? '1rem' : 0, transition: !virtualRow ? 'all 150ms ease-in-out' : undefined, width: `100%` }, parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme))), children: virtualRow ? (row.getIsExpanded() && DetailPanel) : (jsxRuntime.jsx(Collapse__default["default"], { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true, children: DetailPanel })) })) })));
|
2210
2234
|
};
|
2211
2235
|
|
2212
2236
|
const MRT_TableBodyRow = (_a) => {
|
2213
2237
|
var _b, _c, _d, _f;
|
2214
2238
|
var { columnVirtualizer, numRows, pinnedRowIds, row, rowVirtualizer, staticRowIndex, table, virtualRow } = _a, rest = __rest(_a, ["columnVirtualizer", "numRows", "pinnedRowIds", "row", "rowVirtualizer", "staticRowIndex", "table", "virtualRow"]);
|
2215
2239
|
const theme = styles.useTheme();
|
2216
|
-
const { getState, options: { enableRowOrdering, enableRowPinning, enableStickyFooter, enableStickyHeader, layoutMode, memoMode, muiTableBodyRowProps, renderDetailPanel, rowPinningDisplayMode, }, refs: { tableFooterRef, tableHeadRef }, setHoveredRow, } = table;
|
2240
|
+
const { getState, options: { enableRowOrdering, enableRowPinning, enableStickyFooter, enableStickyHeader, layoutMode, memoMode, mrtTheme: { baseBackgroundColor, pinnedRowBackgroundColor, selectedRowBackgroundColor, }, muiTableBodyRowProps, renderDetailPanel, rowPinningDisplayMode, }, refs: { tableFooterRef, tableHeadRef }, setHoveredRow, } = table;
|
2217
2241
|
const { density, draggingColumn, draggingRow, editingCell, editingRow, hoveredRow, isFullScreen, rowPinning, } = getState();
|
2218
2242
|
const visibleCells = row.getVisibleCells();
|
2219
2243
|
const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer !== null && columnVirtualizer !== void 0 ? columnVirtualizer : {};
|
@@ -2252,8 +2276,10 @@ const MRT_TableBodyRow = (_a) => {
|
|
2252
2276
|
setHoveredRow(row);
|
2253
2277
|
}
|
2254
2278
|
};
|
2279
|
+
const handleDragOver = (e) => {
|
2280
|
+
e.preventDefault();
|
2281
|
+
};
|
2255
2282
|
const rowRef = react.useRef(null);
|
2256
|
-
const { baseBackgroundColor, pinnedRowBackgroundColor, selectedRowBackgroundColor, } = getMRTTheme(table, theme);
|
2257
2283
|
const cellHighlightColor = isRowSelected
|
2258
2284
|
? selectedRowBackgroundColor
|
2259
2285
|
: isRowPinned
|
@@ -2266,7 +2292,7 @@ const MRT_TableBodyRow = (_a) => {
|
|
2266
2292
|
? `${styles.lighten(baseBackgroundColor, 0.3)}`
|
2267
2293
|
: `${styles.darken(baseBackgroundColor, 0.3)}`
|
2268
2294
|
: undefined;
|
2269
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(TableRow__default["default"], Object.assign({ "data-index": renderDetailPanel ? staticRowIndex * 2 : staticRowIndex, "data-pinned": !!isRowPinned || undefined, "data-selected": isRowSelected || undefined, onDragEnter: handleDragEnter, ref: (node) => {
|
2295
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(TableRow__default["default"], Object.assign({ "data-index": renderDetailPanel ? staticRowIndex * 2 : staticRowIndex, "data-pinned": !!isRowPinned || undefined, "data-selected": isRowSelected || undefined, onDragEnter: handleDragEnter, onDragOver: handleDragOver, ref: (node) => {
|
2270
2296
|
if (node) {
|
2271
2297
|
rowRef.current = node;
|
2272
2298
|
rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement(node);
|
@@ -2430,7 +2456,7 @@ const MRT_TableFooterCell = (_a) => {
|
|
2430
2456
|
const MRT_TableFooterRow = (_a) => {
|
2431
2457
|
var _b;
|
2432
2458
|
var { columnVirtualizer, footerGroup, table } = _a, rest = __rest(_a, ["columnVirtualizer", "footerGroup", "table"]);
|
2433
|
-
const { options: { layoutMode, muiTableFooterRowProps }, } = table;
|
2459
|
+
const { options: { layoutMode, mrtTheme: { baseBackgroundColor }, muiTableFooterRowProps, }, } = table;
|
2434
2460
|
const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer !== null && columnVirtualizer !== void 0 ? columnVirtualizer : {};
|
2435
2461
|
// if no content in row, skip row
|
2436
2462
|
if (!((_b = footerGroup.headers) === null || _b === void 0 ? void 0 : _b.some((header) => (typeof header.column.columnDef.footer === 'string' &&
|
@@ -2442,7 +2468,7 @@ const MRT_TableFooterRow = (_a) => {
|
|
2442
2468
|
footerGroup,
|
2443
2469
|
table,
|
2444
2470
|
})), rest);
|
2445
|
-
return (jsxRuntime.jsxs(TableRow__default["default"], Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor:
|
2471
|
+
return (jsxRuntime.jsxs(TableRow__default["default"], Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: baseBackgroundColor, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, position: 'relative', width: '100%' }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme))), children: [virtualPaddingLeft ? (jsxRuntime.jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : footerGroup.headers).map((footerOrVirtualFooter, staticColumnIndex) => {
|
2446
2472
|
let footer = footerOrVirtualFooter;
|
2447
2473
|
if (columnVirtualizer) {
|
2448
2474
|
staticColumnIndex = footerOrVirtualFooter
|
@@ -2567,7 +2593,7 @@ const rangeVariants = ['range-slider', 'date-range', 'datetime-range', 'range'];
|
|
2567
2593
|
const MRT_FilterOptionMenu = (_a) => {
|
2568
2594
|
var _b, _c, _d, _e;
|
2569
2595
|
var { anchorEl, header, onSelect, setAnchorEl, setFilterValue, table } = _a, rest = __rest(_a, ["anchorEl", "header", "onSelect", "setAnchorEl", "setFilterValue", "table"]);
|
2570
|
-
const { getState, options: { columnFilterModeOptions, globalFilterModeOptions, localization, renderColumnFilterModeMenuItems, renderGlobalFilterModeMenuItems, }, setColumnFilterFns, setGlobalFilterFn, } = table;
|
2596
|
+
const { getState, options: { columnFilterModeOptions, globalFilterModeOptions, localization, mrtTheme: { menuBackgroundColor }, renderColumnFilterModeMenuItems, renderGlobalFilterModeMenuItems, }, setColumnFilterFns, setGlobalFilterFn, } = table;
|
2571
2597
|
const { density, globalFilterFn } = getState();
|
2572
2598
|
const { column } = header !== null && header !== void 0 ? header : {};
|
2573
2599
|
const { columnDef } = column !== null && column !== void 0 ? column : {};
|
@@ -2650,8 +2676,6 @@ const MRT_FilterOptionMenu = (_a) => {
|
|
2650
2676
|
onSelect === null || onSelect === void 0 ? void 0 : onSelect();
|
2651
2677
|
};
|
2652
2678
|
const filterOption = !!header && columnDef ? columnDef._filterFn : globalFilterFn;
|
2653
|
-
const theme = styles.useTheme();
|
2654
|
-
const { menuBackgroundColor } = getMRTTheme(table, theme);
|
2655
2679
|
return (jsxRuntime.jsx(Menu__default["default"], Object.assign({ MenuListProps: {
|
2656
2680
|
dense: density === 'compact',
|
2657
2681
|
sx: {
|
@@ -2679,7 +2703,7 @@ const MRT_FilterOptionMenu = (_a) => {
|
|
2679
2703
|
const MRT_ColumnActionMenu = (_a) => {
|
2680
2704
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
2681
2705
|
var { anchorEl, header, setAnchorEl, table } = _a, rest = __rest(_a, ["anchorEl", "header", "setAnchorEl", "table"]);
|
2682
|
-
const { getAllLeafColumns, getState, options: { columnFilterDisplayMode, columnFilterModeOptions, enableColumnFilterModes, enableColumnFilters, enableColumnPinning, enableColumnResizing, enableGrouping, enableHiding, enableSorting, enableSortingRemoval, icons: { ClearAllIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, RestartAltIcon, SortIcon, ViewColumnIcon, VisibilityOffIcon, }, localization, renderColumnActionsMenuItems, }, refs: { filterInputRefs }, setColumnFilterFns, setColumnOrder, setColumnSizingInfo, setShowColumnFilters, } = table;
|
2706
|
+
const { getAllLeafColumns, getState, options: { columnFilterDisplayMode, columnFilterModeOptions, enableColumnFilterModes, enableColumnFilters, enableColumnPinning, enableColumnResizing, enableGrouping, enableHiding, enableSorting, enableSortingRemoval, icons: { ClearAllIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, RestartAltIcon, SortIcon, ViewColumnIcon, VisibilityOffIcon, }, localization, mrtTheme: { menuBackgroundColor }, renderColumnActionsMenuItems, }, refs: { filterInputRefs }, setColumnFilterFns, setColumnOrder, setColumnSizingInfo, setShowColumnFilters, } = table;
|
2683
2707
|
const { column } = header;
|
2684
2708
|
const { columnDef } = column;
|
2685
2709
|
const { columnSizing, columnVisibility, density, showColumnFilters } = getState();
|
@@ -2791,8 +2815,6 @@ const MRT_ColumnActionMenu = (_a) => {
|
|
2791
2815
|
]
|
2792
2816
|
: []),
|
2793
2817
|
].filter(Boolean);
|
2794
|
-
const theme = styles.useTheme();
|
2795
|
-
const { menuBackgroundColor } = getMRTTheme(table, theme);
|
2796
2818
|
return (jsxRuntime.jsx(Menu__default["default"], Object.assign({ MenuListProps: {
|
2797
2819
|
dense: density === 'compact',
|
2798
2820
|
sx: {
|
@@ -2865,9 +2887,9 @@ const MRT_FilterCheckbox = (_a) => {
|
|
2865
2887
|
};
|
2866
2888
|
|
2867
2889
|
const MRT_FilterTextField = (_a) => {
|
2868
|
-
var _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t
|
2890
|
+
var _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
2869
2891
|
var { header, rangeFilterIndex, table } = _a, rest = __rest(_a, ["header", "rangeFilterIndex", "table"]);
|
2870
|
-
const { options: {
|
2892
|
+
const { options: { enableColumnFilterModes, icons: { CloseIcon, FilterListIcon }, localization, manualFiltering, muiFilterAutocompleteProps, muiFilterDatePickerProps, muiFilterDateTimePickerProps, muiFilterTextFieldProps, muiFilterTimePickerProps, }, refs: { filterInputRefs }, setColumnFilterFns, } = table;
|
2871
2893
|
const { column } = header;
|
2872
2894
|
const { columnDef } = column;
|
2873
2895
|
const { filterVariant } = columnDef;
|
@@ -2891,14 +2913,8 @@ const MRT_FilterTextField = (_a) => {
|
|
2891
2913
|
column,
|
2892
2914
|
table,
|
2893
2915
|
}));
|
2894
|
-
const
|
2895
|
-
const
|
2896
|
-
const isRangeFilter = (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.includes('range')) || rangeFilterIndex !== undefined;
|
2897
|
-
const isSelectFilter = filterVariant === 'select';
|
2898
|
-
const isMultiSelectFilter = filterVariant === 'multi-select';
|
2899
|
-
const isTextboxFilter = ['autocomplete', 'text'].includes(filterVariant) ||
|
2900
|
-
(!isSelectFilter && !isMultiSelectFilter);
|
2901
|
-
const currentFilterOption = columnDef._filterFn;
|
2916
|
+
const { allowedColumnFilterOptions, currentFilterOption, facetedUniqueValues, isAutocompleteFilter, isDateFilter, isMultiSelectFilter, isRangeFilter, isSelectFilter, isTextboxFilter, } = getColumnFilterInfo({ header, table });
|
2917
|
+
const dropdownOptions = useDropdownOptions({ header, table });
|
2902
2918
|
const filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption)
|
2903
2919
|
? //@ts-ignore
|
2904
2920
|
localization[`filter${((_c = (_b = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt) === null || _b === void 0 ? void 0 : _b.call(currentFilterOption, 0)) === null || _c === void 0 ? void 0 : _c.toUpperCase()) +
|
@@ -2911,13 +2927,11 @@ const MRT_FilterTextField = (_a) => {
|
|
2911
2927
|
: rangeFilterIndex === 1
|
2912
2928
|
? localization.max
|
2913
2929
|
: '';
|
2914
|
-
const
|
2915
|
-
const showChangeModeButton = enableColumnFilterModes &&
|
2930
|
+
const showChangeModeButton = !!(enableColumnFilterModes &&
|
2916
2931
|
columnDef.enableColumnFilterModes !== false &&
|
2917
2932
|
!rangeFilterIndex &&
|
2918
2933
|
(allowedColumnFilterOptions === undefined ||
|
2919
|
-
!!(allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.length));
|
2920
|
-
const facetedUniqueValues = column.getFacetedUniqueValues();
|
2934
|
+
!!(allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.length)));
|
2921
2935
|
const [anchorEl, setAnchorEl] = react.useState(null);
|
2922
2936
|
const [filterValue, setFilterValue] = react.useState(() => {
|
2923
2937
|
var _a, _b;
|
@@ -3004,23 +3018,9 @@ const MRT_FilterTextField = (_a) => {
|
|
3004
3018
|
isMounted.current = true;
|
3005
3019
|
}, [column.getFilterValue()]);
|
3006
3020
|
if (columnDef.Filter) {
|
3007
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (
|
3021
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (_g = columnDef.Filter) === null || _g === void 0 ? void 0 : _g.call(columnDef, { column, header, rangeFilterIndex, table }) }));
|
3008
3022
|
}
|
3009
|
-
const
|
3010
|
-
var _a;
|
3011
|
-
return (_a = columnDef.filterSelectOptions) !== null && _a !== void 0 ? _a : ((isSelectFilter || isMultiSelectFilter || isAutocompleteFilter) &&
|
3012
|
-
facetedUniqueValues
|
3013
|
-
? Array.from(facetedUniqueValues.keys())
|
3014
|
-
.filter((value) => value !== null && value !== undefined)
|
3015
|
-
.sort((a, b) => a.localeCompare(b))
|
3016
|
-
: undefined);
|
3017
|
-
}, [
|
3018
|
-
columnDef.filterSelectOptions,
|
3019
|
-
facetedUniqueValues,
|
3020
|
-
isMultiSelectFilter,
|
3021
|
-
isSelectFilter,
|
3022
|
-
]);
|
3023
|
-
const endAdornment = !isAutocompleteFilter && !isDateFilter && !filterChipLabel ? (jsxRuntime.jsx(InputAdornment__default["default"], { position: "end", sx: { mr: isSelectFilter || isMultiSelectFilter ? '20px' : undefined }, children: jsxRuntime.jsx(Tooltip__default["default"], { placement: "right", title: (_j = localization.clearFilter) !== null && _j !== void 0 ? _j : '', children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.clearFilter, disabled: !((_k = filterValue === null || filterValue === void 0 ? void 0 : filterValue.toString()) === null || _k === void 0 ? void 0 : _k.length), onClick: handleClear, size: "small", sx: {
|
3023
|
+
const endAdornment = !isAutocompleteFilter && !isDateFilter && !filterChipLabel ? (jsxRuntime.jsx(InputAdornment__default["default"], { position: "end", sx: { mr: isSelectFilter || isMultiSelectFilter ? '20px' : undefined }, children: jsxRuntime.jsx(Tooltip__default["default"], { placement: "right", title: (_h = localization.clearFilter) !== null && _h !== void 0 ? _h : '', children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.clearFilter, disabled: !((_j = filterValue === null || filterValue === void 0 ? void 0 : filterValue.toString()) === null || _j === void 0 ? void 0 : _j.length), onClick: handleClear, size: "small", sx: {
|
3024
3024
|
height: '2rem',
|
3025
3025
|
transform: 'scale(0.9)',
|
3026
3026
|
width: '2rem',
|
@@ -3036,7 +3036,7 @@ const MRT_FilterTextField = (_a) => {
|
|
3036
3036
|
? { endAdornment, startAdornment }
|
3037
3037
|
: { startAdornment }, fullWidth: true, helperText: showChangeModeButton ? (jsxRuntime.jsx("label", { children: localization.filterMode.replace('{filterType}',
|
3038
3038
|
// @ts-ignore
|
3039
|
-
localization[`filter${((
|
3039
|
+
localization[`filter${((_k = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _k === void 0 ? void 0 : _k.toUpperCase()) +
|
3040
3040
|
(currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]) })) : null, inputProps: {
|
3041
3041
|
'aria-label': filterPlaceholder,
|
3042
3042
|
autoComplete: 'new-password', // disable autocomplete and autofill
|
@@ -3070,15 +3070,15 @@ const MRT_FilterTextField = (_a) => {
|
|
3070
3070
|
value: filterValue || null,
|
3071
3071
|
};
|
3072
3072
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('time')) ? (jsxRuntime.jsx(TimePicker.TimePicker, Object.assign({}, commonDatePickerProps, timePickerProps, { slotProps: {
|
3073
|
-
field: Object.assign({ clearable: true, onClear: () => handleClear() }, (
|
3074
|
-
textField: Object.assign(Object.assign({}, commonTextFieldProps), (
|
3073
|
+
field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_l = timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.slotProps) === null || _l === void 0 ? void 0 : _l.field),
|
3074
|
+
textField: Object.assign(Object.assign({}, commonTextFieldProps), (_m = timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.slotProps) === null || _m === void 0 ? void 0 : _m.textField),
|
3075
3075
|
} }))) : (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('datetime')) ? (jsxRuntime.jsx(DateTimePicker.DateTimePicker, Object.assign({}, commonDatePickerProps, dateTimePickerProps, { slotProps: {
|
3076
|
-
field: Object.assign({ clearable: true, onClear: () => handleClear() }, (
|
3077
|
-
textField: Object.assign(Object.assign({}, commonTextFieldProps), (
|
3076
|
+
field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_o = dateTimePickerProps === null || dateTimePickerProps === void 0 ? void 0 : dateTimePickerProps.slotProps) === null || _o === void 0 ? void 0 : _o.field),
|
3077
|
+
textField: Object.assign(Object.assign({}, commonTextFieldProps), (_p = dateTimePickerProps === null || dateTimePickerProps === void 0 ? void 0 : dateTimePickerProps.slotProps) === null || _p === void 0 ? void 0 : _p.textField),
|
3078
3078
|
} }))) : (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('date')) ? (jsxRuntime.jsx(DatePicker.DatePicker, Object.assign({}, commonDatePickerProps, datePickerProps, { slotProps: {
|
3079
|
-
field: Object.assign({ clearable: true, onClear: () => handleClear() }, (
|
3080
|
-
textField: Object.assign(Object.assign({}, commonTextFieldProps), (
|
3081
|
-
} }))) : isAutocompleteFilter ? (jsxRuntime.jsx(Autocomplete__default["default"], Object.assign({ freeSolo: true, getOptionLabel: (option) => getValueAndLabel(option).label, onChange: (_e, newValue) => handleAutocompleteChange(newValue), options: (
|
3079
|
+
field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_q = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _q === void 0 ? void 0 : _q.field),
|
3080
|
+
textField: Object.assign(Object.assign({}, commonTextFieldProps), (_r = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _r === void 0 ? void 0 : _r.textField),
|
3081
|
+
} }))) : isAutocompleteFilter ? (jsxRuntime.jsx(Autocomplete__default["default"], Object.assign({ freeSolo: true, getOptionLabel: (option) => getValueAndLabel(option).label, onChange: (_e, newValue) => handleAutocompleteChange(newValue), options: (_s = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option) => getValueAndLabel(option))) !== null && _s !== void 0 ? _s : [] }, autocompleteProps, { renderInput: (builtinTextFieldProps) => {
|
3082
3082
|
var _a;
|
3083
3083
|
return (jsxRuntime.jsx(TextField__default["default"], Object.assign({}, builtinTextFieldProps, commonTextFieldProps, { InputProps: Object.assign(Object.assign({}, builtinTextFieldProps.InputProps), { startAdornment: (_a = commonTextFieldProps === null || commonTextFieldProps === void 0 ? void 0 : commonTextFieldProps.InputProps) === null || _a === void 0 ? void 0 : _a.startAdornment }), inputProps: Object.assign(Object.assign({}, builtinTextFieldProps.inputProps), commonTextFieldProps === null || commonTextFieldProps === void 0 ? void 0 : commonTextFieldProps.inputProps), onChange: handleTextFieldChange, onClick: (e) => e.stopPropagation() })));
|
3084
3084
|
}, value: autocompleteValue }))) : (jsxRuntime.jsx(TextField__default["default"], Object.assign({ select: isSelectFilter || isMultiSelectFilter }, commonTextFieldProps, { SelectProps: Object.assign({ MenuProps: { disableScrollLock: true }, displayEmpty: true, multiple: isMultiSelectFilter, renderValue: isMultiSelectFilter
|
@@ -3089,7 +3089,7 @@ const MRT_FilterTextField = (_a) => {
|
|
3089
3089
|
: undefined }, commonTextFieldProps.SelectProps), onChange: handleTextFieldChange, onClick: (e) => e.stopPropagation(), value: filterValue !== null && filterValue !== void 0 ? filterValue : '', children: (isSelectFilter || isMultiSelectFilter) && [
|
3090
3090
|
jsxRuntime.jsx(MenuItem__default["default"], { disabled: true, divider: true, hidden: true, value: "", children: jsxRuntime.jsx(Box__default["default"], { sx: { opacity: 0.5 }, children: filterPlaceholder }) }, "p"),
|
3091
3091
|
...[
|
3092
|
-
(
|
3092
|
+
(_t = textFieldProps.children) !== null && _t !== void 0 ? _t : dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => {
|
3093
3093
|
var _a;
|
3094
3094
|
const { label, value } = getValueAndLabel(option);
|
3095
3095
|
return (jsxRuntime.jsxs(MenuItem__default["default"], { sx: {
|
@@ -3106,7 +3106,7 @@ const MRT_FilterTextField = (_a) => {
|
|
3106
3106
|
|
3107
3107
|
const MRT_FilterRangeFields = (_a) => {
|
3108
3108
|
var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
|
3109
|
-
return (jsxRuntime.
|
3109
|
+
return (jsxRuntime.jsx(Box__default["default"], Object.assign({}, rest, { sx: (theme) => (Object.assign({ display: 'grid', gap: '1rem', gridTemplateColumns: '1fr 1fr' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: [0, 1].map((rangeFilterIndex) => (jsxRuntime.jsx(MRT_FilterTextField, { header: header, rangeFilterIndex: rangeFilterIndex, table: table }, rangeFilterIndex))) })));
|
3110
3110
|
};
|
3111
3111
|
|
3112
3112
|
const MRT_FilterRangeSlider = (_a) => {
|
@@ -3182,41 +3182,45 @@ const MRT_FilterRangeSlider = (_a) => {
|
|
3182
3182
|
};
|
3183
3183
|
|
3184
3184
|
const MRT_TableHeadCellFilterContainer = (_a) => {
|
3185
|
-
var _b;
|
3186
3185
|
var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
|
3187
3186
|
const { getState, options: { columnFilterDisplayMode }, } = table;
|
3188
3187
|
const { showColumnFilters } = getState();
|
3189
3188
|
const { column } = header;
|
3190
3189
|
const { columnDef } = column;
|
3191
|
-
|
3192
|
-
|
3190
|
+
const { isRangeFilter } = getColumnFilterInfo({ header, table });
|
3191
|
+
return (jsxRuntime.jsx(Collapse__default["default"], Object.assign({ in: showColumnFilters || columnFilterDisplayMode === 'popover', mountOnEnter: true, unmountOnExit: true }, rest, { children: columnDef.filterVariant === 'checkbox' ? (jsxRuntime.jsx(MRT_FilterCheckbox, { column: column, table: table })) : columnDef.filterVariant === 'range-slider' ? (jsxRuntime.jsx(MRT_FilterRangeSlider, { header: header, table: table })) : isRangeFilter ? (jsxRuntime.jsx(MRT_FilterRangeFields, { header: header, table: table })) : (jsxRuntime.jsx(MRT_FilterTextField, { header: header, table: table })) })));
|
3193
3192
|
};
|
3194
3193
|
|
3195
3194
|
const MRT_TableHeadCellFilterLabel = (_a) => {
|
3196
|
-
var _b, _c
|
3195
|
+
var _b, _c;
|
3197
3196
|
var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
|
3198
3197
|
const { options: { columnFilterDisplayMode, icons: { FilterAltIcon }, localization, }, refs: { filterInputRefs }, setShowColumnFilters, } = table;
|
3199
3198
|
const { column } = header;
|
3200
3199
|
const { columnDef } = column;
|
3201
3200
|
const filterValue = column.getFilterValue();
|
3202
3201
|
const [anchorEl, setAnchorEl] = react.useState(null);
|
3202
|
+
const { currentFilterOption, isMultiSelectFilter, isRangeFilter, isSelectFilter, } = getColumnFilterInfo({ header, table });
|
3203
|
+
const dropdownOptions = useDropdownOptions({ header, table });
|
3204
|
+
const getSelectLabel = (index) => getValueAndLabel(dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.find((option) => getValueAndLabel(option).value ===
|
3205
|
+
(index !== undefined ? filterValue[index] : filterValue))).label;
|
3203
3206
|
const isFilterActive = (Array.isArray(filterValue) && filterValue.some(Boolean)) ||
|
3204
3207
|
(!!filterValue && !Array.isArray(filterValue));
|
3205
|
-
const isRangeFilter = ((_b = columnDef.filterVariant) === null || _b === void 0 ? void 0 : _b.includes('range')) ||
|
3206
|
-
['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn);
|
3207
|
-
const currentFilterOption = columnDef._filterFn;
|
3208
3208
|
const filterTooltip = columnFilterDisplayMode === 'popover' && !isFilterActive
|
3209
|
-
? (
|
3209
|
+
? (_b = localization.filterByColumn) === null || _b === void 0 ? void 0 : _b.replace('{column}', String(columnDef.header))
|
3210
3210
|
: localization.filteringByColumn
|
3211
3211
|
.replace('{column}', String(columnDef.header))
|
3212
3212
|
.replace('{filterType}', currentFilterOption
|
3213
3213
|
? // @ts-ignore
|
3214
|
-
localization[`filter${((
|
3214
|
+
localization[`filter${((_c = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _c === void 0 ? void 0 : _c.toUpperCase()) +
|
3215
3215
|
(currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]
|
3216
3216
|
: '')
|
3217
3217
|
.replace('{filterValue}', `"${Array.isArray(filterValue)
|
3218
|
-
? filterValue
|
3219
|
-
|
3218
|
+
? filterValue
|
3219
|
+
.map((value, index) => isMultiSelectFilter ? getSelectLabel(index) : value)
|
3220
|
+
.join(`" ${isRangeFilter ? localization.and : localization.or} "`)
|
3221
|
+
: isSelectFilter
|
3222
|
+
? getSelectLabel()
|
3223
|
+
: filterValue}"`)
|
3220
3224
|
.replace('" "', '');
|
3221
3225
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Grow__default["default"], { in: columnFilterDisplayMode === 'popover' ||
|
3222
3226
|
(!!filterValue && !isRangeFilter) ||
|
@@ -3234,7 +3238,7 @@ const MRT_TableHeadCellFilterLabel = (_a) => {
|
|
3234
3238
|
(_d = (_c = filterInputRefs.current[`${column.id}-0`]) === null || _c === void 0 ? void 0 : _c.select) === null || _d === void 0 ? void 0 : _d.call(_c);
|
3235
3239
|
});
|
3236
3240
|
event.stopPropagation();
|
3237
|
-
}, size: "small" }, rest, { sx: (theme) => (Object.assign({ height: '16px', ml: '4px', opacity: isFilterActive ? 1 : 0.3, p: '8px', transform: 'scale(0.75)', transition: 'all 150ms ease-in-out', width: '16px' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: jsxRuntime.jsx(FilterAltIcon, {}) })) }) }) }), jsxRuntime.jsx(Popover__default["default"], { anchorEl: anchorEl, anchorOrigin: {
|
3241
|
+
}, size: "small" }, rest, { sx: (theme) => (Object.assign({ height: '16px', ml: '4px', opacity: isFilterActive ? 1 : 0.3, p: '8px', transform: 'scale(0.75)', transition: 'all 150ms ease-in-out', width: '16px' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: jsxRuntime.jsx(FilterAltIcon, {}) })) }) }) }), columnFilterDisplayMode === 'popover' && (jsxRuntime.jsx(Popover__default["default"], { anchorEl: anchorEl, anchorOrigin: {
|
3238
3242
|
horizontal: 'center',
|
3239
3243
|
vertical: 'top',
|
3240
3244
|
}, disableScrollLock: true, onClick: (event) => event.stopPropagation(), onClose: (event) => {
|
@@ -3244,7 +3248,7 @@ const MRT_TableHeadCellFilterLabel = (_a) => {
|
|
3244
3248
|
}, onKeyDown: (event) => event.key === 'Enter' && setAnchorEl(null), open: !!anchorEl, slotProps: { paper: { sx: { overflow: 'visible' } } }, transformOrigin: {
|
3245
3249
|
horizontal: 'center',
|
3246
3250
|
vertical: 'bottom',
|
3247
|
-
}, children: jsxRuntime.jsx(Box__default["default"], { sx: { p: '1rem' }, children: jsxRuntime.jsx(MRT_TableHeadCellFilterContainer, { header: header, table: table }) }) })] }));
|
3251
|
+
}, children: jsxRuntime.jsx(Box__default["default"], { sx: { p: '1rem' }, children: jsxRuntime.jsx(MRT_TableHeadCellFilterContainer, { header: header, table: table }) }) }))] }));
|
3248
3252
|
};
|
3249
3253
|
|
3250
3254
|
const MRT_TableHeadCellGrabHandle = (_a) => {
|
@@ -3360,7 +3364,7 @@ const MRT_TableHeadCell = (_a) => {
|
|
3360
3364
|
var _b, _c, _d, _f, _g, _h;
|
3361
3365
|
var { columnVirtualizer, header, staticColumnIndex, table } = _a, rest = __rest(_a, ["columnVirtualizer", "header", "staticColumnIndex", "table"]);
|
3362
3366
|
const theme = styles.useTheme();
|
3363
|
-
const { getState, options: { columnFilterDisplayMode, columnResizeDirection, columnResizeMode, enableColumnActions, enableColumnDragging, enableColumnOrdering, enableColumnPinning, enableGrouping, enableMultiSort, layoutMode, muiTableHeadCellProps, }, refs: { tableHeadCellRefs }, setHoveredColumn, } = table;
|
3367
|
+
const { getState, options: { columnFilterDisplayMode, columnResizeDirection, columnResizeMode, enableColumnActions, enableColumnDragging, enableColumnOrdering, enableColumnPinning, enableGrouping, enableMultiSort, layoutMode, mrtTheme: { draggingBorderColor }, muiTableHeadCellProps, }, refs: { tableHeadCellRefs }, setHoveredColumn, } = table;
|
3364
3368
|
const { columnSizingInfo, density, draggingColumn, grouping, hoveredColumn, showColumnFilters, } = getState();
|
3365
3369
|
const { column } = header;
|
3366
3370
|
const { columnDef } = column;
|
@@ -3369,7 +3373,6 @@ const MRT_TableHeadCell = (_a) => {
|
|
3369
3373
|
column,
|
3370
3374
|
table,
|
3371
3375
|
})), rest);
|
3372
|
-
const { draggingBorderColor } = getMRTTheme(table, theme);
|
3373
3376
|
const isColumnPinned = enableColumnPinning &&
|
3374
3377
|
columnDef.columnDefType !== 'group' &&
|
3375
3378
|
column.getIsPinned();
|
@@ -3425,6 +3428,11 @@ const MRT_TableHeadCell = (_a) => {
|
|
3425
3428
|
setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
|
3426
3429
|
}
|
3427
3430
|
};
|
3431
|
+
const handleDragOver = (e) => {
|
3432
|
+
if (columnDef.enableColumnOrdering !== false) {
|
3433
|
+
e.preventDefault();
|
3434
|
+
}
|
3435
|
+
};
|
3428
3436
|
const HeaderElement = (_b = parseFromValuesOrFunc(columnDef.Header, {
|
3429
3437
|
column,
|
3430
3438
|
header,
|
@@ -3434,7 +3442,7 @@ const MRT_TableHeadCell = (_a) => {
|
|
3434
3442
|
? 'center'
|
3435
3443
|
: theme.direction === 'rtl'
|
3436
3444
|
? 'right'
|
3437
|
-
: 'left', colSpan: header.colSpan, "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined, onDragEnter: handleDragEnter, ref: (node) => {
|
3445
|
+
: 'left', colSpan: header.colSpan, "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined, onDragEnter: handleDragEnter, onDragOver: handleDragOver, ref: (node) => {
|
3438
3446
|
var _a;
|
3439
3447
|
if (node) {
|
3440
3448
|
tableHeadCellRefs.current[column.id] = node;
|
@@ -3512,13 +3520,13 @@ const MRT_TableHeadCell = (_a) => {
|
|
3512
3520
|
|
3513
3521
|
const MRT_TableHeadRow = (_a) => {
|
3514
3522
|
var { columnVirtualizer, headerGroup, table } = _a, rest = __rest(_a, ["columnVirtualizer", "headerGroup", "table"]);
|
3515
|
-
const { options: { enableStickyHeader, layoutMode, muiTableHeadRowProps }, } = table;
|
3523
|
+
const { options: { enableStickyHeader, layoutMode, mrtTheme: { baseBackgroundColor }, muiTableHeadRowProps, }, } = table;
|
3516
3524
|
const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer !== null && columnVirtualizer !== void 0 ? columnVirtualizer : {};
|
3517
3525
|
const tableRowProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableHeadRowProps, {
|
3518
3526
|
headerGroup,
|
3519
3527
|
table,
|
3520
3528
|
})), rest);
|
3521
|
-
return (jsxRuntime.jsxs(TableRow__default["default"], Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor:
|
3529
|
+
return (jsxRuntime.jsxs(TableRow__default["default"], Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: baseBackgroundColor, boxShadow: `4px 0 8px ${styles.alpha(theme.palette.common.black, 0.1)}`, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, position: enableStickyHeader && layoutMode === 'semantic'
|
3522
3530
|
? 'sticky'
|
3523
3531
|
: 'relative', top: 0 }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme))), children: [virtualPaddingLeft ? (jsxRuntime.jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : headerGroup.headers).map((headerOrVirtualHeader, staticColumnIndex) => {
|
3524
3532
|
let header = headerOrVirtualHeader;
|
@@ -3546,7 +3554,7 @@ const MRT_ToolbarAlertBanner = (_a) => {
|
|
3546
3554
|
const selectedRowCount = react.useMemo(() => manualPagination
|
3547
3555
|
? Object.values(rowSelection).filter(Boolean).length
|
3548
3556
|
: getFilteredSelectedRowModel().rows.length, [rowSelection, totalRowCount, manualPagination]);
|
3549
|
-
const selectedAlert = selectedRowCount > 0 ? (jsxRuntime.jsxs(Stack__default["default"], { alignItems: "center", direction: "row", gap: "16px", children: [(_c = (_b = localization.selectedCountOfRowCountRowsSelected) === null || _b === void 0 ? void 0 : _b.replace('{selectedCount}', selectedRowCount.toLocaleString())) === null || _c === void 0 ? void 0 : _c.replace('{rowCount}', totalRowCount.toString()), jsxRuntime.jsx(Button__default["default"], { onClick: (event) => getMRT_SelectAllHandler({ table })(event, false), size: "small", sx: { p: '2px' }, children: localization.clearSelection })] })) : null;
|
3557
|
+
const selectedAlert = selectedRowCount > 0 ? (jsxRuntime.jsxs(Stack__default["default"], { alignItems: "center", direction: "row", gap: "16px", children: [(_c = (_b = localization.selectedCountOfRowCountRowsSelected) === null || _b === void 0 ? void 0 : _b.replace('{selectedCount}', selectedRowCount.toLocaleString())) === null || _c === void 0 ? void 0 : _c.replace('{rowCount}', totalRowCount.toString()), jsxRuntime.jsx(Button__default["default"], { onClick: (event) => getMRT_SelectAllHandler({ table })(event, false, true), size: "small", sx: { p: '2px' }, children: localization.clearSelection })] })) : null;
|
3550
3558
|
const groupedAlert = grouping.length > 0 ? (jsxRuntime.jsxs("span", { children: [localization.groupedBy, ' ', grouping.map((columnId, index) => (jsxRuntime.jsxs(react.Fragment, { children: [index > 0 ? localization.thenBy : '', jsxRuntime.jsx(Chip__default["default"], Object.assign({ label: table.getColumn(columnId).columnDef.header, onDelete: () => table.getColumn(columnId).toggleGrouping() }, chipProps))] }, `${index}-${columnId}`)))] })) : null;
|
3551
3559
|
return (jsxRuntime.jsx(Collapse__default["default"], { in: showAlertBanner || !!selectedAlert || !!groupedAlert, timeout: stackAlertBanner ? 200 : 0, children: jsxRuntime.jsx(Alert__default["default"], Object.assign({ color: "info", icon: false }, alertProps, { sx: (theme) => {
|
3552
3560
|
var _a, _b;
|
@@ -3577,7 +3585,7 @@ const MRT_ToolbarAlertBanner = (_a) => {
|
|
3577
3585
|
|
3578
3586
|
const MRT_TableHead = (_a) => {
|
3579
3587
|
var { columnVirtualizer, table } = _a, rest = __rest(_a, ["columnVirtualizer", "table"]);
|
3580
|
-
const {
|
3588
|
+
const { getState, options: { enableStickyHeader, layoutMode, muiTableHeadProps, positionToolbarAlertBanner, }, refs: { tableHeadRef }, } = table;
|
3581
3589
|
const { isFullScreen, showAlertBanner } = getState();
|
3582
3590
|
const tableHeadProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableHeadProps, { table })), rest);
|
3583
3591
|
const stickyHeader = enableStickyHeader || isFullScreen;
|
@@ -3588,12 +3596,14 @@ const MRT_TableHead = (_a) => {
|
|
3588
3596
|
tableHeadProps.ref.current = ref;
|
3589
3597
|
}
|
3590
3598
|
}, sx: (theme) => (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, opacity: 0.97, position: stickyHeader ? 'sticky' : 'relative', top: stickyHeader && (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 0 : undefined, zIndex: stickyHeader ? 2 : undefined }, parseFromValuesOrFunc(tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx, theme))), children: positionToolbarAlertBanner === 'head-overlay' &&
|
3591
|
-
(showAlertBanner || getSelectedRowModel().rows.length > 0) ? (jsxRuntime.jsx("tr", { style: {
|
3599
|
+
(showAlertBanner || table.getSelectedRowModel().rows.length > 0) ? (jsxRuntime.jsx("tr", { style: {
|
3592
3600
|
display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
|
3593
3601
|
}, children: jsxRuntime.jsx("th", { colSpan: table.getVisibleLeafColumns().length, style: {
|
3594
3602
|
display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
|
3595
3603
|
padding: 0,
|
3596
|
-
}, children: jsxRuntime.jsx(MRT_ToolbarAlertBanner, { table: table }) }) })) : (
|
3604
|
+
}, children: jsxRuntime.jsx(MRT_ToolbarAlertBanner, { table: table }) }) })) : (table
|
3605
|
+
.getHeaderGroups()
|
3606
|
+
.map((headerGroup) => (jsxRuntime.jsx(MRT_TableHeadRow, { columnVirtualizer: columnVirtualizer, headerGroup: headerGroup, table: table }, headerGroup.id)))) })));
|
3597
3607
|
};
|
3598
3608
|
|
3599
3609
|
const MRT_Table = (_a) => {
|
@@ -3624,11 +3634,11 @@ const MRT_Table = (_a) => {
|
|
3624
3634
|
const MRT_TableLoadingOverlay = (_a) => {
|
3625
3635
|
var _b;
|
3626
3636
|
var { table } = _a, rest = __rest(_a, ["table"]);
|
3627
|
-
const { options: { localization, muiCircularProgressProps }, } = table;
|
3637
|
+
const { options: { localization, mrtTheme: { baseBackgroundColor }, muiCircularProgressProps, }, } = table;
|
3628
3638
|
const circularProgressProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiCircularProgressProps, { table })), rest);
|
3629
|
-
return (jsxRuntime.jsx(Box__default["default"], { sx:
|
3639
|
+
return (jsxRuntime.jsx(Box__default["default"], { sx: {
|
3630
3640
|
alignItems: 'center',
|
3631
|
-
backgroundColor: styles.alpha(
|
3641
|
+
backgroundColor: styles.alpha(baseBackgroundColor, 0.5),
|
3632
3642
|
bottom: 0,
|
3633
3643
|
display: 'flex',
|
3634
3644
|
justifyContent: 'center',
|
@@ -3639,20 +3649,18 @@ const MRT_TableLoadingOverlay = (_a) => {
|
|
3639
3649
|
top: 0,
|
3640
3650
|
width: '100%',
|
3641
3651
|
zIndex: 3,
|
3642
|
-
}
|
3652
|
+
}, children: (_b = circularProgressProps === null || circularProgressProps === void 0 ? void 0 : circularProgressProps.Component) !== null && _b !== void 0 ? _b : (jsxRuntime.jsx(CircularProgress__default["default"], Object.assign({ "aria-label": localization.noRecordsToDisplay, id: "mrt-progress" }, circularProgressProps))) }));
|
3643
3653
|
};
|
3644
3654
|
|
3645
3655
|
const MRT_CellActionMenu = (_a) => {
|
3646
3656
|
var _b, _c;
|
3647
3657
|
var { table } = _a, rest = __rest(_a, ["table"]);
|
3648
|
-
const { getState, options: { editDisplayMode, enableClickToCopy, enableEditing, icons: { ContentCopy, EditIcon }, localization, renderCellActionMenuItems, }, refs: { actionCellRef }, } = table;
|
3658
|
+
const { getState, options: { editDisplayMode, enableClickToCopy, enableEditing, icons: { ContentCopy, EditIcon }, localization, mrtTheme: { menuBackgroundColor }, renderCellActionMenuItems, }, refs: { actionCellRef }, } = table;
|
3649
3659
|
const { actionCell, density } = getState();
|
3650
3660
|
const cell = actionCell;
|
3651
3661
|
const { row } = cell;
|
3652
3662
|
const { column } = cell;
|
3653
3663
|
const { columnDef } = column;
|
3654
|
-
const theme = styles.useTheme();
|
3655
|
-
const { menuBackgroundColor } = getMRTTheme(table, theme);
|
3656
3664
|
const handleClose = (event) => {
|
3657
3665
|
event === null || event === void 0 ? void 0 : event.stopPropagation();
|
3658
3666
|
table.setActionCell(null);
|
@@ -3844,6 +3852,9 @@ const MRT_ToolbarDropZone = (_a) => {
|
|
3844
3852
|
const handleDragEnter = (_event) => {
|
3845
3853
|
setHoveredColumn({ id: 'drop-zone' });
|
3846
3854
|
};
|
3855
|
+
const handleDragOver = (e) => {
|
3856
|
+
e.preventDefault();
|
3857
|
+
};
|
3847
3858
|
react.useEffect(() => {
|
3848
3859
|
var _a;
|
3849
3860
|
if (((_a = table.options.state) === null || _a === void 0 ? void 0 : _a.showToolbarDropZone) !== undefined) {
|
@@ -3853,7 +3864,7 @@ const MRT_ToolbarDropZone = (_a) => {
|
|
3853
3864
|
!grouping.includes(draggingColumn.id));
|
3854
3865
|
}
|
3855
3866
|
}, [enableGrouping, draggingColumn, grouping]);
|
3856
|
-
return (jsxRuntime.jsx(Fade__default["default"], { in: showToolbarDropZone, children: jsxRuntime.jsx(Box__default["default"], Object.assign({ className: "Mui-ToolbarDropZone", onDragEnter: handleDragEnter }, rest, { sx: (theme) => (Object.assign({ alignItems: 'center', backdropFilter: 'blur(4px)', backgroundColor: styles.alpha(theme.palette.info.main, (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone' ? 0.2 : 0.1), border: `dashed ${theme.palette.info.main} 2px`, boxSizing: 'border-box', display: 'flex', height: '100%', justifyContent: 'center', position: 'absolute', width: '100%', zIndex: 4 }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: jsxRuntime.jsx(Typography__default["default"], { fontStyle: "italic", children: localization.dropToGroupBy.replace('{column}', (_c = (_b = draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.columnDef) === null || _b === void 0 ? void 0 : _b.header) !== null && _c !== void 0 ? _c : '') }) })) }));
|
3867
|
+
return (jsxRuntime.jsx(Fade__default["default"], { in: showToolbarDropZone, children: jsxRuntime.jsx(Box__default["default"], Object.assign({ className: "Mui-ToolbarDropZone", onDragEnter: handleDragEnter, onDragOver: handleDragOver }, rest, { sx: (theme) => (Object.assign({ alignItems: 'center', backdropFilter: 'blur(4px)', backgroundColor: styles.alpha(theme.palette.info.main, (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone' ? 0.2 : 0.1), border: `dashed ${theme.palette.info.main} 2px`, boxSizing: 'border-box', display: 'flex', height: '100%', justifyContent: 'center', position: 'absolute', width: '100%', zIndex: 4 }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: jsxRuntime.jsx(Typography__default["default"], { fontStyle: "italic", children: localization.dropToGroupBy.replace('{column}', (_c = (_b = draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.columnDef) === null || _b === void 0 ? void 0 : _b.header) !== null && _c !== void 0 ? _c : '') }) })) }));
|
3857
3868
|
};
|
3858
3869
|
|
3859
3870
|
const MRT_BottomToolbar = (_a) => {
|
@@ -3904,7 +3915,7 @@ const MRT_ColumnPinningButtons = (_a) => {
|
|
3904
3915
|
const MRT_ShowHideColumnsMenuItems = (_a) => {
|
3905
3916
|
var _b;
|
3906
3917
|
var { allColumns, column, hoveredColumn, isNestedColumns, setHoveredColumn, table } = _a, rest = __rest(_a, ["allColumns", "column", "hoveredColumn", "isNestedColumns", "setHoveredColumn", "table"]);
|
3907
|
-
const { getState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, }, setColumnOrder, } = table;
|
3918
|
+
const { getState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, mrtTheme: { draggingBorderColor }, }, setColumnOrder, } = table;
|
3908
3919
|
const { columnOrder } = getState();
|
3909
3920
|
const { columnDef } = column;
|
3910
3921
|
const { columnDefType } = columnDef;
|
@@ -3951,7 +3962,7 @@ const MRT_ShowHideColumnsMenuItems = (_a) => {
|
|
3951
3962
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MenuItem__default["default"], Object.assign({ disableRipple: true, onDragEnter: handleDragEnter, ref: menuItemRef }, rest, { sx: (theme) => (Object.assign({ alignItems: 'center', justifyContent: 'flex-start', my: 0, opacity: isDragging ? 0.5 : 1, outline: isDragging
|
3952
3963
|
? `2px dashed ${theme.palette.grey[500]}`
|
3953
3964
|
: (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
|
3954
|
-
? `2px dashed ${
|
3965
|
+
? `2px dashed ${draggingBorderColor}`
|
3955
3966
|
: 'none', outlineOffset: '-2px', pl: `${(column.depth + 0.5) * 2}rem`, py: '6px' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: jsxRuntime.jsxs(Box__default["default"], { sx: {
|
3956
3967
|
display: 'flex',
|
3957
3968
|
flexWrap: 'nowrap',
|
@@ -3972,7 +3983,7 @@ const MRT_ShowHideColumnsMenuItems = (_a) => {
|
|
3972
3983
|
|
3973
3984
|
const MRT_ShowHideColumnsMenu = (_a) => {
|
3974
3985
|
var { anchorEl, setAnchorEl, table } = _a, rest = __rest(_a, ["anchorEl", "setAnchorEl", "table"]);
|
3975
|
-
const { getAllColumns, getAllLeafColumns, getCenterLeafColumns, getIsAllColumnsVisible, getIsSomeColumnsPinned, getIsSomeColumnsVisible, getLeftLeafColumns, getRightLeafColumns, getState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, }, } = table;
|
3986
|
+
const { getAllColumns, getAllLeafColumns, getCenterLeafColumns, getIsAllColumnsVisible, getIsSomeColumnsPinned, getIsSomeColumnsVisible, getLeftLeafColumns, getRightLeafColumns, getState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, mrtTheme: { menuBackgroundColor }, }, } = table;
|
3976
3987
|
const { columnOrder, columnPinning, density } = getState();
|
3977
3988
|
const handleToggleAllColumns = (value) => {
|
3978
3989
|
getAllLeafColumns()
|
@@ -4000,8 +4011,6 @@ const MRT_ShowHideColumnsMenu = (_a) => {
|
|
4000
4011
|
]);
|
4001
4012
|
const isNestedColumns = allColumns.some((col) => col.columnDef.columnDefType === 'group');
|
4002
4013
|
const [hoveredColumn, setHoveredColumn] = react.useState(null);
|
4003
|
-
const theme = styles.useTheme();
|
4004
|
-
const { menuBackgroundColor } = getMRTTheme(table, theme);
|
4005
4014
|
return (jsxRuntime.jsxs(Menu__default["default"], Object.assign({ MenuListProps: {
|
4006
4015
|
dense: density === 'compact',
|
4007
4016
|
sx: {
|
@@ -4188,7 +4197,7 @@ const MRT_TopToolbar = ({ table, }) => {
|
|
4188
4197
|
const MRT_TablePaper = (_a) => {
|
4189
4198
|
var _b, _c;
|
4190
4199
|
var { table } = _a, rest = __rest(_a, ["table"]);
|
4191
|
-
const { getState, options: { enableBottomToolbar, enableTopToolbar, muiTablePaperProps, renderBottomToolbar, renderTopToolbar, }, refs: { tablePaperRef }, } = table;
|
4200
|
+
const { getState, options: { enableBottomToolbar, enableTopToolbar, mrtTheme: { baseBackgroundColor }, muiTablePaperProps, renderBottomToolbar, renderTopToolbar, }, refs: { tablePaperRef }, } = table;
|
4192
4201
|
const { isFullScreen } = getState();
|
4193
4202
|
const paperProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTablePaperProps, { table })), rest);
|
4194
4203
|
return (jsxRuntime.jsxs(Paper__default["default"], Object.assign({ elevation: 2 }, paperProps, { ref: (ref) => {
|
@@ -4200,19 +4209,19 @@ const MRT_TablePaper = (_a) => {
|
|
4200
4209
|
}, style: Object.assign(Object.assign({}, (isFullScreen
|
4201
4210
|
? {
|
4202
4211
|
bottom: 0,
|
4203
|
-
height: '
|
4212
|
+
height: '100dvh',
|
4204
4213
|
left: 0,
|
4205
4214
|
margin: 0,
|
4206
|
-
maxHeight: '
|
4207
|
-
maxWidth: '
|
4215
|
+
maxHeight: '100dvh',
|
4216
|
+
maxWidth: '100dvw',
|
4208
4217
|
padding: 0,
|
4209
4218
|
position: 'fixed',
|
4210
4219
|
right: 0,
|
4211
4220
|
top: 0,
|
4212
|
-
width: '
|
4221
|
+
width: '100dvw',
|
4213
4222
|
zIndex: 999,
|
4214
4223
|
}
|
4215
|
-
: {})), paperProps === null || paperProps === void 0 ? void 0 : paperProps.style), sx: (theme) => (Object.assign({ backgroundColor:
|
4224
|
+
: {})), paperProps === null || paperProps === void 0 ? void 0 : paperProps.style), sx: (theme) => (Object.assign({ backgroundColor: baseBackgroundColor, backgroundImage: 'unset', overflow: 'hidden', transition: 'all 100ms ease-in-out' }, parseFromValuesOrFunc(paperProps === null || paperProps === void 0 ? void 0 : paperProps.sx, theme))), children: [enableTopToolbar &&
|
4216
4225
|
((_b = parseFromValuesOrFunc(renderTopToolbar, { table })) !== null && _b !== void 0 ? _b : (jsxRuntime.jsx(MRT_TopToolbar, { table: table }))), jsxRuntime.jsx(MRT_TableContainer, { table: table }), enableBottomToolbar &&
|
4217
4226
|
((_c = parseFromValuesOrFunc(renderBottomToolbar, { table })) !== null && _c !== void 0 ? _c : (jsxRuntime.jsx(MRT_BottomToolbar, { table: table })))] })));
|
4218
4227
|
};
|
@@ -4301,20 +4310,16 @@ exports.defaultDisplayColumnProps = defaultDisplayColumnProps;
|
|
4301
4310
|
exports.flexRender = flexRender;
|
4302
4311
|
exports.getAllLeafColumnDefs = getAllLeafColumnDefs;
|
4303
4312
|
exports.getCanRankRows = getCanRankRows;
|
4313
|
+
exports.getColumnFilterInfo = getColumnFilterInfo;
|
4304
4314
|
exports.getColumnId = getColumnId;
|
4305
4315
|
exports.getDefaultColumnFilterFn = getDefaultColumnFilterFn;
|
4306
4316
|
exports.getDefaultColumnOrderIds = getDefaultColumnOrderIds;
|
4307
|
-
exports.getIsFirstColumn = getIsFirstColumn;
|
4308
|
-
exports.getIsFirstRightPinnedColumn = getIsFirstRightPinnedColumn;
|
4309
|
-
exports.getIsLastColumn = getIsLastColumn;
|
4310
|
-
exports.getIsLastLeftPinnedColumn = getIsLastLeftPinnedColumn;
|
4311
4317
|
exports.getIsRankingRows = getIsRankingRows;
|
4312
4318
|
exports.getIsRowSelected = getIsRowSelected;
|
4313
4319
|
exports.getLeadingDisplayColumnIds = getLeadingDisplayColumnIds;
|
4314
4320
|
exports.getMRT_RowSelectionHandler = getMRT_RowSelectionHandler;
|
4315
4321
|
exports.getMRT_Rows = getMRT_Rows;
|
4316
4322
|
exports.getMRT_SelectAllHandler = getMRT_SelectAllHandler;
|
4317
|
-
exports.getTotalRight = getTotalRight;
|
4318
4323
|
exports.getTrailingDisplayColumnIds = getTrailingDisplayColumnIds;
|
4319
4324
|
exports.isCellEditable = isCellEditable;
|
4320
4325
|
exports.mrtFilterOptions = mrtFilterOptions;
|
@@ -4329,6 +4334,7 @@ exports.showRowNumbersColumn = showRowNumbersColumn;
|
|
4329
4334
|
exports.showRowPinningColumn = showRowPinningColumn;
|
4330
4335
|
exports.showRowSelectionColumn = showRowSelectionColumn;
|
4331
4336
|
exports.showRowSpacerColumn = showRowSpacerColumn;
|
4337
|
+
exports.useDropdownOptions = useDropdownOptions;
|
4332
4338
|
exports.useMRT_ColumnVirtualizer = useMRT_ColumnVirtualizer;
|
4333
4339
|
exports.useMRT_Effects = useMRT_Effects;
|
4334
4340
|
exports.useMRT_RowVirtualizer = useMRT_RowVirtualizer;
|