material-react-table 2.11.1 → 2.11.3
Sign up to get free protection for your applications and to get access to all the features.
- 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;
|