material-react-table 2.9.2 → 2.11.0

package/src/components/table/MRT_TableLoadingOverlay.tsx

@@ -7,14 +7,15 @@ import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { getMRTTheme } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends CircularProgressProps {
+export interface MRT_TableLoadingOverlayProps<TData extends MRT_RowData>
+  extends CircularProgressProps {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_TableLoadingOverlay = <TData extends MRT_RowData>({
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_TableLoadingOverlayProps<TData>) => {
   const {
     options: { localization, muiCircularProgressProps },
   } = table;
@@ -41,14 +42,16 @@ export const MRT_TableLoadingOverlay = <TData extends MRT_RowData>({
         right: 0,
         top: 0,
         width: '100%',
-        zIndex: 2,
+        zIndex: 3,
       })}
     >
-      <CircularProgress
-        aria-label={localization.noRecordsToDisplay}
-        id="mrt-progress"
-        {...circularProgressProps}
-      />
+      {circularProgressProps?.Component ?? (
+        <CircularProgress
+          aria-label={localization.noRecordsToDisplay}
+          id="mrt-progress"
+          {...circularProgressProps}
+        />
+      )}
     </Box>
   );
 };

package/src/components/table/MRT_TablePaper.tsx

@@ -6,14 +6,15 @@ import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_BottomToolbar } from '../toolbar/MRT_BottomToolbar';
 import { MRT_TopToolbar } from '../toolbar/MRT_TopToolbar';
 
