material-react-table 2.0.0-alpha.0 → 2.0.0-alpha.2

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -14,88 +14,88 @@ export const mrtFilterOptions = (
   localization: MRT_Localization,
 ): MRT_InternalFilterOption[] => [
   {
+    divider: false,
+    label: localization.filterFuzzy,
     option: 'fuzzy',
     symbol: '≈',
-    label: localization.filterFuzzy,
-    divider: false,
   },
   {
+    divider: false,
+    label: localization.filterContains,
     option: 'contains',
     symbol: '*',
-    label: localization.filterContains,
-    divider: false,
   },
   {
+    divider: false,
+    label: localization.filterStartsWith,
     option: 'startsWith',
     symbol: 'a',
-    label: localization.filterStartsWith,
-    divider: false,
   },
   {
+    divider: true,
+    label: localization.filterEndsWith,
     option: 'endsWith',
     symbol: 'z',
-    label: localization.filterEndsWith,
-    divider: true,
   },
   {
+    divider: false,
+    label: localization.filterEquals,
     option: 'equals',
     symbol: '=',
-    label: localization.filterEquals,
-    divider: false,
   },
   {
+    divider: true,
+    label: localization.filterNotEquals,
     option: 'notEquals',
     symbol: '≠',
-    label: localization.filterNotEquals,
-    divider: true,
   },
   {
+    divider: false,
+    label: localization.filterBetween,
     option: 'between',
     symbol: '⇿',
-    label: localization.filterBetween,
-    divider: false,
   },
   {
+    divider: true,
+    label: localization.filterBetweenInclusive,
     option: 'betweenInclusive',
     symbol: '⬌',
-    label: localization.filterBetweenInclusive,
-    divider: true,
   },
   {
+    divider: false,
+    label: localization.filterGreaterThan,
     option: 'greaterThan',
     symbol: '>',
-    label: localization.filterGreaterThan,
-    divider: false,
   },
   {
+    divider: false,
+    label: localization.filterGreaterThanOrEqualTo,
     option: 'greaterThanOrEqualTo',
     symbol: '≥',
-    label: localization.filterGreaterThanOrEqualTo,
-    divider: false,
   },
   {
+    divider: false,
+    label: localization.filterLessThan,
     option: 'lessThan',
     symbol: '<',
-    label: localization.filterLessThan,
-    divider: false,
   },
   {
+    divider: true,
+    label: localization.filterLessThanOrEqualTo,
     option: 'lessThanOrEqualTo',
     symbol: '≤',
-    label: localization.filterLessThanOrEqualTo,
-    divider: true,
   },
   {
+    divider: false,
+    label: localization.filterEmpty,
     option: 'empty',
     symbol: '∅',
-    label: localization.filterEmpty,
-    divider: false,
   },
   {
+    divider: false,
+    label: localization.filterNotEmpty,
     option: 'notEmpty',
     symbol: '!∅',
-    label: localization.filterNotEmpty,
-    divider: false,
   },
 ];
 
