material-react-table 0.36.2 → 0.37.0

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, ReactNode, DragEvent } from 'react';
+import { MutableRefObject, Dispatch, SetStateAction, ReactNode, DragEvent } from 'react';
 import { ButtonProps, TextFieldProps, TableCellProps, IconButtonProps, LinearProgressProps, CheckboxProps, SkeletonProps, TableBodyProps, TableRowProps, ToolbarProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, PaperProps, TableProps, AlertProps } from '@mui/material';
 import { Row, Table, TableState, ColumnDef, DeepKeys, Column, Header, HeaderGroup, Cell, SortingFn, FilterFn, TableOptions, OnChangeFn } from '@tanstack/react-table';
 import { Options } from 'react-virtual';
@@ -223,9 +223,16 @@ declare type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<Ta
     getState: () => MRT_TableState<TData>;
     options: MaterialReactTableProps<TData> & {
         icons: MRT_Icons;
-        tableId: string;
         localization: MRT_Localization;
     };
+    refs: {
+        bottomToolbarRef: MutableRefObject<HTMLDivElement>;
+        editInputRefs: MutableRefObject<Record<string, HTMLInputElement>>;
+        filterInputRefs: MutableRefObject<Record<string, HTMLInputElement>>;
+        searchInputRef: MutableRefObject<HTMLInputElement>;
+        tableContainerRef: MutableRefObject<HTMLDivElement>;
+        topToolbarRef: MutableRefObject<HTMLDivElement>;
+    };
     setColumnFilterFns: Dispatch<SetStateAction<{
         [key: string]: MRT_FilterOption;
     }>>;
