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.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, pinnedRowIds = [], all) => {
336
- const { getBottomRows, getCenterRows, getPrePaginationRowModel, getRowModel, getState, getTopRows, options: { createDisplayMode, enablePagination, enableRowPinning, manualPagination, positionCreatingRow, rowPinningDisplayMode, }, } = table;
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) => !pinnedRowIds.includes(row.id)),
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 = () => ({ event, row, staticRowIndex = 0, table, }) => {
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 isCurrentRowChecked = getIsRowSelected({ row, table });
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.getToggleSelectedHandler()(event);
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, undefined, true);
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 (isCurrentRowChecked !== isLastIndexChecked) {
413
+ if (wasCurrentRowChecked !== isLastIndexChecked) {
430
414
  for (let i = start; i <= end; i++) {
431
- rows[i].toggleSelected(!isCurrentRowChecked);
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 (isStickySelection) {
443
- row.pin(!row.getIsPinned() && isCurrentRowChecked
444
- ? (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('bottom'))
445
- ? 'bottom'
446
- : 'top'
447
- : false);
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 = (table, theme) => {
616
+ const getMRTTheme = (mrtTheme, muiTheme) => {
619
617
  var _a;
620
- const themeOverrides = parseFromValuesOrFunc(table.options.mrtTheme, theme);
621
- const baseBackgroundColor = (_a = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.baseBackgroundColor) !== null && _a !== void 0 ? _a : (theme.palette.mode === 'dark'
622
- ? lighten(theme.palette.background.default, 0.05)
623
- : theme.palette.background.default);
624
- return Object.assign({ baseBackgroundColor, draggingBorderColor: theme.palette.primary.main, matchHighlightColor: theme.palette.mode === 'dark'
625
- ? darken(theme.palette.warning.dark, 0.25)
626
- : lighten(theme.palette.warning.light, 0.5), menuBackgroundColor: lighten(baseBackgroundColor, 0.07), pinnedRowBackgroundColor: alpha(theme.palette.primary.main, 0.1), selectedRowBackgroundColor: alpha(theme.palette.primary.main, 0.2) }, themeOverrides);
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 } = getMRTTheme(table, theme);
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
- ? getIsLastLeftPinnedColumn(table, column)
641
+ ? isPinned === 'left' && column.getIsLastColumn(isPinned)
643
642
  ? `-4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
644
- : getIsFirstRightPinnedColumn(column)
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
- ? `${getTotalRight(table, column)}px`
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, theme, }) => ({
690
+ const getCommonToolbarStyles = ({ table, }) => ({
692
691
  alignItems: 'flex-start',
693
- backgroundColor: getMRTTheme(table, theme).baseBackgroundColor,
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, enableRowPinning, localization, muiSelectAllCheckboxProps, muiSelectCheckboxProps, rowPinningDisplayMode, selectAllMode, }, refs: { lastSelectedRowId }, } = table;
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 = getMRT_RowSelectionHandler();
1013
- const onSelectAllChange = (event) => {
1014
- selectAllMode === 'all'
1015
- ? table.getToggleAllRowsSelectedHandler()(event)
1016
- : table.getToggleAllPageRowsSelectedHandler()(event);
1017
- if (isStickySelection) {
1018
- table.setRowPinning({ bottom: [], top: [] });
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
- row
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, pinnedRowIds = []) => {
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, pinnedRowIds), [
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: (theme) => getMRTTheme(table, theme).matchHighlightColor,
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(column, table);
1939
- const isLastColumn = getIsLastColumn(column, table);
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, pinnedRowIds);
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: 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 ? (jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : footerGroup.headers).map((footerOrVirtualFooter, staticColumnIndex) => {
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: getMRTTheme(table, theme).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'
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: { lastSelectedRowId, tablePaperRef }, } = table;
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().rows.length;
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: (theme) => ({
3506
+ return (jsx(Box, { sx: {
3524
3507
  alignItems: 'center',
3525
- backgroundColor: alpha(getMRTTheme(table, theme).baseBackgroundColor, 0.5),
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
- }), 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))) }));
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 ${getMRTTheme(table, theme).draggingBorderColor}`
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: 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 &&
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, getIsFirstColumn, getIsFirstRightPinnedColumn, getIsLastColumn, getIsLastLeftPinnedColumn, getIsRankingRows, getIsRowSelected, getLeadingDisplayColumnIds, getMRT_RowSelectionHandler, getMRT_Rows, getTotalRight, 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 };
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