@@ -133,7 +133,7 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any>>({
     setColumnFilterFns,
     setGlobalFilterFn,
   } = table;
-  const { globalFilterFn, density } = getState();
+  const { density, globalFilterFn } = getState();
   const { column } = header ?? {};
   const { columnDef } = column ?? {};
   const currentFilterValue = column?.getFilterValue();
@@ -156,7 +156,7 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any>>({
             allowedColumnFilterOptions?.includes(filterOption.option)
           : (!globalFilterModeOptions ||
               globalFilterModeOptions.includes(filterOption.option)) &&
-            ['fuzzy', 'contains', 'startsWith'].includes(filterOption.option),
+            ['contains', 'fuzzy', 'startsWith'].includes(filterOption.option),
       ),
     [],
   );
@@ -232,13 +232,13 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any>>({
 
   return (
     <Menu
-      anchorEl={anchorEl}
-      anchorOrigin={{ vertical: 'center', horizontal: 'right' }}
-      onClose={() => setAnchorEl(null)}
-      open={!!anchorEl}
       MenuListProps={{
         dense: density === 'compact',
       }}
+      anchorEl={anchorEl}
+      anchorOrigin={{ horizontal: 'right', vertical: 'center' }}
+      onClose={() => setAnchorEl(null)}
+      open={!!anchorEl}
     >
       {(header && column && columnDef
         ? columnDef.renderColumnFilterModeMenuItems?.({
@@ -259,7 +259,7 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any>>({
             table,
           })) ??
         internalFilterOptions.map(
-          ({ option, label, divider, symbol }, index) => (
+          ({ divider, label, option, symbol }, index) => (
             <MenuItem
               divider={divider}
               key={index}

package/src/menus/MRT_RowActionMenu.tsx

@@ -7,6 +7,7 @@ import {
   commonListItemStyles,
   commonMenuItemStyles,
 } from './MRT_ColumnActionMenu';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_Row, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -27,8 +28,8 @@ export const MRT_RowActionMenu = <TData extends Record<string, any>>({
   const {
     getState,
     options: {
-      icons: { EditIcon },
       enableEditing,
+      icons: { EditIcon },
       localization,
       renderRowActionMenuItems,
     },
@@ -37,30 +38,28 @@ export const MRT_RowActionMenu = <TData extends Record<string, any>>({
 
   return (
     <Menu
-      anchorEl={anchorEl}
-      open={!!anchorEl}
-      onClick={(event) => event.stopPropagation()}
-      onClose={() => setAnchorEl(null)}
       MenuListProps={{
         dense: density === 'compact',
       }}
+      anchorEl={anchorEl}
+      onClick={(event) => event.stopPropagation()}
+      onClose={() => setAnchorEl(null)}
+      open={!!anchorEl}
     >
-      {enableEditing instanceof Function
-        ? enableEditing(row)
-        : enableEditing && (
-            <MenuItem onClick={handleEdit} sx={commonMenuItemStyles}>
-              <Box sx={commonListItemStyles}>
-                <ListItemIcon>
-                  <EditIcon />
-                </ListItemIcon>
-                {localization.edit}
-              </Box>
-            </MenuItem>
-          )}
+      {parseFromValuesOrFunc(enableEditing, row) && (
+        <MenuItem onClick={handleEdit} sx={commonMenuItemStyles}>
+          <Box sx={commonListItemStyles}>
+            <ListItemIcon>
+              <EditIcon />
+            </ListItemIcon>
+            {localization.edit}
+          </Box>
+        </MenuItem>
+      )}
       {renderRowActionMenuItems?.({
+        closeMenu: () => setAnchorEl(null),
         row,
         table,
-        closeMenu: () => setAnchorEl(null),
       })}
     </Menu>
   );

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -29,15 +29,15 @@ export const MRT_ShowHideColumnsMenu = <TData extends Record<string, any>>({
     getLeftLeafColumns,
     getRightLeafColumns,
     getState,
-    toggleAllColumnsVisible,
     options: {
       enableColumnOrdering,
-      enableHiding,
       enableColumnPinning,
+      enableHiding,
       localization,
     },
+    toggleAllColumnsVisible,
   } = table;
-  const { density, columnOrder, columnPinning } = getState();
+  const { columnOrder, columnPinning, density } = getState();
 
   const hideAllColumns = () => {
     getAllLeafColumns()
@@ -75,12 +75,12 @@ export const MRT_ShowHideColumnsMenu = <TData extends Record<string, any>>({
 
   return (
     <Menu
-      anchorEl={anchorEl}
-      open={!!anchorEl}
-      onClose={() => setAnchorEl(null)}
       MenuListProps={{
         dense: density === 'compact',
       }}
+      anchorEl={anchorEl}
+      onClose={() => setAnchorEl(null)}
+      open={!!anchorEl}
     >
       <Box
         sx={{

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -28,17 +28,17 @@ export const MRT_ShowHideColumnsMenuItems = <
   TData extends Record<string, any>,
 >({
   allColumns,
+  column,
   hoveredColumn,
   setHoveredColumn,
-  column,
   table,
 }: Props<TData>) => {
   const {
     getState,
     options: {
       enableColumnOrdering,
-      enableHiding,
       enableColumnPinning,
+      enableHiding,
       localization,
     },
     setColumnOrder,
@@ -89,19 +89,19 @@ export const MRT_ShowHideColumnsMenuItems = <
     <>
       <MenuItem
         disableRipple
-        ref={menuItemRef as any}
         onDragEnter={handleDragEnter}
+        ref={menuItemRef as any}
         sx={(theme) => ({
           alignItems: 'center',
           justifyContent: 'flex-start',
           my: 0,
           opacity: isDragging ? 0.5 : 1,
-          outlineOffset: '-2px',
           outline: isDragging
             ? `2px dashed ${theme.palette.divider}`
             : hoveredColumn?.id === column.id
             ? `2px dashed ${theme.palette.primary.main}`
             : 'none',
+          outlineOffset: '-2px',
           pl: `${(column.depth + 0.5) * 2}rem`,
           py: '6px',
         })}
@@ -135,6 +135,7 @@ export const MRT_ShowHideColumnsMenuItems = <
             ))}
           {enableHiding ? (
             <FormControlLabel
+              checked={switchChecked}
               componentsProps={{
                 typography: {
                   sx: {
@@ -143,7 +144,6 @@ export const MRT_ShowHideColumnsMenuItems = <
                   },
                 },
               }}
-              checked={switchChecked}
               control={
                 <Tooltip
                   arrow

package/src/modals/MRT_EditRowModal.tsx

@@ -4,6 +4,7 @@ import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 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';
 
@@ -20,32 +21,23 @@ export const MRT_EditRowModal = <TData extends Record<string, any>>({
     getState,
     options: {
       localization,
-      onEditingRowCancel,
-      onCreatingRowCancel,
-      renderEditRowModalContent,
-      renderCreateRowModalContent,
       muiCreateRowModalProps,
       muiEditRowModalProps,
+      onCreatingRowCancel,
+      onEditingRowCancel,
+      renderCreateRowModalContent,
+      renderEditRowModalContent,
     },
-    setEditingRow,
     setCreatingRow,
+    setEditingRow,
   } = table;
   const { creatingRow, editingRow } = getState();
   const row = (creatingRow ?? editingRow) as MRT_Row<TData>;
 
-  const createModalProps =
-    muiCreateRowModalProps instanceof Function
-      ? muiCreateRowModalProps({ row, table })
-      : muiCreateRowModalProps;
-
-  const editModalProps =
-    muiEditRowModalProps instanceof Function
-      ? muiEditRowModalProps({ row, table })
-      : muiEditRowModalProps;
-
   const dialogProps = {
-    ...editModalProps,
-    ...(creatingRow && createModalProps),
+    ...parseFromValuesOrFunc(muiEditRowModalProps, { row, table }),
+    ...(creatingRow &&
+      parseFromValuesOrFunc(muiCreateRowModalProps, { row, table })),
   };
 
   const internalEditComponents = row
@@ -79,18 +71,18 @@ export const MRT_EditRowModal = <TData extends Record<string, any>>({
     >
       {((creatingRow &&
         renderCreateRowModalContent?.({
+          internalEditComponents,
           row,
           table,
-          internalEditComponents,
         })) ||
         renderEditRowModalContent?.({
+          internalEditComponents,
           row,
           table,
-          internalEditComponents,
         })) ?? (
         <>
           <DialogTitle sx={{ textAlign: 'center' }}>
-            {(creatingRow && localization.create) || localization.edit}
+            {localization.edit}
           </DialogTitle>
           <DialogContent>
             <form onSubmit={(e) => e.preventDefault()}>

package/src/sortingFns.ts

@@ -1,4 +1,4 @@
-import { compareItems, type RankingInfo } from '@tanstack/match-sorter-utils';
+import { type RankingInfo, compareItems } from '@tanstack/match-sorter-utils';
 import { type Row, sortingFns } from '@tanstack/react-table';
 import { type MRT_Row } from './types';
 

package/src/table/MRT_Table.tsx

@@ -1,15 +1,15 @@
 import { useCallback, useMemo } from 'react';
 import {
-  defaultRangeExtractor,
-  useVirtualizer,
   type Range,
   type Virtualizer,
+  defaultRangeExtractor,
+  useVirtualizer,
 } from '@tanstack/react-virtual';
 import Table from '@mui/material/Table';
-import { MRT_TableHead } from '../head/MRT_TableHead';
-import { Memo_MRT_TableBody, MRT_TableBody } from '../body/MRT_TableBody';
+import { MRT_TableBody, Memo_MRT_TableBody } from '../body/MRT_TableBody';
+import { parseCSSVarId, parseFromValuesOrFunc } from '../column.utils';
 import { MRT_TableFooter } from '../footer/MRT_TableFooter';
-import { parseCSSVarId } from '../column.utils';
+import { MRT_TableHead } from '../head/MRT_TableHead';
 import { type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -26,9 +26,9 @@ export const MRT_Table = <TData extends Record<string, any>>({
       columnVirtualizerInstanceRef,
       columnVirtualizerOptions,
       columns,
+      enableColumnPinning,
       enableColumnResizing,
       enableColumnVirtualization,
-      enableColumnPinning,
       enableStickyHeader,
       enableTableFooter,
       enableTableHead,
@@ -46,15 +46,12 @@ export const MRT_Table = <TData extends Record<string, any>>({
     isFullScreen,
   } = getState();
 
-  const tableProps =
-    muiTableProps instanceof Function
-      ? muiTableProps({ table })
-      : muiTableProps;
+  const tableProps = parseFromValuesOrFunc(muiTableProps, { table });
 
-  const vProps =
-    columnVirtualizerOptions instanceof Function
-      ? columnVirtualizerOptions({ table })
-      : columnVirtualizerOptions;
+  const columnVirtualizerProps = parseFromValuesOrFunc(
+    columnVirtualizerOptions,
+    { table },
+  );
 
   const columnSizeVars = useMemo(() => {
     const headers = getFlatHeaders();
@@ -115,7 +112,7 @@ export const MRT_Table = <TData extends Record<string, any>>({
           ],
           [leftPinnedIndexes, rightPinnedIndexes],
         ),
-        ...vProps,
+        ...columnVirtualizerProps,
       })
     : undefined;
 
@@ -150,16 +147,14 @@ export const MRT_Table = <TData extends Record<string, any>>({
       <Table
         stickyHeader={enableStickyHeader || isFullScreen}
         {...tableProps}
+        style={{ ...columnSizeVars, ...tableProps?.style }}
         sx={(theme) => ({
           borderCollapse: 'separate',
           display: layoutMode === 'grid' ? 'grid' : 'table',
           tableLayout:
             layoutMode !== 'grid' && enableColumnResizing ? 'fixed' : undefined,
-          ...(tableProps?.sx instanceof Function
-            ? tableProps.sx(theme)
-            : (tableProps?.sx as any)),
+          ...(parseFromValuesOrFunc(tableProps?.sx, theme) as any),
         })}
-        style={{ ...columnSizeVars, ...tableProps?.style }}
       >
         {enableTableHead && <MRT_TableHead {...props} />}
         {memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (

package/src/table/MRT_TableContainer.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useLayoutEffect, useState } from 'react';
 import TableContainer from '@mui/material/TableContainer';
 import { MRT_Table } from './MRT_Table';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_EditRowModal } from '../modals';
 import { type MRT_TableInstance } from '../types';
 
@@ -22,20 +23,15 @@ export const MRT_TableContainer = <TData extends Record<string, any>>({
       enableStickyHeader,
       muiTableContainerProps,
     },
-    refs: { tableContainerRef, bottomToolbarRef, topToolbarRef },
+    refs: { bottomToolbarRef, tableContainerRef, topToolbarRef },
   } = table;
-  const {
-    isFullScreen,
-    creatingRow,
-    editingRow,
-  } = getState();
+  const { creatingRow, editingRow, isFullScreen } = getState();
 
   const [totalToolbarHeight, setTotalToolbarHeight] = useState(0);
 
-  const tableContainerProps =
-    muiTableContainerProps instanceof Function
-      ? muiTableContainerProps({ table })
-      : muiTableContainerProps;
+  const tableContainerProps = parseFromValuesOrFunc(muiTableContainerProps, {
+    table,
+  });
 
   useIsomorphicLayoutEffect(() => {
     const topToolbarHeight =
@@ -66,22 +62,20 @@ export const MRT_TableContainer = <TData extends Record<string, any>>({
           }
         }
       }}
-      sx={(theme) => ({
-        maxWidth: '100%',
-        maxHeight: enableStickyHeader
-          ? `clamp(350px, calc(100vh - ${totalToolbarHeight}px), 9999px)`
-          : undefined,
-        overflow: 'auto',
-        ...(tableContainerProps?.sx instanceof Function
-          ? tableContainerProps.sx(theme)
-          : (tableContainerProps?.sx as any)),
-      })}
       style={{
         maxHeight: isFullScreen
           ? `calc(100vh - ${totalToolbarHeight}px)`
           : undefined,
         ...tableContainerProps?.style,
       }}
+      sx={(theme) => ({
+        maxHeight: enableStickyHeader
+          ? `clamp(350px, calc(100vh - ${totalToolbarHeight}px), 9999px)`
+          : undefined,
+        maxWidth: '100%',
+        overflow: 'auto',
+        ...(parseFromValuesOrFunc(tableContainerProps?.sx, theme) as any),
+      })}
     >
       <MRT_Table table={table} />
       {(createModalOpen || editModalOpen) && (

package/src/table/MRT_TablePaper.tsx

@@ -1,7 +1,8 @@
 import Paper from '@mui/material/Paper';
-import { MRT_TopToolbar } from '../toolbar/MRT_TopToolbar';
-import { MRT_BottomToolbar } from '../toolbar/MRT_BottomToolbar';
 import { MRT_TableContainer } from './MRT_TableContainer';
+import { parseFromValuesOrFunc } from '../column.utils';
+import { MRT_BottomToolbar } from '../toolbar/MRT_BottomToolbar';
+import { MRT_TopToolbar } from '../toolbar/MRT_TopToolbar';
 import { type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -24,10 +25,7 @@ export const MRT_TablePaper = <TData extends Record<string, any>>({
   } = table;
   const { isFullScreen } = getState();
 
-  const tablePaperProps =
-    muiTablePaperProps instanceof Function
-      ? muiTablePaperProps({ table })
-      : muiTablePaperProps;
+  const tablePaperProps = parseFromValuesOrFunc(muiTablePaperProps, { table });
 
   return (
     <Paper
@@ -40,15 +38,7 @@ export const MRT_TablePaper = <TData extends Record<string, any>>({
           tablePaperProps.ref.current = ref;
         }
       }}
-      sx={(theme) => ({
-        overflow: 'hidden',
-        transition: 'all 100ms ease-in-out',
-        ...(tablePaperProps?.sx instanceof Function
-          ? tablePaperProps?.sx(theme)
-          : (tablePaperProps?.sx as any)),
-      })}
       style={{
-        ...tablePaperProps?.style,
         ...(isFullScreen
           ? {
               bottom: 0,
@@ -65,17 +55,23 @@ export const MRT_TablePaper = <TData extends Record<string, any>>({
               zIndex: 10,
             }
           : {}),
+        ...tablePaperProps?.style,
       }}
+      sx={(theme) => ({
+        overflow: 'hidden',
+        transition: 'all 100ms ease-in-out',
+        ...(parseFromValuesOrFunc(tablePaperProps?.sx, theme) as any),
+      })}
     >
       {enableTopToolbar &&
-        (renderTopToolbar instanceof Function
-          ? renderTopToolbar({ table })
-          : renderTopToolbar ?? <MRT_TopToolbar table={table} />)}
+        (parseFromValuesOrFunc(renderTopToolbar, { table }) ?? (
+          <MRT_TopToolbar table={table} />
+        ))}
       <MRT_TableContainer table={table} />
       {enableBottomToolbar &&
-        (renderBottomToolbar instanceof Function
-          ? renderBottomToolbar({ table })
-          : renderBottomToolbar ?? <MRT_BottomToolbar table={table} />)}
+        (parseFromValuesOrFunc(renderBottomToolbar, { table }) ?? (
+          <MRT_BottomToolbar table={table} />
+        ))}
     </Paper>
   );
 };

package/src/toolbar/MRT_BottomToolbar.tsx

@@ -1,12 +1,13 @@
 import Box from '@mui/material/Box';
 import Toolbar from '@mui/material/Toolbar';
-import useMediaQuery from '@mui/material/useMediaQuery';
 import { alpha } from '@mui/material/styles';
+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 { MRT_LinearProgressBar } from './MRT_LinearProgressBar';
 import { commonToolbarStyles } from './MRT_TopToolbar';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -32,10 +33,7 @@ export const MRT_BottomToolbar = <TData extends Record<string, any>>({
 
   const isMobile = useMediaQuery('(max-width:720px)');
 
-  const toolbarProps =
-    muiBottomToolbarProps instanceof Function
-      ? muiBottomToolbarProps({ table })
-      : muiBottomToolbarProps;
+  const toolbarProps = parseFromValuesOrFunc(muiBottomToolbarProps, { table });
 
   const stackAlertBanner = isMobile || !!renderBottomToolbarCustomActions;
 
@@ -52,22 +50,18 @@ export const MRT_BottomToolbar = <TData extends Record<string, any>>({
           }
         }
       }}
-      sx={(theme) =>
-        ({
-          ...commonToolbarStyles({ theme }),
-          bottom: isFullScreen ? '0' : undefined,
-          boxShadow: `0 1px 2px -1px ${alpha(
-            theme.palette.common.black,
-            0.1,
-          )} inset`,
-          left: 0,
-          position: isFullScreen ? 'fixed' : 'relative',
-          right: 0,
-          ...(toolbarProps?.sx instanceof Function
-            ? toolbarProps.sx(theme)
-            : (toolbarProps?.sx as any)),
-        } as any)
-      }
+      sx={(theme) => ({
+        ...commonToolbarStyles({ theme }),
+        bottom: isFullScreen ? '0' : undefined,
+        boxShadow: `0 1px 2px -1px ${alpha(
+          theme.palette.common.black,
+          0.1,
+        )} inset`,
+        left: 0,
+        position: isFullScreen ? 'fixed' : 'relative',
+        right: 0,
+        ...(parseFromValuesOrFunc(toolbarProps?.sx, theme) as any),
+      })}
     >
       <MRT_LinearProgressBar isTopToolbar={false} table={table} />
       {positionToolbarAlertBanner === 'bottom' && (
@@ -104,8 +98,8 @@ export const MRT_BottomToolbar = <TData extends Record<string, any>>({
           }}
         >
           {enablePagination &&
-            ['bottom', 'both'].includes(positionPagination ?? '') && (
-              <MRT_TablePagination table={table} position="bottom" />
+            ['both', 'bottom'].includes(positionPagination ?? '') && (
+              <MRT_TablePagination position="bottom" table={table} />
             )}
         </Box>
       </Box>