material-react-table 1.7.4 → 1.8.0

package/src/MaterialReactTable.tsx

@@ -29,18 +29,33 @@ import type {
   Cell,
   Column,
   ColumnDef,
+  ColumnFiltersState,
+  ColumnOrderState,
+  ColumnPinningState,
+  ColumnSizingInfoState,
+  ColumnSizingState,
   DeepKeys,
+  ExpandedState,
   FilterFn,
+  GroupingState,
   Header,
   HeaderGroup,
   OnChangeFn,
+  PaginationState,
   Row,
+  RowSelectionState,
   SortingFn,
+  SortingState,
   Table,
   TableOptions,
   TableState,
+  VisibilityState,
 } from '@tanstack/react-table';
-import type { VirtualizerOptions, Virtualizer } from '@tanstack/react-virtual';
+import type {
+  VirtualizerOptions,
+  Virtualizer,
+  VirtualItem,
+} from '@tanstack/react-virtual';
 import { MRT_AggregationFns } from './aggregationFns';
 import { MRT_DefaultColumn, MRT_DefaultDisplayColumn } from './column.utils';
 import { MRT_FilterFns } from './filterFns';
@@ -49,11 +64,30 @@ import { MRT_SortingFns } from './sortingFns';
 import { MRT_TableRoot } from './table/MRT_TableRoot';
 import { MRT_Localization_EN } from './_locales/en';
 
+export { MRT_AggregationFns, MRT_FilterFns, MRT_SortingFns };
+
 /**
  * Most of this file is just TypeScript types
  */
 
-export type DensityState = 'comfortable' | 'compact' | 'spacious';
+export type MRT_DensityState = 'comfortable' | 'compact' | 'spacious';
+
+export type {
+  ColumnFiltersState as MRT_ColumnFiltersState,
+  ColumnOrderState as MRT_ColumnOrderState,
+  ColumnPinningState as MRT_ColumnPinningState,
+  ColumnSizingInfoState as MRT_ColumnSizingInfoState,
+  ColumnSizingState as MRT_ColumnSizingState,
+  ExpandedState as MRT_ExpandedState,
+  GroupingState as MRT_GroupingState,
+  PaginationState as MRT_PaginationState,
+  RowSelectionState as MRT_RowSelectionState,
+  SortingState as MRT_SortingState,
+  VirtualItem as MRT_VirtualItem,
+  Virtualizer as MRT_Virtualizer,
+  VirtualizerOptions as MRT_VirtualizerOptions,
+  VisibilityState as MRT_VisibilityState,
+};
 
 type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);
 
@@ -206,7 +240,7 @@ export type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<
   setColumnFilterFns: Dispatch<
     SetStateAction<{ [key: string]: MRT_FilterOption }>
   >;
-  setDensity: Dispatch<SetStateAction<DensityState>>;
+  setDensity: Dispatch<SetStateAction<MRT_DensityState>>;
   setDraggingColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
   setDraggingRow: Dispatch<SetStateAction<MRT_Row<TData> | null>>;
   setEditingCell: Dispatch<SetStateAction<MRT_Cell<TData> | null>>;
