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.esm.js
CHANGED
@@ -169,32 +169,6 @@ const getDefaultColumnFilterFn = (columnDef) => {
|
|
169
169
|
return 'equals';
|
170
170
|
return 'fuzzy';
|
171
171
|
};
|
172
|
-
const getIsFirstColumn = (column, table) => {
|
173
|
-
const leftColumns = table.getLeftVisibleLeafColumns();
|
174
|
-
return leftColumns.length
|
175
|
-
? leftColumns[0].id === column.id
|
176
|
-
: table.getVisibleLeafColumns()[0].id === column.id;
|
177
|
-
};
|
178
|
-
const getIsLastColumn = (column, table) => {
|
179
|
-
const rightColumns = table.getRightVisibleLeafColumns();
|
180
|
-
const columns = table.getVisibleLeafColumns();
|
181
|
-
return rightColumns.length
|
182
|
-
? rightColumns[rightColumns.length - 1].id === column.id
|
183
|
-
: columns[columns.length - 1].id === column.id;
|
184
|
-
};
|
185
|
-
const getIsLastLeftPinnedColumn = (table, column) => {
|
186
|
-
return (column.getIsPinned() === 'left' &&
|
187
|
-
table.getLeftLeafHeaders().length - 1 === column.getPinnedIndex());
|
188
|
-
};
|
189
|
-
const getIsFirstRightPinnedColumn = (column) => {
|
190
|
-
return column.getIsPinned() === 'right' && column.getPinnedIndex() === 0;
|
191
|
-
};
|
192
|
-
const getTotalRight = (table, column) => {
|
193
|
-
return table
|
194
|
-
.getRightLeafHeaders()
|
195
|
-
.slice(column.getPinnedIndex() + 1)
|
196
|
-
.reduce((acc, col) => acc + col.getSize(), 0);
|
197
|
-
};
|
198
172
|
|
199
173
|
const flexRender = flexRender$1;
|
200
174
|
function createMRTColumnHelper() {
|
@@ -332,8 +306,8 @@ const MRT_SortingFns = Object.assign(Object.assign({}, sortingFns), { fuzzy: fuz
|
|
332
306
|
const rankGlobalFuzzy = (rowA, rowB) => Math.max(...Object.values(rowB.columnFiltersMeta).map((v) => v.rank)) -
|
333
307
|
Math.max(...Object.values(rowA.columnFiltersMeta).map((v) => v.rank));
|
334
308
|
|
335
|
-
const getMRT_Rows = (table,
|
336
|
-
const {
|
309
|
+
const getMRT_Rows = (table, all) => {
|
310
|
+
const { getCenterRows, getPrePaginationRowModel, getRowModel, getState, getTopRows, options: { createDisplayMode, enablePagination, enableRowPinning, manualPagination, positionCreatingRow, rowPinningDisplayMode, }, } = table;
|
337
311
|
const { creatingRow, pagination } = getState();
|
338
312
|
const isRankingRows = getIsRankingRows(table);
|
339
313
|
let rows = [];
|
@@ -346,19 +320,28 @@ const getMRT_Rows = (table, pinnedRowIds = [], all) => {
|
|
346
320
|
: getCenterRows();
|
347
321
|
}
|
348
322
|
else {
|
323
|
+
// fuzzy ranking adjustments
|
349
324
|
rows = getPrePaginationRowModel().rows.sort((a, b) => rankGlobalFuzzy(a, b));
|
350
325
|
if (enablePagination && !manualPagination && !all) {
|
351
326
|
const start = pagination.pageIndex * pagination.pageSize;
|
352
327
|
rows = rows.slice(start, start + pagination.pageSize);
|
353
328
|
}
|
329
|
+
if (enableRowPinning && !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky'))) {
|
330
|
+
// "re-center-ize" the rows (no top or bottom pinned rows unless sticky)
|
331
|
+
rows = rows.filter((row) => !row.getIsPinned());
|
332
|
+
}
|
354
333
|
}
|
334
|
+
// row pinning adjustments
|
355
335
|
if (enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky'))) {
|
336
|
+
const centerPinnedRowIds = rows
|
337
|
+
.filter((row) => row.getIsPinned())
|
338
|
+
.map((r) => r.id);
|
356
339
|
rows = [
|
357
|
-
...getTopRows().filter((row) => !
|
340
|
+
...getTopRows().filter((row) => !centerPinnedRowIds.includes(row.id)),
|
358
341
|
...rows,
|
359
|
-
...getBottomRows().filter((row) => !pinnedRowIds.includes(row.id)),
|
360
342
|
];
|
361
343
|
}
|
344
|
+
// blank inserted creating row adjustments
|
362
345
|
if (positionCreatingRow !== undefined &&
|
363
346
|
creatingRow &&
|
364
347
|
createDisplayMode === 'row') {
|
@@ -400,20 +383,21 @@ const getIsRowSelected = ({ row, table, }) => {
|
|
400
383
|
row.getCanSelectSubRows() &&
|
401
384
|
row.getIsAllSubRowsSelected()));
|
402
385
|
};
|
403
|
-
const getMRT_RowSelectionHandler = (
|
386
|
+
const getMRT_RowSelectionHandler = ({ row, staticRowIndex = 0, table, }) => (event, value) => {
|
404
387
|
var _a;
|
405
|
-
const { getState, options: { enableBatchRowSelection, enableRowPinning, manualPagination, rowPinningDisplayMode, }, refs: { lastSelectedRowId: lastSelectedRowId }, } = table;
|
388
|
+
const { getState, options: { enableBatchRowSelection, enableMultiRowSelection, enableRowPinning, manualPagination, rowPinningDisplayMode, }, refs: { lastSelectedRowId: lastSelectedRowId }, } = table;
|
406
389
|
const { pagination: { pageIndex, pageSize }, } = getState();
|
407
390
|
const paginationOffset = manualPagination ? 0 : pageSize * pageIndex;
|
408
|
-
const
|
409
|
-
const isStickySelection = enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('select'));
|
391
|
+
const wasCurrentRowChecked = getIsRowSelected({ row, table });
|
410
392
|
// toggle selection of this row
|
411
|
-
row.
|
393
|
+
row.toggleSelected(value !== null && value !== void 0 ? value : !wasCurrentRowChecked);
|
394
|
+
const changedRowIds = new Set([row.id]);
|
412
395
|
// if shift key is pressed, select all rows between last selected and this one
|
413
396
|
if (enableBatchRowSelection &&
|
397
|
+
enableMultiRowSelection &&
|
414
398
|
event.nativeEvent.shiftKey &&
|
415
399
|
lastSelectedRowId.current !== null) {
|
416
|
-
const rows = getMRT_Rows(table,
|
400
|
+
const rows = getMRT_Rows(table, true);
|
417
401
|
const lastIndex = rows.findIndex((r) => r.id === lastSelectedRowId.current);
|
418
402
|
if (lastIndex !== -1) {
|
419
403
|
const isLastIndexChecked = getIsRowSelected({
|
@@ -426,9 +410,10 @@ const getMRT_RowSelectionHandler = () => ({ event, row, staticRowIndex = 0, tabl
|
|
426
410
|
: [currentIndex, lastIndex];
|
427
411
|
// toggle selection of all rows between last selected and this one
|
428
412
|
// but only if the last selected row is not the same as the current one
|
429
|
-
if (
|
413
|
+
if (wasCurrentRowChecked !== isLastIndexChecked) {
|
430
414
|
for (let i = start; i <= end; i++) {
|
431
|
-
rows[i].toggleSelected(!
|
415
|
+
rows[i].toggleSelected(!wasCurrentRowChecked);
|
416
|
+
changedRowIds.add(rows[i].id);
|
432
417
|
}
|
433
418
|
}
|
434
419
|
}
|
@@ -439,13 +424,26 @@ const getMRT_RowSelectionHandler = () => ({ event, row, staticRowIndex = 0, tabl
|
|
439
424
|
if (row.getCanSelectSubRows() && row.getIsAllSubRowsSelected()) {
|
440
425
|
(_a = row.subRows) === null || _a === void 0 ? void 0 : _a.forEach((r) => r.toggleSelected(false));
|
441
426
|
}
|
442
|
-
if (
|
443
|
-
|
444
|
-
|
445
|
-
|
446
|
-
: '
|
447
|
-
|
427
|
+
if (enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('select'))) {
|
428
|
+
changedRowIds.forEach((rowId) => {
|
429
|
+
const rowToTogglePin = table.getRow(rowId);
|
430
|
+
rowToTogglePin.pin(!wasCurrentRowChecked //was not previously pinned or selected
|
431
|
+
? (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('bottom'))
|
432
|
+
? 'bottom'
|
433
|
+
: 'top'
|
434
|
+
: false);
|
435
|
+
});
|
436
|
+
}
|
437
|
+
};
|
438
|
+
const getMRT_SelectAllHandler = ({ table }) => (event, value, forceAll) => {
|
439
|
+
const { options: { enableRowPinning, rowPinningDisplayMode, selectAllMode }, refs: { lastSelectedRowId }, } = table;
|
440
|
+
selectAllMode === 'all' || forceAll
|
441
|
+
? table.toggleAllRowsSelected(value !== null && value !== void 0 ? value : event.target.checked)
|
442
|
+
: table.toggleAllPageRowsSelected(value !== null && value !== void 0 ? value : event.target.checked);
|
443
|
+
if (enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('select'))) {
|
444
|
+
table.setRowPinning({ bottom: [], top: [] });
|
448
445
|
}
|
446
|
+
lastSelectedRowId.current = null;
|
449
447
|
};
|
450
448
|
|
451
449
|
const MRT_AggregationFns = Object.assign({}, aggregationFns);
|
@@ -615,15 +613,15 @@ const MRT_EditActionButtons = (_a) => {
|
|
615
613
|
};
|
616
614
|
|
617
615
|
const parseCSSVarId = (id) => id.replace(/[^a-zA-Z0-9]/g, '_');
|
618
|
-
const getMRTTheme = (
|
616
|
+
const getMRTTheme = (mrtTheme, muiTheme) => {
|
619
617
|
var _a;
|
620
|
-
const
|
621
|
-
const baseBackgroundColor = (_a =
|
622
|
-
? lighten(
|
623
|
-
:
|
624
|
-
return Object.assign({ baseBackgroundColor, draggingBorderColor:
|
625
|
-
? darken(
|
626
|
-
: lighten(
|
618
|
+
const mrtThemeOverrides = parseFromValuesOrFunc(mrtTheme, muiTheme);
|
619
|
+
const baseBackgroundColor = (_a = mrtThemeOverrides === null || mrtThemeOverrides === void 0 ? void 0 : mrtThemeOverrides.baseBackgroundColor) !== null && _a !== void 0 ? _a : (muiTheme.palette.mode === 'dark'
|
620
|
+
? lighten(muiTheme.palette.background.default, 0.05)
|
621
|
+
: muiTheme.palette.background.default);
|
622
|
+
return Object.assign({ baseBackgroundColor, draggingBorderColor: muiTheme.palette.primary.main, matchHighlightColor: muiTheme.palette.mode === 'dark'
|
623
|
+
? darken(muiTheme.palette.warning.dark, 0.25)
|
624
|
+
: lighten(muiTheme.palette.warning.light, 0.5), menuBackgroundColor: lighten(baseBackgroundColor, 0.07), pinnedRowBackgroundColor: alpha(muiTheme.palette.primary.main, 0.1), selectedRowBackgroundColor: alpha(muiTheme.palette.primary.main, 0.2) }, mrtThemeOverrides);
|
627
625
|
};
|
628
626
|
const commonCellBeforeAfterStyles = {
|
629
627
|
content: '""',
|
@@ -635,13 +633,14 @@ const commonCellBeforeAfterStyles = {
|
|
635
633
|
zIndex: -1,
|
636
634
|
};
|
637
635
|
const getCommonPinnedCellStyles = ({ column, table, theme, }) => {
|
638
|
-
const { baseBackgroundColor } =
|
636
|
+
const { baseBackgroundColor } = table.options.mrtTheme;
|
637
|
+
const isPinned = column === null || column === void 0 ? void 0 : column.getIsPinned();
|
639
638
|
return {
|
640
639
|
'&[data-pinned="true"]': {
|
641
640
|
'&:before': Object.assign({ backgroundColor: alpha(darken(baseBackgroundColor, theme.palette.mode === 'dark' ? 0.05 : 0.01), 0.97), boxShadow: column
|
642
|
-
?
|
641
|
+
? isPinned === 'left' && column.getIsLastColumn(isPinned)
|
643
642
|
? `-4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
|
644
|
-
:
|
643
|
+
: isPinned === 'right' && column.getIsFirstColumn(isPinned)
|
645
644
|
? `4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
|
646
645
|
: undefined
|
647
646
|
: undefined }, commonCellBeforeAfterStyles),
|
@@ -671,7 +670,7 @@ const getCommonMRTCellStyles = ({ column, header, table, tableCellProps, theme,
|
|
671
670
|
? Object.assign(Object.assign({}, getCommonPinnedCellStyles({ column, table, theme })), { left: isColumnPinned === 'left'
|
672
671
|
? `${column.getStart('left')}px`
|
673
672
|
: undefined, opacity: 0.97, position: 'sticky', right: isColumnPinned === 'right'
|
674
|
-
? `${
|
673
|
+
? `${column.getAfter('right')}px`
|
675
674
|
: undefined }) : {};
|
676
675
|
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'
|
677
676
|
? 'center'
|
@@ -688,9 +687,9 @@ const getCommonMRTCellStyles = ({ column, header, table, tableCellProps, theme,
|
|
688
687
|
? 1
|
689
688
|
: 0 }, pinnedStyles), widthStyles), parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme));
|
690
689
|
};
|
691
|
-
const getCommonToolbarStyles = ({ table,
|
690
|
+
const getCommonToolbarStyles = ({ table, }) => ({
|
692
691
|
alignItems: 'flex-start',
|
693
|
-
backgroundColor:
|
692
|
+
backgroundColor: table.options.mrtTheme.baseBackgroundColor,
|
694
693
|
display: 'grid',
|
695
694
|
flexWrap: 'wrap-reverse',
|
696
695
|
minHeight: '3.5rem',
|
@@ -726,10 +725,8 @@ const MRT_ActionMenuItem = (_a) => {
|
|
726
725
|
|
727
726
|
const MRT_RowActionMenu = (_a) => {
|
728
727
|
var { anchorEl, handleEdit, row, setAnchorEl, staticRowIndex, table } = _a, rest = __rest(_a, ["anchorEl", "handleEdit", "row", "setAnchorEl", "staticRowIndex", "table"]);
|
729
|
-
const { getState, options: { editDisplayMode, enableEditing, icons: { EditIcon }, localization, renderRowActionMenuItems, }, } = table;
|
728
|
+
const { getState, options: { editDisplayMode, enableEditing, icons: { EditIcon }, localization, mrtTheme: { menuBackgroundColor }, renderRowActionMenuItems, }, } = table;
|
730
729
|
const { density } = getState();
|
731
|
-
const theme = useTheme();
|
732
|
-
const { menuBackgroundColor } = getMRTTheme(table, theme);
|
733
730
|
return (jsxs(Menu, Object.assign({ MenuListProps: {
|
734
731
|
dense: density === 'compact',
|
735
732
|
sx: {
|
@@ -991,10 +988,9 @@ const getMRT_RowPinningColumnDef = (tableOptions) => {
|
|
991
988
|
const MRT_SelectCheckbox = (_a) => {
|
992
989
|
var _b;
|
993
990
|
var { row, staticRowIndex, table } = _a, rest = __rest(_a, ["row", "staticRowIndex", "table"]);
|
994
|
-
const { getState, options: { enableMultiRowSelection,
|
991
|
+
const { getState, options: { enableMultiRowSelection, localization, muiSelectAllCheckboxProps, muiSelectCheckboxProps, selectAllMode, }, } = table;
|
995
992
|
const { density, isLoading } = getState();
|
996
993
|
const selectAll = !row;
|
997
|
-
const isStickySelection = enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('select'));
|
998
994
|
const allRowsSelected = selectAll
|
999
995
|
? selectAllMode === 'page'
|
1000
996
|
? table.getIsAllPageRowsSelected()
|
@@ -1007,18 +1003,17 @@ const MRT_SelectCheckbox = (_a) => {
|
|
1007
1003
|
? parseFromValuesOrFunc(muiSelectAllCheckboxProps, { table })
|
1008
1004
|
: parseFromValuesOrFunc(muiSelectCheckboxProps, {
|
1009
1005
|
row,
|
1006
|
+
staticRowIndex,
|
1010
1007
|
table,
|
1011
1008
|
}))), rest);
|
1012
|
-
const onSelectionChange =
|
1013
|
-
|
1014
|
-
|
1015
|
-
|
1016
|
-
|
1017
|
-
|
1018
|
-
|
1019
|
-
|
1020
|
-
lastSelectedRowId.current = null;
|
1021
|
-
};
|
1009
|
+
const onSelectionChange = row
|
1010
|
+
? getMRT_RowSelectionHandler({
|
1011
|
+
row,
|
1012
|
+
staticRowIndex,
|
1013
|
+
table,
|
1014
|
+
})
|
1015
|
+
: undefined;
|
1016
|
+
const onSelectAllChange = getMRT_SelectAllHandler({ table });
|
1022
1017
|
const commonProps = Object.assign(Object.assign({ 'aria-label': selectAll
|
1023
1018
|
? localization.toggleSelectAll
|
1024
1019
|
: localization.toggleSelectRow, checked: isChecked, disabled: isLoading || (row && !row.getCanSelect()) || (row === null || row === void 0 ? void 0 : row.id) === 'mrt-row-create', inputProps: {
|
@@ -1027,9 +1022,7 @@ const MRT_SelectCheckbox = (_a) => {
|
|
1027
1022
|
: localization.toggleSelectRow,
|
1028
1023
|
}, onChange: (event) => {
|
1029
1024
|
event.stopPropagation();
|
1030
|
-
|
1031
|
-
? onSelectionChange({ event, row, staticRowIndex, table })
|
1032
|
-
: onSelectAllChange(event);
|
1025
|
+
selectAll ? onSelectAllChange(event) : onSelectionChange(event);
|
1033
1026
|
}, size: (density === 'compact' ? 'small' : 'medium') }, checkboxProps), { onClick: (e) => {
|
1034
1027
|
var _a;
|
1035
1028
|
e.stopPropagation();
|
@@ -1207,10 +1200,11 @@ const MRT_DefaultDisplayColumn = {
|
|
1207
1200
|
};
|
1208
1201
|
const useMRT_TableOptions = (_a) => {
|
1209
1202
|
var _b;
|
1210
|
-
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"]);
|
1203
|
+
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"]);
|
1211
1204
|
const theme = useTheme();
|
1212
1205
|
icons = useMemo(() => (Object.assign(Object.assign({}, MRT_Default_Icons), icons)), [icons]);
|
1213
1206
|
localization = useMemo(() => (Object.assign(Object.assign({}, MRT_Localization_EN), localization)), [localization]);
|
1207
|
+
mrtTheme = useMemo(() => getMRTTheme(mrtTheme, theme), [mrtTheme, theme]);
|
1214
1208
|
aggregationFns = useMemo(() => (Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns)), []);
|
1215
1209
|
filterFns = useMemo(() => (Object.assign(Object.assign({}, MRT_FilterFns), filterFns)), []);
|
1216
1210
|
sortingFns = useMemo(() => (Object.assign(Object.assign({}, MRT_SortingFns), sortingFns)), []);
|
@@ -1295,6 +1289,7 @@ const useMRT_TableOptions = (_a) => {
|
|
1295
1289
|
manualGrouping,
|
1296
1290
|
manualPagination,
|
1297
1291
|
manualSorting,
|
1292
|
+
mrtTheme,
|
1298
1293
|
paginationDisplayMode,
|
1299
1294
|
positionActionsColumn,
|
1300
1295
|
positionCreatingRow,
|
@@ -1689,10 +1684,10 @@ const useMRT_RowVirtualizer = (table, rows) => {
|
|
1689
1684
|
return rowVirtualizer;
|
1690
1685
|
};
|
1691
1686
|
|
1692
|
-
const useMRT_Rows = (table
|
1687
|
+
const useMRT_Rows = (table) => {
|
1693
1688
|
const { getRowModel, getState, options: { data, enableGlobalFilterRankedResults, positionCreatingRow }, } = table;
|
1694
1689
|
const { creatingRow, expanded, globalFilter, pagination, rowPinning, sorting, } = getState();
|
1695
|
-
const rows = useMemo(() => getMRT_Rows(table
|
1690
|
+
const rows = useMemo(() => getMRT_Rows(table), [
|
1696
1691
|
creatingRow,
|
1697
1692
|
data,
|
1698
1693
|
enableGlobalFilterRankedResults,
|
@@ -1711,7 +1706,7 @@ const useMRT_Rows = (table, pinnedRowIds = []) => {
|
|
1711
1706
|
const allowedTypes = ['string', 'number'];
|
1712
1707
|
const MRT_TableBodyCellValue = ({ cell, rowRef, staticColumnIndex, staticRowIndex, table, }) => {
|
1713
1708
|
var _a, _b, _c;
|
1714
|
-
const { getState, options: { enableFilterMatchHighlighting }, } = table;
|
1709
|
+
const { getState, options: { enableFilterMatchHighlighting, mrtTheme: { matchHighlightColor }, }, } = table;
|
1715
1710
|
const { column, row } = cell;
|
1716
1711
|
const { columnDef } = column;
|
1717
1712
|
const { globalFilter, globalFilterFn } = getState();
|
@@ -1755,7 +1750,7 @@ const MRT_TableBodyCellValue = ({ cell, rowRef, staticColumnIndex, staticRowInde
|
|
1755
1750
|
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)) {
|
1756
1751
|
renderedCellValue = (jsx("span", { "aria-label": renderedCellValue, role: "note", children: (_c = chunks === null || chunks === void 0 ? void 0 : chunks.map(({ key, match, text }) => (jsx(Box, { "aria-hidden": "true", component: "span", sx: match
|
1757
1752
|
? {
|
1758
|
-
backgroundColor:
|
1753
|
+
backgroundColor: matchHighlightColor,
|
1759
1754
|
borderRadius: '2px',
|
1760
1755
|
color: (theme) => theme.palette.mode === 'dark'
|
1761
1756
|
? theme.palette.common.white
|
@@ -1907,7 +1902,7 @@ const MRT_TableBodyCell = (_a) => {
|
|
1907
1902
|
var _b, _c, _d, _e, _f;
|
1908
1903
|
var { cell, numRows, rowRef, staticColumnIndex, staticRowIndex, table } = _a, rest = __rest(_a, ["cell", "numRows", "rowRef", "staticColumnIndex", "staticRowIndex", "table"]);
|
1909
1904
|
const theme = useTheme();
|
1910
|
-
const { getState, options: { columnResizeDirection, columnResizeMode, createDisplayMode, editDisplayMode, enableCellActions, enableClickToCopy, enableColumnOrdering, enableColumnPinning, enableGrouping, layoutMode, muiSkeletonProps, muiTableBodyCellProps, }, setHoveredColumn, } = table;
|
1905
|
+
const { getState, options: { columnResizeDirection, columnResizeMode, createDisplayMode, editDisplayMode, enableCellActions, enableClickToCopy, enableColumnOrdering, enableColumnPinning, enableGrouping, layoutMode, mrtTheme: { draggingBorderColor }, muiSkeletonProps, muiTableBodyCellProps, }, setHoveredColumn, } = table;
|
1911
1906
|
const { actionCell, columnSizingInfo, creatingRow, density, draggingColumn, draggingRow, editingCell, editingRow, hoveredColumn, hoveredRow, isLoading, showSkeletons, } = getState();
|
1912
1907
|
const { column, row } = cell;
|
1913
1908
|
const { columnDef } = column;
|
@@ -1920,7 +1915,6 @@ const MRT_TableBodyCell = (_a) => {
|
|
1920
1915
|
row,
|
1921
1916
|
table,
|
1922
1917
|
});
|
1923
|
-
const { draggingBorderColor } = getMRTTheme(table, theme);
|
1924
1918
|
const [skeletonWidth, setSkeletonWidth] = useState(100);
|
1925
1919
|
useEffect(() => {
|
1926
1920
|
if ((!isLoading && !showSkeletons) || skeletonWidth !== 100)
|
@@ -1935,8 +1929,8 @@ const MRT_TableBodyCell = (_a) => {
|
|
1935
1929
|
const isHoveredColumn = (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id;
|
1936
1930
|
const isDraggingRow = (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id;
|
1937
1931
|
const isHoveredRow = (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id;
|
1938
|
-
const isFirstColumn = getIsFirstColumn(
|
1939
|
-
const isLastColumn = getIsLastColumn(
|
1932
|
+
const isFirstColumn = column.getIsFirstColumn();
|
1933
|
+
const isLastColumn = column.getIsLastColumn();
|
1940
1934
|
const isLastRow = numRows && staticRowIndex === numRows - 1;
|
1941
1935
|
const isResizingColumn = columnSizingInfo.isResizingColumn === column.id;
|
1942
1936
|
const showResizeBorder = isResizingColumn && columnResizeMode === 'onChange';
|
@@ -2068,7 +2062,7 @@ const Memo_MRT_TableBodyCell = memo(MRT_TableBodyCell, (prev, next) => next.cell
|
|
2068
2062
|
|
2069
2063
|
const MRT_TableDetailPanel = (_a) => {
|
2070
2064
|
var { parentRowRef, row, rowVirtualizer, staticRowIndex, table, virtualRow } = _a, rest = __rest(_a, ["parentRowRef", "row", "rowVirtualizer", "staticRowIndex", "table", "virtualRow"]);
|
2071
|
-
const { getState, getVisibleLeafColumns, options: { enableRowVirtualization, layoutMode, muiDetailPanelProps, muiTableBodyRowProps, renderDetailPanel, }, } = table;
|
2065
|
+
const { getState, getVisibleLeafColumns, options: { enableRowVirtualization, layoutMode, mrtTheme: { baseBackgroundColor }, muiDetailPanelProps, muiTableBodyRowProps, renderDetailPanel, }, } = table;
|
2072
2066
|
const { isLoading } = getState();
|
2073
2067
|
const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
|
2074
2068
|
isDetailPanel: true,
|
@@ -2093,9 +2087,7 @@ const MRT_TableDetailPanel = (_a) => {
|
|
2093
2087
|
: undefined, transform: virtualRow
|
2094
2088
|
? `translateY(${virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.start}px)`
|
2095
2089
|
: undefined, width: '100%' }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme)));
|
2096
|
-
}, children: jsx(TableCell, Object.assign({ className: "Mui-TableBodyCell-DetailPanel", colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ backgroundColor: virtualRow
|
2097
|
-
? getMRTTheme(table, theme).baseBackgroundColor
|
2098
|
-
: 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
|
2090
|
+
}, children: jsx(TableCell, 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
|
2099
2091
|
? 'all 150ms ease-in-out'
|
2100
2092
|
: undefined, width: `100%` }, parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme))), children: enableRowVirtualization ? (row.getIsExpanded() && DetailPanel) : (jsx(Collapse, { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true, children: DetailPanel })) })) })));
|
2101
2093
|
};
|
@@ -2104,7 +2096,7 @@ const MRT_TableBodyRow = (_a) => {
|
|
2104
2096
|
var _b, _c, _d, _f;
|
2105
2097
|
var { columnVirtualizer, numRows, pinnedRowIds, row, rowVirtualizer, staticRowIndex, table, virtualRow } = _a, rest = __rest(_a, ["columnVirtualizer", "numRows", "pinnedRowIds", "row", "rowVirtualizer", "staticRowIndex", "table", "virtualRow"]);
|
2106
2098
|
const theme = useTheme();
|
2107
|
-
const { getState, options: { enableRowOrdering, enableRowPinning, enableStickyFooter, enableStickyHeader, layoutMode, memoMode, muiTableBodyRowProps, renderDetailPanel, rowPinningDisplayMode, }, refs: { tableFooterRef, tableHeadRef }, setHoveredRow, } = table;
|
2099
|
+
const { getState, options: { enableRowOrdering, enableRowPinning, enableStickyFooter, enableStickyHeader, layoutMode, memoMode, mrtTheme: { baseBackgroundColor, pinnedRowBackgroundColor, selectedRowBackgroundColor, }, muiTableBodyRowProps, renderDetailPanel, rowPinningDisplayMode, }, refs: { tableFooterRef, tableHeadRef }, setHoveredRow, } = table;
|
2108
2100
|
const { density, draggingColumn, draggingRow, editingCell, editingRow, hoveredRow, isFullScreen, rowPinning, } = getState();
|
2109
2101
|
const visibleCells = row.getVisibleCells();
|
2110
2102
|
const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer !== null && columnVirtualizer !== void 0 ? columnVirtualizer : {};
|
@@ -2144,7 +2136,6 @@ const MRT_TableBodyRow = (_a) => {
|
|
2144
2136
|
}
|
2145
2137
|
};
|
2146
2138
|
const rowRef = useRef(null);
|
2147
|
-
const { baseBackgroundColor, pinnedRowBackgroundColor, selectedRowBackgroundColor, } = getMRTTheme(table, theme);
|
2148
2139
|
const cellHighlightColor = isRowSelected
|
2149
2140
|
? selectedRowBackgroundColor
|
2150
2141
|
: isRowPinned
|
@@ -2220,7 +2211,7 @@ const MRT_TableBody = (_a) => {
|
|
2220
2211
|
.rows.filter((row) => row.getIsPinned())
|
2221
2212
|
.map((r) => r.id);
|
2222
2213
|
}, [rowPinning, getRowModel().rows]);
|
2223
|
-
const rows = useMRT_Rows(table
|
2214
|
+
const rows = useMRT_Rows(table);
|
2224
2215
|
const rowVirtualizer = useMRT_RowVirtualizer(table, rows);
|
2225
2216
|
const { virtualRows } = rowVirtualizer !== null && rowVirtualizer !== void 0 ? rowVirtualizer : {};
|
2226
2217
|
const commonRowProps = {
|
@@ -2321,7 +2312,7 @@ const MRT_TableFooterCell = (_a) => {
|
|
2321
2312
|
const MRT_TableFooterRow = (_a) => {
|
2322
2313
|
var _b;
|
2323
2314
|
var { columnVirtualizer, footerGroup, table } = _a, rest = __rest(_a, ["columnVirtualizer", "footerGroup", "table"]);
|
2324
|
-
const { options: { layoutMode, muiTableFooterRowProps }, } = table;
|
2315
|
+
const { options: { layoutMode, mrtTheme: { baseBackgroundColor }, muiTableFooterRowProps, }, } = table;
|
2325
2316
|
const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer !== null && columnVirtualizer !== void 0 ? columnVirtualizer : {};
|
2326
2317
|
// if no content in row, skip row
|
2327
2318
|
if (!((_b = footerGroup.headers) === null || _b === void 0 ? void 0 : _b.some((header) => (typeof header.column.columnDef.footer === 'string' &&
|
@@ -2333,7 +2324,7 @@ const MRT_TableFooterRow = (_a) => {
|
|
2333
2324
|
footerGroup,
|
2334
2325
|
table,
|
2335
2326
|
})), rest);
|
2336
|
-
return (jsxs(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor:
|
2327
|
+
return (jsxs(TableRow, 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 ? (jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : footerGroup.headers).map((footerOrVirtualFooter, staticColumnIndex) => {
|
2337
2328
|
let footer = footerOrVirtualFooter;
|
2338
2329
|
if (columnVirtualizer) {
|
2339
2330
|
staticColumnIndex = footerOrVirtualFooter
|
@@ -2458,7 +2449,7 @@ const rangeVariants = ['range-slider', 'date-range', 'datetime-range', 'range'];
|
|
2458
2449
|
const MRT_FilterOptionMenu = (_a) => {
|
2459
2450
|
var _b, _c, _d, _e;
|
2460
2451
|
var { anchorEl, header, onSelect, setAnchorEl, setFilterValue, table } = _a, rest = __rest(_a, ["anchorEl", "header", "onSelect", "setAnchorEl", "setFilterValue", "table"]);
|
2461
|
-
const { getState, options: { columnFilterModeOptions, globalFilterModeOptions, localization, renderColumnFilterModeMenuItems, renderGlobalFilterModeMenuItems, }, setColumnFilterFns, setGlobalFilterFn, } = table;
|
2452
|
+
const { getState, options: { columnFilterModeOptions, globalFilterModeOptions, localization, mrtTheme: { menuBackgroundColor }, renderColumnFilterModeMenuItems, renderGlobalFilterModeMenuItems, }, setColumnFilterFns, setGlobalFilterFn, } = table;
|
2462
2453
|
const { density, globalFilterFn } = getState();
|
2463
2454
|
const { column } = header !== null && header !== void 0 ? header : {};
|
2464
2455
|
const { columnDef } = column !== null && column !== void 0 ? column : {};
|
@@ -2541,8 +2532,6 @@ const MRT_FilterOptionMenu = (_a) => {
|
|
2541
2532
|
onSelect === null || onSelect === void 0 ? void 0 : onSelect();
|
2542
2533
|
};
|
2543
2534
|
const filterOption = !!header && columnDef ? columnDef._filterFn : globalFilterFn;
|
2544
|
-
const theme = useTheme();
|
2545
|
-
const { menuBackgroundColor } = getMRTTheme(table, theme);
|
2546
2535
|
return (jsx(Menu, Object.assign({ MenuListProps: {
|
2547
2536
|
dense: density === 'compact',
|
2548
2537
|
sx: {
|
@@ -2570,7 +2559,7 @@ const MRT_FilterOptionMenu = (_a) => {
|
|
2570
2559
|
const MRT_ColumnActionMenu = (_a) => {
|
2571
2560
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
2572
2561
|
var { anchorEl, header, setAnchorEl, table } = _a, rest = __rest(_a, ["anchorEl", "header", "setAnchorEl", "table"]);
|
2573
|
-
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;
|
2562
|
+
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;
|
2574
2563
|
const { column } = header;
|
2575
2564
|
const { columnDef } = column;
|
2576
2565
|
const { columnSizing, columnVisibility, density, showColumnFilters } = getState();
|
@@ -2682,8 +2671,6 @@ const MRT_ColumnActionMenu = (_a) => {
|
|
2682
2671
|
]
|
2683
2672
|
: []),
|
2684
2673
|
].filter(Boolean);
|
2685
|
-
const theme = useTheme();
|
2686
|
-
const { menuBackgroundColor } = getMRTTheme(table, theme);
|
2687
2674
|
return (jsx(Menu, Object.assign({ MenuListProps: {
|
2688
2675
|
dense: density === 'compact',
|
2689
2676
|
sx: {
|
@@ -3251,7 +3238,7 @@ const MRT_TableHeadCell = (_a) => {
|
|
3251
3238
|
var _b, _c, _d, _f, _g, _h;
|
3252
3239
|
var { columnVirtualizer, header, staticColumnIndex, table } = _a, rest = __rest(_a, ["columnVirtualizer", "header", "staticColumnIndex", "table"]);
|
3253
3240
|
const theme = useTheme();
|
3254
|
-
const { getState, options: { columnFilterDisplayMode, columnResizeDirection, columnResizeMode, enableColumnActions, enableColumnDragging, enableColumnOrdering, enableColumnPinning, enableGrouping, enableMultiSort, layoutMode, muiTableHeadCellProps, }, refs: { tableHeadCellRefs }, setHoveredColumn, } = table;
|
3241
|
+
const { getState, options: { columnFilterDisplayMode, columnResizeDirection, columnResizeMode, enableColumnActions, enableColumnDragging, enableColumnOrdering, enableColumnPinning, enableGrouping, enableMultiSort, layoutMode, mrtTheme: { draggingBorderColor }, muiTableHeadCellProps, }, refs: { tableHeadCellRefs }, setHoveredColumn, } = table;
|
3255
3242
|
const { columnSizingInfo, density, draggingColumn, grouping, hoveredColumn, showColumnFilters, } = getState();
|
3256
3243
|
const { column } = header;
|
3257
3244
|
const { columnDef } = column;
|
@@ -3260,7 +3247,6 @@ const MRT_TableHeadCell = (_a) => {
|
|
3260
3247
|
column,
|
3261
3248
|
table,
|
3262
3249
|
})), rest);
|
3263
|
-
const { draggingBorderColor } = getMRTTheme(table, theme);
|
3264
3250
|
const isColumnPinned = enableColumnPinning &&
|
3265
3251
|
columnDef.columnDefType !== 'group' &&
|
3266
3252
|
column.getIsPinned();
|
@@ -3403,13 +3389,13 @@ const MRT_TableHeadCell = (_a) => {
|
|
3403
3389
|
|
3404
3390
|
const MRT_TableHeadRow = (_a) => {
|
3405
3391
|
var { columnVirtualizer, headerGroup, table } = _a, rest = __rest(_a, ["columnVirtualizer", "headerGroup", "table"]);
|
3406
|
-
const { options: { enableStickyHeader, layoutMode, muiTableHeadRowProps }, } = table;
|
3392
|
+
const { options: { enableStickyHeader, layoutMode, mrtTheme: { baseBackgroundColor }, muiTableHeadRowProps, }, } = table;
|
3407
3393
|
const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer !== null && columnVirtualizer !== void 0 ? columnVirtualizer : {};
|
3408
3394
|
const tableRowProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableHeadRowProps, {
|
3409
3395
|
headerGroup,
|
3410
3396
|
table,
|
3411
3397
|
})), rest);
|
3412
|
-
return (jsxs(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor:
|
3398
|
+
return (jsxs(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: baseBackgroundColor, boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, position: enableStickyHeader && layoutMode === 'semantic'
|
3413
3399
|
? 'sticky'
|
3414
3400
|
: 'relative', top: 0 }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme))), children: [virtualPaddingLeft ? (jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : headerGroup.headers).map((headerOrVirtualHeader, staticColumnIndex) => {
|
3415
3401
|
let header = headerOrVirtualHeader;
|
@@ -3425,7 +3411,7 @@ const MRT_TableHeadRow = (_a) => {
|
|
3425
3411
|
const MRT_ToolbarAlertBanner = (_a) => {
|
3426
3412
|
var _b, _c, _d;
|
3427
3413
|
var { stackAlertBanner, table } = _a, rest = __rest(_a, ["stackAlertBanner", "table"]);
|
3428
|
-
const { getFilteredSelectedRowModel, getPrePaginationRowModel, getState, options: { enableRowSelection, enableSelectAll, localization, manualPagination, muiToolbarAlertBannerChipProps, muiToolbarAlertBannerProps, positionToolbarAlertBanner, renderToolbarAlertBannerContent, rowCount, }, refs: {
|
3414
|
+
const { getFilteredSelectedRowModel, getPrePaginationRowModel, getState, options: { enableRowSelection, enableSelectAll, localization, manualPagination, muiToolbarAlertBannerChipProps, muiToolbarAlertBannerProps, positionToolbarAlertBanner, renderToolbarAlertBannerContent, rowCount, }, refs: { tablePaperRef }, } = table;
|
3429
3415
|
const { density, grouping, rowSelection, showAlertBanner } = getState();
|
3430
3416
|
const alertProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiToolbarAlertBannerProps, {
|
3431
3417
|
table,
|
@@ -3433,14 +3419,11 @@ const MRT_ToolbarAlertBanner = (_a) => {
|
|
3433
3419
|
const chipProps = parseFromValuesOrFunc(muiToolbarAlertBannerChipProps, {
|
3434
3420
|
table,
|
3435
3421
|
});
|
3436
|
-
const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().
|
3422
|
+
const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().flatRows.length;
|
3437
3423
|
const selectedRowCount = useMemo(() => manualPagination
|
3438
3424
|
? Object.values(rowSelection).filter(Boolean).length
|
3439
3425
|
: getFilteredSelectedRowModel().rows.length, [rowSelection, totalRowCount, manualPagination]);
|
3440
|
-
const selectedAlert = selectedRowCount > 0 ? (jsxs(Stack, { 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()), jsx(Button, { onClick: () => {
|
3441
|
-
table.toggleAllRowsSelected(false);
|
3442
|
-
lastSelectedRowId.current = null;
|
3443
|
-
}, size: "small", sx: { p: '2px' }, children: localization.clearSelection })] })) : null;
|
3426
|
+
const selectedAlert = selectedRowCount > 0 ? (jsxs(Stack, { 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()), jsx(Button, { onClick: (event) => getMRT_SelectAllHandler({ table })(event, false, true), size: "small", sx: { p: '2px' }, children: localization.clearSelection })] })) : null;
|
3444
3427
|
const groupedAlert = grouping.length > 0 ? (jsxs("span", { children: [localization.groupedBy, ' ', grouping.map((columnId, index) => (jsxs(Fragment$1, { children: [index > 0 ? localization.thenBy : '', jsx(Chip, Object.assign({ label: table.getColumn(columnId).columnDef.header, onDelete: () => table.getColumn(columnId).toggleGrouping() }, chipProps))] }, `${index}-${columnId}`)))] })) : null;
|
3445
3428
|
return (jsx(Collapse, { in: showAlertBanner || !!selectedAlert || !!groupedAlert, timeout: stackAlertBanner ? 200 : 0, children: jsx(Alert, Object.assign({ color: "info", icon: false }, alertProps, { sx: (theme) => {
|
3446
3429
|
var _a, _b;
|
@@ -3518,11 +3501,11 @@ const MRT_Table = (_a) => {
|
|
3518
3501
|
const MRT_TableLoadingOverlay = (_a) => {
|
3519
3502
|
var _b;
|
3520
3503
|
var { table } = _a, rest = __rest(_a, ["table"]);
|
3521
|
-
const { options: { localization, muiCircularProgressProps }, } = table;
|
3504
|
+
const { options: { localization, mrtTheme: { baseBackgroundColor }, muiCircularProgressProps, }, } = table;
|
3522
3505
|
const circularProgressProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiCircularProgressProps, { table })), rest);
|
3523
|
-
return (jsx(Box, { sx:
|
3506
|
+
return (jsx(Box, { sx: {
|
3524
3507
|
alignItems: 'center',
|
3525
|
-
backgroundColor: alpha(
|
3508
|
+
backgroundColor: alpha(baseBackgroundColor, 0.5),
|
3526
3509
|
bottom: 0,
|
3527
3510
|
display: 'flex',
|
3528
3511
|
justifyContent: 'center',
|
@@ -3533,20 +3516,18 @@ const MRT_TableLoadingOverlay = (_a) => {
|
|
3533
3516
|
top: 0,
|
3534
3517
|
width: '100%',
|
3535
3518
|
zIndex: 3,
|
3536
|
-
}
|
3519
|
+
}, children: (_b = circularProgressProps === null || circularProgressProps === void 0 ? void 0 : circularProgressProps.Component) !== null && _b !== void 0 ? _b : (jsx(CircularProgress, Object.assign({ "aria-label": localization.noRecordsToDisplay, id: "mrt-progress" }, circularProgressProps))) }));
|
3537
3520
|
};
|
3538
3521
|
|
3539
3522
|
const MRT_CellActionMenu = (_a) => {
|
3540
3523
|
var _b, _c;
|
3541
3524
|
var { table } = _a, rest = __rest(_a, ["table"]);
|
3542
|
-
const { getState, options: { editDisplayMode, enableClickToCopy, enableEditing, icons: { ContentCopy, EditIcon }, localization, renderCellActionMenuItems, }, refs: { actionCellRef }, } = table;
|
3525
|
+
const { getState, options: { editDisplayMode, enableClickToCopy, enableEditing, icons: { ContentCopy, EditIcon }, localization, mrtTheme: { menuBackgroundColor }, renderCellActionMenuItems, }, refs: { actionCellRef }, } = table;
|
3543
3526
|
const { actionCell, density } = getState();
|
3544
3527
|
const cell = actionCell;
|
3545
3528
|
const { row } = cell;
|
3546
3529
|
const { column } = cell;
|
3547
3530
|
const { columnDef } = column;
|
3548
|
-
const theme = useTheme();
|
3549
|
-
const { menuBackgroundColor } = getMRTTheme(table, theme);
|
3550
3531
|
const handleClose = (event) => {
|
3551
3532
|
event === null || event === void 0 ? void 0 : event.stopPropagation();
|
3552
3533
|
table.setActionCell(null);
|
@@ -3798,7 +3779,7 @@ const MRT_ColumnPinningButtons = (_a) => {
|
|
3798
3779
|
const MRT_ShowHideColumnsMenuItems = (_a) => {
|
3799
3780
|
var _b;
|
3800
3781
|
var { allColumns, column, hoveredColumn, isNestedColumns, setHoveredColumn, table } = _a, rest = __rest(_a, ["allColumns", "column", "hoveredColumn", "isNestedColumns", "setHoveredColumn", "table"]);
|
3801
|
-
const { getState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, }, setColumnOrder, } = table;
|
3782
|
+
const { getState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, mrtTheme: { draggingBorderColor }, }, setColumnOrder, } = table;
|
3802
3783
|
const { columnOrder } = getState();
|
3803
3784
|
const { columnDef } = column;
|
3804
3785
|
const { columnDefType } = columnDef;
|
@@ -3845,7 +3826,7 @@ const MRT_ShowHideColumnsMenuItems = (_a) => {
|
|
3845
3826
|
return (jsxs(Fragment, { children: [jsx(MenuItem, 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
|
3846
3827
|
? `2px dashed ${theme.palette.grey[500]}`
|
3847
3828
|
: (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
|
3848
|
-
? `2px dashed ${
|
3829
|
+
? `2px dashed ${draggingBorderColor}`
|
3849
3830
|
: 'none', outlineOffset: '-2px', pl: `${(column.depth + 0.5) * 2}rem`, py: '6px' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: jsxs(Box, { sx: {
|
3850
3831
|
display: 'flex',
|
3851
3832
|
flexWrap: 'nowrap',
|
@@ -3866,7 +3847,7 @@ const MRT_ShowHideColumnsMenuItems = (_a) => {
|
|
3866
3847
|
|
3867
3848
|
const MRT_ShowHideColumnsMenu = (_a) => {
|
3868
3849
|
var { anchorEl, setAnchorEl, table } = _a, rest = __rest(_a, ["anchorEl", "setAnchorEl", "table"]);
|
3869
|
-
const { getAllColumns, getAllLeafColumns, getCenterLeafColumns, getIsAllColumnsVisible, getIsSomeColumnsPinned, getIsSomeColumnsVisible, getLeftLeafColumns, getRightLeafColumns, getState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, }, } = table;
|
3850
|
+
const { getAllColumns, getAllLeafColumns, getCenterLeafColumns, getIsAllColumnsVisible, getIsSomeColumnsPinned, getIsSomeColumnsVisible, getLeftLeafColumns, getRightLeafColumns, getState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, mrtTheme: { menuBackgroundColor }, }, } = table;
|
3870
3851
|
const { columnOrder, columnPinning, density } = getState();
|
3871
3852
|
const handleToggleAllColumns = (value) => {
|
3872
3853
|
getAllLeafColumns()
|
@@ -3894,8 +3875,6 @@ const MRT_ShowHideColumnsMenu = (_a) => {
|
|
3894
3875
|
]);
|
3895
3876
|
const isNestedColumns = allColumns.some((col) => col.columnDef.columnDefType === 'group');
|
3896
3877
|
const [hoveredColumn, setHoveredColumn] = useState(null);
|
3897
|
-
const theme = useTheme();
|
3898
|
-
const { menuBackgroundColor } = getMRTTheme(table, theme);
|
3899
3878
|
return (jsxs(Menu, Object.assign({ MenuListProps: {
|
3900
3879
|
dense: density === 'compact',
|
3901
3880
|
sx: {
|
@@ -4082,7 +4061,7 @@ const MRT_TopToolbar = ({ table, }) => {
|
|
4082
4061
|
const MRT_TablePaper = (_a) => {
|
4083
4062
|
var _b, _c;
|
4084
4063
|
var { table } = _a, rest = __rest(_a, ["table"]);
|
4085
|
-
const { getState, options: { enableBottomToolbar, enableTopToolbar, muiTablePaperProps, renderBottomToolbar, renderTopToolbar, }, refs: { tablePaperRef }, } = table;
|
4064
|
+
const { getState, options: { enableBottomToolbar, enableTopToolbar, mrtTheme: { baseBackgroundColor }, muiTablePaperProps, renderBottomToolbar, renderTopToolbar, }, refs: { tablePaperRef }, } = table;
|
4086
4065
|
const { isFullScreen } = getState();
|
4087
4066
|
const paperProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTablePaperProps, { table })), rest);
|
4088
4067
|
return (jsxs(Paper, Object.assign({ elevation: 2 }, paperProps, { ref: (ref) => {
|
@@ -4106,7 +4085,7 @@ const MRT_TablePaper = (_a) => {
|
|
4106
4085
|
width: '100vw',
|
4107
4086
|
zIndex: 999,
|
4108
4087
|
}
|
4109
|
-
: {})), paperProps === null || paperProps === void 0 ? void 0 : paperProps.style), sx: (theme) => (Object.assign({ backgroundColor:
|
4088
|
+
: {})), 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 &&
|
4110
4089
|
((_b = parseFromValuesOrFunc(renderTopToolbar, { table })) !== null && _b !== void 0 ? _b : (jsx(MRT_TopToolbar, { table: table }))), jsx(MRT_TableContainer, { table: table }), enableBottomToolbar &&
|
4111
4090
|
((_c = parseFromValuesOrFunc(renderBottomToolbar, { table })) !== null && _c !== void 0 ? _c : (jsx(MRT_BottomToolbar, { table: table })))] })));
|
4112
4091
|
};
|
@@ -4123,5 +4102,5 @@ const MaterialReactTable = (props) => {
|
|
4123
4102
|
return jsx(MRT_TablePaper, { table: table });
|
4124
4103
|
};
|
4125
4104
|
|
4126
|
-
export { MRT_ActionMenuItem, MRT_AggregationFns, MRT_BottomToolbar, MRT_ColumnActionMenu, MRT_ColumnPinningButtons, MRT_CopyButton, MRT_DefaultColumn, MRT_DefaultDisplayColumn, MRT_EditActionButtons, MRT_EditCellTextField, MRT_EditRowModal, MRT_ExpandAllButton, MRT_ExpandButton, MRT_FilterCheckbox, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FilterRangeFields, MRT_FilterRangeSlider, MRT_FilterTextField, MRT_GlobalFilterTextField, MRT_GrabHandleButton, MRT_LinearProgressBar, MRT_RowActionMenu, MRT_RowPinButton, MRT_SelectCheckbox, MRT_ShowHideColumnsButton, MRT_ShowHideColumnsMenu, MRT_ShowHideColumnsMenuItems, MRT_SortingFns, MRT_Table, MRT_TableBody, MRT_TableBodyCell, MRT_TableBodyCellValue, MRT_TableBodyRow, MRT_TableBodyRowGrabHandle, MRT_TableBodyRowPinButton, MRT_TableContainer, MRT_TableDetailPanel, MRT_TableFooter, MRT_TableFooterCell, MRT_TableFooterRow, MRT_TableHead, MRT_TableHeadCell, MRT_TableHeadCellColumnActionsButton, MRT_TableHeadCellFilterContainer, MRT_TableHeadCellFilterLabel, MRT_TableHeadCellGrabHandle, MRT_TableHeadCellResizeHandle, MRT_TableHeadCellSortLabel, MRT_TableHeadRow, MRT_TableLoadingOverlay, MRT_TablePagination, MRT_TablePaper, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleFullScreenButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable, Memo_MRT_TableBody, Memo_MRT_TableBodyCell, Memo_MRT_TableBodyRow, createMRTColumnHelper, createRow, defaultDisplayColumnProps, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnId, getDefaultColumnFilterFn, getDefaultColumnOrderIds,
|
4105
|
+
export { MRT_ActionMenuItem, MRT_AggregationFns, MRT_BottomToolbar, MRT_ColumnActionMenu, MRT_ColumnPinningButtons, MRT_CopyButton, MRT_DefaultColumn, MRT_DefaultDisplayColumn, MRT_EditActionButtons, MRT_EditCellTextField, MRT_EditRowModal, MRT_ExpandAllButton, MRT_ExpandButton, MRT_FilterCheckbox, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FilterRangeFields, MRT_FilterRangeSlider, MRT_FilterTextField, MRT_GlobalFilterTextField, MRT_GrabHandleButton, MRT_LinearProgressBar, MRT_RowActionMenu, MRT_RowPinButton, MRT_SelectCheckbox, MRT_ShowHideColumnsButton, MRT_ShowHideColumnsMenu, MRT_ShowHideColumnsMenuItems, MRT_SortingFns, MRT_Table, MRT_TableBody, MRT_TableBodyCell, MRT_TableBodyCellValue, MRT_TableBodyRow, MRT_TableBodyRowGrabHandle, MRT_TableBodyRowPinButton, MRT_TableContainer, MRT_TableDetailPanel, MRT_TableFooter, MRT_TableFooterCell, MRT_TableFooterRow, MRT_TableHead, MRT_TableHeadCell, MRT_TableHeadCellColumnActionsButton, MRT_TableHeadCellFilterContainer, MRT_TableHeadCellFilterLabel, MRT_TableHeadCellGrabHandle, MRT_TableHeadCellResizeHandle, MRT_TableHeadCellSortLabel, MRT_TableHeadRow, MRT_TableLoadingOverlay, MRT_TablePagination, MRT_TablePaper, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleFullScreenButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable, Memo_MRT_TableBody, Memo_MRT_TableBodyCell, Memo_MRT_TableBodyRow, createMRTColumnHelper, createRow, defaultDisplayColumnProps, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnId, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getIsRankingRows, getIsRowSelected, getLeadingDisplayColumnIds, getMRT_RowSelectionHandler, getMRT_Rows, getMRT_SelectAllHandler, getTrailingDisplayColumnIds, isCellEditable, mrtFilterOptions, openEditingCell, prepareColumns, rankGlobalFuzzy, reorderColumn, showRowActionsColumn, showRowDragColumn, showRowExpandColumn, showRowNumbersColumn, showRowPinningColumn, showRowSelectionColumn, showRowSpacerColumn, useMRT_ColumnVirtualizer, useMRT_Effects, useMRT_RowVirtualizer, useMRT_Rows, useMRT_TableInstance, useMRT_TableOptions, useMaterialReactTable };
|
4127
4106
|
//# sourceMappingURL=index.esm.js.map
|