material-react-table 0.36.1 → 0.37.1

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -24,6 +24,7 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row, table }) => {
   const {
     getState,
     options: {
+      editingMode,
       enableEditing,
       icons: { EditIcon, MoreHorizIcon },
       localization,
@@ -52,7 +53,7 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row, table }) => {
     <>
       {renderRowActions ? (
         <>{renderRowActions({ row, table })}</>
-      ) : row.id === editingRow?.id ? (
+      ) : row.id === editingRow?.id && editingMode === 'row' ? (
         <MRT_EditActionButtons row={row} table={table} />
       ) : !renderRowActionMenuItems && enableEditing ? (
         <Tooltip placement="right" arrow title={localization.edit}>

package/src/column.utils.ts

@@ -1,4 +1,4 @@
-import { ColumnOrderState } from '@tanstack/react-table';
+import { ColumnOrderState, GroupingState } from '@tanstack/react-table';
 import {
   MaterialReactTableProps,
   MRT_Column,
@@ -74,10 +74,9 @@ export const prepareColumns = <TData extends Record<string, any> = {}>(
     } else if (columnDef.columnDefType === 'data') {
       if (Object.keys(filterFns).includes(columnFilterFns[columnDef.id])) {
         columnDef.filterFn =
-          // @ts-ignore
           filterFns[columnFilterFns[columnDef.id]] ?? filterFns.fuzzy;
-        //@ts-ignore
-        columnDef._filterFn = columnFilterFns[columnDef.id];
+        (columnDef as MRT_DefinedColumnDef)._filterFn =
+          columnFilterFns[columnDef.id];
       }
       if (Object.keys(sortingFns).includes(columnDef.sortingFn as string)) {
         // @ts-ignore
@@ -108,6 +107,16 @@ export const reorderColumn = <TData extends Record<string, any> = {}>(
   return [...columnOrder];
 };
 
+export const showExpandColumn = <TData extends Record<string, any> = {}>(
+  props: MaterialReactTableProps<TData>,
+  grouping?: GroupingState,
+) =>
+  !!(
+    props.enableExpanding ||
+    (props.enableGrouping && (grouping === undefined || grouping?.length)) ||
+    props.renderDetailPanel
+  );
+
 export const getLeadingDisplayColumnIds = <
   TData extends Record<string, any> = {},
 >(
@@ -116,12 +125,11 @@ export const getLeadingDisplayColumnIds = <
   [
     (props.enableRowDragging || props.enableRowOrdering) && 'mrt-row-drag',
     ((props.positionActionsColumn === 'first' && props.enableRowActions) ||
-      (props.enableEditing && props.editingMode === 'row')) &&
+      (props.enableEditing &&
+        ['row', 'modal'].includes(props.editingMode ?? ''))) &&
       'mrt-row-actions',
     props.positionExpandColumn === 'first' &&
-      (props.enableExpanding ||
-        props.enableGrouping ||
-        props.renderDetailPanel) &&
+      showExpandColumn(props) &&
       'mrt-row-expand',
     props.enableRowSelection && 'mrt-row-select',
     props.enableRowNumbers && 'mrt-row-numbers',
@@ -133,12 +141,11 @@ export const getTrailingDisplayColumnIds = <
   props: MaterialReactTableProps<TData>,
 ) => [
   ((props.positionActionsColumn === 'last' && props.enableRowActions) ||
-    (props.enableEditing && props.editingMode === 'row')) &&
+    (props.enableEditing &&
+      ['row', 'modal'].includes(props.editingMode ?? ''))) &&
     'mrt-row-actions',
   props.positionExpandColumn === 'last' &&
-    (props.enableExpanding ||
-      props.enableGrouping ||
-      props.renderDetailPanel) &&
+    showExpandColumn(props) &&
     'mrt-row-expand',
 ];
 

package/src/inputs/MRT_EditCellTextField.tsx

@@ -1,22 +1,22 @@
-import React, {
-  ChangeEvent,
-  FC,
-  FocusEvent,
-  MouseEvent,
-  useState,
-} from 'react';
+import React, { ChangeEvent, FocusEvent, MouseEvent, useState } from 'react';
 import { TextField, TextFieldProps } from '@mui/material';
-import type { MRT_Cell, MRT_Row, MRT_TableInstance } from '..';
+import type { MRT_Cell, MRT_TableInstance } from '..';
 
-interface Props {
-  cell: MRT_Cell;
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any> = {}> {
+  cell: MRT_Cell<TData>;
+  table: MRT_TableInstance<TData>;
+  showLabel?: boolean;
 }
 
-export const MRT_EditCellTextField: FC<Props> = ({ cell, table }) => {
+export const MRT_EditCellTextField = <TData extends Record<string, any> = {}>({
+  cell,
+  showLabel,
+  table,
+}: Props<TData>) => {
   const {
     getState,
-    options: { tableId, muiTableBodyCellEditTextFieldProps },
+    options: { muiTableBodyCellEditTextFieldProps },
+    refs: { editInputRefs },
     setEditingCell,
     setEditingRow,
   } = table;
@@ -28,13 +28,15 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, table }) => {
 
   const mTableBodyCellEditTextFieldProps =
     muiTableBodyCellEditTextFieldProps instanceof Function
-      ? muiTableBodyCellEditTextFieldProps({ cell, table })
+      ? muiTableBodyCellEditTextFieldProps({ cell, column, row, table })
       : muiTableBodyCellEditTextFieldProps;
 
   const mcTableBodyCellEditTextFieldProps =
     columnDef.muiTableBodyCellEditTextFieldProps instanceof Function
       ? columnDef.muiTableBodyCellEditTextFieldProps({
           cell,
+          column,
+          row,
           table,
         })
       : columnDef.muiTableBodyCellEditTextFieldProps;
@@ -52,26 +54,38 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, table }) => {
   const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
     textFieldProps.onBlur?.(event);
     if (editingRow) {
-      if (!row._valuesCache) row._valuesCache = {};
-      (row._valuesCache as Record<string, any>)[column.id] = value;
-      setEditingRow({ ...editingRow } as MRT_Row);
+      setEditingRow({
+        ...editingRow,
+        _valuesCache: { ...editingRow._valuesCache, [column.id]: value },
+      } as any);
     }
     setEditingCell(null);
   };
 
   if (columnDef.Edit) {
-    return <>{columnDef.Edit?.({ cell, column, table })}</>;
+    return <>{columnDef.Edit?.({ cell, column, row, table })}</>;
   }
 
   return (
     <TextField
-      id={`mrt-${tableId}-edit-cell-text-field-${cell.id}`}
+      disabled={columnDef.enableEditing === false}
+      fullWidth
+      label={showLabel ? column.columnDef.header : undefined}
       margin="none"
+      name={cell.id}
       onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
       placeholder={columnDef.header}
       value={value}
       variant="standard"
       {...textFieldProps}
+      inputRef={(inputRef) => {
+        if (inputRef) {
+          editInputRefs.current[column.id] = inputRef;
+          if (textFieldProps.inputRef) {
+            textFieldProps.inputRef = inputRef;
+          }
+        }
+      }}
       onBlur={handleBlur}
       onChange={handleChange}
     />

package/src/inputs/MRT_FilterTextField.tsx

@@ -40,8 +40,8 @@ export const MRT_FilterTextField: FC<Props> = ({
       icons: { FilterListIcon, CloseIcon },
       localization,
       muiTableHeadCellFilterTextFieldProps,
-      tableId,
     },
+    refs: { filterInputRefs },
     setColumnFilterFns,
   } = table;
   const { column } = header;
@@ -80,9 +80,6 @@ export const MRT_FilterTextField: FC<Props> = ({
     (!isSelectFilter && !isMultiSelectFilter);
 
   const currentFilterOption = columnFilterFns?.[header.id];
-  const filterId = `mrt-${tableId}-${header.id}-filter-text-field${
-    rangeFilterIndex ?? ''
-  }`;
   const filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption)
     ? //@ts-ignore
       localization[
@@ -184,7 +181,6 @@ export const MRT_FilterTextField: FC<Props> = ({
     <>
       <TextField
         fullWidth
-        id={filterId}
         inputProps={{
           disabled: !!filterChipLabel,
           sx: {
@@ -195,7 +191,7 @@ export const MRT_FilterTextField: FC<Props> = ({
         }}
         helperText={
           showChangeModeButton ? (
-            <label htmlFor={filterId}>
+            <label>
               {localization.filterMode.replace(
                 '{filterType}',
                 // @ts-ignore
@@ -294,6 +290,13 @@ export const MRT_FilterTextField: FC<Props> = ({
             : undefined,
         }}
         {...textFieldProps}
+        inputRef={(inputRef) => {
+          filterInputRefs.current[`${column.id}-${rangeFilterIndex ?? 0}`] =
+            inputRef;
+          if (textFieldProps.inputRef) {
+            textFieldProps.inputRef = inputRef;
+          }
+        }}
         sx={(theme) => ({
           p: 0,
           minWidth: !filterChipLabel ? '6rem' : 'auto',

package/src/inputs/MRT_GlobalFilterTextField.tsx

@@ -27,8 +27,8 @@ export const MRT_GlobalFilterTextField = <
       icons: { SearchIcon, CloseIcon },
       localization,
       muiSearchTextFieldProps,
-      tableId,
     },
+    refs: { searchInputRef },
   } = table;
   const { globalFilter, showGlobalFilter } = getState();
 
@@ -64,7 +64,6 @@ export const MRT_GlobalFilterTextField = <
   return (
     <Collapse in={showGlobalFilter} orientation="horizontal">
       <TextField
-        id={`mrt-${tableId}-search-text-field`}
         placeholder={localization.search}
         onChange={handleChange}
         value={searchValue ?? ''}
@@ -104,6 +103,12 @@ export const MRT_GlobalFilterTextField = <
           ),
         }}
         {...textFieldProps}
+        inputRef={(inputRef) => {
+          searchInputRef.current = inputRef;
+          if (textFieldProps?.inputRef) {
+            textFieldProps.inputRef = inputRef;
+          }
+        }}
       />
       <MRT_FilterOptionMenu
         anchorEl={anchorEl}

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -54,9 +54,9 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
         RestartAltIcon,
         VisibilityOffIcon,
       },
-      tableId,
       localization,
     },
+    refs: { filterInputRefs },
     setShowFilters,
   } = table;
   const { column } = header;
@@ -111,17 +111,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
 
   const handleFilterByColumn = () => {
     setShowFilters(true);
-    setTimeout(
-      () =>
-        document
-          .getElementById(
-            // @ts-ignore
-            header.muiTableHeadCellFilterTextFieldProps?.id ??
-              `mrt-${tableId}-${header.id}-filter-text-field`,
-          )
-          ?.focus(),
-      200,
-    );
+    queueMicrotask(() => filterInputRefs.current[`${column.id}-0`]?.focus());
     setAnchorEl(null);
   };
 

package/src/table/MRT_TableContainer.tsx

@@ -3,7 +3,6 @@ import React, {
   RefObject,
   useEffect,
   useLayoutEffect,
-  useRef,
   useState,
 } from 'react';
 import { TableContainer } from '@mui/material';
@@ -24,8 +23,8 @@ export const MRT_TableContainer: FC<Props> = ({ table }) => {
       enableStickyHeader,
       enableRowVirtualization,
       muiTableContainerProps,
-      tableId,
     },
+    refs: { tableContainerRef, bottomToolbarRef, topToolbarRef },
   } = table;
   const { isFullScreen } = getState();
 
@@ -36,20 +35,15 @@ export const MRT_TableContainer: FC<Props> = ({ table }) => {
       ? muiTableContainerProps({ table })
       : muiTableContainerProps;
 
-  const tableContainerRef =
-    tableContainerProps?.ref ?? useRef<HTMLDivElement>(null);
-
   useIsomorphicLayoutEffect(() => {
     const topToolbarHeight =
       typeof document !== 'undefined'
-        ? document?.getElementById(`mrt-${tableId}-toolbar-top`)
-            ?.offsetHeight ?? 0
+        ? topToolbarRef.current?.offsetHeight ?? 0
         : 0;
 
     const bottomToolbarHeight =
       typeof document !== 'undefined'
-        ? document?.getElementById(`mrt-${tableId}-toolbar-bottom`)
-            ?.offsetHeight ?? 0
+        ? bottomToolbarRef?.current?.offsetHeight ?? 0
         : 0;
 
     setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
@@ -57,8 +51,14 @@ export const MRT_TableContainer: FC<Props> = ({ table }) => {
 
   return (
     <TableContainer
-      ref={tableContainerRef}
       {...tableContainerProps}
+      ref={(ref: HTMLDivElement) => {
+        tableContainerRef.current = ref;
+        if (tableContainerProps?.ref) {
+          //@ts-ignore
+          tableContainerProps.ref.current = ref;
+        }
+      }}
       sx={(theme) => ({
         maxWidth: '100%',
         maxHeight:

package/src/table/MRT_TableRoot.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import {
   TableState,
   getCoreRowModel,
@@ -9,6 +9,7 @@ import {
   getPaginationRowModel,
   getSortedRowModel,
   useReactTable,
+  GroupingState,
 } from '@tanstack/react-table';
 import { Box, Dialog, Grow } from '@mui/material';
 import { MRT_ExpandAllButton } from '../buttons/MRT_ExpandAllButton';
@@ -22,6 +23,7 @@ import {
   getDefaultColumnOrderIds,
   getDefaultColumnFilterFn,
   defaultDisplayColumnDefOptions,
+  showExpandColumn,
 } from '../column.utils';
 import type {
   MRT_Cell,
@@ -33,16 +35,17 @@ import type {
   MRT_TableState,
   MaterialReactTableProps,
 } from '..';
+import { MRT_EditRowModal } from '../body/MRT_EditRowModal';
 
 export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
   props: MaterialReactTableProps<TData>,
 ) => {
-  const [tableId, setIdPrefix] = useState(props.tableId);
-  useEffect(
-    () =>
-      setIdPrefix(props.tableId ?? Math.random().toString(36).substring(2, 9)),
-    [props.tableId],
-  );
+  const bottomToolbarRef = useRef<HTMLDivElement>(null);
+  const editInputRefs = useRef<Record<string, HTMLInputElement>>({});
+  const filterInputRefs = useRef<Record<string, HTMLInputElement>>({});
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const tableContainerRef = useRef<HTMLDivElement>(null);
+  const topToolbarRef = useRef<HTMLDivElement>(null);
 
   const initialState: Partial<MRT_TableState<TData>> = useMemo(() => {
     const initState = props.initialState ?? {};
@@ -94,6 +97,9 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
   const [globalFilterFn, setGlobalFilterFn] = useState<MRT_FilterOption>(
     initialState.globalFilterFn ?? 'fuzzy',
   );
+  const [grouping, setGrouping] = useState<GroupingState>(
+    initialState.grouping ?? [],
+  );
   const [hoveredColumn, setHoveredColumn] = useState<
     MRT_Column<TData> | { id: string } | null
   >(initialState.hoveredColumn ?? null);
@@ -125,11 +131,8 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
             id: 'mrt-row-drag',
           },
           columnOrder.includes('mrt-row-actions') && {
-            Cell: ({ cell }) => (
-              <MRT_ToggleRowActionMenuButton
-                row={cell.row as any}
-                table={table}
-              />
+            Cell: ({ row }) => (
+              <MRT_ToggleRowActionMenuButton row={row as any} table={table} />
             ),
             header: props.localization?.actions,
             size: 70,
@@ -137,23 +140,24 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
             ...props.displayColumnDefOptions?.['mrt-row-actions'],
             id: 'mrt-row-actions',
           },
-          columnOrder.includes('mrt-row-expand') && {
-            Cell: ({ cell }) => (
-              <MRT_ExpandButton row={cell.row as any} table={table} />
-            ),
-            Header: () =>
-              props.enableExpandAll ? (
-                <MRT_ExpandAllButton table={table} />
-              ) : null,
-            header: props.localization?.expand,
-            size: 60,
-            ...defaultDisplayColumnDefOptions,
-            ...props.displayColumnDefOptions?.['mrt-row-expand'],
-            id: 'mrt-row-expand',
-          },
+          columnOrder.includes('mrt-row-expand') &&
+            showExpandColumn(props, grouping) && {
+              Cell: ({ row }) => (
+                <MRT_ExpandButton row={row as any} table={table} />
+              ),
+              Header: () =>
+                props.enableExpandAll ? (
+                  <MRT_ExpandAllButton table={table} />
+                ) : null,
+              header: props.localization?.expand,
+              size: 60,
+              ...defaultDisplayColumnDefOptions,
+              ...props.displayColumnDefOptions?.['mrt-row-expand'],
+              id: 'mrt-row-expand',
+            },
           columnOrder.includes('mrt-row-select') && {
-            Cell: ({ cell }) => (
-              <MRT_SelectCheckbox row={cell.row as any} table={table} />
+            Cell: ({ row }) => (
+              <MRT_SelectCheckbox row={row as any} table={table} />
             ),
             Header: () =>
               props.enableSelectAll ? (
@@ -166,7 +170,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
             id: 'mrt-row-select',
           },
           columnOrder.includes('mrt-row-numbers') && {
-            Cell: ({ cell }) => cell.row.index + 1,
+            Cell: ({ row }) => row.index + 1,
             Header: () => props.localization?.rowNumber,
             header: props.localization?.rowNumbers,
             size: 60,
@@ -178,6 +182,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
       ).filter(Boolean),
     [
       columnOrder,
+      grouping,
       props.displayColumnDefOptions,
       props.editingMode,
       props.enableColumnDragging,
@@ -194,6 +199,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
       props.enableSelectAll,
       props.localization,
       props.positionActionsColumn,
+      props.renderDetailPanel,
     ],
   );
 
@@ -243,6 +249,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
       getPaginationRowModel: getPaginationRowModel(),
       getSortedRowModel: getSortedRowModel(),
       onColumnOrderChange: setColumnOrder,
+      onGroupingChange: setGrouping,
       getSubRows: (row) => row?.subRows,
       ...props,
       //@ts-ignore
@@ -260,6 +267,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
         editingCell,
         editingRow,
         globalFilterFn,
+        grouping,
         hoveredColumn,
         hoveredRow,
         isFullScreen,
@@ -268,8 +276,15 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
         showGlobalFilter,
         ...props.state,
       } as TableState,
-      tableId,
     }),
+    refs: {
+      bottomToolbarRef,
+      editInputRefs,
+      filterInputRefs,
+      searchInputRef,
+      tableContainerRef,
+      topToolbarRef,
+    },
     setColumnFilterFns: props.onFilterFnsChange ?? setColumnFilterFns,
     setDensity: props.onDensityChange ?? setDensity,
     setDraggingColumn: props.onDraggingColumnChange ?? setDraggingColumn,
@@ -300,6 +315,9 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
         <MRT_TablePaper table={table} />
       </Dialog>
       {!isFullScreen && <MRT_TablePaper table={table} />}
+      {editingRow && props.editingMode === 'modal' && (
+        <MRT_EditRowModal row={editingRow as any} table={table} open />
+      )}
     </>
   );
 };

package/src/toolbar/MRT_BottomToolbar.tsx

@@ -21,8 +21,8 @@ export const MRT_BottomToolbar: FC<Props> = ({ table }) => {
       positionToolbarAlertBanner,
       positionToolbarDropZone,
       renderBottomToolbarCustomActions,
-      tableId,
     },
+    refs: { bottomToolbarRef },
   } = table;
   const { isFullScreen } = getState();
 
@@ -37,9 +37,15 @@ export const MRT_BottomToolbar: FC<Props> = ({ table }) => {
 
   return (
     <Toolbar
-      id={`mrt-${tableId}-toolbar-bottom`}
       variant="dense"
       {...toolbarProps}
+      ref={(ref: HTMLDivElement) => {
+        bottomToolbarRef.current = ref;
+        if (toolbarProps?.ref) {
+          // @ts-ignore
+          toolbarProps.ref.current = ref;
+        }
+      }}
       sx={(theme) =>
         ({
           ...commonToolbarStyles({ theme }),

package/src/toolbar/MRT_TopToolbar.tsx

@@ -37,8 +37,8 @@ export const MRT_TopToolbar: FC<Props> = ({ table }) => {
       positionToolbarAlertBanner,
       positionToolbarDropZone,
       renderTopToolbarCustomActions,
-      tableId,
     },
+    refs: { topToolbarRef },
   } = table;
 
   const { isFullScreen, showGlobalFilter } = getState();
@@ -55,9 +55,15 @@ export const MRT_TopToolbar: FC<Props> = ({ table }) => {
 
   return (
     <Toolbar
-      id={`mrt-${tableId}-toolbar-top`}
       variant="dense"
       {...toolbarProps}
+      ref={(ref: HTMLDivElement) => {
+        topToolbarRef.current = ref;
+        if (toolbarProps?.ref) {
+          // @ts-ignore
+          toolbarProps.ref.current = ref;
+        }
+      }}
       sx={(theme) =>
         ({
           position: isFullScreen ? 'sticky' : undefined,