material-react-table 0.24.1 → 0.26.1

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, FC } from 'react';
+import React, { FC } from 'react';
 import { Checkbox, Tooltip } from '@mui/material';
 import type { MRT_Row, MRT_TableInstance } from '..';
 
@@ -20,24 +20,12 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, table }) => {
   } = table;
   const { density } = getState();
 
-  const handleSelectChange = (event: ChangeEvent<HTMLInputElement>) => {
-    if (selectAll) {
-      if (selectAllMode === 'all') {
-        table.getToggleAllRowsSelectedHandler()(event as any);
-      } else if (selectAllMode === 'page') {
-        table.getToggleAllPageRowsSelectedHandler()(event as any);
-      }
-    } else if (row) {
-      row?.getToggleSelectedHandler()(event as any);
-    }
-  };
-
-  const checkboxProps = selectAll
+  const checkboxProps = !row
     ? muiSelectAllCheckboxProps instanceof Function
       ? muiSelectAllCheckboxProps({ table })
       : muiSelectAllCheckboxProps
     : muiSelectCheckboxProps instanceof Function
-    ? muiSelectCheckboxProps({ row: row as MRT_Row, table })
+    ? muiSelectCheckboxProps({ row, table })
     : muiSelectCheckboxProps;
 
   return (
@@ -61,14 +49,23 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, table }) => {
             ? localization.toggleSelectAll
             : localization.toggleSelectRow,
         }}
-        onChange={handleSelectChange}
+        onChange={
+          !row
+            ? selectAllMode === 'all'
+              ? table.getToggleAllRowsSelectedHandler()
+              : table.getToggleAllPageRowsSelectedHandler()
+            : row.getToggleSelectedHandler()
+        }
         size={density === 'compact' ? 'small' : 'medium'}
         {...checkboxProps}
-        sx={{
-          height: density === 'compact' ? '1.75rem' : '2.25rem',
-          width: density === 'compact' ? '1.75rem' : '2.25rem',
-          ...checkboxProps?.sx,
-        }}
+        sx={(theme) => ({
+          height: density === 'compact' ? '1.5rem' : '2rem',
+          width: density === 'compact' ? '1.5rem' : '2rem',
+          m: '-1re.m',
+          ...(checkboxProps?.sx instanceof Function
+            ? checkboxProps.sx(theme)
+            : (checkboxProps?.sx as any)),
+        })}
       />
     </Tooltip>
   );

package/src/localization.ts

@@ -14,6 +14,7 @@ export interface MRT_Localization {
   expand: string;
   expandAll: string;
   filterBetween: string;
+  filterBetweenInclusive: string;
   filterByColumn: string;
   filterContains: string;
   filterEmpty: string;
@@ -21,7 +22,9 @@ export interface MRT_Localization {
   filterEquals: string;
   filterFuzzy: string;
   filterGreaterThan: string;
+  filterGreaterThanOrEqualTo: string;
   filterLessThan: string;
+  filterLessThanOrEqualTo: string;
   filterMode: string;
   filterNotEmpty: string;
   filterNotEquals: string;
@@ -83,6 +86,7 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   expand: 'Expand',
   expandAll: 'Expand all',
   filterBetween: 'Between',
+  filterBetweenInclusive: 'Between Inclusive',
   filterByColumn: 'Filter by {column}',
   filterContains: 'Contains',
   filterEmpty: 'Empty',
@@ -90,7 +94,9 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   filterEquals: 'Equals',
   filterFuzzy: 'Fuzzy',
   filterGreaterThan: 'Greater Than',
+  filterGreaterThanOrEqualTo: 'Greater Than Or Equal To',
   filterLessThan: 'Less Than',
+  filterLessThanOrEqualTo: 'Less Than Or Equal To',
   filterMode: 'Filter Mode: {filterType}',
   filterNotEmpty: 'Not Empty',
   filterNotEquals: 'Not Equals',

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -326,21 +326,22 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             </Box>
           </MenuItem>,
         ]}
