material-react-table 2.0.0-beta.0 → 2.0.0-beta.10

package/src/sortingFns.ts

@@ -1,8 +1,8 @@
 import { type RankingInfo, compareItems } from '@tanstack/match-sorter-utils';
 import { type Row, sortingFns } from '@tanstack/react-table';
-import { type MRT_Row } from './types';
+import { type MRT_Row, type MRT_RowData } from './types';
 
-const fuzzy = <TData extends Record<string, any>>(
+const fuzzy = <TData extends MRT_RowData>(
   rowA: Row<TData>,
   rowB: Row<TData>,
   columnId: string,
@@ -25,7 +25,7 @@ export const MRT_SortingFns = {
   fuzzy,
 };
 
-export const rankGlobalFuzzy = <TData extends Record<string, any>>(
+export const rankGlobalFuzzy = <TData extends MRT_RowData>(
   rowA: MRT_Row<TData>,
   rowB: MRT_Row<TData>,
 ) =>

package/src/style.utils.ts

@@ -0,0 +1,149 @@
+import { type CSSProperties } from 'react';
+import { type TableCellProps } from '@mui/material/TableCell';
+import { alpha, darken, lighten } from '@mui/material/styles';
+import { type Theme } from '@mui/material/styles';
+import {
+  getIsFirstRightPinnedColumn,
+  getIsLastLeftPinnedColumn,
+  getTotalRight,
+  parseFromValuesOrFunc,
+} from './column.utils';
+import {
+  type MRT_Column,
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from './types';
+
+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,
+) => ({
+  baseBackgroundColor:
+    theme.palette.mode === 'dark'
+      ? lighten(theme.palette.background.default, 0.05)
+      : theme.palette.background.default,
+  draggingBorderColor: theme.palette.primary.main,
+  matchHighlightColor:
+    theme.palette.mode === 'dark'
+      ? darken(theme.palette.warning.dark, 0.25)
+      : lighten(theme.palette.warning.light, 0.5),
+  pinnedRowBackgroundColor: alpha(theme.palette.primary.main, 0.1),
+  selectedRowBackgroundColor: alpha(theme.palette.primary.main, 0.2),
+  ...parseFromValuesOrFunc(table.options.mrtTheme, theme),
+});
+
+export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
+  column,
+  header,
+  table,
+  tableCellProps,
+  theme,
+}: {
+  column: MRT_Column<TData>;
+  header?: MRT_Header<TData>;
+  table: MRT_TableInstance<TData>;
+  tableCellProps: TableCellProps;
+  theme: Theme;
+}) => {
+  const {
+    options: { layoutMode },
+  } = table;
+  const widthStyles: CSSProperties = {
+    minWidth: `max(calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
+      header?.id ?? column.id,
+    )}-size) * 1px), ${column.columnDef.minSize ?? 30}px)`,
+    width: `calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
+      header?.id ?? column.id,
+    )}-size) * 1px)`,
+  };
+
+  if (layoutMode === 'grid') {
+    widthStyles.flex = `var(--${header ? 'header' : 'col'}-${parseCSSVarId(
+      header?.id ?? column.id,
+    )}-size) 0 auto`;
+  } else if (layoutMode === 'grid-no-grow') {
+    widthStyles.flex = '0 0 auto';
+  }
+
+  return {
+    backgroundColor:
+      column.getIsPinned() && column.columnDef.columnDefType !== 'group'
+        ? alpha(
+            darken(
+              getMRTTheme(table, theme).baseBackgroundColor,
+              theme.palette.mode === 'dark' ? 0.05 : 0.01,
+            ),
+            0.97,
+          )
+        : 'inherit',
+    backgroundImage: 'inherit',
+    boxShadow: getIsLastLeftPinnedColumn(table, column)
+      ? `-4px 0 8px -6px ${alpha(theme.palette.grey[700], 0.5)} inset`
+      : getIsFirstRightPinnedColumn(column)
+      ? `4px 0 8px -6px ${alpha(theme.palette.grey[700], 0.5)} inset`
+      : undefined,
+    display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
+    left:
+      column.getIsPinned() === 'left'
+        ? `${column.getStart('left')}px`
+        : undefined,
+    ml:
+      table.options.enableColumnVirtualization &&
+      column.getIsPinned() === 'left' &&
+      column.getPinnedIndex() === 0
+        ? `-${
+            column.getSize() *
+            (table.getState().columnPinning.left?.length ?? 1)
+          }px`
+        : undefined,
+    mr:
+      table.options.enableColumnVirtualization &&
+      column.getIsPinned() === 'right' &&
+      column.getPinnedIndex() === table.getVisibleLeafColumns().length - 1
+        ? `-${
+            column.getSize() *
+            (table.getState().columnPinning.right?.length ?? 1) *
+            1.2
+          }px`
+        : undefined,
+    opacity:
+      table.getState().draggingColumn?.id === column.id ||
+      table.getState().hoveredColumn?.id === column.id
+        ? 0.5
+        : 1,
+    position:
+      column.getIsPinned() && column.columnDef.columnDefType !== 'group'
+        ? 'sticky'
+        : undefined,
+    right:
+      column.getIsPinned() === 'right'
+        ? `${getTotalRight(table, column)}px`
+        : undefined,
+    transition: table.options.enableColumnVirtualization
+      ? 'none'
+      : `padding 150ms ease-in-out`,
+    ...widthStyles,
+    ...(parseFromValuesOrFunc(tableCellProps?.sx, theme) as any),
+  };
+};
+
+export const getCommonToolbarStyles = <TData extends MRT_RowData>({
+  table,
+  theme,
+}: {
+  table: MRT_TableInstance<TData>;
+  theme: Theme;
+}) => ({
+  alignItems: 'flex-start',
+  backgroundColor: getMRTTheme(table, theme).baseBackgroundColor,
+  display: 'grid',
+  flexWrap: 'wrap-reverse',
+  minHeight: '3.5rem',
+  overflow: 'hidden',
+  position: 'relative',
+  transition: 'all 150ms ease-in-out',
+  zIndex: 1,
+});

package/src/table/MRT_Table.tsx

@@ -4,23 +4,24 @@ import {
   type Virtualizer,
   useVirtualizer,
 } from '@tanstack/react-virtual';
-import Table from '@mui/material/Table';
+import Table, { type TableProps } from '@mui/material/Table';
 import { MRT_TableBody, Memo_MRT_TableBody } from '../body/MRT_TableBody';
 import {
   extraIndexRangeExtractor,
-  parseCSSVarId,
   parseFromValuesOrFunc,
 } from '../column.utils';
 import { MRT_TableFooter } from '../footer/MRT_TableFooter';
 import { MRT_TableHead } from '../head/MRT_TableHead';
-import { type MRT_TableInstance } from '../types';
+import { parseCSSVarId } from '../style.utils';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends TableProps {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_Table = <TData extends Record<string, any>>({
+export const MRT_Table = <TData extends MRT_RowData>({
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getFlatHeaders,
@@ -30,7 +31,6 @@ export const MRT_Table = <TData extends Record<string, any>>({
       columnVirtualizerOptions,
       columns,
       enableColumnPinning,
-      enableColumnResizing,
       enableColumnVirtualization,
       enableStickyHeader,
       enableTableFooter,
@@ -50,7 +50,10 @@ export const MRT_Table = <TData extends Record<string, any>>({
     isFullScreen,
   } = getState();
 
-  const tableProps = parseFromValuesOrFunc(muiTableProps, { table });
+  const tableProps = {
+    ...parseFromValuesOrFunc(muiTableProps, { table }),
+    ...rest,
+  };
 
   const columnVirtualizerProps = parseFromValuesOrFunc(
     columnVirtualizerOptions,
@@ -157,32 +160,23 @@ export const MRT_Table = <TData extends Record<string, any>>({
   };
 
   return (
-    <>
-      <Table
-        stickyHeader={enableStickyHeader || isFullScreen}
-        {...tableProps}
-        style={{ ...columnSizeVars, ...tableProps?.style }}
-        sx={(theme) => ({
-          borderCollapse: 'separate',
-          display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
-          tableLayout:
-            layoutMode === 'semantic' && enableColumnResizing
-              ? 'fixed'
-              : undefined,
-          ...(parseFromValuesOrFunc(tableProps?.sx, theme) as any),
-        })}
-      >
-        {enableTableHead && <MRT_TableHead {...props} />}
-        {memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (
-          <Memo_MRT_TableBody
-            columnVirtualizer={columnVirtualizer}
-            {...props}
-          />
-        ) : (
-          <MRT_TableBody columnVirtualizer={columnVirtualizer} {...props} />
-        )}
-        {enableTableFooter && <MRT_TableFooter {...props} />}
-      </Table>
-    </>
+    <Table
+      stickyHeader={enableStickyHeader || isFullScreen}
+      {...tableProps}
+      style={{ ...columnSizeVars, ...tableProps?.style }}
+      sx={(theme) => ({
+        borderCollapse: 'separate',
+        display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
+        ...(parseFromValuesOrFunc(tableProps?.sx, theme) as any),
+      })}
+    >
+      {enableTableHead && <MRT_TableHead {...props} />}
+      {memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (
+        <Memo_MRT_TableBody columnVirtualizer={columnVirtualizer} {...props} />
+      ) : (
+        <MRT_TableBody columnVirtualizer={columnVirtualizer} {...props} />
+      )}
+      {enableTableFooter && <MRT_TableFooter {...props} />}
+    </Table>
   );
 };

package/src/table/MRT_TableContainer.tsx

@@ -1,22 +1,23 @@
 import { useEffect, useLayoutEffect, useState } from 'react';
-import Box from '@mui/material/Box';
-import CircularProgress from '@mui/material/CircularProgress';
-import TableContainer from '@mui/material/TableContainer';
-import { alpha, lighten } from '@mui/material/styles';
+import TableContainer, {
+  type TableContainerProps,
+} from '@mui/material/TableContainer';
 import { MRT_Table } from './MRT_Table';
+import { MRT_TableLoadingOverlay } from './MRT_TableLoadingOverlay';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_EditRowModal } from '../modals';
-import { type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
 const useIsomorphicLayoutEffect =
   typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends TableContainerProps {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TableContainer = <TData extends Record<string, any>>({
+export const MRT_TableContainer = <TData extends MRT_RowData>({
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -24,8 +25,6 @@ export const MRT_TableContainer = <TData extends Record<string, any>>({
       createDisplayMode,
       editDisplayMode,
       enableStickyHeader,
-      localization,
-      muiCircularProgressProps,
       muiTableContainerProps,
     },
     refs: { bottomToolbarRef, tableContainerRef, topToolbarRef },
@@ -39,18 +38,16 @@ export const MRT_TableContainer = <TData extends Record<string, any>>({
   } = getState();
 
   const loading =
-    (isLoading || showLoadingOverlay) && showLoadingOverlay !== false;
+    showLoadingOverlay !== false && (isLoading || showLoadingOverlay);
 
   const [totalToolbarHeight, setTotalToolbarHeight] = useState(0);
 
-  const tableContainerProps = parseFromValuesOrFunc(muiTableContainerProps, {
-    table,
-  });
-
-  const circularProgressProps = parseFromValuesOrFunc(
-    muiCircularProgressProps,
-    { table },
-  );
+  const tableContainerProps = {
+    ...parseFromValuesOrFunc(muiTableContainerProps, {
+      table,
+    }),
+    ...rest,
+  };
 
   useIsomorphicLayoutEffect(() => {
     const topToolbarHeight =
@@ -72,7 +69,7 @@ export const MRT_TableContainer = <TData extends Record<string, any>>({
   return (
     <TableContainer
       aria-busy={loading}
-      aria-describedby="mrt-progress"
+      aria-describedby={loading ? 'mrt-progress' : undefined}
       {...tableContainerProps}
       ref={(node: HTMLDivElement) => {
         if (node) {
@@ -99,33 +96,7 @@ export const MRT_TableContainer = <TData extends Record<string, any>>({
         ...(parseFromValuesOrFunc(tableContainerProps?.sx, theme) as any),
       })}
     >
-      {loading ? (
-        <Box
-          sx={(theme) => ({
-            alignItems: 'center',
-            backgroundColor: alpha(
-              lighten(theme.palette.background.paper, 0.05),
-              0.5,
-            ),
-            bottom: 0,
-            display: 'flex',
-            justifyContent: 'center',
-            left: 0,
-            maxHeight: '100vh',
-            position: 'absolute',
-            right: 0,
-            top: 0,
-            width: '100%',
-            zIndex: 2,
-          })}
-        >
-          <CircularProgress
-            aria-label={localization.noRecordsToDisplay}
-            id="mrt-progress"
-            {...circularProgressProps}
-          />
-        </Box>
-      ) : null}
+      {loading ? <MRT_TableLoadingOverlay table={table} /> : null}
       <MRT_Table table={table} />
       {(createModalOpen || editModalOpen) && (
         <MRT_EditRowModal open table={table} />

package/src/table/MRT_TableLoadingOverlay.tsx

@@ -0,0 +1,54 @@
+import Box from '@mui/material/Box';
+import CircularProgress, {
+  type CircularProgressProps,
+} from '@mui/material/CircularProgress';
+import { alpha } from '@mui/material/styles';
+import { parseFromValuesOrFunc } from '../column.utils';
+import { getMRTTheme } from '../style.utils';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
+
+interface Props<TData extends MRT_RowData> extends CircularProgressProps {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableLoadingOverlay = <TData extends MRT_RowData>({
+  table,
+  ...rest
+}: Props<TData>) => {
+  const {
+    options: { localization, muiCircularProgressProps },
+  } = table;
+
+  const circularProgressProps = {
+    ...parseFromValuesOrFunc(muiCircularProgressProps, { table }),
+    ...rest,
+  };
+
+  return (
+    <Box
+      sx={(theme) => ({
+        alignItems: 'center',
+        backgroundColor: alpha(
+          getMRTTheme(table, theme).baseBackgroundColor,
+          0.5,
+        ),
+        bottom: 0,
+        display: 'flex',
+        justifyContent: 'center',
+        left: 0,
+        maxHeight: '100vh',
+        position: 'absolute',
+        right: 0,
+        top: 0,
+        width: '100%',
+        zIndex: 2,
+      })}
+    >
+      <CircularProgress
+        aria-label={localization.noRecordsToDisplay}
+        id="mrt-progress"
+        {...circularProgressProps}
+      />
+    </Box>
+  );
+};

package/src/table/MRT_TablePaper.tsx

@@ -1,16 +1,18 @@
-import Paper from '@mui/material/Paper';
+import Paper, { type PaperProps } from '@mui/material/Paper';
 import { MRT_TableContainer } from './MRT_TableContainer';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { getMRTTheme } from '../style.utils';
 import { MRT_BottomToolbar } from '../toolbar/MRT_BottomToolbar';
 import { MRT_TopToolbar } from '../toolbar/MRT_TopToolbar';
-import { type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends PaperProps {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TablePaper = <TData extends Record<string, any>>({
+export const MRT_TablePaper = <TData extends MRT_RowData>({
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -25,7 +27,10 @@ export const MRT_TablePaper = <TData extends Record<string, any>>({
   } = table;
   const { isFullScreen } = getState();
 
-  const tablePaperProps = parseFromValuesOrFunc(muiTablePaperProps, { table });
+  const tablePaperProps = {
+    ...parseFromValuesOrFunc(muiTablePaperProps, { table }),
+    ...rest,
+  };
 
   return (
     <Paper
@@ -52,12 +57,14 @@ export const MRT_TablePaper = <TData extends Record<string, any>>({
               right: 0,
               top: 0,
               width: '100vw',
-              zIndex: 10,
+              zIndex: 999,
             }
           : {}),
         ...tablePaperProps?.style,
       }}
       sx={(theme) => ({
+        backgroundColor: getMRTTheme(table, theme).baseBackgroundColor,
+        backgroundImage: 'unset',
         overflow: 'hidden',
         transition: 'all 100ms ease-in-out',
         ...(parseFromValuesOrFunc(tablePaperProps?.sx, theme) as any),

package/src/table/index.ts

@@ -1,4 +1,5 @@
 export * from '../modals/MRT_EditRowModal';
 export * from './MRT_Table';
 export * from './MRT_TableContainer';
+export * from './MRT_TableLoadingOverlay';
 export * from './MRT_TablePaper';

package/src/toolbar/MRT_BottomToolbar.tsx

@@ -1,21 +1,21 @@
-import Box from '@mui/material/Box';
-import Toolbar from '@mui/material/Toolbar';
-import { alpha } from '@mui/material/styles';
+import { alpha } from '@mui/material';
+import Box, { type BoxProps } from '@mui/material/Box';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { MRT_LinearProgressBar } from './MRT_LinearProgressBar';
 import { MRT_TablePagination } from './MRT_TablePagination';
 import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
 import { MRT_ToolbarDropZone } from './MRT_ToolbarDropZone';
-import { commonToolbarStyles } from './MRT_TopToolbar';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_TableInstance } from '../types';
+import { getCommonToolbarStyles } from '../style.utils';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends BoxProps {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_BottomToolbar = <TData extends Record<string, any>>({
+export const MRT_BottomToolbar = <TData extends MRT_RowData>({
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -33,13 +33,15 @@ export const MRT_BottomToolbar = <TData extends Record<string, any>>({
 
   const isMobile = useMediaQuery('(max-width:720px)');
 
-  const toolbarProps = parseFromValuesOrFunc(muiBottomToolbarProps, { table });
+  const toolbarProps = {
+    ...parseFromValuesOrFunc(muiBottomToolbarProps, { table }),
+    ...rest,
+  };
 
   const stackAlertBanner = isMobile || !!renderBottomToolbarCustomActions;
 
   return (
-    <Toolbar
-      variant="dense"
+    <Box
       {...toolbarProps}
       ref={(node: HTMLDivElement) => {
         if (node) {
@@ -51,11 +53,11 @@ export const MRT_BottomToolbar = <TData extends Record<string, any>>({
         }
       }}
       sx={(theme) => ({
-        ...commonToolbarStyles({ theme }),
+        ...getCommonToolbarStyles({ table, theme }),
         bottom: isFullScreen ? '0' : undefined,
         boxShadow: `0 1px 2px -1px ${alpha(
-          theme.palette.common.black,
-          0.1,
+          theme.palette.grey[700],
+          0.5,
         )} inset`,
         left: 0,
         position: isFullScreen ? 'fixed' : 'relative',
@@ -103,6 +105,6 @@ export const MRT_BottomToolbar = <TData extends Record<string, any>>({
             )}
         </Box>
       </Box>
-    </Toolbar>
+    </Box>
   );
 };

package/src/toolbar/MRT_LinearProgressBar.tsx

@@ -1,31 +1,37 @@
 import Collapse from '@mui/material/Collapse';
-import LinearProgress from '@mui/material/LinearProgress';
+import LinearProgress, {
+  type LinearProgressProps,
+} from '@mui/material/LinearProgress';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends LinearProgressProps {
   isTopToolbar: boolean;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_LinearProgressBar = <TData extends Record<string, any>>({
+export const MRT_LinearProgressBar = <TData extends MRT_RowData>({
   isTopToolbar,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
     options: { muiLinearProgressProps },
   } = table;
-  const { showProgressBars } = getState();
+  const { isSaving, showProgressBars } = getState();
 
-  const linearProgressProps = parseFromValuesOrFunc(muiLinearProgressProps, {
-    isTopToolbar,
-    table,
-  });
+  const linearProgressProps = {
+    ...parseFromValuesOrFunc(muiLinearProgressProps, {
+      isTopToolbar,
+      table,
+    }),
+    ...rest,
+  };
 
   return (
     <Collapse
-      in={showProgressBars}
+      in={showProgressBars !== false && (showProgressBars || isSaving)}
       mountOnEnter
       sx={{
         bottom: isTopToolbar ? 0 : undefined,