material-react-table 2.11.1 → 2.11.3

package/src/components/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -7,6 +7,7 @@ import Chip from '@mui/material/Chip';
 import Collapse from '@mui/material/Collapse';
 import Stack from '@mui/material/Stack';
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { getMRT_SelectAllHandler } from '../../utils/row.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
 
@@ -36,7 +37,7 @@ export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
       renderToolbarAlertBannerContent,
       rowCount,
     },
-    refs: { lastSelectedRowId, tablePaperRef },
+    refs: { tablePaperRef },
   } = table;
   const { density, grouping, rowSelection, showAlertBanner } = getState();
 
@@ -51,7 +52,7 @@ export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
     table,
   });
 
-  const totalRowCount = rowCount ?? getPrePaginationRowModel().rows.length;
+  const totalRowCount = rowCount ?? getPrePaginationRowModel().flatRows.length;
 
   const selectedRowCount = useMemo(
     () =>
@@ -67,10 +68,9 @@ export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
           ?.replace('{selectedCount}', selectedRowCount.toLocaleString())
           ?.replace('{rowCount}', totalRowCount.toString())}
         <Button
-          onClick={() => {
-            table.toggleAllRowsSelected(false);
-            lastSelectedRowId.current = null;
-          }}
+          onClick={(event) =>
+            getMRT_SelectAllHandler({ table })(event, false, true)
+          }
           size="small"
           sx={{ p: '2px' }}
         >

package/src/hooks/useMRT_Rows.ts