@@ -269,19 +276,22 @@ declare type MRT_TableState<TData extends Record<string, any> = {}> = TableState
     showSkeletons: boolean;
 };
 declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<ColumnDef<TData, unknown>, 'aggregatedCell' | 'cell' | 'columns' | 'filterFn' | 'footer' | 'header' | 'id' | 'sortingFn'> & {
-    AggregatedCell?: ({ cell, column, table, }: {
+    AggregatedCell?: ({ cell, column, row, table, }: {
         cell: MRT_Cell<TData>;
         column: MRT_Column<TData>;
+        row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => ReactNode;
-    Cell?: ({ cell, column, table, }: {
+    Cell?: ({ cell, column, row, table, }: {
         cell: MRT_Cell<TData>;
         column: MRT_Column<TData>;
+        row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => ReactNode;
-    Edit?: ({ cell, column, table, }: {
+    Edit?: ({ cell, column, row, table, }: {
         cell: MRT_Cell<TData>;
         column: MRT_Column<TData>;
+        row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => ReactNode;
     Filter?: ({ column, header, table, }: {
@@ -360,8 +370,10 @@ declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<Column
         table: MRT_TableInstance<TData>;
         cell: MRT_Cell<TData>;
     }) => ButtonProps);
-    muiTableBodyCellEditTextFieldProps?: TextFieldProps | (({ cell, table, }: {
+    muiTableBodyCellEditTextFieldProps?: TextFieldProps | (({ cell, column, row, table, }: {
         cell: MRT_Cell<TData>;
+        column: MRT_Column<TData>;
+        row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => TextFieldProps);
     muiTableBodyCellProps?: TableCellProps | (({ cell, table, }: {
@@ -422,7 +434,7 @@ declare type MRT_SortingOption = LiteralUnion<string & keyof typeof MRT_SortingF
 declare type MRT_SortingFn<TData extends Record<string, any> = {}> = SortingFn<TData> | MRT_SortingOption;
 declare type MRT_FilterOption = LiteralUnion<string & keyof typeof MRT_FilterFns>;
 declare type MRT_FilterFn<TData extends Record<string, any> = {}> = FilterFn<TData> | MRT_FilterOption;
-declare type MRT_DisplayColumnIds = 'mrt-row-drag' | 'mrt-row-actions' | 'mrt-row-expand' | 'mrt-row-select' | 'mrt-row-numbers';
+declare type MRT_DisplayColumnIds = 'mrt-row-actions' | 'mrt-row-drag' | 'mrt-row-expand' | 'mrt-row-numbers' | 'mrt-row-select';
 /**
  * `columns` and `data` props are the only required props, but there are over 150 other optional props.
  *
@@ -492,17 +504,23 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
         table: MRT_TableInstance<TData>;
         row: MRT_Row<TData>;
     }) => CheckboxProps);
-    muiTableBodyCellCopyButtonProps?: ButtonProps | (({ table, cell, }: {
-        table: MRT_TableInstance<TData>;
+    muiTableBodyCellCopyButtonProps?: ButtonProps | (({ cell, column, row, table, }: {
         cell: MRT_Cell<TData>;
+        column: MRT_Column<TData>;
+        row: MRT_Row<TData>;
+        table: MRT_TableInstance<TData>;
     }) => ButtonProps);
-    muiTableBodyCellEditTextFieldProps?: TextFieldProps | (({ cell, table, }: {
+    muiTableBodyCellEditTextFieldProps?: TextFieldProps | (({ cell, column, row, table, }: {
         cell: MRT_Cell<TData>;
+        column: MRT_Column<TData>;
+        row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => TextFieldProps);
-    muiTableBodyCellProps?: TableCellProps | (({ table, cell, }: {
-        table: MRT_TableInstance<TData>;
+    muiTableBodyCellProps?: TableCellProps | (({ cell, column, row, table, }: {
         cell: MRT_Cell<TData>;
+        column: MRT_Column<TData>;
+        row: MRT_Row<TData>;
+        table: MRT_TableInstance<TData>;
     }) => TableCellProps);
     muiTableBodyCellSkeletonProps?: SkeletonProps | (({ table, cell, }: {
         table: MRT_TableInstance<TData>;
@@ -589,7 +607,8 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
     onDensityChange?: OnChangeFn<boolean>;
     onDraggingColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
     onDraggingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
-    onEditingRowSave?: ({ row, table, values, }: {
+    onEditingRowSave?: ({ exitEditingMode, row, table, values, }: {
+        exitEditingMode: () => void;
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
         values: Record<LiteralUnion<string & DeepKeys<TData>>, any>;
@@ -645,7 +664,6 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
     rowNumberMode?: 'original' | 'static';
     selectAllMode?: 'all' | 'page';
     state?: Partial<MRT_TableState<TData>>;
-    tableId?: string;
     virtualizerProps?: Partial<Options<HTMLDivElement>> | (({ table, }: {
         table: MRT_TableInstance<TData>;
     }) => Partial<Options<HTMLDivElement>>);

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.36.2",
+  "version": "0.37.0",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",

package/src/MaterialReactTable.tsx

@@ -1,4 +1,10 @@
-import React, { Dispatch, DragEvent, ReactNode, SetStateAction } from 'react';
+import React, {
+  Dispatch,
+  DragEvent,
+  MutableRefObject,
+  ReactNode,
+  SetStateAction,
+} from 'react';
 import type {
   AlertProps,
   ButtonProps,
@@ -86,9 +92,16 @@ export type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<
   getState: () => MRT_TableState<TData>;
   options: MaterialReactTableProps<TData> & {
     icons: MRT_Icons;
-    tableId: string;
     localization: MRT_Localization;
   };
+  refs: {
+    bottomToolbarRef: MutableRefObject<HTMLDivElement>;
+    editInputRefs: MutableRefObject<Record<string, HTMLInputElement>>;
+    filterInputRefs: MutableRefObject<Record<string, HTMLInputElement>>;
+    searchInputRef: MutableRefObject<HTMLInputElement>;
+    tableContainerRef: MutableRefObject<HTMLDivElement>;
+    topToolbarRef: MutableRefObject<HTMLDivElement>;
+  };
   setColumnFilterFns: Dispatch<
     SetStateAction<{ [key: string]: MRT_FilterOption }>
   >;
@@ -144,28 +157,34 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
   AggregatedCell?: ({
     cell,
     column,
+    row,
     table,
   }: {
     cell: MRT_Cell<TData>;
     column: MRT_Column<TData>;
+    row: MRT_Row<TData>;
     table: MRT_TableInstance<TData>;
   }) => ReactNode;
   Cell?: ({
     cell,
     column,
+    row,
     table,
   }: {
     cell: MRT_Cell<TData>;
     column: MRT_Column<TData>;
+    row: MRT_Row<TData>;
     table: MRT_TableInstance<TData>;
   }) => ReactNode;
   Edit?: ({
     cell,
     column,
+    row,
     table,
   }: {
     cell: MRT_Cell<TData>;
     column: MRT_Column<TData>;
+    row: MRT_Row<TData>;
     table: MRT_TableInstance<TData>;
   }) => ReactNode;
   Filter?: ({
@@ -266,9 +285,13 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
     | TextFieldProps
     | (({
         cell,
+        column,
+        row,
         table,
       }: {
         cell: MRT_Cell<TData>;
+        column: MRT_Column<TData>;
+        row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
       }) => TextFieldProps);
   muiTableBodyCellProps?:
@@ -398,11 +421,11 @@ export type MRT_FilterFn<TData extends Record<string, any> = {}> =
   | MRT_FilterOption;
 
 export type MRT_DisplayColumnIds =
-  | 'mrt-row-drag'
   | 'mrt-row-actions'
+  | 'mrt-row-drag'
   | 'mrt-row-expand'
-  | 'mrt-row-select'
-  | 'mrt-row-numbers';
+  | 'mrt-row-numbers'
+  | 'mrt-row-select';
 
 /**
  * `columns` and `data` props are the only required props, but there are over 150 other optional props.
@@ -501,29 +524,41 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     muiTableBodyCellCopyButtonProps?:
       | ButtonProps
       | (({
-          table,
           cell,
+          column,
+          row,
+          table,
         }: {
-          table: MRT_TableInstance<TData>;
           cell: MRT_Cell<TData>;
+          column: MRT_Column<TData>;
+          row: MRT_Row<TData>;
+          table: MRT_TableInstance<TData>;
         }) => ButtonProps);
     muiTableBodyCellEditTextFieldProps?:
       | TextFieldProps
       | (({
           cell,
+          column,
+          row,
           table,
         }: {
           cell: MRT_Cell<TData>;
+          column: MRT_Column<TData>;
+          row: MRT_Row<TData>;
           table: MRT_TableInstance<TData>;
         }) => TextFieldProps);
     muiTableBodyCellProps?:
       | TableCellProps
       | (({
-          table,
           cell,
+          column,
+          row,
+          table,
         }: {
-          table: MRT_TableInstance<TData>;
           cell: MRT_Cell<TData>;
+          column: MRT_Column<TData>;
+          row: MRT_Row<TData>;
+          table: MRT_TableInstance<TData>;
         }) => TableCellProps);
     muiTableBodyCellSkeletonProps?:
       | SkeletonProps
@@ -677,10 +712,12 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     onDraggingColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
     onDraggingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
     onEditingRowSave?: ({
+      exitEditingMode,
       row,
       table,
       values,
     }: {
+      exitEditingMode: () => void;
       row: MRT_Row<TData>;
       table: MRT_TableInstance<TData>;
       values: Record<LiteralUnion<string & DeepKeys<TData>>, any>;
@@ -752,7 +789,6 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     rowNumberMode?: 'original' | 'static';
     selectAllMode?: 'all' | 'page';
     state?: Partial<MRT_TableState<TData>>;
-    tableId?: string;
     virtualizerProps?:
       | Partial<VirtualizerOptions<HTMLDivElement>>
       | (({
@@ -774,7 +810,7 @@ export default <TData extends Record<string, any> = {}>({
   autoResetExpanded = false,
   columnResizeMode = 'onEnd',
   defaultColumn = { minSize: 40, maxSize: 1000, size: 180 },
-  editingMode = 'row',
+  editingMode = 'modal',
   enableBottomToolbar = true,
   enableColumnActions = true,
   enableColumnFilterChangeMode = false,

package/src/body/MRT_EditRowModal.tsx

@@ -29,25 +29,27 @@ export const MRT_EditRowModal = <TData extends Record<string, any> = {}>({
     <Dialog open={open}>
       <DialogTitle textAlign="center">{localization.edit}</DialogTitle>
       <DialogContent>
-        <Stack
-          sx={{
-            width: '100%',
-            minWidth: { xs: '300px', sm: '360px', md: '400px' },
-            gap: '1.5rem',
-          }}
-        >
-          {row
-            .getVisibleCells()
-            .filter((cell) => cell.column.columnDef.columnDefType === 'data')
-            .map((cell) => (
-              <MRT_EditCellTextField
-                cell={cell}
-                key={cell.id}
-                showLabel
-                table={table}
-              />
-            ))}
-        </Stack>
+        <form onSubmit={(e) => e.preventDefault()}>
+          <Stack
+            sx={{
+              width: '100%',
+              minWidth: { xs: '300px', sm: '360px', md: '400px' },
+              gap: '1.5rem',
+            }}
+          >
+            {row
+              .getAllCells()
+              .filter((cell) => cell.column.columnDef.columnDefType === 'data')
+              .map((cell) => (
+                <MRT_EditCellTextField
+                  cell={cell as any}
+                  key={cell.id}
+                  showLabel
+                  table={table as any}
+                />
+              ))}
+          </Stack>
+        </form>
       </DialogContent>
       <DialogActions sx={{ p: '1.25rem' }}>
         <MRT_EditActionButtons row={row} table={table} variant="text" />

package/src/body/MRT_TableBodyCell.tsx

@@ -48,8 +48,8 @@ export const MRT_TableBodyCell: FC<Props> = ({
       muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps,
       rowNumberMode,
-      tableId,
     },
+    refs: { editInputRefs },
     setEditingCell,
     setHoveredColumn,
   } = table;
@@ -68,7 +68,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
 
   const mTableCellBodyProps =
     muiTableBodyCellProps instanceof Function
-      ? muiTableBodyCellProps({ cell, table })
+      ? muiTableBodyCellProps({ cell, column, row, table })
       : muiTableBodyCellProps;
 
   const mcTableCellBodyProps =
@@ -115,15 +115,13 @@ export const MRT_TableBodyCell: FC<Props> = ({
       editingMode === 'cell'
     ) {
       setEditingCell(cell);
-      setTimeout(() => {
-        const textField = document.getElementById(
-          `mrt-${tableId}-edit-cell-text-field-${cell.id}`,
-        ) as HTMLInputElement;
+      queueMicrotask(() => {
+        const textField = editInputRefs.current[column.id];
         if (textField) {
           textField.focus();
           textField.select();
         }
-      }, 200);
+      });
     }
   };
 
@@ -279,7 +277,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
           (column.id === 'mrt-row-select' ||
             column.id === 'mrt-row-expand' ||
             !row.getIsGrouped()) ? (
-          columnDef.Cell?.({ cell, column, table })
+          columnDef.Cell?.({ cell, column, row, table })
         ) : isEditing ? (
           <MRT_EditCellTextField cell={cell} table={table} />
         ) : (enableClickToCopy || columnDef.enableClickToCopy) &&
@@ -289,7 +287,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
               <>
                 {row.getIsGrouped() && !cell.getIsGrouped()
                   ? null
-                  : columnDef?.Cell?.({ cell, column, table }) ??
+                  : columnDef?.Cell?.({ cell, column, row, table }) ??
                     cell.renderValue()}
               </>
             </MRT_CopyButton>
@@ -299,7 +297,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
           <>
             {row.getIsGrouped() && !cell.getIsGrouped()
               ? null
-              : columnDef?.Cell?.({ cell, column, table }) ??
+              : columnDef?.Cell?.({ cell, column, row, table }) ??
                 cell.renderValue()}
             {cell.getIsGrouped() && <> ({row.subRows?.length ?? ''})</>}
           </>

package/src/body/MRT_TableBodyRow.tsx

@@ -76,8 +76,8 @@ export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, table }) => {
         {row?.getVisibleCells()?.map?.((cell) => (
           <MRT_TableBodyCell
             cell={cell}
-            key={cell.id}
             enableHover={tableRowProps?.hover !== false}
+            key={cell.id}
             rowIndex={rowIndex}
             rowRef={rowRef}
             table={table}

package/src/body/MRT_TableBodyRowGrabHandle.tsx

@@ -16,15 +16,16 @@ export const MRT_TableBodyRowGrabHandle: FC<Props> = ({
   const {
     options: { muiTableBodyRowDragHandleProps, onRowDrop },
   } = table;
+  const { row } = cell;
 
   const iconButtonProps =
     muiTableBodyRowDragHandleProps instanceof Function
-      ? muiTableBodyRowDragHandleProps({ row: cell.row, table })
+      ? muiTableBodyRowDragHandleProps({ row, table })
       : muiTableBodyRowDragHandleProps;
 
   const handleDragStart = (e: DragEvent<HTMLButtonElement>) => {
     e.dataTransfer.setDragImage(rowRef.current as HTMLElement, 0, 0);
-    table.setDraggingRow(cell.row as any);
+    table.setDraggingRow(row as any);
   };
 
   const handleDragEnd = (event: DragEvent<HTMLButtonElement>) => {

package/src/buttons/MRT_CopyButton.tsx

@@ -12,7 +12,7 @@ export const MRT_CopyButton: FC<Props> = ({ cell, children, table }) => {
   const {
     options: { localization, muiTableBodyCellCopyButtonProps },
   } = table;
-  const { column } = cell;
+  const { column, row } = cell;
   const { columnDef } = column;
 
   const [copied, setCopied] = useState(false);
@@ -25,7 +25,7 @@ export const MRT_CopyButton: FC<Props> = ({ cell, children, table }) => {
 
   const mTableBodyCellCopyButtonProps =
     muiTableBodyCellCopyButtonProps instanceof Function
-      ? muiTableBodyCellCopyButtonProps({ cell, table })
+      ? muiTableBodyCellCopyButtonProps({ cell, column, row, table })
       : muiTableBodyCellCopyButtonProps;
 
   const mcTableBodyCellCopyButtonProps =

package/src/buttons/MRT_EditActionButtons.tsx

@@ -20,21 +20,30 @@ export const MRT_EditActionButtons = <TData extends Record<string, any> = {}>({
       localization,
       onEditingRowSave,
     },
+    refs: { editInputRefs },
     setEditingRow,
   } = table;
   const { editingRow } = getState();
 
-  const handleCancel = () => {
-    setEditingRow(null);
-  };
+  const handleCancel = () => setEditingRow(null);
 
   const handleSave = () => {
+    //look for auto-filled input values
+    Object.values(editInputRefs?.current)?.forEach((input) => {
+      if (
+        input.value !== undefined &&
+        Object.hasOwn(editingRow?._valuesCache as object, input.name)
+      ) {
+        // @ts-ignore
+        editingRow._valuesCache[input.name] = input.value;
+      }
+    });
     onEditingRowSave?.({
+      exitEditingMode: () => setEditingRow(null),
       row: editingRow ?? row,
       table,
       values: editingRow?._valuesCache ?? { ...row.original },
     });
-    setEditingRow(null);
   };
 
   return (

package/src/buttons/MRT_ToggleGlobalFilterButton.tsx

@@ -17,30 +17,17 @@ export const MRT_ToggleGlobalFilterButton = <
     getState,
     options: {
       icons: { SearchIcon, SearchOffIcon },
-      tableId,
+
       localization,
-      muiSearchTextFieldProps,
     },
+    refs: { searchInputRef },
     setShowGlobalFilter,
   } = table;
   const { showGlobalFilter } = getState();
 
-  const textFieldProps =
-    muiSearchTextFieldProps instanceof Function
-      ? muiSearchTextFieldProps({ table })
-      : muiSearchTextFieldProps;
-
   const handleToggleSearch = () => {
     setShowGlobalFilter(!showGlobalFilter);
-    setTimeout(
-      () =>
-        document
-          .getElementById(
-            textFieldProps?.id ?? `mrt-${tableId}-search-text-field`,
-          )
-          ?.focus(),
-      200,
-    );
+    queueMicrotask(() => searchInputRef.current?.focus());
   };
 
   return (

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

package/src/inputs/MRT_EditCellTextField.tsx

@@ -15,11 +15,12 @@ export const MRT_EditCellTextField = <TData extends Record<string, any> = {}>({
 }: Props<TData>) => {
   const {
     getState,
-    options: { tableId, muiTableBodyCellEditTextFieldProps },
+    options: { muiTableBodyCellEditTextFieldProps },
+    refs: { editInputRefs },
     setEditingCell,
     setEditingRow,
   } = table;
-  const { column } = cell;
+  const { column, row } = cell;
   const { columnDef } = column;
   const { editingRow } = getState();
 
@@ -27,13 +28,15 @@ export const MRT_EditCellTextField = <TData extends Record<string, any> = {}>({
 
   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;
@@ -60,21 +63,29 @@ export const MRT_EditCellTextField = <TData extends Record<string, any> = {}>({
   };
 
   if (columnDef.Edit) {
-    return <>{columnDef.Edit?.({ cell, column, table })}</>;
+    return <>{columnDef.Edit?.({ cell, column, row, table })}</>;
   }
 
   return (
     <TextField
       disabled={columnDef.enableEditing === false}
       fullWidth
-      id={`mrt-${tableId}-edit-cell-text-field-${cell.id}`}
       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',