-interface Props<TData extends MRT_RowData> extends PaperProps {
+export interface MRT_TablePaperProps<TData extends MRT_RowData>
+  extends PaperProps {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_TablePaper = <TData extends MRT_RowData>({
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_TablePaperProps<TData>) => {
   const {
     getState,
     options: {

package/src/components/toolbar/MRT_BottomToolbar.tsx

@@ -9,14 +9,15 @@ import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { getCommonToolbarStyles } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends BoxProps {
+export interface MRT_BottomToolbarProps<TData extends MRT_RowData>
+  extends BoxProps {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_BottomToolbar = <TData extends MRT_RowData>({
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_BottomToolbarProps<TData>) => {
   const {
     getState,
     options: {

package/src/components/toolbar/MRT_LinearProgressBar.tsx

@@ -5,7 +5,8 @@ import LinearProgress, {
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends LinearProgressProps {
+export interface MRT_LinearProgressBarProps<TData extends MRT_RowData>
+  extends LinearProgressProps {
   isTopToolbar: boolean;
   table: MRT_TableInstance<TData>;
 }
@@ -14,7 +15,7 @@ export const MRT_LinearProgressBar = <TData extends MRT_RowData>({
   isTopToolbar,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_LinearProgressBarProps<TData>) => {
   const {
     getState,
     options: { muiLinearProgressProps },

package/src/components/toolbar/MRT_TablePagination.tsx

@@ -15,7 +15,7 @@ import { parseFromValuesOrFunc } from '../../utils/utils';
 
 const defaultRowsPerPage = [5, 10, 15, 20, 25, 30, 50, 100];
 
-interface Props<TData extends MRT_RowData>
+export interface MRT_TablePaginationProps<TData extends MRT_RowData>
   extends Partial<
     PaginationProps & {
       SelectProps?: Partial<SelectProps>;
@@ -32,7 +32,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
   position = 'bottom',
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_TablePaginationProps<TData>) => {
   const theme = useTheme();
   const isMobile = useMediaQuery('(max-width: 720px)');
 

package/src/components/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -2,6 +2,7 @@ import { Fragment, useMemo } from 'react';
 import Alert, { type AlertProps } from '@mui/material/Alert';
 import AlertTitle from '@mui/material/AlertTitle';
 import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
 import Chip from '@mui/material/Chip';
 import Collapse from '@mui/material/Collapse';
 import Stack from '@mui/material/Stack';
@@ -9,7 +10,8 @@ import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
 
-interface Props<TData extends MRT_RowData> extends AlertProps {
+export interface MRT_ToolbarAlertBannerProps<TData extends MRT_RowData>
+  extends AlertProps {
   stackAlertBanner?: boolean;
   table: MRT_TableInstance<TData>;
 }
@@ -18,21 +20,23 @@ export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
   stackAlertBanner,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_ToolbarAlertBannerProps<TData>) => {
   const {
+    getFilteredSelectedRowModel,
     getPrePaginationRowModel,
     getState,
     options: {
       enableRowSelection,
       enableSelectAll,
       localization,
+      manualPagination,
       muiToolbarAlertBannerChipProps,
       muiToolbarAlertBannerProps,
       positionToolbarAlertBanner,
       renderToolbarAlertBannerContent,
       rowCount,
     },
-    refs: { tablePaperRef },
+    refs: { lastSelectedRowId, tablePaperRef },
   } = table;
   const { density, grouping, rowSelection, showAlertBanner } = getState();
 
@@ -47,20 +51,33 @@ export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
     table,
   });
 
+  const totalRowCount = rowCount ?? getPrePaginationRowModel().rows.length;
+
   const selectedRowCount = useMemo(
-    () => Object.values(rowSelection).filter(Boolean).length,
-    [rowSelection],
+    () =>
+      manualPagination
+        ? Object.values(rowSelection).filter(Boolean).length
+        : getFilteredSelectedRowModel().rows.length,
+    [rowSelection, totalRowCount, manualPagination],
   );
-
   const selectedAlert =
-    selectedRowCount > 0
-      ? localization.selectedCountOfRowCountRowsSelected
+    selectedRowCount > 0 ? (
+      <Stack alignItems="center" direction="row" gap="16px">
+        {localization.selectedCountOfRowCountRowsSelected
           ?.replace('{selectedCount}', selectedRowCount.toLocaleString())
-          ?.replace(
-            '{rowCount}',
-            (rowCount ?? getPrePaginationRowModel().rows.length).toString(),
-          )
-      : null;
+          ?.replace('{rowCount}', totalRowCount.toString())}
+        <Button
+          onClick={() => {
+            table.toggleAllRowsSelected(false);
+            lastSelectedRowId.current = null;
+          }}
+          size="small"
+          sx={{ p: '2px' }}
+        >
+          {localization.clearSelection}
+        </Button>
+      </Stack>
+    ) : null;
 
   const groupedAlert =
     grouping.length > 0 ? (

package/src/components/toolbar/MRT_ToolbarDropZone.tsx

@@ -6,14 +6,15 @@ import { alpha } from '@mui/material/styles';
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends BoxProps {
+export interface MRT_ToolbarDropZoneProps<TData extends MRT_RowData>
+  extends BoxProps {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_ToolbarDropZone = <TData extends MRT_RowData>({
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_ToolbarDropZoneProps<TData>) => {
   const {
     getState,
     options: { enableGrouping, localization },

package/src/components/toolbar/MRT_ToolbarInternalButtons.tsx

@@ -7,14 +7,15 @@ import { MRT_ToggleFiltersButton } from '../buttons/MRT_ToggleFiltersButton';
 import { MRT_ToggleFullScreenButton } from '../buttons/MRT_ToggleFullScreenButton';
 import { MRT_ToggleGlobalFilterButton } from '../buttons/MRT_ToggleGlobalFilterButton';
 
-interface Props<TData extends MRT_RowData> extends BoxProps {
+export interface MRT_ToolbarInternalButtonsProps<TData extends MRT_RowData>
+  extends BoxProps {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_ToolbarInternalButtons = <TData extends MRT_RowData>({
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_ToolbarInternalButtonsProps<TData>) => {
   const {
     options: {
       columnFilterDisplayMode,

package/src/components/toolbar/MRT_TopToolbar.tsx

@@ -10,13 +10,13 @@ import { getCommonToolbarStyles } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_GlobalFilterTextField } from '../inputs/MRT_GlobalFilterTextField';
 
-interface Props<TData extends MRT_RowData> {
+export interface MRT_TopToolbarProps<TData extends MRT_RowData> {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_TopToolbar = <TData extends MRT_RowData>({
   table,
-}: Props<TData>) => {
+}: MRT_TopToolbarProps<TData>) => {
   const {
     getState,
     options: {

package/src/hooks/display-columns/getMRT_RowActionsColumnDef.tsx

@@ -4,18 +4,11 @@ import {
   type MRT_RowData,
   type MRT_StatefulTableOptions,
 } from '../../types';
-import {
-  defaultDisplayColumnProps,
-  showRowActionsColumn,
-} from '../../utils/displayColumn.utils';
+import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
 
 export const getMRT_RowActionsColumnDef = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
 ): MRT_ColumnDef<TData> | null => {
-  if (!showRowActionsColumn(tableOptions)) {
-    return null;
-  }
-
   return {
     Cell: ({ cell, row, staticRowIndex, table }) => (
       <MRT_ToggleRowActionMenuButton

package/src/hooks/display-columns/getMRT_RowDragColumnDef.tsx

@@ -5,18 +5,11 @@ import {
   type MRT_RowData,
   type MRT_StatefulTableOptions,
 } from '../../types';
-import {
-  defaultDisplayColumnProps,
-  showRowDragColumn,
-} from '../../utils/displayColumn.utils';
+import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
 
 export const getMRT_RowDragColumnDef = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
 ): MRT_ColumnDef<TData> | null => {
-  if (!showRowDragColumn(tableOptions)) {
-    return null;
-  }
-
   return {
     Cell: ({ row, rowRef, table }) => (
       <MRT_TableBodyRowGrabHandle

package/src/hooks/display-columns/getMRT_RowExpandColumnDef.tsx

@@ -8,19 +8,12 @@ import {
   type MRT_RowData,
   type MRT_StatefulTableOptions,
 } from '../../types';
-import {
-  defaultDisplayColumnProps,
-  showRowExpandColumn,
-} from '../../utils/displayColumn.utils';
+import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
 import { getCommonTooltipProps } from '../../utils/style.utils';
 
 export const getMRT_RowExpandColumnDef = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
 ): MRT_ColumnDef<TData> | null => {
-  if (!showRowExpandColumn(tableOptions)) {
-    return null;
-  }
-
   const {
     defaultColumn,
     enableExpandAll,

package/src/hooks/display-columns/getMRT_RowNumbersColumnDef.tsx

@@ -3,18 +3,11 @@ import {
   type MRT_RowData,
   type MRT_StatefulTableOptions,
 } from '../../types';
-import {
-  defaultDisplayColumnProps,
-  showRowNumbersColumn,
-} from '../../utils/displayColumn.utils';
+import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
 
 export const getMRT_RowNumbersColumnDef = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
 ): MRT_ColumnDef<TData> | null => {
-  if (!showRowNumbersColumn(tableOptions)) {
-    return null;
-  }
-
   const { localization, rowNumberDisplayMode } = tableOptions;
   const {
     pagination: { pageIndex, pageSize },

package/src/hooks/display-columns/getMRT_RowPinningColumnDef.tsx

@@ -4,18 +4,11 @@ import {
   type MRT_RowData,
   type MRT_StatefulTableOptions,
 } from '../../types';
-import {
-  defaultDisplayColumnProps,
-  showRowPinningColumn,
-} from '../../utils/displayColumn.utils';
+import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
 
 export const getMRT_RowPinningColumnDef = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
 ): MRT_ColumnDef<TData> | null => {
-  if (!showRowPinningColumn(tableOptions)) {
-    return null;
-  }
-
   return {
     Cell: ({ row, table }) => (
       <MRT_TableBodyRowPinButton row={row} table={table} />

package/src/hooks/display-columns/getMRT_RowSelectColumnDef.tsx

@@ -4,18 +4,11 @@ import {
   type MRT_RowData,
   type MRT_StatefulTableOptions,
 } from '../../types';
-import {
-  defaultDisplayColumnProps,
-  showRowSelectionColumn,
-} from '../../utils/displayColumn.utils';
+import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
 
 export const getMRT_RowSelectColumnDef = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
 ): MRT_ColumnDef<TData> | null => {
-  if (!showRowSelectionColumn(tableOptions)) {
-    return null;
-  }
-
   const { enableMultiRowSelection, enableSelectAll } = tableOptions;
 
   return {

package/src/hooks/display-columns/getMRT_RowSpacerColumnDef.tsx

@@ -4,10 +4,7 @@ import {
   type MRT_RowData,
   type MRT_StatefulTableOptions,
 } from '../../types';
-import {
-  defaultDisplayColumnProps,
-  showRowSpacerColumn,
-} from '../../utils/displayColumn.utils';
+import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
 
 const blankColProps = {
   children: null,
@@ -21,10 +18,6 @@ const blankColProps = {
 export const getMRT_RowSpacerColumnDef = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
 ): MRT_ColumnDef<TData> | null => {
-  if (!showRowSpacerColumn(tableOptions)) {
-    return null;
-  }
-
   return {
     ...defaultDisplayColumnProps({
       id: 'mrt-row-spacer',

package/src/hooks/useMRT_Effects.ts

@@ -4,6 +4,7 @@ import {
   type MRT_SortingState,
   type MRT_TableInstance,
 } from '../types';
+import { getDefaultColumnOrderIds } from '../utils/displayColumn.utils';
 import { getCanRankRows } from '../utils/row.utils';
 
 export const useMRT_Effects = <TData extends MRT_RowData>(
@@ -16,6 +17,7 @@ export const useMRT_Effects = <TData extends MRT_RowData>(
     options: { enablePagination, enableRowPinning, rowCount },
   } = table;
   const {
+    columnOrder,
     density,
     globalFilter,
     isFullScreen,
@@ -25,10 +27,10 @@ export const useMRT_Effects = <TData extends MRT_RowData>(
     sorting,
   } = getState();
 
+  const totalColumnCount = table.options.columns.length;
   const totalRowCount = rowCount ?? getPrePaginationRowModel().rows.length;
 
   const rerender = useReducer(() => ({}), {})[1];
-  const isMounted = useRef(false);
   const initialBodyHeight = useRef<string>();
   const previousTop = useRef<number>();
 
@@ -38,11 +40,12 @@ export const useMRT_Effects = <TData extends MRT_RowData>(
     }
   }, []);
 
+  //hide scrollbars when table is in full screen mode, preserve body scroll position after full screen exit
   useEffect(() => {
-    if (isMounted && typeof window !== 'undefined') {
+    if (typeof window !== 'undefined') {
       if (isFullScreen) {
         previousTop.current = document.body.getBoundingClientRect().top; //save scroll position
-        document.body.style.height = '100vh'; //hide page scrollbars when table is in full screen mode
+        document.body.style.height = '100dvh'; //hide page scrollbars when table is in full screen mode
       } else {
         document.body.style.height = initialBodyHeight.current as string;
         if (!previousTop.current) return;
@@ -53,9 +56,15 @@ export const useMRT_Effects = <TData extends MRT_RowData>(
         });
       }
     }
-    isMounted.current = true;
   }, [isFullScreen]);
 
+  //recalculate column order when columns change or features are toggled on/off
+  useEffect(() => {
+    if (totalColumnCount !== columnOrder.length) {
+      table.setColumnOrder(getDefaultColumnOrderIds(table.options));
+    }
+  }, [totalColumnCount]);
+
   //if page index is out of bounds, set it to the last page
   useEffect(() => {
     if (!enablePagination || isLoading || showSkeletons) return;
@@ -83,6 +92,7 @@ export const useMRT_Effects = <TData extends MRT_RowData>(
     }
   }, [globalFilter]);
 
+  //fix pinned row top style when density changes
   useEffect(() => {
     if (enableRowPinning && getIsSomeRowsPinned()) {
       setTimeout(() => {

package/src/hooks/useMRT_Rows.ts

@@ -1,36 +1,19 @@
 import { useMemo } from 'react';
-import { rankGlobalFuzzy } from '../fns/sortingFns';
 import {
   type MRT_Row,
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../types';
-import { getCanRankRows } from '../utils/row.utils';
+import { getMRT_Rows } from '../utils/row.utils';
 
 export const useMRT_Rows = <TData extends MRT_RowData>(
   table: MRT_TableInstance<TData>,
   pinnedRowIds: string[] = [],
 ): MRT_Row<TData>[] => {
   const {
-    getBottomRows,
-    getCenterRows,
-    getPrePaginationRowModel,
     getRowModel,
     getState,
-    getTopRows,
-    options: {
-      createDisplayMode,
-      enableGlobalFilterRankedResults,
-      enablePagination,
-      enableRowPinning,
-      manualExpanding,
-      manualFiltering,
-      manualGrouping,
-      manualPagination,
-      manualSorting,
-      positionCreatingRow,
-      rowPinningDisplayMode,
-    },
+    options: { data, enableGlobalFilterRankedResults, positionCreatingRow },
   } = table;
   const {
     creatingRow,
@@ -41,73 +24,22 @@ export const useMRT_Rows = <TData extends MRT_RowData>(
     sorting,
   } = getState();
 
-  const shouldRankRows = useMemo(
-    () =>
-      getCanRankRows(table) &&
-      !Object.values(sorting).some(Boolean) &&
-      globalFilter,
+  const rows = useMemo(
+    () => getMRT_Rows(table, pinnedRowIds),
     [
+      creatingRow,
+      data,
       enableGlobalFilterRankedResults,
       expanded,
+      getRowModel().rows,
       globalFilter,
-      manualExpanding,
-      manualFiltering,
-      manualGrouping,
-      manualSorting,
+      pagination.pageIndex,
+      pagination.pageSize,
+      positionCreatingRow,
+      rowPinning,
       sorting,
     ],
   );
 
-  const rows = useMemo(() => {
-    let rows: MRT_Row<TData>[] = [];
-    if (!shouldRankRows) {
-      rows =
-        !enableRowPinning || rowPinningDisplayMode?.includes('sticky')
-          ? getRowModel().rows
-          : getCenterRows();
-    } else {
-      rows = getPrePaginationRowModel().rows.sort((a, b) =>
-        rankGlobalFuzzy(a, b),
-      );
-      if (enablePagination && !manualPagination) {
-        const start = pagination.pageIndex * pagination.pageSize;
-        rows = rows.slice(start, start + pagination.pageSize);
-      }
-    }
-    if (enableRowPinning && rowPinningDisplayMode?.includes('sticky')) {
-      rows = [
-        ...getTopRows().filter((row) => !pinnedRowIds.includes(row.id)),
-        ...rows,
-        ...getBottomRows().filter((row) => !pinnedRowIds.includes(row.id)),
-      ];
-    }
-    if (
-      positionCreatingRow !== undefined &&
-      creatingRow &&
-      createDisplayMode === 'row'
-    ) {
-      const creatingRowIndex = !isNaN(+positionCreatingRow)
-        ? +positionCreatingRow
-        : positionCreatingRow === 'top'
-          ? 0
-          : rows.length;
-      rows = [
-        ...rows.slice(0, creatingRowIndex),
-        creatingRow,
-        ...rows.slice(creatingRowIndex),
-      ];
-    }
-
-    return rows;
-  }, [
-    creatingRow,
-    pagination.pageIndex,
-    pagination.pageSize,
-    positionCreatingRow,
-    rowPinning,
-    shouldRankRows ? getPrePaginationRowModel().rows : getRowModel().rows,
-    shouldRankRows,
-  ]);
-
   return rows;
 };