material-react-table 2.11.1 → 2.11.3
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/dist/index.d.ts +18 -20
- package/dist/index.esm.js +104 -125
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +104 -129
- package/dist/index.js.map +1 -1
- package/package.json +21 -21
- package/src/components/body/MRT_TableBody.tsx +1 -1
- package/src/components/body/MRT_TableBodyCell.tsx +4 -6
- package/src/components/body/MRT_TableBodyCellValue.tsx +5 -4
- package/src/components/body/MRT_TableBodyRow.tsx +5 -7
- package/src/components/body/MRT_TableDetailPanel.tsx +2 -4
- package/src/components/footer/MRT_TableFooterRow.tsx +6 -3
- package/src/components/head/MRT_TableHeadCell.tsx +2 -3
- package/src/components/head/MRT_TableHeadRow.tsx +7 -3
- package/src/components/inputs/MRT_SelectCheckbox.tsx +12 -20
- 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 +2 -2
- package/src/components/toolbar/MRT_ToolbarAlertBanner.tsx +6 -6
- package/src/hooks/useMRT_Rows.ts +1 -2
- package/src/hooks/useMRT_TableOptions.ts +4 -0
- package/src/types.ts +15 -13
- package/src/utils/column.utils.ts +0 -48
- package/src/utils/row.utils.ts +59 -24
- package/src/utils/style.utils.ts +24 -26
package/dist/index.js
CHANGED
@@ -259,32 +259,6 @@ const getDefaultColumnFilterFn = (columnDef) => {
|
|
259
259
|
return 'equals';
|
260
260
|
return 'fuzzy';
|
261
261
|
};
|
262
|
-
const getIsFirstColumn = (column, table) => {
|
263
|
-
const leftColumns = table.getLeftVisibleLeafColumns();
|
264
|
-
return leftColumns.length
|
265
|
-
? leftColumns[0].id === column.id
|
266
|
-
: table.getVisibleLeafColumns()[0].id === column.id;
|
267
|
-
};
|
268
|
-
const getIsLastColumn = (column, table) => {
|
269
|
-
const rightColumns = table.getRightVisibleLeafColumns();
|
270
|
-
const columns = table.getVisibleLeafColumns();
|
271
|
-
return rightColumns.length
|
272
|
-
? rightColumns[rightColumns.length - 1].id === column.id
|
273
|
-
: columns[columns.length - 1].id === column.id;
|
274
|
-
};
|
275
|
-
const getIsLastLeftPinnedColumn = (table, column) => {
|
276
|
-
return (column.getIsPinned() === 'left' &&
|
277
|
-
table.getLeftLeafHeaders().length - 1 === column.getPinnedIndex());
|
278
|
-
};
|
279
|
-
const getIsFirstRightPinnedColumn = (column) => {
|
280
|
-
return column.getIsPinned() === 'right' && column.getPinnedIndex() === 0;
|
281
|
-
};
|
282
|
-
const getTotalRight = (table, column) => {
|
283
|
-
return table
|
284
|
-
.getRightLeafHeaders()
|
285
|
-
.slice(column.getPinnedIndex() + 1)
|
286
|
-
.reduce((acc, col) => acc + col.getSize(), 0);
|
287
|
-
};
|
288
262
|
|
289
263
|
const flexRender = reactTable.flexRender;
|
290
264
|
function createMRTColumnHelper() {
|
@@ -422,8 +396,8 @@ const MRT_SortingFns = Object.assign(Object.assign({}, reactTable.sortingFns), {
|
|
422
396
|
const rankGlobalFuzzy = (rowA, rowB) => Math.max(...Object.values(rowB.columnFiltersMeta).map((v) => v.rank)) -
|
423
397
|
Math.max(...Object.values(rowA.columnFiltersMeta).map((v) => v.rank));
|
424
398
|
|
425
|
-
const getMRT_Rows = (table,
|
426
|
-
const {
|
399
|
+
const getMRT_Rows = (table, all) => {
|
400
|
+
const { getCenterRows, getPrePaginationRowModel, getRowModel, getState, getTopRows, options: { createDisplayMode, enablePagination, enableRowPinning, manualPagination, positionCreatingRow, rowPinningDisplayMode, }, } = table;
|
427
401
|
const { creatingRow, pagination } = getState();
|
428
402
|
const isRankingRows = getIsRankingRows(table);
|
429
403
|
let rows = [];
|
@@ -436,19 +410,28 @@ const getMRT_Rows = (table, pinnedRowIds = [], all) => {
|
|
436
410
|
: getCenterRows();
|
437
411
|
}
|
438
412
|
else {
|
413
|
+
// fuzzy ranking adjustments
|
439
414
|
rows = getPrePaginationRowModel().rows.sort((a, b) => rankGlobalFuzzy(a, b));
|
440
415
|
if (enablePagination && !manualPagination && !all) {
|
441
416
|
const start = pagination.pageIndex * pagination.pageSize;
|
442
417
|
rows = rows.slice(start, start + pagination.pageSize);
|
443
418
|
}
|
419
|
+
if (enableRowPinning && !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky'))) {
|
420
|
+
// "re-center-ize" the rows (no top or bottom pinned rows unless sticky)
|
421
|
+
rows = rows.filter((row) => !row.getIsPinned());
|
422
|
+
}
|
444
423
|
}
|
424
|
+
// row pinning adjustments
|
445
425
|
if (enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky'))) {
|
426
|
+
const centerPinnedRowIds = rows
|
427
|
+
.filter((row) => row.getIsPinned())
|
428
|
+
.map((r) => r.id);
|
446
429
|
rows = [
|
447
|
-
...getTopRows().filter((row) => !
|
430
|
+
...getTopRows().filter((row) => !centerPinnedRowIds.includes(row.id)),
|
448
431
|
...rows,
|
449
|
-
...getBottomRows().filter((row) => !pinnedRowIds.includes(row.id)),
|
450
432
|
];
|
451
433
|
}
|
434
|
+
// blank inserted creating row adjustments
|
452
435
|
if (positionCreatingRow !== undefined &&
|
453
436
|
creatingRow &&
|
454
437
|
createDisplayMode === 'row') {
|
@@ -490,20 +473,21 @@ const getIsRowSelected = ({ row, table, }) => {
|
|
490
473
|
row.getCanSelectSubRows() &&
|
491
474
|
row.getIsAllSubRowsSelected()));
|
492
475
|
};
|
493
|
-
const getMRT_RowSelectionHandler = (
|
476
|
+
const getMRT_RowSelectionHandler = ({ row, staticRowIndex = 0, table, }) => (event, value) => {
|
494
477
|
var _a;
|
495
|
-
const { getState, options: { enableBatchRowSelection, enableRowPinning, manualPagination, rowPinningDisplayMode, }, refs: { lastSelectedRowId: lastSelectedRowId }, } = table;
|
478
|
+
const { getState, options: { enableBatchRowSelection, enableMultiRowSelection, enableRowPinning, manualPagination, rowPinningDisplayMode, }, refs: { lastSelectedRowId: lastSelectedRowId }, } = table;
|
496
479
|
const { pagination: { pageIndex, pageSize }, } = getState();
|
497
480
|
const paginationOffset = manualPagination ? 0 : pageSize * pageIndex;
|
498
|
-
const
|
499
|
-
const isStickySelection = enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('select'));
|
481
|
+
const wasCurrentRowChecked = getIsRowSelected({ row, table });
|
500
482
|
// toggle selection of this row
|
501
|
-
row.
|
483
|
+
row.toggleSelected(value !== null && value !== void 0 ? value : !wasCurrentRowChecked);
|
484
|
+
const changedRowIds = new Set([row.id]);
|
502
485
|
// if shift key is pressed, select all rows between last selected and this one
|
503
486
|
if (enableBatchRowSelection &&
|
487
|
+
enableMultiRowSelection &&
|
504
488
|
event.nativeEvent.shiftKey &&
|
505
489
|
lastSelectedRowId.current !== null) {
|
506
|
-
const rows = getMRT_Rows(table,
|
490
|
+
const rows = getMRT_Rows(table, true);
|
507
491
|
const lastIndex = rows.findIndex((r) => r.id === lastSelectedRowId.current);
|
508
492
|
if (lastIndex !== -1) {
|
509
493
|
const isLastIndexChecked = getIsRowSelected({
|
@@ -516,9 +500,10 @@ const getMRT_RowSelectionHandler = () => ({ event, row, staticRowIndex = 0, tabl
|
|
516
500
|
: [currentIndex, lastIndex];
|
517
501
|
// toggle selection of all rows between last selected and this one
|
518
502
|
// but only if the last selected row is not the same as the current one
|
519
|
-
if (
|
503
|
+
if (wasCurrentRowChecked !== isLastIndexChecked) {
|
520
504
|
for (let i = start; i <= end; i++) {
|
521
|
-
rows[i].toggleSelected(!
|
505
|
+
rows[i].toggleSelected(!wasCurrentRowChecked);
|
506
|
+
changedRowIds.add(rows[i].id);
|
522
507
|
}
|
523
508
|
}
|
524
509
|
}
|
@@ -529,13 +514,26 @@ const getMRT_RowSelectionHandler = () => ({ event, row, staticRowIndex = 0, tabl
|
|
529
514
|
if (row.getCanSelectSubRows() && row.getIsAllSubRowsSelected()) {
|
530
515
|
(_a = row.subRows) === null || _a === void 0 ? void 0 : _a.forEach((r) => r.toggleSelected(false));
|
531
516
|
}
|
532
|
-
if (
|
533
|
-
|
534
|
-
|
535
|
-
|
536
|
-
: '
|
537
|
-
|
517
|
+
if (enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('select'))) {
|
518
|
+
changedRowIds.forEach((rowId) => {
|
519
|
+
const rowToTogglePin = table.getRow(rowId);
|
520
|
+
rowToTogglePin.pin(!wasCurrentRowChecked //was not previously pinned or selected
|
521
|
+
? (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('bottom'))
|
522
|
+
? 'bottom'
|
523
|
+
: 'top'
|
524
|
+
: false);
|
525
|
+
});
|
526
|
+
}
|
527
|
+
};
|
528
|
+
const getMRT_SelectAllHandler = ({ table }) => (event, value, forceAll) => {
|
529
|
+
const { options: { enableRowPinning, rowPinningDisplayMode, selectAllMode }, refs: { lastSelectedRowId }, } = table;
|
530
|
+
selectAllMode === 'all' || forceAll
|
531
|
+
? table.toggleAllRowsSelected(value !== null && value !== void 0 ? value : event.target.checked)
|
532
|
+
: table.toggleAllPageRowsSelected(value !== null && value !== void 0 ? value : event.target.checked);
|
533
|
+
if (enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('select'))) {
|
534
|
+
table.setRowPinning({ bottom: [], top: [] });
|
538
535
|
}
|
536
|
+
lastSelectedRowId.current = null;
|
539
537
|
};
|
540
538
|
|
541
539
|
const MRT_AggregationFns = Object.assign({}, reactTable.aggregationFns);
|
@@ -705,15 +703,15 @@ const MRT_EditActionButtons = (_a) => {
|
|
705
703
|
};
|
706
704
|
|
707
705
|
const parseCSSVarId = (id) => id.replace(/[^a-zA-Z0-9]/g, '_');
|
708
|
-
const getMRTTheme = (
|
706
|
+
const getMRTTheme = (mrtTheme, muiTheme) => {
|
709
707
|
var _a;
|
710
|
-
const
|
711
|
-
const baseBackgroundColor = (_a =
|
712
|
-
? styles.lighten(
|
713
|
-
:
|
714
|
-
return Object.assign({ baseBackgroundColor, draggingBorderColor:
|
715
|
-
? styles.darken(
|
716
|
-
: styles.lighten(
|
708
|
+
const mrtThemeOverrides = parseFromValuesOrFunc(mrtTheme, muiTheme);
|
709
|
+
const baseBackgroundColor = (_a = mrtThemeOverrides === null || mrtThemeOverrides === void 0 ? void 0 : mrtThemeOverrides.baseBackgroundColor) !== null && _a !== void 0 ? _a : (muiTheme.palette.mode === 'dark'
|
710
|
+
? styles.lighten(muiTheme.palette.background.default, 0.05)
|
711
|
+
: muiTheme.palette.background.default);
|
712
|
+
return Object.assign({ baseBackgroundColor, draggingBorderColor: muiTheme.palette.primary.main, matchHighlightColor: muiTheme.palette.mode === 'dark'
|
713
|
+
? styles.darken(muiTheme.palette.warning.dark, 0.25)
|
714
|
+
: 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);
|
717
715
|
};
|
718
716
|
const commonCellBeforeAfterStyles = {
|
719
717
|
content: '""',
|
@@ -725,13 +723,14 @@ const commonCellBeforeAfterStyles = {
|
|
725
723
|
zIndex: -1,
|
726
724
|
};
|
727
725
|
const getCommonPinnedCellStyles = ({ column, table, theme, }) => {
|
728
|
-
const { baseBackgroundColor } =
|
726
|
+
const { baseBackgroundColor } = table.options.mrtTheme;
|
727
|
+
const isPinned = column === null || column === void 0 ? void 0 : column.getIsPinned();
|
729
728
|
return {
|
730
729
|
'&[data-pinned="true"]': {
|
731
730
|
'&:before': Object.assign({ backgroundColor: styles.alpha(styles.darken(baseBackgroundColor, theme.palette.mode === 'dark' ? 0.05 : 0.01), 0.97), boxShadow: column
|
732
|
-
?
|
731
|
+
? isPinned === 'left' && column.getIsLastColumn(isPinned)
|
733
732
|
? `-4px 0 4px -4px ${styles.alpha(theme.palette.grey[700], 0.5)} inset`
|
734
|
-
:
|
733
|
+
: isPinned === 'right' && column.getIsFirstColumn(isPinned)
|
735
734
|
? `4px 0 4px -4px ${styles.alpha(theme.palette.grey[700], 0.5)} inset`
|
736
735
|
: undefined
|
737
736
|
: undefined }, commonCellBeforeAfterStyles),
|
@@ -761,7 +760,7 @@ const getCommonMRTCellStyles = ({ column, header, table, tableCellProps, theme,
|
|
761
760
|
? Object.assign(Object.assign({}, getCommonPinnedCellStyles({ column, table, theme })), { left: isColumnPinned === 'left'
|
762
761
|
? `${column.getStart('left')}px`
|
763
762
|
: undefined, opacity: 0.97, position: 'sticky', right: isColumnPinned === 'right'
|
764
|
-
? `${
|
763
|
+
? `${column.getAfter('right')}px`
|
765
764
|
: undefined }) : {};
|
766
765
|
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'
|
767
766
|
? 'center'
|
@@ -778,9 +777,9 @@ const getCommonMRTCellStyles = ({ column, header, table, tableCellProps, theme,
|
|
778
777
|
? 1
|
779
778
|
: 0 }, pinnedStyles), widthStyles), parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme));
|
780
779
|
};
|
781
|
-
const getCommonToolbarStyles = ({ table,
|
780
|
+
const getCommonToolbarStyles = ({ table, }) => ({
|
782
781
|
alignItems: 'flex-start',
|
783
|
-
backgroundColor:
|
782
|
+
backgroundColor: table.options.mrtTheme.baseBackgroundColor,
|
784
783
|
display: 'grid',
|
785
784
|
flexWrap: 'wrap-reverse',
|
786
785
|
minHeight: '3.5rem',
|
@@ -816,10 +815,8 @@ const MRT_ActionMenuItem = (_a) => {
|
|
816
815
|
|
817
816
|
const MRT_RowActionMenu = (_a) => {
|
818
817
|
var { anchorEl, handleEdit, row, setAnchorEl, staticRowIndex, table } = _a, rest = __rest(_a, ["anchorEl", "handleEdit", "row", "setAnchorEl", "staticRowIndex", "table"]);
|
819
|
-
const { getState, options: { editDisplayMode, enableEditing, icons: { EditIcon }, localization, renderRowActionMenuItems, }, } = table;
|
818
|
+
const { getState, options: { editDisplayMode, enableEditing, icons: { EditIcon }, localization, mrtTheme: { menuBackgroundColor }, renderRowActionMenuItems, }, } = table;
|
820
819
|
const { density } = getState();
|
821
|
-
const theme = styles.useTheme();
|
822
|
-
const { menuBackgroundColor } = getMRTTheme(table, theme);
|
823
820
|
return (jsxRuntime.jsxs(Menu__default["default"], Object.assign({ MenuListProps: {
|
824
821
|
dense: density === 'compact',
|
825
822
|
sx: {
|
@@ -1081,10 +1078,9 @@ const getMRT_RowPinningColumnDef = (tableOptions) => {
|
|
1081
1078
|
const MRT_SelectCheckbox = (_a) => {
|
1082
1079
|
var _b;
|
1083
1080
|
var { row, staticRowIndex, table } = _a, rest = __rest(_a, ["row", "staticRowIndex", "table"]);
|
1084
|
-
const { getState, options: { enableMultiRowSelection,
|
1081
|
+
const { getState, options: { enableMultiRowSelection, localization, muiSelectAllCheckboxProps, muiSelectCheckboxProps, selectAllMode, }, } = table;
|
1085
1082
|
const { density, isLoading } = getState();
|
1086
1083
|
const selectAll = !row;
|
1087
|
-
const isStickySelection = enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('select'));
|
1088
1084
|
const allRowsSelected = selectAll
|
1089
1085
|
? selectAllMode === 'page'
|
1090
1086
|
? table.getIsAllPageRowsSelected()
|
@@ -1097,18 +1093,17 @@ const MRT_SelectCheckbox = (_a) => {
|
|
1097
1093
|
? parseFromValuesOrFunc(muiSelectAllCheckboxProps, { table })
|
1098
1094
|
: parseFromValuesOrFunc(muiSelectCheckboxProps, {
|
1099
1095
|
row,
|
1096
|
+
staticRowIndex,
|
1100
1097
|
table,
|
1101
1098
|
}))), rest);
|
1102
|
-
const onSelectionChange =
|
1103
|
-
|
1104
|
-
|
1105
|
-
|
1106
|
-
|
1107
|
-
|
1108
|
-
|
1109
|
-
|
1110
|
-
lastSelectedRowId.current = null;
|
1111
|
-
};
|
1099
|
+
const onSelectionChange = row
|
1100
|
+
? getMRT_RowSelectionHandler({
|
1101
|
+
row,
|
1102
|
+
staticRowIndex,
|
1103
|
+
table,
|
1104
|
+
})
|
1105
|
+
: undefined;
|
1106
|
+
const onSelectAllChange = getMRT_SelectAllHandler({ table });
|
1112
1107
|
const commonProps = Object.assign(Object.assign({ 'aria-label': selectAll
|
1113
1108
|
? localization.toggleSelectAll
|
1114
1109
|
: localization.toggleSelectRow, checked: isChecked, disabled: isLoading || (row && !row.getCanSelect()) || (row === null || row === void 0 ? void 0 : row.id) === 'mrt-row-create', inputProps: {
|
@@ -1117,9 +1112,7 @@ const MRT_SelectCheckbox = (_a) => {
|
|
1117
1112
|
: localization.toggleSelectRow,
|
1118
1113
|
}, onChange: (event) => {
|
1119
1114
|
event.stopPropagation();
|
1120
|
-
|
1121
|
-
? onSelectionChange({ event, row, staticRowIndex, table })
|
1122
|
-
: onSelectAllChange(event);
|
1115
|
+
selectAll ? onSelectAllChange(event) : onSelectionChange(event);
|
1123
1116
|
}, size: (density === 'compact' ? 'small' : 'medium') }, checkboxProps), { onClick: (e) => {
|
1124
1117
|
var _a;
|
1125
1118
|
e.stopPropagation();
|
@@ -1297,10 +1290,11 @@ const MRT_DefaultDisplayColumn = {
|
|
1297
1290
|
};
|
1298
1291
|
const useMRT_TableOptions = (_a) => {
|
1299
1292
|
var _b;
|
1300
|
-
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"]);
|
1293
|
+
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"]);
|
1301
1294
|
const theme = styles.useTheme();
|
1302
1295
|
icons = react.useMemo(() => (Object.assign(Object.assign({}, MRT_Default_Icons), icons)), [icons]);
|
1303
1296
|
localization = react.useMemo(() => (Object.assign(Object.assign({}, MRT_Localization_EN), localization)), [localization]);
|
1297
|
+
mrtTheme = react.useMemo(() => getMRTTheme(mrtTheme, theme), [mrtTheme, theme]);
|
1304
1298
|
aggregationFns = react.useMemo(() => (Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns)), []);
|
1305
1299
|
filterFns = react.useMemo(() => (Object.assign(Object.assign({}, MRT_FilterFns), filterFns)), []);
|
1306
1300
|
sortingFns = react.useMemo(() => (Object.assign(Object.assign({}, MRT_SortingFns), sortingFns)), []);
|
@@ -1385,6 +1379,7 @@ const useMRT_TableOptions = (_a) => {
|
|
1385
1379
|
manualGrouping,
|
1386
1380
|
manualPagination,
|
1387
1381
|
manualSorting,
|
1382
|
+
mrtTheme,
|
1388
1383
|
paginationDisplayMode,
|
1389
1384
|
positionActionsColumn,
|
1390
1385
|
positionCreatingRow,
|
@@ -1779,10 +1774,10 @@ const useMRT_RowVirtualizer = (table, rows) => {
|
|
1779
1774
|
return rowVirtualizer;
|
1780
1775
|
};
|
1781
1776
|
|
1782
|
-
const useMRT_Rows = (table
|
1777
|
+
const useMRT_Rows = (table) => {
|
1783
1778
|
const { getRowModel, getState, options: { data, enableGlobalFilterRankedResults, positionCreatingRow }, } = table;
|
1784
1779
|
const { creatingRow, expanded, globalFilter, pagination, rowPinning, sorting, } = getState();
|
1785
|
-
const rows = react.useMemo(() => getMRT_Rows(table
|
1780
|
+
const rows = react.useMemo(() => getMRT_Rows(table), [
|
1786
1781
|
creatingRow,
|
1787
1782
|
data,
|
1788
1783
|
enableGlobalFilterRankedResults,
|
@@ -1801,7 +1796,7 @@ const useMRT_Rows = (table, pinnedRowIds = []) => {
|
|
1801
1796
|
const allowedTypes = ['string', 'number'];
|
1802
1797
|
const MRT_TableBodyCellValue = ({ cell, rowRef, staticColumnIndex, staticRowIndex, table, }) => {
|
1803
1798
|
var _a, _b, _c;
|
1804
|
-
const { getState, options: { enableFilterMatchHighlighting }, } = table;
|
1799
|
+
const { getState, options: { enableFilterMatchHighlighting, mrtTheme: { matchHighlightColor }, }, } = table;
|
1805
1800
|
const { column, row } = cell;
|
1806
1801
|
const { columnDef } = column;
|
1807
1802
|
const { globalFilter, globalFilterFn } = getState();
|
@@ -1845,7 +1840,7 @@ const MRT_TableBodyCellValue = ({ cell, rowRef, staticColumnIndex, staticRowInde
|
|
1845
1840
|
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)) {
|
1846
1841
|
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
|
1847
1842
|
? {
|
1848
|
-
backgroundColor:
|
1843
|
+
backgroundColor: matchHighlightColor,
|
1849
1844
|
borderRadius: '2px',
|
1850
1845
|
color: (theme) => theme.palette.mode === 'dark'
|
1851
1846
|
? theme.palette.common.white
|
@@ -1997,7 +1992,7 @@ const MRT_TableBodyCell = (_a) => {
|
|
1997
1992
|
var _b, _c, _d, _e, _f;
|
1998
1993
|
var { cell, numRows, rowRef, staticColumnIndex, staticRowIndex, table } = _a, rest = __rest(_a, ["cell", "numRows", "rowRef", "staticColumnIndex", "staticRowIndex", "table"]);
|
1999
1994
|
const theme = styles.useTheme();
|
2000
|
-
const { getState, options: { columnResizeDirection, columnResizeMode, createDisplayMode, editDisplayMode, enableCellActions, enableClickToCopy, enableColumnOrdering, enableColumnPinning, enableGrouping, layoutMode, muiSkeletonProps, muiTableBodyCellProps, }, setHoveredColumn, } = table;
|
1995
|
+
const { getState, options: { columnResizeDirection, columnResizeMode, createDisplayMode, editDisplayMode, enableCellActions, enableClickToCopy, enableColumnOrdering, enableColumnPinning, enableGrouping, layoutMode, mrtTheme: { draggingBorderColor }, muiSkeletonProps, muiTableBodyCellProps, }, setHoveredColumn, } = table;
|
2001
1996
|
const { actionCell, columnSizingInfo, creatingRow, density, draggingColumn, draggingRow, editingCell, editingRow, hoveredColumn, hoveredRow, isLoading, showSkeletons, } = getState();
|
2002
1997
|
const { column, row } = cell;
|
2003
1998
|
const { columnDef } = column;
|
@@ -2010,7 +2005,6 @@ const MRT_TableBodyCell = (_a) => {
|
|
2010
2005
|
row,
|
2011
2006
|
table,
|
2012
2007
|
});
|
2013
|
-
const { draggingBorderColor } = getMRTTheme(table, theme);
|
2014
2008
|
const [skeletonWidth, setSkeletonWidth] = react.useState(100);
|
2015
2009
|
react.useEffect(() => {
|
2016
2010
|
if ((!isLoading && !showSkeletons) || skeletonWidth !== 100)
|
@@ -2025,8 +2019,8 @@ const MRT_TableBodyCell = (_a) => {
|
|
2025
2019
|
const isHoveredColumn = (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id;
|
2026
2020
|
const isDraggingRow = (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id;
|
2027
2021
|
const isHoveredRow = (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id;
|
2028
|
-
const isFirstColumn = getIsFirstColumn(
|
2029
|
-
const isLastColumn = getIsLastColumn(
|
2022
|
+
const isFirstColumn = column.getIsFirstColumn();
|
2023
|
+
const isLastColumn = column.getIsLastColumn();
|
2030
2024
|
const isLastRow = numRows && staticRowIndex === numRows - 1;
|
2031
2025
|
const isResizingColumn = columnSizingInfo.isResizingColumn === column.id;
|
2032
2026
|
const showResizeBorder = isResizingColumn && columnResizeMode === 'onChange';
|
@@ -2158,7 +2152,7 @@ const Memo_MRT_TableBodyCell = react.memo(MRT_TableBodyCell, (prev, next) => nex
|
|
2158
2152
|
|
2159
2153
|
const MRT_TableDetailPanel = (_a) => {
|
2160
2154
|
var { parentRowRef, row, rowVirtualizer, staticRowIndex, table, virtualRow } = _a, rest = __rest(_a, ["parentRowRef", "row", "rowVirtualizer", "staticRowIndex", "table", "virtualRow"]);
|
2161
|
-
const { getState, getVisibleLeafColumns, options: { enableRowVirtualization, layoutMode, muiDetailPanelProps, muiTableBodyRowProps, renderDetailPanel, }, } = table;
|
2155
|
+
const { getState, getVisibleLeafColumns, options: { enableRowVirtualization, layoutMode, mrtTheme: { baseBackgroundColor }, muiDetailPanelProps, muiTableBodyRowProps, renderDetailPanel, }, } = table;
|
2162
2156
|
const { isLoading } = getState();
|
2163
2157
|
const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
|
2164
2158
|
isDetailPanel: true,
|
@@ -2183,9 +2177,7 @@ const MRT_TableDetailPanel = (_a) => {
|
|
2183
2177
|
: undefined, transform: virtualRow
|
2184
2178
|
? `translateY(${virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.start}px)`
|
2185
2179
|
: undefined, width: '100%' }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme)));
|
2186
|
-
}, children: jsxRuntime.jsx(TableCell__default["default"], Object.assign({ className: "Mui-TableBodyCell-DetailPanel", colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ backgroundColor: virtualRow
|
2187
|
-
? getMRTTheme(table, theme).baseBackgroundColor
|
2188
|
-
: 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
|
2180
|
+
}, 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: !enableRowVirtualization
|
2189
2181
|
? 'all 150ms ease-in-out'
|
2190
2182
|
: 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 })) })) })));
|
2191
2183
|
};
|
@@ -2194,7 +2186,7 @@ const MRT_TableBodyRow = (_a) => {
|
|
2194
2186
|
var _b, _c, _d, _f;
|
2195
2187
|
var { columnVirtualizer, numRows, pinnedRowIds, row, rowVirtualizer, staticRowIndex, table, virtualRow } = _a, rest = __rest(_a, ["columnVirtualizer", "numRows", "pinnedRowIds", "row", "rowVirtualizer", "staticRowIndex", "table", "virtualRow"]);
|
2196
2188
|
const theme = styles.useTheme();
|
2197
|
-
const { getState, options: { enableRowOrdering, enableRowPinning, enableStickyFooter, enableStickyHeader, layoutMode, memoMode, muiTableBodyRowProps, renderDetailPanel, rowPinningDisplayMode, }, refs: { tableFooterRef, tableHeadRef }, setHoveredRow, } = table;
|
2189
|
+
const { getState, options: { enableRowOrdering, enableRowPinning, enableStickyFooter, enableStickyHeader, layoutMode, memoMode, mrtTheme: { baseBackgroundColor, pinnedRowBackgroundColor, selectedRowBackgroundColor, }, muiTableBodyRowProps, renderDetailPanel, rowPinningDisplayMode, }, refs: { tableFooterRef, tableHeadRef }, setHoveredRow, } = table;
|
2198
2190
|
const { density, draggingColumn, draggingRow, editingCell, editingRow, hoveredRow, isFullScreen, rowPinning, } = getState();
|
2199
2191
|
const visibleCells = row.getVisibleCells();
|
2200
2192
|
const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer !== null && columnVirtualizer !== void 0 ? columnVirtualizer : {};
|
@@ -2234,7 +2226,6 @@ const MRT_TableBodyRow = (_a) => {
|
|
2234
2226
|
}
|
2235
2227
|
};
|
2236
2228
|
const rowRef = react.useRef(null);
|
2237
|
-
const { baseBackgroundColor, pinnedRowBackgroundColor, selectedRowBackgroundColor, } = getMRTTheme(table, theme);
|
2238
2229
|
const cellHighlightColor = isRowSelected
|
2239
2230
|
? selectedRowBackgroundColor
|
2240
2231
|
: isRowPinned
|
@@ -2310,7 +2301,7 @@ const MRT_TableBody = (_a) => {
|
|
2310
2301
|
.rows.filter((row) => row.getIsPinned())
|
2311
2302
|
.map((r) => r.id);
|
2312
2303
|
}, [rowPinning, getRowModel().rows]);
|
2313
|
-
const rows = useMRT_Rows(table
|
2304
|
+
const rows = useMRT_Rows(table);
|
2314
2305
|
const rowVirtualizer = useMRT_RowVirtualizer(table, rows);
|
2315
2306
|
const { virtualRows } = rowVirtualizer !== null && rowVirtualizer !== void 0 ? rowVirtualizer : {};
|
2316
2307
|
const commonRowProps = {
|
@@ -2411,7 +2402,7 @@ const MRT_TableFooterCell = (_a) => {
|
|
2411
2402
|
const MRT_TableFooterRow = (_a) => {
|
2412
2403
|
var _b;
|
2413
2404
|
var { columnVirtualizer, footerGroup, table } = _a, rest = __rest(_a, ["columnVirtualizer", "footerGroup", "table"]);
|
2414
|
-
const { options: { layoutMode, muiTableFooterRowProps }, } = table;
|
2405
|
+
const { options: { layoutMode, mrtTheme: { baseBackgroundColor }, muiTableFooterRowProps, }, } = table;
|
2415
2406
|
const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer !== null && columnVirtualizer !== void 0 ? columnVirtualizer : {};
|
2416
2407
|
// if no content in row, skip row
|
2417
2408
|
if (!((_b = footerGroup.headers) === null || _b === void 0 ? void 0 : _b.some((header) => (typeof header.column.columnDef.footer === 'string' &&
|
@@ -2423,7 +2414,7 @@ const MRT_TableFooterRow = (_a) => {
|
|
2423
2414
|
footerGroup,
|
2424
2415
|
table,
|
2425
2416
|
})), rest);
|
2426
|
-
return (jsxRuntime.jsxs(TableRow__default["default"], Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor:
|
2417
|
+
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) => {
|
2427
2418
|
let footer = footerOrVirtualFooter;
|
2428
2419
|
if (columnVirtualizer) {
|
2429
2420
|
staticColumnIndex = footerOrVirtualFooter
|
@@ -2548,7 +2539,7 @@ const rangeVariants = ['range-slider', 'date-range', 'datetime-range', 'range'];
|
|
2548
2539
|
const MRT_FilterOptionMenu = (_a) => {
|
2549
2540
|
var _b, _c, _d, _e;
|
2550
2541
|
var { anchorEl, header, onSelect, setAnchorEl, setFilterValue, table } = _a, rest = __rest(_a, ["anchorEl", "header", "onSelect", "setAnchorEl", "setFilterValue", "table"]);
|
2551
|
-
const { getState, options: { columnFilterModeOptions, globalFilterModeOptions, localization, renderColumnFilterModeMenuItems, renderGlobalFilterModeMenuItems, }, setColumnFilterFns, setGlobalFilterFn, } = table;
|
2542
|
+
const { getState, options: { columnFilterModeOptions, globalFilterModeOptions, localization, mrtTheme: { menuBackgroundColor }, renderColumnFilterModeMenuItems, renderGlobalFilterModeMenuItems, }, setColumnFilterFns, setGlobalFilterFn, } = table;
|
2552
2543
|
const { density, globalFilterFn } = getState();
|
2553
2544
|
const { column } = header !== null && header !== void 0 ? header : {};
|
2554
2545
|
const { columnDef } = column !== null && column !== void 0 ? column : {};
|
@@ -2631,8 +2622,6 @@ const MRT_FilterOptionMenu = (_a) => {
|
|
2631
2622
|
onSelect === null || onSelect === void 0 ? void 0 : onSelect();
|
2632
2623
|
};
|
2633
2624
|
const filterOption = !!header && columnDef ? columnDef._filterFn : globalFilterFn;
|
2634
|
-
const theme = styles.useTheme();
|
2635
|
-
const { menuBackgroundColor } = getMRTTheme(table, theme);
|
2636
2625
|
return (jsxRuntime.jsx(Menu__default["default"], Object.assign({ MenuListProps: {
|
2637
2626
|
dense: density === 'compact',
|
2638
2627
|
sx: {
|
@@ -2660,7 +2649,7 @@ const MRT_FilterOptionMenu = (_a) => {
|
|
2660
2649
|
const MRT_ColumnActionMenu = (_a) => {
|
2661
2650
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
2662
2651
|
var { anchorEl, header, setAnchorEl, table } = _a, rest = __rest(_a, ["anchorEl", "header", "setAnchorEl", "table"]);
|
2663
|
-
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;
|
2652
|
+
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;
|
2664
2653
|
const { column } = header;
|
2665
2654
|
const { columnDef } = column;
|
2666
2655
|
const { columnSizing, columnVisibility, density, showColumnFilters } = getState();
|
@@ -2772,8 +2761,6 @@ const MRT_ColumnActionMenu = (_a) => {
|
|
2772
2761
|
]
|
2773
2762
|
: []),
|
2774
2763
|
].filter(Boolean);
|
2775
|
-
const theme = styles.useTheme();
|
2776
|
-
const { menuBackgroundColor } = getMRTTheme(table, theme);
|
2777
2764
|
return (jsxRuntime.jsx(Menu__default["default"], Object.assign({ MenuListProps: {
|
2778
2765
|
dense: density === 'compact',
|
2779
2766
|
sx: {
|
@@ -3341,7 +3328,7 @@ const MRT_TableHeadCell = (_a) => {
|
|
3341
3328
|
var _b, _c, _d, _f, _g, _h;
|
3342
3329
|
var { columnVirtualizer, header, staticColumnIndex, table } = _a, rest = __rest(_a, ["columnVirtualizer", "header", "staticColumnIndex", "table"]);
|
3343
3330
|
const theme = styles.useTheme();
|
3344
|
-
const { getState, options: { columnFilterDisplayMode, columnResizeDirection, columnResizeMode, enableColumnActions, enableColumnDragging, enableColumnOrdering, enableColumnPinning, enableGrouping, enableMultiSort, layoutMode, muiTableHeadCellProps, }, refs: { tableHeadCellRefs }, setHoveredColumn, } = table;
|
3331
|
+
const { getState, options: { columnFilterDisplayMode, columnResizeDirection, columnResizeMode, enableColumnActions, enableColumnDragging, enableColumnOrdering, enableColumnPinning, enableGrouping, enableMultiSort, layoutMode, mrtTheme: { draggingBorderColor }, muiTableHeadCellProps, }, refs: { tableHeadCellRefs }, setHoveredColumn, } = table;
|
3345
3332
|
const { columnSizingInfo, density, draggingColumn, grouping, hoveredColumn, showColumnFilters, } = getState();
|
3346
3333
|
const { column } = header;
|
3347
3334
|
const { columnDef } = column;
|
@@ -3350,7 +3337,6 @@ const MRT_TableHeadCell = (_a) => {
|
|
3350
3337
|
column,
|
3351
3338
|
table,
|
3352
3339
|
})), rest);
|
3353
|
-
const { draggingBorderColor } = getMRTTheme(table, theme);
|
3354
3340
|
const isColumnPinned = enableColumnPinning &&
|
3355
3341
|
columnDef.columnDefType !== 'group' &&
|
3356
3342
|
column.getIsPinned();
|
@@ -3493,13 +3479,13 @@ const MRT_TableHeadCell = (_a) => {
|
|
3493
3479
|
|
3494
3480
|
const MRT_TableHeadRow = (_a) => {
|
3495
3481
|
var { columnVirtualizer, headerGroup, table } = _a, rest = __rest(_a, ["columnVirtualizer", "headerGroup", "table"]);
|
3496
|
-
const { options: { enableStickyHeader, layoutMode, muiTableHeadRowProps }, } = table;
|
3482
|
+
const { options: { enableStickyHeader, layoutMode, mrtTheme: { baseBackgroundColor }, muiTableHeadRowProps, }, } = table;
|
3497
3483
|
const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer !== null && columnVirtualizer !== void 0 ? columnVirtualizer : {};
|
3498
3484
|
const tableRowProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableHeadRowProps, {
|
3499
3485
|
headerGroup,
|
3500
3486
|
table,
|
3501
3487
|
})), rest);
|
3502
|
-
return (jsxRuntime.jsxs(TableRow__default["default"], Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor:
|
3488
|
+
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'
|
3503
3489
|
? 'sticky'
|
3504
3490
|
: '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) => {
|
3505
3491
|
let header = headerOrVirtualHeader;
|
@@ -3515,7 +3501,7 @@ const MRT_TableHeadRow = (_a) => {
|
|
3515
3501
|
const MRT_ToolbarAlertBanner = (_a) => {
|
3516
3502
|
var _b, _c, _d;
|
3517
3503
|
var { stackAlertBanner, table } = _a, rest = __rest(_a, ["stackAlertBanner", "table"]);
|
3518
|
-
const { getFilteredSelectedRowModel, getPrePaginationRowModel, getState, options: { enableRowSelection, enableSelectAll, localization, manualPagination, muiToolbarAlertBannerChipProps, muiToolbarAlertBannerProps, positionToolbarAlertBanner, renderToolbarAlertBannerContent, rowCount, }, refs: {
|
3504
|
+
const { getFilteredSelectedRowModel, getPrePaginationRowModel, getState, options: { enableRowSelection, enableSelectAll, localization, manualPagination, muiToolbarAlertBannerChipProps, muiToolbarAlertBannerProps, positionToolbarAlertBanner, renderToolbarAlertBannerContent, rowCount, }, refs: { tablePaperRef }, } = table;
|
3519
3505
|
const { density, grouping, rowSelection, showAlertBanner } = getState();
|
3520
3506
|
const alertProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiToolbarAlertBannerProps, {
|
3521
3507
|
table,
|
@@ -3523,14 +3509,11 @@ const MRT_ToolbarAlertBanner = (_a) => {
|
|
3523
3509
|
const chipProps = parseFromValuesOrFunc(muiToolbarAlertBannerChipProps, {
|
3524
3510
|
table,
|
3525
3511
|
});
|
3526
|
-
const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().
|
3512
|
+
const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().flatRows.length;
|
3527
3513
|
const selectedRowCount = react.useMemo(() => manualPagination
|
3528
3514
|
? Object.values(rowSelection).filter(Boolean).length
|
3529
3515
|
: getFilteredSelectedRowModel().rows.length, [rowSelection, totalRowCount, manualPagination]);
|
3530
|
-
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: () => {
|
3531
|
-
table.toggleAllRowsSelected(false);
|
3532
|
-
lastSelectedRowId.current = null;
|
3533
|
-
}, size: "small", sx: { p: '2px' }, children: localization.clearSelection })] })) : null;
|
3516
|
+
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;
|
3534
3517
|
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;
|
3535
3518
|
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) => {
|
3536
3519
|
var _a, _b;
|
@@ -3608,11 +3591,11 @@ const MRT_Table = (_a) => {
|
|
3608
3591
|
const MRT_TableLoadingOverlay = (_a) => {
|
3609
3592
|
var _b;
|
3610
3593
|
var { table } = _a, rest = __rest(_a, ["table"]);
|
3611
|
-
const { options: { localization, muiCircularProgressProps }, } = table;
|
3594
|
+
const { options: { localization, mrtTheme: { baseBackgroundColor }, muiCircularProgressProps, }, } = table;
|
3612
3595
|
const circularProgressProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiCircularProgressProps, { table })), rest);
|
3613
|
-
return (jsxRuntime.jsx(Box__default["default"], { sx:
|
3596
|
+
return (jsxRuntime.jsx(Box__default["default"], { sx: {
|
3614
3597
|
alignItems: 'center',
|
3615
|
-
backgroundColor: styles.alpha(
|
3598
|
+
backgroundColor: styles.alpha(baseBackgroundColor, 0.5),
|
3616
3599
|
bottom: 0,
|
3617
3600
|
display: 'flex',
|
3618
3601
|
justifyContent: 'center',
|
@@ -3623,20 +3606,18 @@ const MRT_TableLoadingOverlay = (_a) => {
|
|
3623
3606
|
top: 0,
|
3624
3607
|
width: '100%',
|
3625
3608
|
zIndex: 3,
|
3626
|
-
}
|
3609
|
+
}, 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))) }));
|
3627
3610
|
};
|
3628
3611
|
|
3629
3612
|
const MRT_CellActionMenu = (_a) => {
|
3630
3613
|
var _b, _c;
|
3631
3614
|
var { table } = _a, rest = __rest(_a, ["table"]);
|
3632
|
-
const { getState, options: { editDisplayMode, enableClickToCopy, enableEditing, icons: { ContentCopy, EditIcon }, localization, renderCellActionMenuItems, }, refs: { actionCellRef }, } = table;
|
3615
|
+
const { getState, options: { editDisplayMode, enableClickToCopy, enableEditing, icons: { ContentCopy, EditIcon }, localization, mrtTheme: { menuBackgroundColor }, renderCellActionMenuItems, }, refs: { actionCellRef }, } = table;
|
3633
3616
|
const { actionCell, density } = getState();
|
3634
3617
|
const cell = actionCell;
|
3635
3618
|
const { row } = cell;
|
3636
3619
|
const { column } = cell;
|
3637
3620
|
const { columnDef } = column;
|
3638
|
-
const theme = styles.useTheme();
|
3639
|
-
const { menuBackgroundColor } = getMRTTheme(table, theme);
|
3640
3621
|
const handleClose = (event) => {
|
3641
3622
|
event === null || event === void 0 ? void 0 : event.stopPropagation();
|
3642
3623
|
table.setActionCell(null);
|
@@ -3888,7 +3869,7 @@ const MRT_ColumnPinningButtons = (_a) => {
|
|
3888
3869
|
const MRT_ShowHideColumnsMenuItems = (_a) => {
|
3889
3870
|
var _b;
|
3890
3871
|
var { allColumns, column, hoveredColumn, isNestedColumns, setHoveredColumn, table } = _a, rest = __rest(_a, ["allColumns", "column", "hoveredColumn", "isNestedColumns", "setHoveredColumn", "table"]);
|
3891
|
-
const { getState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, }, setColumnOrder, } = table;
|
3872
|
+
const { getState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, mrtTheme: { draggingBorderColor }, }, setColumnOrder, } = table;
|
3892
3873
|
const { columnOrder } = getState();
|
3893
3874
|
const { columnDef } = column;
|
3894
3875
|
const { columnDefType } = columnDef;
|
@@ -3935,7 +3916,7 @@ const MRT_ShowHideColumnsMenuItems = (_a) => {
|
|
3935
3916
|
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
|
3936
3917
|
? `2px dashed ${theme.palette.grey[500]}`
|
3937
3918
|
: (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
|
3938
|
-
? `2px dashed ${
|
3919
|
+
? `2px dashed ${draggingBorderColor}`
|
3939
3920
|
: '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: {
|
3940
3921
|
display: 'flex',
|
3941
3922
|
flexWrap: 'nowrap',
|
@@ -3956,7 +3937,7 @@ const MRT_ShowHideColumnsMenuItems = (_a) => {
|
|
3956
3937
|
|
3957
3938
|
const MRT_ShowHideColumnsMenu = (_a) => {
|
3958
3939
|
var { anchorEl, setAnchorEl, table } = _a, rest = __rest(_a, ["anchorEl", "setAnchorEl", "table"]);
|
3959
|
-
const { getAllColumns, getAllLeafColumns, getCenterLeafColumns, getIsAllColumnsVisible, getIsSomeColumnsPinned, getIsSomeColumnsVisible, getLeftLeafColumns, getRightLeafColumns, getState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, }, } = table;
|
3940
|
+
const { getAllColumns, getAllLeafColumns, getCenterLeafColumns, getIsAllColumnsVisible, getIsSomeColumnsPinned, getIsSomeColumnsVisible, getLeftLeafColumns, getRightLeafColumns, getState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, mrtTheme: { menuBackgroundColor }, }, } = table;
|
3960
3941
|
const { columnOrder, columnPinning, density } = getState();
|
3961
3942
|
const handleToggleAllColumns = (value) => {
|
3962
3943
|
getAllLeafColumns()
|
@@ -3984,8 +3965,6 @@ const MRT_ShowHideColumnsMenu = (_a) => {
|
|
3984
3965
|
]);
|
3985
3966
|
const isNestedColumns = allColumns.some((col) => col.columnDef.columnDefType === 'group');
|
3986
3967
|
const [hoveredColumn, setHoveredColumn] = react.useState(null);
|
3987
|
-
const theme = styles.useTheme();
|
3988
|
-
const { menuBackgroundColor } = getMRTTheme(table, theme);
|
3989
3968
|
return (jsxRuntime.jsxs(Menu__default["default"], Object.assign({ MenuListProps: {
|
3990
3969
|
dense: density === 'compact',
|
3991
3970
|
sx: {
|
@@ -4172,7 +4151,7 @@ const MRT_TopToolbar = ({ table, }) => {
|
|
4172
4151
|
const MRT_TablePaper = (_a) => {
|
4173
4152
|
var _b, _c;
|
4174
4153
|
var { table } = _a, rest = __rest(_a, ["table"]);
|
4175
|
-
const { getState, options: { enableBottomToolbar, enableTopToolbar, muiTablePaperProps, renderBottomToolbar, renderTopToolbar, }, refs: { tablePaperRef }, } = table;
|
4154
|
+
const { getState, options: { enableBottomToolbar, enableTopToolbar, mrtTheme: { baseBackgroundColor }, muiTablePaperProps, renderBottomToolbar, renderTopToolbar, }, refs: { tablePaperRef }, } = table;
|
4176
4155
|
const { isFullScreen } = getState();
|
4177
4156
|
const paperProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTablePaperProps, { table })), rest);
|
4178
4157
|
return (jsxRuntime.jsxs(Paper__default["default"], Object.assign({ elevation: 2 }, paperProps, { ref: (ref) => {
|
@@ -4196,7 +4175,7 @@ const MRT_TablePaper = (_a) => {
|
|
4196
4175
|
width: '100vw',
|
4197
4176
|
zIndex: 999,
|
4198
4177
|
}
|
4199
|
-
: {})), paperProps === null || paperProps === void 0 ? void 0 : paperProps.style), sx: (theme) => (Object.assign({ backgroundColor:
|
4178
|
+
: {})), 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 &&
|
4200
4179
|
((_b = parseFromValuesOrFunc(renderTopToolbar, { table })) !== null && _b !== void 0 ? _b : (jsxRuntime.jsx(MRT_TopToolbar, { table: table }))), jsxRuntime.jsx(MRT_TableContainer, { table: table }), enableBottomToolbar &&
|
4201
4180
|
((_c = parseFromValuesOrFunc(renderBottomToolbar, { table })) !== null && _c !== void 0 ? _c : (jsxRuntime.jsx(MRT_BottomToolbar, { table: table })))] })));
|
4202
4181
|
};
|
@@ -4288,16 +4267,12 @@ exports.getCanRankRows = getCanRankRows;
|
|
4288
4267
|
exports.getColumnId = getColumnId;
|
4289
4268
|
exports.getDefaultColumnFilterFn = getDefaultColumnFilterFn;
|
4290
4269
|
exports.getDefaultColumnOrderIds = getDefaultColumnOrderIds;
|
4291
|
-
exports.getIsFirstColumn = getIsFirstColumn;
|
4292
|
-
exports.getIsFirstRightPinnedColumn = getIsFirstRightPinnedColumn;
|
4293
|
-
exports.getIsLastColumn = getIsLastColumn;
|
4294
|
-
exports.getIsLastLeftPinnedColumn = getIsLastLeftPinnedColumn;
|
4295
4270
|
exports.getIsRankingRows = getIsRankingRows;
|
4296
4271
|
exports.getIsRowSelected = getIsRowSelected;
|
4297
4272
|
exports.getLeadingDisplayColumnIds = getLeadingDisplayColumnIds;
|
4298
4273
|
exports.getMRT_RowSelectionHandler = getMRT_RowSelectionHandler;
|
4299
4274
|
exports.getMRT_Rows = getMRT_Rows;
|
4300
|
-
exports.
|
4275
|
+
exports.getMRT_SelectAllHandler = getMRT_SelectAllHandler;
|
4301
4276
|
exports.getTrailingDisplayColumnIds = getTrailingDisplayColumnIds;
|
4302
4277
|
exports.isCellEditable = isCellEditable;
|
4303
4278
|
exports.mrtFilterOptions = mrtFilterOptions;
|