@@ -8,7 +8,6 @@ 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 {
     getRowModel,
@@ -25,7 +24,7 @@ export const useMRT_Rows = <TData extends MRT_RowData>(
   } = getState();
 
   const rows = useMemo(
-    () => getMRT_Rows(table, pinnedRowIds),
+    () => getMRT_Rows(table),
     [
       creatingRow,
       data,

package/src/hooks/useMRT_TableOptions.ts

@@ -21,6 +21,7 @@ import {
   type MRT_RowData,
   type MRT_TableOptions,
 } from '../types';
+import { getMRTTheme } from '../utils/style.utils';
 
 export const MRT_DefaultColumn = {
   filterVariant: 'text',
@@ -96,6 +97,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
   manualGrouping,
   manualPagination,
   manualSorting,
+  mrtTheme,
   paginationDisplayMode = 'default',
   positionActionsColumn = 'first',
   positionCreatingRow = 'top',
@@ -120,6 +122,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
     }),
     [localization],
   );
+  mrtTheme = useMemo(() => getMRTTheme(mrtTheme, theme), [mrtTheme, theme]);
   aggregationFns = useMemo(
     () => ({ ...MRT_AggregationFns, ...aggregationFns }),
     [],
@@ -241,6 +244,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
     manualGrouping,
     manualPagination,
     manualSorting,
+    mrtTheme,
     paginationDisplayMode,
     positionActionsColumn,
     positionCreatingRow,

package/src/types.ts

@@ -1,5 +1,4 @@
 import {
-  type CSSProperties,
   type Dispatch,
   type MutableRefObject,
   type ReactNode,
@@ -257,12 +256,12 @@ export interface MRT_Localization {
 }
 
 export interface MRT_Theme {
-  baseBackgroundColor?: CSSProperties['backgroundColor'];
-  draggingBorderColor?: CSSProperties['borderColor'];
-  matchHighlightColor?: CSSProperties['backgroundColor'];
-  menuBackgroundColor?: CSSProperties['backgroundColor'];
-  pinnedRowBackgroundColor?: CSSProperties['backgroundColor'];
-  selectedRowBackgroundColor?: CSSProperties['backgroundColor'];
+  baseBackgroundColor: string;
+  draggingBorderColor: string;
+  matchHighlightColor: string;
+  menuBackgroundColor: string;
+  pinnedRowBackgroundColor: string;
+  selectedRowBackgroundColor: string;
 }
 
 export interface MRT_RowModel<TData extends MRT_RowData> {
@@ -348,11 +347,14 @@ export type MRT_TableInstance<TData extends MRT_RowData> = Omit<
   setShowToolbarDropZone: Dispatch<SetStateAction<boolean>>;
 };
 
-export type MRT_DefinedTableOptions<TData extends MRT_RowData> =
-  MRT_TableOptions<TData> & {
-    icons: MRT_Icons;
-    localization: MRT_Localization;
-  };
+export type MRT_DefinedTableOptions<TData extends MRT_RowData> = Omit<
+  MRT_TableOptions<TData>,
+  'icons' | 'localization' | 'mrtTheme'
+> & {
+  icons: MRT_Icons;
+  localization: MRT_Localization;
+  mrtTheme: Required<MRT_Theme>;
+};
 
 export type MRT_StatefulTableOptions<TData extends MRT_RowData> =
   MRT_DefinedTableOptions<TData> & {
@@ -914,7 +916,7 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
    * @link https://www.material-react-table.com/docs/guides/memoize-components
    */
   memoMode?: 'cells' | 'rows' | 'table-body';
-  mrtTheme?: ((theme: Theme) => MRT_Theme) | MRT_Theme;
+  mrtTheme?: ((theme: Theme) => Partial<MRT_Theme>) | Partial<MRT_Theme>;
   muiBottomToolbarProps?:
     | ((props: { table: MRT_TableInstance<TData> }) => BoxProps)
     | BoxProps;

package/src/utils/column.utils.ts

@@ -7,7 +7,6 @@ import {
   type MRT_DefinedTableOptions,
   type MRT_FilterOption,
   type MRT_RowData,
-  type MRT_TableInstance,
 } from '../types';
 
 export const getColumnId = <TData extends MRT_RowData>(
@@ -122,50 +121,3 @@ export const getDefaultColumnFilterFn = <TData extends MRT_RowData>(
     return 'equals';
   return 'fuzzy';
 };
-
-export const getIsFirstColumn = <TData extends MRT_RowData>(
-  column: MRT_Column<TData>,
-  table: MRT_TableInstance<TData>,
-) => {
-  const leftColumns = table.getLeftVisibleLeafColumns();
-  return leftColumns.length
-    ? leftColumns[0].id === column.id
-    : table.getVisibleLeafColumns()[0].id === column.id;
-};
-
-export const getIsLastColumn = <TData extends MRT_RowData>(
-  column: MRT_Column<TData>,
-  table: MRT_TableInstance<TData>,
-) => {
-  const rightColumns = table.getRightVisibleLeafColumns();
-  const columns = table.getVisibleLeafColumns();
-  return rightColumns.length
-    ? rightColumns[rightColumns.length - 1].id === column.id
-    : columns[columns.length - 1].id === column.id;
-};
-
-export const getIsLastLeftPinnedColumn = <TData extends MRT_RowData>(
-  table: MRT_TableInstance<TData>,
-  column: MRT_Column<TData>,
-) => {
-  return (
-    column.getIsPinned() === 'left' &&
-    table.getLeftLeafHeaders().length - 1 === column.getPinnedIndex()
-  );
-};
-
-export const getIsFirstRightPinnedColumn = <TData extends MRT_RowData>(
-  column: MRT_Column<TData>,
-) => {
-  return column.getIsPinned() === 'right' && column.getPinnedIndex() === 0;
-};
-
-export const getTotalRight = <TData extends MRT_RowData>(
-  table: MRT_TableInstance<TData>,
-  column: MRT_Column<TData>,
-) => {
-  return table
-    .getRightLeafHeaders()
-    .slice(column.getPinnedIndex() + 1)
-    .reduce((acc, col) => acc + col.getSize(), 0);
-};

package/src/utils/row.utils.ts

@@ -9,11 +9,9 @@ import { parseFromValuesOrFunc } from './utils';
 
 export const getMRT_Rows = <TData extends MRT_RowData>(
   table: MRT_TableInstance<TData>,
-  pinnedRowIds: string[] = [],
   all?: boolean,
 ): MRT_Row<TData>[] => {
   const {
-    getBottomRows,
     getCenterRows,
     getPrePaginationRowModel,
     getRowModel,
@@ -41,6 +39,7 @@ export const getMRT_Rows = <TData extends MRT_RowData>(
           : getRowModel().rows
         : getCenterRows();
   } else {
+    // fuzzy ranking adjustments
     rows = getPrePaginationRowModel().rows.sort((a, b) =>
       rankGlobalFuzzy(a, b),
     );
@@ -48,14 +47,23 @@ export const getMRT_Rows = <TData extends MRT_RowData>(
       const start = pagination.pageIndex * pagination.pageSize;
       rows = rows.slice(start, start + pagination.pageSize);
     }
+    if (enableRowPinning && !rowPinningDisplayMode?.includes('sticky')) {
+      // "re-center-ize" the rows (no top or bottom pinned rows unless sticky)
+      rows = rows.filter((row) => !row.getIsPinned());
+    }
   }
+  // row pinning adjustments
   if (enableRowPinning && rowPinningDisplayMode?.includes('sticky')) {
+    const centerPinnedRowIds = rows
+      .filter((row) => row.getIsPinned())
+      .map((r) => r.id);
+
     rows = [
-      ...getTopRows().filter((row) => !pinnedRowIds.includes(row.id)),
+      ...getTopRows().filter((row) => !centerPinnedRowIds.includes(row.id)),
       ...rows,
-      ...getBottomRows().filter((row) => !pinnedRowIds.includes(row.id)),
     ];
   }
+  // blank inserted creating row adjustments
   if (
     positionCreatingRow !== undefined &&
     creatingRow &&
@@ -135,22 +143,24 @@ export const getIsRowSelected = <TData extends MRT_RowData>({
 };
 
 export const getMRT_RowSelectionHandler =
-  () =>
   <TData extends MRT_RowData>({
-    event,
     row,
     staticRowIndex = 0,
     table,
   }: {
-    event: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLTableRowElement>;
     row: MRT_Row<TData>;
     staticRowIndex?: number;
     table: MRT_TableInstance<TData>;
-  }) => {
+  }) =>
+  (
+    event: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLTableRowElement>,
+    value?: boolean,
+  ) => {
     const {
       getState,
       options: {
         enableBatchRowSelection,
+        enableMultiRowSelection,
         enableRowPinning,
         manualPagination,
         rowPinningDisplayMode,
@@ -163,21 +173,21 @@ export const getMRT_RowSelectionHandler =
 
     const paginationOffset = manualPagination ? 0 : pageSize * pageIndex;
 
-    const isCurrentRowChecked = getIsRowSelected({ row, table });
-
-    const isStickySelection =
-      enableRowPinning && rowPinningDisplayMode?.includes('select');
+    const wasCurrentRowChecked = getIsRowSelected({ row, table });
 
     // toggle selection of this row
-    row.getToggleSelectedHandler()(event);
+    row.toggleSelected(value ?? !wasCurrentRowChecked);
+
+    const changedRowIds = new Set<string>([row.id]);
 
     // if shift key is pressed, select all rows between last selected and this one
     if (
       enableBatchRowSelection &&
+      enableMultiRowSelection &&
       (event as any).nativeEvent.shiftKey &&
       lastSelectedRowId.current !== null
     ) {
-      const rows = getMRT_Rows(table, undefined, true);
+      const rows = getMRT_Rows(table, true);
 
       const lastIndex = rows.findIndex(
         (r) => r.id === lastSelectedRowId.current,
@@ -197,9 +207,10 @@ export const getMRT_RowSelectionHandler =
 
         // toggle selection of all rows between last selected and this one
         // but only if the last selected row is not the same as the current one
-        if (isCurrentRowChecked !== isLastIndexChecked) {
+        if (wasCurrentRowChecked !== isLastIndexChecked) {
           for (let i = start; i <= end; i++) {
-            rows[i].toggleSelected(!isCurrentRowChecked);
+            rows[i].toggleSelected(!wasCurrentRowChecked);
+            changedRowIds.add(rows[i].id);
           }
         }
       }
@@ -213,13 +224,37 @@ export const getMRT_RowSelectionHandler =
       row.subRows?.forEach((r) => r.toggleSelected(false));
     }
 
-    if (isStickySelection) {
-      row.pin(
-        !row.getIsPinned() && isCurrentRowChecked
-          ? rowPinningDisplayMode?.includes('bottom')
-            ? 'bottom'
-            : 'top'
-          : false,
-      );
+    if (enableRowPinning && rowPinningDisplayMode?.includes('select')) {
+      changedRowIds.forEach((rowId) => {
+        const rowToTogglePin = table.getRow(rowId);
+        rowToTogglePin.pin(
+          !wasCurrentRowChecked //was not previously pinned or selected
+            ? rowPinningDisplayMode?.includes('bottom')
+              ? 'bottom'
+              : 'top'
+            : false,
+        );
+      });
+    }
+  };
+
+export const getMRT_SelectAllHandler =
+  <TData extends MRT_RowData>({ table }: { table: MRT_TableInstance<TData> }) =>
+  (
+    event: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLButtonElement>,
+    value?: boolean,
+    forceAll?: boolean,
+  ) => {
+    const {
+      options: { enableRowPinning, rowPinningDisplayMode, selectAllMode },
+      refs: { lastSelectedRowId },
+    } = table;
+
+    selectAllMode === 'all' || forceAll
+      ? table.toggleAllRowsSelected(value ?? (event as any).target.checked)
+      : table.toggleAllPageRowsSelected(value ?? (event as any).target.checked);
+    if (enableRowPinning && rowPinningDisplayMode?.includes('select')) {
+      table.setRowPinning({ bottom: [], top: [] });
     }
+    lastSelectedRowId.current = null;
   };

package/src/utils/style.utils.ts

@@ -8,37 +8,34 @@ import {
   type MRT_Header,
   type MRT_RowData,
   type MRT_TableInstance,
+  type MRT_TableOptions,
+  type MRT_Theme,
 } from '../types';
-import {
-  getIsFirstRightPinnedColumn,
-  getIsLastLeftPinnedColumn,
-  getTotalRight,
-} from '../utils/column.utils';
 import { parseFromValuesOrFunc } from './utils';
 
 export const parseCSSVarId = (id: string) => id.replace(/[^a-zA-Z0-9]/g, '_');
 
 export const getMRTTheme = <TData extends MRT_RowData>(
-  table: MRT_TableInstance<TData>,
-  theme: Theme,
-) => {
-  const themeOverrides = parseFromValuesOrFunc(table.options.mrtTheme, theme);
+  mrtTheme: MRT_TableOptions<TData>['mrtTheme'],
+  muiTheme: Theme,
+): MRT_Theme => {
+  const mrtThemeOverrides = parseFromValuesOrFunc(mrtTheme, muiTheme);
   const baseBackgroundColor =
-    themeOverrides?.baseBackgroundColor ??
-    (theme.palette.mode === 'dark'
-      ? lighten(theme.palette.background.default, 0.05)
-      : theme.palette.background.default);
+    mrtThemeOverrides?.baseBackgroundColor ??
+    (muiTheme.palette.mode === 'dark'
+      ? lighten(muiTheme.palette.background.default, 0.05)
+      : muiTheme.palette.background.default);
   return {
     baseBackgroundColor,
-    draggingBorderColor: theme.palette.primary.main,
+    draggingBorderColor: muiTheme.palette.primary.main,
     matchHighlightColor:
-      theme.palette.mode === 'dark'
-        ? darken(theme.palette.warning.dark, 0.25)
-        : lighten(theme.palette.warning.light, 0.5),
+      muiTheme.palette.mode === 'dark'
+        ? darken(muiTheme.palette.warning.dark, 0.25)
+        : lighten(muiTheme.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,
+    pinnedRowBackgroundColor: alpha(muiTheme.palette.primary.main, 0.1),
+    selectedRowBackgroundColor: alpha(muiTheme.palette.primary.main, 0.2),
+    ...mrtThemeOverrides,
   };
 };
 
@@ -61,7 +58,9 @@ export const getCommonPinnedCellStyles = <TData extends MRT_RowData>({
   table: MRT_TableInstance<TData>;
   theme: Theme;
 }) => {
-  const { baseBackgroundColor } = getMRTTheme(table, theme);
+  const { baseBackgroundColor } = table.options.mrtTheme;
+  const isPinned = column?.getIsPinned();
+
   return {
     '&[data-pinned="true"]': {
       '&:before': {
@@ -73,9 +72,9 @@ export const getCommonPinnedCellStyles = <TData extends MRT_RowData>({
           0.97,
         ),
         boxShadow: column
-          ? getIsLastLeftPinnedColumn(table, column)
+          ? isPinned === 'left' && column.getIsLastColumn(isPinned)
             ? `-4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
-            : getIsFirstRightPinnedColumn(column)
+            : isPinned === 'right' && column.getIsFirstColumn(isPinned)
               ? `4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
               : undefined
           : undefined,
@@ -141,7 +140,7 @@ export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
         position: 'sticky',
         right:
           isColumnPinned === 'right'
-            ? `${getTotalRight(table, column)}px`
+            ? `${column.getAfter('right')}px`
             : undefined,
       }
     : {};
@@ -179,13 +178,12 @@ export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
 
 export const getCommonToolbarStyles = <TData extends MRT_RowData>({
   table,
-  theme,
 }: {
   table: MRT_TableInstance<TData>;
   theme: Theme;
 }) => ({
   alignItems: 'flex-start',
-  backgroundColor: getMRTTheme(table, theme).baseBackgroundColor,
+  backgroundColor: table.options.mrtTheme.baseBackgroundColor,
   display: 'grid',
   flexWrap: 'wrap-reverse',
   minHeight: '3.5rem',