material-react-table 2.0.0-beta.1 → 2.0.0-beta.11

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -7,16 +7,21 @@ import {
 } from 'react';
 import Box from '@mui/material/Box';
 import FormControlLabel from '@mui/material/FormControlLabel';
-import MenuItem from '@mui/material/MenuItem';
+import MenuItem, { type MenuItemProps } from '@mui/material/MenuItem';
 import Switch from '@mui/material/Switch';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import { MRT_ColumnPinningButtons } from '../buttons/MRT_ColumnPinningButtons';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
-import { reorderColumn } from '../column.utils';
-import { type MRT_Column, type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc, reorderColumn } from '../column.utils';
+import { getMRTTheme } from '../style.utils';
+import {
+  type MRT_Column,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends MenuItemProps {
   allColumns: MRT_Column<TData>[];
   column: MRT_Column<TData>;
   hoveredColumn: MRT_Column<TData> | null;
@@ -24,14 +29,13 @@ interface Props<TData extends Record<string, any>> {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ShowHideColumnsMenuItems = <
-  TData extends Record<string, any>,
->({
+export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
   allColumns,
   column,
   hoveredColumn,
   setHoveredColumn,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -85,25 +89,29 @@ export const MRT_ShowHideColumnsMenuItems = <
     }
   };
 
+  if (!columnDef.header) return null;
+
   return (
     <>
       <MenuItem
         disableRipple
         onDragEnter={handleDragEnter}
         ref={menuItemRef as any}
+        {...rest}
         sx={(theme) => ({
           alignItems: 'center',
           justifyContent: 'flex-start',
           my: 0,
           opacity: isDragging ? 0.5 : 1,
           outline: isDragging
-            ? `2px dashed ${theme.palette.divider}`
+            ? `2px dashed ${theme.palette.grey[500]}`
             : hoveredColumn?.id === column.id
-            ? `2px dashed ${theme.palette.primary.main}`
+            ? `2px dashed ${getMRTTheme(table, theme).draggingBorderColor}`
             : 'none',
           outlineOffset: '-2px',
           pl: `${(column.depth + 0.5) * 2}rem`,
           py: '6px',
+          ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
         })}
       >
         <Box
@@ -146,7 +154,6 @@ export const MRT_ShowHideColumnsMenuItems = <
               }}
               control={
                 <Tooltip
-                  arrow
                   enterDelay={1000}
                   enterNextDelay={1000}
                   title={localization.toggleVisibility}

package/src/modals/MRT_EditRowModal.tsx

@@ -1,4 +1,4 @@
-import Dialog from '@mui/material/Dialog';
+import Dialog, { type DialogProps } from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -6,27 +6,32 @@ import Stack from '@mui/material/Stack';
 import { MRT_EditActionButtons } from '../buttons/MRT_EditActionButtons';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
-import { type MRT_Row, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends Partial<DialogProps> {
   open: boolean;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_EditRowModal = <TData extends Record<string, any>>({
+export const MRT_EditRowModal = <TData extends MRT_RowData>({
   open,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
     options: {
       localization,
       muiCreateRowModalProps,
-      muiEditRowModalProps,
+      muiEditRowDialogProps,
       onCreatingRowCancel,
       onEditingRowCancel,
-      renderCreateRowModalContent,
-      renderEditRowModalContent,
+      renderCreateRowDialogContent,
+      renderEditRowDialogContent,
     },
     setCreatingRow,
     setEditingRow,
@@ -35,9 +40,10 @@ export const MRT_EditRowModal = <TData extends Record<string, any>>({
   const row = (creatingRow ?? editingRow) as MRT_Row<TData>;
 
   const dialogProps = {
-    ...parseFromValuesOrFunc(muiEditRowModalProps, { row, table }),
+    ...parseFromValuesOrFunc(muiEditRowDialogProps, { row, table }),
     ...(creatingRow &&
       parseFromValuesOrFunc(muiCreateRowModalProps, { row, table })),
+    ...rest,
   };
 
   const internalEditComponents = row
@@ -70,12 +76,12 @@ export const MRT_EditRowModal = <TData extends Record<string, any>>({
       {...dialogProps}
     >
       {((creatingRow &&
-        renderCreateRowModalContent?.({
+        renderCreateRowDialogContent?.({
           internalEditComponents,
           row,
           table,
         })) ||
-        renderEditRowModalContent?.({
+        renderEditRowDialogContent?.({
           internalEditComponents,
           row,
           table,
@@ -88,7 +94,7 @@ export const MRT_EditRowModal = <TData extends Record<string, any>>({
             <form onSubmit={(e) => e.preventDefault()}>
               <Stack
                 sx={{
-                  gap: '24px',
+                  gap: '32px',
                   paddingTop: '16px',
                   width: '100%',
                 }}

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: 9999,
+              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';