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.
Files changed (30) hide show
  1. package/dist/index.d.ts +18 -20
  2. package/dist/index.esm.js +104 -125
  3. package/dist/index.esm.js.map +1 -1
  4. package/dist/index.js +104 -129
  5. package/dist/index.js.map +1 -1
  6. package/package.json +21 -21
  7. package/src/components/body/MRT_TableBody.tsx +1 -1
  8. package/src/components/body/MRT_TableBodyCell.tsx +4 -6
  9. package/src/components/body/MRT_TableBodyCellValue.tsx +5 -4
  10. package/src/components/body/MRT_TableBodyRow.tsx +5 -7
  11. package/src/components/body/MRT_TableDetailPanel.tsx +2 -4
  12. package/src/components/footer/MRT_TableFooterRow.tsx +6 -3
  13. package/src/components/head/MRT_TableHeadCell.tsx +2 -3
  14. package/src/components/head/MRT_TableHeadRow.tsx +7 -3
  15. package/src/components/inputs/MRT_SelectCheckbox.tsx +12 -20
  16. package/src/components/menus/MRT_CellActionMenu.tsx +1 -5
  17. package/src/components/menus/MRT_ColumnActionMenu.tsx +1 -5
  18. package/src/components/menus/MRT_FilterOptionMenu.tsx +1 -5
  19. package/src/components/menus/MRT_RowActionMenu.tsx +1 -5
  20. package/src/components/menus/MRT_ShowHideColumnsMenu.tsx +1 -5
  21. package/src/components/menus/MRT_ShowHideColumnsMenuItems.tsx +3 -2
  22. package/src/components/table/MRT_TableLoadingOverlay.tsx +8 -8
  23. package/src/components/table/MRT_TablePaper.tsx +2 -2
  24. package/src/components/toolbar/MRT_ToolbarAlertBanner.tsx +6 -6
  25. package/src/hooks/useMRT_Rows.ts +1 -2
  26. package/src/hooks/useMRT_TableOptions.ts +4 -0
  27. package/src/types.ts +15 -13
  28. package/src/utils/column.utils.ts +0 -48
  29. package/src/utils/row.utils.ts +59 -24
  30. 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, pinnedRowIds = [], all) => {
426
- const { getBottomRows, getCenterRows, getPrePaginationRowModel, getRowModel, getState, getTopRows, options: { createDisplayMode, enablePagination, enableRowPinning, manualPagination, positionCreatingRow, rowPinningDisplayMode, }, } = table;
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) => !pinnedRowIds.includes(row.id)),
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 = () => ({ event, row, staticRowIndex = 0, table, }) => {
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 isCurrentRowChecked = getIsRowSelected({ row, table });
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.getToggleSelectedHandler()(event);
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, undefined, true);
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 (isCurrentRowChecked !== isLastIndexChecked) {
503
+ if (wasCurrentRowChecked !== isLastIndexChecked) {
520
504
  for (let i = start; i <= end; i++) {
521
- rows[i].toggleSelected(!isCurrentRowChecked);
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 (isStickySelection) {
533
- row.pin(!row.getIsPinned() && isCurrentRowChecked
534
- ? (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('bottom'))
535
- ? 'bottom'
536
- : 'top'
537
- : false);
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 = (table, theme) => {
706
+ const getMRTTheme = (mrtTheme, muiTheme) => {
709
707
  var _a;
710
- const themeOverrides = parseFromValuesOrFunc(table.options.mrtTheme, theme);
711
- const baseBackgroundColor = (_a = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.baseBackgroundColor) !== null && _a !== void 0 ? _a : (theme.palette.mode === 'dark'
712
- ? styles.lighten(theme.palette.background.default, 0.05)
713
- : theme.palette.background.default);
714
- return Object.assign({ baseBackgroundColor, draggingBorderColor: theme.palette.primary.main, matchHighlightColor: theme.palette.mode === 'dark'
715
- ? styles.darken(theme.palette.warning.dark, 0.25)
716
- : styles.lighten(theme.palette.warning.light, 0.5), menuBackgroundColor: styles.lighten(baseBackgroundColor, 0.07), pinnedRowBackgroundColor: styles.alpha(theme.palette.primary.main, 0.1), selectedRowBackgroundColor: styles.alpha(theme.palette.primary.main, 0.2) }, themeOverrides);
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 } = getMRTTheme(table, theme);
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
- ? getIsLastLeftPinnedColumn(table, column)
731
+ ? isPinned === 'left' && column.getIsLastColumn(isPinned)
733
732
  ? `-4px 0 4px -4px ${styles.alpha(theme.palette.grey[700], 0.5)} inset`
734
- : getIsFirstRightPinnedColumn(column)
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
- ? `${getTotalRight(table, column)}px`
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, theme, }) => ({
780
+ const getCommonToolbarStyles = ({ table, }) => ({
782
781
  alignItems: 'flex-start',
783
- backgroundColor: getMRTTheme(table, theme).baseBackgroundColor,
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, enableRowPinning, localization, muiSelectAllCheckboxProps, muiSelectCheckboxProps, rowPinningDisplayMode, selectAllMode, }, refs: { lastSelectedRowId }, } = table;
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 = getMRT_RowSelectionHandler();
1103
- const onSelectAllChange = (event) => {
1104
- selectAllMode === 'all'
1105
- ? table.getToggleAllRowsSelectedHandler()(event)
1106
- : table.getToggleAllPageRowsSelectedHandler()(event);
1107
- if (isStickySelection) {
1108
- table.setRowPinning({ bottom: [], top: [] });
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
- row
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, pinnedRowIds = []) => {
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, pinnedRowIds), [
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: (theme) => getMRTTheme(table, theme).matchHighlightColor,
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(column, table);
2029
- const isLastColumn = getIsLastColumn(column, table);
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, pinnedRowIds);
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: getMRTTheme(table, theme).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) => {
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: getMRTTheme(table, theme).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'
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: { lastSelectedRowId, tablePaperRef }, } = table;
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().rows.length;
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: (theme) => ({
3596
+ return (jsxRuntime.jsx(Box__default["default"], { sx: {
3614
3597
  alignItems: 'center',
3615
- backgroundColor: styles.alpha(getMRTTheme(table, theme).baseBackgroundColor, 0.5),
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
- }), 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))) }));
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 ${getMRTTheme(table, theme).draggingBorderColor}`
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: getMRTTheme(table, theme).baseBackgroundColor, backgroundImage: 'unset', overflow: 'hidden', transition: 'all 100ms ease-in-out' }, parseFromValuesOrFunc(paperProps === null || paperProps === void 0 ? void 0 : paperProps.sx, theme))), children: [enableTopToolbar &&
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.getTotalRight = getTotalRight;
4275
+ exports.getMRT_SelectAllHandler = getMRT_SelectAllHandler;
4301
4276
  exports.getTrailingDisplayColumnIds = getTrailingDisplayColumnIds;
4302
4277
  exports.isCellEditable = isCellEditable;
4303
4278
  exports.mrtFilterOptions = mrtFilterOptions;