material-react-table 2.11.2 → 2.11.3

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

@@ -243,13 +243,14 @@ export const getMRT_SelectAllHandler =
   (
     event: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLButtonElement>,
     value?: boolean,
+    forceAll?: boolean,
   ) => {
     const {
       options: { enableRowPinning, rowPinningDisplayMode, selectAllMode },
       refs: { lastSelectedRowId },
     } = table;
 
-    selectAllMode === 'all'
+    selectAllMode === 'all' || forceAll
       ? table.toggleAllRowsSelected(value ?? (event as any).target.checked)
       : table.toggleAllPageRowsSelected(value ?? (event as any).target.checked);
     if (enableRowPinning && rowPinningDisplayMode?.includes('select')) {

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',