-      {enableColumnResizing && [
-        <MenuItem
-          disabled={!column.getCanResize() || !columnSizing[column.id]}
-          key={0}
-          onClick={handleResetColumnSize}
-          sx={commonMenuItemStyles}
-        >
-          <Box sx={commonListItemStyles}>
-            <ListItemIcon>
-              <RestartAltIcon />
-            </ListItemIcon>
-            {localization.resetColumnSize}
-          </Box>
-        </MenuItem>,
-      ]}
+      {enableColumnResizing &&
+        column.getCanResize() && [
+          <MenuItem
+            disabled={!columnSizing[column.id]}
+            key={0}
+            onClick={handleResetColumnSize}
+            sx={commonMenuItemStyles}
+          >
+            <Box sx={commonListItemStyles}>
+              <ListItemIcon>
+                <RestartAltIcon />
+              </ListItemIcon>
+              {localization.resetColumnSize}
+            </Box>
+          </MenuItem>,
+        ]}
       {enableHiding && [
         <MenuItem
           disabled={columnDef.enableHiding === false}

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -1,13 +1,7 @@
 import React, { FC, useMemo } from 'react';
-import { Menu, MenuItem } from '@mui/material';
+import { Box, Menu, MenuItem } from '@mui/material';
 import type { MRT_FilterOption, MRT_Header, MRT_TableInstance } from '..';
 
-const commonMenuItemStyles = {
-  py: '6px',
-  my: 0,
-  alignItems: 'center',
-};
-
 interface Props {
   anchorEl: HTMLElement | null;
   header?: MRT_Header;
@@ -42,75 +36,107 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
 
   const filterOptions = useMemo(
     () =>
-      [
-        {
-          option: 'fuzzy',
-          label: localization.filterFuzzy,
-          divider: false,
-        },
-        {
-          option: 'contains',
-          label: localization.filterContains,
-          divider: false,
-        },
-        {
-          option: 'startsWith',
-          label: localization.filterStartsWith,
-          divider: false,
-        },
-        {
-          option: 'endsWith',
-          label: localization.filterEndsWith,
-          divider: true,
-        },
-        {
-          option: 'equals',
-          label: localization.filterEquals,
-          divider: false,
-        },
-        {
-          option: 'notEquals',
-          label: localization.filterNotEquals,
-          divider: true,
-        },
-        {
-          option: 'between',
-          label: localization.filterBetween,
-          divider: false,
-        },
-        {
-          option: 'greaterThan',
-          label: localization.filterGreaterThan,
-          divider: false,
-        },
-        {
-          option: 'lessThan',
-          label: localization.filterLessThan,
-          divider: true,
-        },
-        {
-          option: 'empty',
-          label: localization.filterEmpty,
-          divider: false,
-        },
-        {
-          option: 'notEmpty',
-          label: localization.filterNotEmpty,
-          divider: false,
-        },
-      ].filter((filterType) =>
+      (
+        [
+          {
+            option: 'fuzzy',
+            symbol: '≈',
+            label: localization.filterFuzzy,
+            divider: false,
+          },
+          {
+            option: 'contains',
+            symbol: '*',
+            label: localization.filterContains,
+            divider: false,
+          },
+          {
+            option: 'startsWith',
+            symbol: 'a',
+            label: localization.filterStartsWith,
+            divider: false,
+          },
+          {
+            option: 'endsWith',
+            symbol: 'z',
+            label: localization.filterEndsWith,
+            divider: true,
+          },
+          {
+            option: 'equals',
+            symbol: '=',
+            label: localization.filterEquals,
+            divider: false,
+          },
+          {
+            option: 'notEquals',
+            symbol: '≠',
+            label: localization.filterNotEquals,
+            divider: true,
+          },
+          {
+            option: 'between',
+            symbol: '⇿',
+            label: localization.filterBetween,
+            divider: false,
+          },
+          {
+            option: 'betweenInclusive',
+            symbol: '⬌',
+            label: localization.filterBetweenInclusive,
+            divider: true,
+          },
+          {
+            option: 'greaterThan',
+            symbol: '>',
+            label: localization.filterGreaterThan,
+            divider: false,
+          },
+          {
+            option: 'greaterThanOrEqualTo',
+            symbol: '≥',
+            label: localization.filterGreaterThanOrEqualTo,
+            divider: false,
+          },
+          {
+            option: 'lessThan',
+            symbol: '<',
+            label: localization.filterLessThan,
+            divider: false,
+          },
+          {
+            option: 'lessThanOrEqualTo',
+            symbol: '≤',
+            label: localization.filterLessThanOrEqualTo,
+            divider: true,
+          },
+          {
+            option: 'empty',
+            symbol: '∅',
+            label: localization.filterEmpty,
+            divider: false,
+          },
+          {
+            option: 'notEmpty',
+            symbol: '!∅',
+            label: localization.filterNotEmpty,
+            divider: false,
+          },
+        ] as Array<{
+          divider: boolean;
+          fn: Function;
+          label: string;
+          option: MRT_FilterOption;
+          symbol?: string;
+        }>
+      ).filter((filterType) =>
         columnDef
           ? allowedColumnFilterOptions === undefined ||
             allowedColumnFilterOptions?.includes(filterType.option)
           : (!enabledGlobalFilterOptions ||
               enabledGlobalFilterOptions.includes(filterType.option)) &&
             ['fuzzy', 'contains'].includes(filterType.option),
-      ) as Array<{
-        option: MRT_FilterOption;
-        label: string;
-        divider: boolean;
-        fn: Function;
-      }>,
+      ),
     [],
   );
 
@@ -148,15 +174,22 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
         dense: density === 'compact',
       }}
     >
-      {filterOptions.map(({ option, label, divider }, index) => (
+      {filterOptions.map(({ option, label, divider, symbol }, index) => (
         <MenuItem
           divider={divider}
           key={index}
           onClick={() => handleSelectFilterType(option)}
           selected={option === filterOption}
-          sx={commonMenuItemStyles}
+          sx={{
+            py: '6px',
+            my: 0,
+            alignItems: 'center',
+            display: 'flex',
+            gap: '2ch',
+          }}
           value={option}
         >
+          <Box sx={{ fontSize: '1.25rem', width: '2ch' }}>{symbol}</Box>
           {label}
         </MenuItem>
       ))}

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -2,7 +2,7 @@ import React, { FC, useMemo, useState } from 'react';
 import { Button, Menu, Divider, Box } from '@mui/material';
 import { MRT_ShowHideColumnsMenuItems } from './MRT_ShowHideColumnsMenuItems';
 import type { MRT_Column, MRT_TableInstance } from '..';
-import { getDefaultColumnOrderIds } from '../utils';
+import { getDefaultColumnOrderIds } from '../column.utils';
 
 interface Props {
   anchorEl: HTMLElement | null;

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -15,7 +15,7 @@ import {
 } from '@mui/material';
 import { MRT_ColumnPinningButtons } from '../buttons/MRT_ColumnPinningButtons';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
-import { reorderColumn } from '../utils';
+import { reorderColumn } from '../column.utils';
 import type { MRT_Column, MRT_TableInstance } from '..';
 
 interface Props {

package/src/table/MRT_Table.tsx

@@ -35,11 +35,13 @@ export const MRT_Table: FC<Props> = ({ tableContainerRef, table }) => {
         enableStickyHeader || enableRowVirtualization || isFullScreen
       }
       {...tableProps}
-      sx={{
+      sx={(theme) => ({
         tableLayout:
           enableColumnResizing || enableRowVirtualization ? 'fixed' : 'auto',
-        ...tableProps?.sx,
-      }}
+        ...(tableProps?.sx instanceof Function
+          ? tableProps.sx(theme)
+          : (tableProps?.sx as any)),
+      })}
     >
       {enableTableHead && <MRT_TableHead table={table} />}
       <MRT_TableBody tableContainerRef={tableContainerRef} table={table} />

package/src/table/MRT_TableContainer.tsx

@@ -51,15 +51,17 @@ export const MRT_TableContainer: FC<Props> = ({ table }) => {
     <TableContainer
       ref={tableContainerRef}
       {...tableContainerProps}
-      sx={{
+      sx={(theme) => ({
         maxWidth: '100%',
         maxHeight:
           enableStickyHeader || enableRowVirtualization
             ? `clamp(350px, calc(100vh - ${totalToolbarHeight}px), 9999px)`
             : undefined,
         overflow: 'auto',
-        ...tableContainerProps?.sx,
-      }}
+        ...(tableContainerProps?.sx instanceof Function
+          ? tableContainerProps.sx(theme)
+          : (tableContainerProps?.sx as any)),
+      })}
       style={{
         maxHeight: isFullScreen
           ? `calc(100vh - ${totalToolbarHeight}px)`

package/src/table/MRT_TableRoot.tsx

@@ -10,28 +10,44 @@ import {
   getSortedRowModel,
   useReactTable,
 } from '@tanstack/react-table';
-import {
-  MRT_Cell,
-  MRT_Column,
-  MRT_ColumnDef,
-  MRT_FilterOption,
-  MRT_Row,
-  MRT_TableInstance,
-  MRT_TableState,
-} from '..';
+import { Box, Dialog, Grow } from '@mui/material';
 import { MRT_ExpandAllButton } from '../buttons/MRT_ExpandAllButton';
 import { MRT_ExpandButton } from '../buttons/MRT_ExpandButton';
 import { MRT_ToggleRowActionMenuButton } from '../buttons/MRT_ToggleRowActionMenuButton';
 import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
-import { MaterialReactTableProps } from '../MaterialReactTable';
 import { MRT_TablePaper } from './MRT_TablePaper';
-import { Box, Dialog, Grow } from '@mui/material';
 import {
   prepareColumns,
   getAllLeafColumnDefs,
   getDefaultColumnOrderIds,
-} from '../utils';
+} from '../column.utils';
 import { MRT_FilterFns } from '../filtersFns';
+import type {
+  MRT_Cell,
+  MRT_Column,
+  MRT_ColumnDef,
+  MRT_FilterOption,
+  MRT_Row,
+  MRT_TableInstance,
+  MRT_TableState,
+  MaterialReactTableProps,
+} from '..';
+
+const defaultDisplayColumnDefOptions = {
+  columnDefType: 'display',
+  enableClickToCopy: false,
+  enableColumnActions: false,
+  enableColumnDragging: false,
+  enableColumnFilter: false,
+  enableColumnOrdering: false,
+  enableEditing: false,
+  enableGlobalFilter: false,
+  enableGrouping: false,
+  enableHiding: false,
+  enablePinning: false,
+  enableResizing: false,
+  enableSorting: false,
+} as Partial<MRT_ColumnDef>;
 
 export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
   props: MaterialReactTableProps<TData>,
@@ -54,17 +70,21 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
     initialState.columnOrder ?? [],
   );
   const [currentDraggingColumn, setCurrentDraggingColumn] =
-    useState<MRT_Column<TData> | null>(null);
+    useState<MRT_Column<TData> | null>(
+      initialState.currentDraggingColumn ?? null,
+    );
   const [currentDraggingRow, setCurrentDraggingRow] =
-    useState<MRT_Row<TData> | null>(null);
+    useState<MRT_Row<TData> | null>(initialState.currentDraggingRow ?? null);
   const [currentEditingCell, setCurrentEditingCell] =
-    useState<MRT_Cell<TData> | null>(initialState?.currentEditingCell ?? null);
+    useState<MRT_Cell<TData> | null>(initialState.currentEditingCell ?? null);
   const [currentEditingRow, setCurrentEditingRow] =
-    useState<MRT_Row<TData> | null>(initialState?.currentEditingRow ?? null);
+    useState<MRT_Row<TData> | null>(initialState.currentEditingRow ?? null);
   const [currentHoveredColumn, setCurrentHoveredColumn] =
-    useState<MRT_Column<TData> | null>(null);
+    useState<MRT_Column<TData> | null>(
+      initialState.currentHoveredColumn ?? null,
+    );
   const [currentHoveredRow, setCurrentHoveredRow] =
-    useState<MRT_Row<TData> | null>(null);
+    useState<MRT_Row<TData> | null>(initialState.currentHoveredRow ?? null);
   const [density, setDensity] = useState(
     initialState?.density ?? 'comfortable',
   );
@@ -80,7 +100,6 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
   const [showGlobalFilter, setShowGlobalFilter] = useState(
     initialState?.showGlobalFilter ?? false,
   );
-
   const [currentFilterFns, setCurrentFilterFns] = useState<{
     [key: string]: MRT_FilterOption;
   }>(() =>
@@ -100,7 +119,6 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
       ),
     ),
   );
-
   const [currentGlobalFilterFn, setCurrentGlobalFilterFn] =
     useState<MRT_FilterOption>(
       props.globalFilterFn instanceof String
@@ -113,12 +131,11 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
       (
         [
           columnOrder.includes('mrt-row-drag') && {
-            columnDefType: 'display',
             header: props.localization?.move,
-            id: 'mrt-row-drag',
-            muiTableBodyCellProps: props.muiTableBodyCellProps,
-            muiTableHeadCellProps: props.muiTableHeadCellProps,
             size: 60,
+            ...defaultDisplayColumnDefOptions,
+            ...props.displayColumnDefOptions?.['mrt-row-drag'],
+            id: 'mrt-row-drag',
           },
           columnOrder.includes('mrt-row-actions') && {
             Cell: ({ cell }) => (
@@ -127,12 +144,11 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
                 table={table}
               />
             ),
-            columnDefType: 'display',
             header: props.localization?.actions,
-            id: 'mrt-row-actions',
-            muiTableBodyCellProps: props.muiTableBodyCellProps,
-            muiTableHeadCellProps: props.muiTableHeadCellProps,
             size: 70,
+            ...defaultDisplayColumnDefOptions,
+            ...props.displayColumnDefOptions?.['mrt-row-actions'],
+            id: 'mrt-row-actions',
           },
           columnOrder.includes('mrt-row-expand') && {
             Cell: ({ cell }) => (
@@ -142,12 +158,11 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
               props.enableExpandAll ? (
                 <MRT_ExpandAllButton table={table} />
               ) : null,
-            columnDefType: 'display',
             header: props.localization?.expand,
-            id: 'mrt-row-expand',
-            muiTableBodyCellProps: props.muiTableBodyCellProps,
-            muiTableHeadCellProps: props.muiTableHeadCellProps,
             size: 60,
+            ...defaultDisplayColumnDefOptions,
+            ...props.displayColumnDefOptions?.['mrt-row-expand'],
+            id: 'mrt-row-expand',
           },
           columnOrder.includes('mrt-row-select') && {
             Cell: ({ cell }) => (
@@ -157,33 +172,35 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
               props.enableSelectAll ? (
                 <MRT_SelectCheckbox selectAll table={table} />
               ) : null,
-            columnDefType: 'display',
             header: props.localization?.select,
-            id: 'mrt-row-select',
-            muiTableBodyCellProps: props.muiTableBodyCellProps,
-            muiTableHeadCellProps: props.muiTableHeadCellProps,
             size: 60,
+            ...defaultDisplayColumnDefOptions,
+            ...props.displayColumnDefOptions?.['mrt-row-select'],
+            id: 'mrt-row-select',
           },
           columnOrder.includes('mrt-row-numbers') && {
             Cell: ({ cell }) => cell.row.index + 1,
             Header: () => props.localization?.rowNumber,
-            columnDefType: 'display',
             header: props.localization?.rowNumbers,
-            id: 'mrt-row-numbers',
-            muiTableBodyCellProps: props.muiTableBodyCellProps,
-            muiTableHeadCellProps: props.muiTableHeadCellProps,
             size: 60,
+            ...defaultDisplayColumnDefOptions,
+            ...props.displayColumnDefOptions?.['mrt-row-numbers'],
+            id: 'mrt-row-numbers',
           },
         ] as MRT_ColumnDef<TData>[]
       ).filter(Boolean),
     [
       columnOrder,
+      props.displayColumnDefOptions,
       props.editingMode,
+      props.enableColumnDragging,
+      props.enableColumnOrdering,
       props.enableEditing,
       props.enableExpandAll,
       props.enableExpanding,
       props.enableGrouping,
       props.enableRowActions,
+      props.enableRowDragging,
       props.enableRowNumbers,
       props.enableRowOrdering,
       props.enableRowSelection,

package/src/toolbar/MRT_TablePagination.tsx

@@ -52,7 +52,7 @@ export const MRT_TablePagination: FC<Props> = ({ table, position }) => {
       showFirstButton={showFirstLastPageButtons}
       showLastButton={showFirstLastPageButtons}
       {...tablePaginationProps}
-      sx={{
+      sx={(theme) => ({
         m: '0 0.5rem',
         mt:
           position === 'top' &&
@@ -62,8 +62,10 @@ export const MRT_TablePagination: FC<Props> = ({ table, position }) => {
             : undefined,
         position: 'relative',
         zIndex: 2,
-        ...tablePaginationProps?.sx,
-      }}
+        ...(tablePaginationProps?.sx instanceof Function
+          ? tablePaginationProps.sx(theme)
+          : (tablePaginationProps?.sx as any)),
+      })}
     />
   );
 };

package/src/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -63,7 +63,7 @@ export const MRT_ToolbarAlertBanner: FC<Props> = ({
         color="info"
         icon={false}
         {...alertProps}
-        sx={{
+        sx={(theme) => ({
           borderRadius: 0,
           fontSize: '1rem',
           left: 0,
@@ -73,8 +73,10 @@ export const MRT_ToolbarAlertBanner: FC<Props> = ({
           top: 0,
           width: '100%',
           zIndex: 2,
-          ...alertProps?.sx,
-        }}
+          ...(alertProps?.sx instanceof Function
+            ? alertProps.sx(theme)
+            : (alertProps?.sx as any)),
+        })}
       >
         {alertProps?.title && <AlertTitle>{alertProps.title}</AlertTitle>}
         <Box sx={{ p: '0.5rem 1rem' }}>

package/src/toolbar/MRT_ToolbarBottom.tsx

@@ -49,7 +49,9 @@ export const MRT_ToolbarBottom: FC<Props> = ({ table }) => {
           left: 0,
           position: isFullScreen ? 'fixed' : 'relative',
           right: 0,
-          ...toolbarProps?.sx,
+          ...(toolbarProps?.sx instanceof Function
+            ? toolbarProps.sx(theme)
+            : (toolbarProps?.sx as any)),
         } as any)
       }
     >

package/src/toolbar/MRT_ToolbarTop.tsx

@@ -62,7 +62,9 @@ export const MRT_ToolbarTop: FC<Props> = ({ table }) => {
           position: isFullScreen ? 'sticky' : undefined,
           top: isFullScreen ? '0' : undefined,
           ...commonToolbarStyles({ theme }),
-          ...toolbarProps?.sx,
+          ...(toolbarProps?.sx instanceof Function
+            ? toolbarProps.sx(theme)
+            : (toolbarProps?.sx as any)),
         } as any)
       }
     >