material-react-table 0.36.0 → 0.37.0

package/src/column.utils.ts

@@ -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
@@ -116,7 +115,8 @@ 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 ||
@@ -133,7 +133,8 @@ 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 ||

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,
@@ -33,16 +33,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 ?? {};
@@ -125,11 +126,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,
@@ -138,8 +136,8 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
             id: 'mrt-row-actions',
           },
           columnOrder.includes('mrt-row-expand') && {
-            Cell: ({ cell }) => (
-              <MRT_ExpandButton row={cell.row as any} table={table} />
+            Cell: ({ row }) => (
+              <MRT_ExpandButton row={row as any} table={table} />
             ),
             Header: () =>
               props.enableExpandAll ? (
@@ -152,8 +150,8 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
             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 +164,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,
@@ -268,8 +266,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 +305,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,