@@ -228,7 +262,7 @@ export type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<
 export type MRT_TableState<TData extends Record<string, any> = {}> =
   TableState & {
     columnFilterFns: Record<string, MRT_FilterOption>;
-    density: DensityState;
+    density: MRT_DensityState;
     draggingColumn: MRT_Column<TData> | null;
     draggingRow: MRT_Row<TData> | null;
     editingCell: MRT_Cell<TData> | null;
@@ -340,12 +374,15 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
     LiteralUnion<string & MRT_FilterOption>
   > | null;
   columns?: MRT_ColumnDef<TData>[];
+  editSelectOptions?: (string | { text: string; value: any })[];
+  editVariant?: 'text' | 'select';
   enableClickToCopy?: boolean;
   enableColumnActions?: boolean;
   enableColumnDragging?: boolean;
   enableColumnFilterModes?: boolean;
   enableColumnOrdering?: boolean;
-  enableEditing?: boolean;
+  enableEditing?: boolean | ((row: MRT_Row<TData>) => boolean);
+  enableFilterMatchHighlighting?: boolean;
   filterFn?: MRT_FilterFn<TData>;
   filterSelectOptions?: (string | { text: string; value: any })[];
   filterVariant?: 'text' | 'select' | 'multi-select' | 'range' | 'checkbox';
@@ -594,7 +631,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     enableColumnOrdering?: boolean;
     enableColumnVirtualization?: boolean;
     enableDensityToggle?: boolean;
-    enableEditing?: boolean;
+    enableEditing?: boolean | ((row: MRT_Row<TData>) => boolean);
     enableExpandAll?: boolean;
     enableFilterMatchHighlighting?: boolean;
     enableFullScreenToggle?: boolean;
@@ -804,7 +841,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     muiTopToolbarProps?:
       | ToolbarProps
       | ((props: { table: MRT_TableInstance<TData> }) => ToolbarProps);
-    onDensityChange?: OnChangeFn<DensityState>;
+    onDensityChange?: OnChangeFn<MRT_DensityState>;
     onDraggingColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
     onDraggingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
     onEditingCellChange?: OnChangeFn<MRT_Cell<TData> | null>;

package/src/body/MRT_TableBody.tsx

@@ -1,19 +1,20 @@
 import React, { memo, useMemo } from 'react';
-import {
-  useVirtualizer,
-  Virtualizer,
-  VirtualItem,
-} from '@tanstack/react-virtual';
+import { useVirtualizer } from '@tanstack/react-virtual';
 import TableBody from '@mui/material/TableBody';
 import Typography from '@mui/material/Typography';
 import { Memo_MRT_TableBodyRow, MRT_TableBodyRow } from './MRT_TableBodyRow';
 import { rankGlobalFuzzy } from '../sortingFns';
-import type { MRT_Row, MRT_TableInstance } from '..';
+import type {
+  MRT_Row,
+  MRT_TableInstance,
+  MRT_VirtualItem,
+  MRT_Virtualizer,
+} from '..';
 
 interface Props {
-  columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
+  columnVirtualizer?: MRT_Virtualizer<HTMLDivElement, HTMLTableCellElement>;
   table: MRT_TableInstance;
-  virtualColumns?: VirtualItem[];
+  virtualColumns?: MRT_VirtualItem[];
   virtualPaddingLeft?: number;
   virtualPaddingRight?: number;
 }
@@ -116,7 +117,7 @@ export const MRT_TableBody = ({
   ]);
 
   const rowVirtualizer:
-    | Virtualizer<HTMLDivElement, HTMLTableRowElement>
+    | MRT_Virtualizer<HTMLDivElement, HTMLTableRowElement>
     | undefined = enableRowVirtualization
     ? useVirtualizer({
         count: rows.length,
@@ -201,7 +202,7 @@ export const MRT_TableBody = ({
                 virtualPaddingLeft,
                 virtualPaddingRight,
                 virtualRow: rowVirtualizer
-                  ? (rowOrVirtualRow as VirtualItem)
+                  ? (rowOrVirtualRow as MRT_VirtualItem)
                   : undefined,
               };
               return memoMode === 'rows' ? (

package/src/body/MRT_TableBodyCell.tsx

@@ -19,8 +19,7 @@ import {
   getIsFirstColumn,
   getIsLastColumn,
 } from '../column.utils';
-import type { VirtualItem } from '@tanstack/react-virtual';
-import type { MRT_Cell, MRT_TableInstance } from '..';
+import type { MRT_Cell, MRT_TableInstance, MRT_VirtualItem } from '..';
 
 interface Props {
   cell: MRT_Cell;
@@ -30,7 +29,7 @@ interface Props {
   rowIndex: number;
   rowRef: RefObject<HTMLTableRowElement>;
   table: MRT_TableInstance;
-  virtualCell?: VirtualItem;
+  virtualCell?: MRT_VirtualItem;
 }
 
 export const MRT_TableBodyCell = ({
@@ -153,8 +152,10 @@ export const MRT_TableBodyCell = ({
   }, [draggingColumn, draggingRow, hoveredColumn, hoveredRow, rowIndex]);
 
   const isEditable =
-    (enableEditing || columnDef.enableEditing) &&
-    columnDef.enableEditing !== false;
+    (enableEditing instanceof Function ? enableEditing(row) : enableEditing) &&
+    (columnDef.enableEditing instanceof Function
+      ? columnDef.enableEditing(row)
+      : columnDef.enableEditing) !== false;
 
   const isEditing =
     isEditable &&
@@ -166,11 +167,7 @@ export const MRT_TableBodyCell = ({
 
   const handleDoubleClick = (event: MouseEvent<HTMLTableCellElement>) => {
     tableCellProps?.onDoubleClick?.(event);
-    if (
-      (enableEditing || columnDef.enableEditing) &&
-      columnDef.enableEditing !== false &&
-      editingMode === 'cell'
-    ) {
+    if (isEditable && editingMode === 'cell') {
       setEditingCell(cell);
       queueMicrotask(() => {
         const textField = editInputRefs.current[column.id];
@@ -241,8 +238,7 @@ export const MRT_TableBodyCell = ({
         '&:hover': {
           backgroundColor:
             enableHover &&
-            enableEditing &&
-            columnDef.enableEditing !== false &&
+            isEditable &&
             ['table', 'cell'].includes(editingMode ?? '')
               ? theme.palette.mode === 'dark'
                 ? `${lighten(theme.palette.background.default, 0.2)} !important`

package/src/body/MRT_TableBodyCellValue.tsx

@@ -48,6 +48,7 @@ export const MRT_TableBodyCellValue = ({ cell, table }: Props) => {
 
   if (
     enableFilterMatchHighlighting &&
+    columnDef.enableFilterMatchHighlighting !== false &&
     renderedCellValue &&
     allowedTypes.includes(typeof renderedCellValue) &&
     ((filterValue &&

package/src/body/MRT_TableBodyRow.tsx

@@ -3,20 +3,25 @@ import TableRow from '@mui/material/TableRow';
 import { darken, lighten } from '@mui/material/styles';
 import { Memo_MRT_TableBodyCell, MRT_TableBodyCell } from './MRT_TableBodyCell';
 import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
-import type { VirtualItem, Virtualizer } from '@tanstack/react-virtual';
-import type { MRT_Cell, MRT_Row, MRT_TableInstance } from '..';
+import type {
+  MRT_Cell,
+  MRT_Row,
+  MRT_TableInstance,
+  MRT_VirtualItem,
+  MRT_Virtualizer,
+} from '..';
 
 interface Props {
-  columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
+  columnVirtualizer?: MRT_Virtualizer<HTMLDivElement, HTMLTableCellElement>;
   measureElement?: (element: HTMLTableRowElement) => void;
   numRows: number;
   row: MRT_Row;
   rowIndex: number;
   table: MRT_TableInstance;
-  virtualColumns?: VirtualItem[];
+  virtualColumns?: MRT_VirtualItem[];
   virtualPaddingLeft?: number;
   virtualPaddingRight?: number;
-  virtualRow?: VirtualItem;
+  virtualRow?: MRT_VirtualItem;
 }
 
 export const MRT_TableBodyRow = ({
@@ -103,7 +108,9 @@ export const MRT_TableBodyRow = ({
         ) : null}
         {(virtualColumns ?? row.getVisibleCells()).map((cellOrVirtualCell) => {
           const cell = columnVirtualizer
-            ? row.getVisibleCells()[(cellOrVirtualCell as VirtualItem).index]
+            ? row.getVisibleCells()[
+                (cellOrVirtualCell as MRT_VirtualItem).index
+              ]
             : (cellOrVirtualCell as MRT_Cell);
           const props = {
             cell,
@@ -115,7 +122,7 @@ export const MRT_TableBodyRow = ({
             rowRef,
             table,
             virtualCell: columnVirtualizer
-              ? (cellOrVirtualCell as VirtualItem)
+              ? (cellOrVirtualCell as MRT_VirtualItem)
               : undefined,
           };
           return memoMode === 'cells' &&

package/src/body/MRT_TableDetailPanel.tsx

@@ -3,14 +3,13 @@ import Collapse from '@mui/material/Collapse';
 import TableCell from '@mui/material/TableCell';
 import TableRow from '@mui/material/TableRow';
 import { lighten } from '@mui/material/styles';
-import type { VirtualItem } from '@tanstack/react-virtual';
-import type { MRT_Row, MRT_TableInstance } from '..';
+import type { MRT_Row, MRT_TableInstance, MRT_VirtualItem } from '..';
 
 interface Props {
   parentRowRef: React.RefObject<HTMLTableRowElement>;
   row: MRT_Row;
   table: MRT_TableInstance;
-  virtualRow?: VirtualItem;
+  virtualRow?: MRT_VirtualItem;
 }
 
 export const MRT_TableDetailPanel = ({

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -64,7 +64,10 @@ export const MRT_ToggleRowActionMenuButton = <
         <>{renderRowActions({ cell, row, table })}</>
       ) : row.id === editingRow?.id && editingMode === 'row' ? (
         <MRT_EditActionButtons row={row} table={table} />
-      ) : !renderRowActionMenuItems && enableEditing ? (
+      ) : !renderRowActionMenuItems &&
+        (enableEditing instanceof Function
+          ? enableEditing(row)
+          : enableEditing) ? (
         <Tooltip placement="right" arrow title={localization.edit}>
           <IconButton
             aria-label={localization.edit}

package/src/column.utils.ts

@@ -340,4 +340,9 @@ export const MRT_DefaultDisplayColumn = {
 } as const;
 
 export const parseCSSVarId = (id: string) =>
-  id.replaceAll('.', '_').replaceAll(' ', '_').replaceAll('+', '_');
+  id
+    .replaceAll('.', '_')
+    .replaceAll(' ', '_')
+    .replaceAll('+', '_')
+    .replaceAll('(', '_')
+    .replaceAll(')', '_');

package/src/footer/MRT_TableFooter.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import TableFooter from '@mui/material/TableFooter';
 import { MRT_TableFooterRow } from './MRT_TableFooterRow';
-import type { VirtualItem } from '@tanstack/react-virtual';
-import type { MRT_TableInstance } from '..';
+import type { MRT_TableInstance, MRT_VirtualItem } from '..';
 
 interface Props {
   table: MRT_TableInstance;
-  virtualColumns?: VirtualItem[];
+  virtualColumns?: MRT_VirtualItem[];
   virtualPaddingLeft?: number;
   virtualPaddingRight?: number;
 }

package/src/footer/MRT_TableFooterRow.tsx

@@ -2,13 +2,17 @@ import React from 'react';
 import TableRow from '@mui/material/TableRow';
 import { lighten } from '@mui/material/styles';
 import { MRT_TableFooterCell } from './MRT_TableFooterCell';
-import { VirtualItem } from '@tanstack/react-virtual';
-import type { MRT_Header, MRT_HeaderGroup, MRT_TableInstance } from '..';
+import type {
+  MRT_Header,
+  MRT_HeaderGroup,
+  MRT_TableInstance,
+  MRT_VirtualItem,
+} from '..';
 
 interface Props {
   footerGroup: MRT_HeaderGroup;
   table: MRT_TableInstance;
-  virtualColumns?: VirtualItem[];
+  virtualColumns?: MRT_VirtualItem[];
   virtualPaddingLeft?: number;
   virtualPaddingRight?: number;
 }

package/src/head/MRT_TableHead.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import TableHead from '@mui/material/TableHead';
 import { MRT_TableHeadRow } from './MRT_TableHeadRow';
-import type { VirtualItem } from '@tanstack/react-virtual';
-import type { MRT_TableInstance } from '..';
+import type { MRT_TableInstance, MRT_VirtualItem } from '..';
 
 interface Props {
   table: MRT_TableInstance;
-  virtualColumns?: VirtualItem[];
+  virtualColumns?: MRT_VirtualItem[];
   virtualPaddingLeft?: number;
   virtualPaddingRight?: number;
 }

package/src/head/MRT_TableHeadRow.tsx

@@ -2,13 +2,17 @@ import React from 'react';
 import TableRow from '@mui/material/TableRow';
 import { alpha, lighten } from '@mui/material/styles';
 import { MRT_TableHeadCell } from './MRT_TableHeadCell';
-import type { VirtualItem } from '@tanstack/react-virtual';
-import type { MRT_Header, MRT_HeaderGroup, MRT_TableInstance } from '..';
+import type {
+  MRT_Header,
+  MRT_HeaderGroup,
+  MRT_TableInstance,
+  MRT_VirtualItem,
+} from '..';
 
 interface Props {
   headerGroup: MRT_HeaderGroup;
   table: MRT_TableInstance;
-  virtualColumns?: VirtualItem[];
+  virtualColumns?: MRT_VirtualItem[];
   virtualPaddingLeft?: number;
   virtualPaddingRight?: number;
 }

package/src/inputs/MRT_EditCellTextField.tsx

@@ -1,5 +1,6 @@
 import React, { ChangeEvent, FocusEvent, KeyboardEvent, useState } from 'react';
 import TextField from '@mui/material/TextField';
+import MenuItem from '@mui/material/MenuItem';
 import type { TextFieldProps } from '@mui/material/TextField';
 import type { MRT_Cell, MRT_TableInstance } from '..';
 
@@ -47,6 +48,8 @@ export const MRT_EditCellTextField = <TData extends Record<string, any> = {}>({
     ...mcTableBodyCellEditTextFieldProps,
   };
 
+  const isSelectEdit = columnDef.editVariant === 'select';
+
   const saveRow = (newValue: string) => {
     if (editingRow) {
       setEditingRow({
@@ -83,7 +86,11 @@ export const MRT_EditCellTextField = <TData extends Record<string, any> = {}>({
 
   return (
     <TextField
-      disabled={columnDef.enableEditing === false}
+      disabled={
+        (columnDef.enableEditing instanceof Function
+          ? columnDef.enableEditing(row)
+          : columnDef.enableEditing) === false
+      }
       fullWidth
       inputRef={(inputRef) => {
         if (inputRef) {
@@ -97,6 +104,7 @@ export const MRT_EditCellTextField = <TData extends Record<string, any> = {}>({
       margin="none"
       name={column.id}
       placeholder={columnDef.header}
+      select={isSelectEdit}
       value={value}
       variant="standard"
       {...textFieldProps}
@@ -107,6 +115,34 @@ export const MRT_EditCellTextField = <TData extends Record<string, any> = {}>({
       onBlur={handleBlur}
       onChange={handleChange}
       onKeyDown={handleEnterKeyDown}
-    />
+    >
+      {columnDef?.editSelectOptions?.map(
+        (option: string | { text: string; value: string }) => {
+          let value: string;
+          let text: string;
+          if (typeof option !== 'object') {
+            value = option;
+            text = option;
+          } else {
+            value = option.value;
+            text = option.text;
+          }
+          return (
+            <MenuItem
+              key={value}
+              sx={{
+                display: 'flex',
+                m: 0,
+                alignItems: 'center',
+                gap: '0.5rem',
+              }}
+              value={value}
+            >
+              {text}
+            </MenuItem>
+          );
+        },
+      )}
+    </TextField>
   );
 };

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -131,6 +131,7 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any> = {}>({
   const { globalFilterFn, density } = getState();
   const { column } = header ?? {};
   const { columnDef } = column ?? {};
+  const currentFilterValue = column?.getFilterValue();
 
   const allowedColumnFilterOptions =
     columnDef?.columnFilterModeOptions ?? columnFilterModeOptions;
@@ -155,15 +156,19 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any> = {}>({
         [header.id]: option,
       }));
       if (['empty', 'notEmpty'].includes(option as string)) {
-        column.setFilterValue(' ');
+        if (currentFilterValue !== ' ') {
+          column.setFilterValue(' ');
+        }
       } else if (
         columnDef?.filterVariant === 'multi-select' ||
         ['arrIncludesSome', 'arrIncludesAll', 'arrIncludes'].includes(
           option as string,
         )
       ) {
-        column.setFilterValue([]);
-        setFilterValue?.([]);
+        if ((currentFilterValue as Array<any>)?.length) {
+          column.setFilterValue([]);
+          setFilterValue?.([]);
+        }
       } else if (
         columnDef?.filterVariant === 'range' ||
         ['between', 'betweenInclusive', 'inNumberRange'].includes(
@@ -173,8 +178,12 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any> = {}>({
         column.setFilterValue(['', '']);
         setFilterValue?.('');
       } else {
-        column.setFilterValue('');
-        setFilterValue?.('');
+        if (
+          !['', undefined].includes(currentFilterValue as string | undefined)
+        ) {
+          column.setFilterValue('');
+          setFilterValue?.('');
+        }
       }
     } else {
       setGlobalFilterFn(option);

package/src/menus/MRT_RowActionMenu.tsx

@@ -44,16 +44,18 @@ export const MRT_RowActionMenu = ({
         dense: density === 'compact',
       }}
     >
-      {enableEditing && (
-        <MenuItem onClick={handleEdit} sx={commonMenuItemStyles}>
-          <Box sx={commonListItemStyles}>
-            <ListItemIcon>
-              <EditIcon />
-            </ListItemIcon>
-            {localization.edit}
-          </Box>
-        </MenuItem>
-      )}
+      {enableEditing instanceof Function
+        ? enableEditing(row)
+        : enableEditing && (
+            <MenuItem onClick={handleEdit} sx={commonMenuItemStyles}>
+              <Box sx={commonListItemStyles}>
+                <ListItemIcon>
+                  <EditIcon />
+                </ListItemIcon>
+                {localization.edit}
+              </Box>
+            </MenuItem>
+          )}
       {renderRowActionMenuItems?.({
         row,
         table,

package/src/table/MRT_Table.tsx

@@ -3,14 +3,13 @@ import {
   defaultRangeExtractor,
   Range,
   useVirtualizer,
-  Virtualizer,
 } 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_TableFooter } from '../footer/MRT_TableFooter';
 import { parseCSSVarId } from '../column.utils';
-import type { MRT_TableInstance } from '..';
+import type { MRT_TableInstance, MRT_Virtualizer } from '..';
 
 interface Props {
   table: MRT_TableInstance;
@@ -95,7 +94,7 @@ export const MRT_Table = ({ table }: Props) => {
   );
 
   const columnVirtualizer:
-    | Virtualizer<HTMLDivElement, HTMLTableCellElement>
+    | MRT_Virtualizer<HTMLDivElement, HTMLTableCellElement>
     | undefined = enableColumnVirtualization
     ? useVirtualizer({
         count: table.getVisibleLeafColumns().length,