material-react-table 0.24.0 → 0.26.0

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