material-react-table 0.36.1 → 0.37.1

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.
  *
@@ -440,7 +452,7 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
     displayColumnDefOptions?: Partial<{
         [key in MRT_DisplayColumnIds]: Partial<MRT_ColumnDef>;
     }>;
-    editingMode?: 'table' | 'row' | 'cell';
+    editingMode?: 'table' | 'modal' | 'row' | 'cell';
     enableBottomToolbar?: boolean;
     enableClickToCopy?: boolean;
     enableColumnActions?: boolean;
@@ -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.1",
+  "version": "0.37.1",
   "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.",
@@ -55,7 +55,7 @@
     "@emotion/styled": "^11.10.0",
     "@faker-js/faker": "^7.4.0",
     "@mui/icons-material": "^5.8.4",
-    "@mui/material": "^5.10.0",
+    "@mui/material": "^5.10.1",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-typescript": "^8.3.4",
@@ -71,14 +71,14 @@
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
     "babel-loader": "^8.2.5",
-    "eslint": "^8.21.0",
+    "eslint": "^8.22.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.1",
     "prettier": "^2.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
-    "rollup": "^2.77.3",
+    "rollup": "^2.78.0",
     "rollup-plugin-dts": "^4.2.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "size-limit": "^8.0.1",

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.
@@ -432,7 +455,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     displayColumnDefOptions?: Partial<{
       [key in MRT_DisplayColumnIds]: Partial<MRT_ColumnDef>;
     }>;
-    editingMode?: 'table' | 'row' | 'cell';
+    editingMode?: 'table' | 'modal' | 'row' | 'cell';
     enableBottomToolbar?: boolean;
     enableClickToCopy?: boolean;
     enableColumnActions?: boolean;
@@ -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

@@ -0,0 +1,59 @@
+import React from 'react';
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Stack,
+} from '@mui/material';
+import { MRT_EditActionButtons } from '../buttons/MRT_EditActionButtons';
+import type { MRT_Row, MRT_TableInstance } from '..';
+import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
+
+interface Props<TData extends Record<string, any> = {}> {
+  open: boolean;
+  row: MRT_Row<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_EditRowModal = <TData extends Record<string, any> = {}>({
+  open,
+  row,
+  table,
+}: Props<TData>) => {
+  const {
+    options: { localization },
+  } = table;
+
+  return (
+    <Dialog open={open}>
+      <DialogTitle textAlign="center">{localization.edit}</DialogTitle>
+      <DialogContent>
+        <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" />
+      </DialogActions>
+    </Dialog>
+  );
+};

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 =
@@ -87,6 +87,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
 
   const isEditing =
     isEditable &&
+    editingMode !== 'modal' &&
     (editingMode === 'table' ||
       editingRow?.id === row.id ||
       editingCell?.id === cell.id);
@@ -114,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);
+      });
     }
   };
 
@@ -241,13 +240,10 @@ export const MRT_TableBodyCell: FC<Props> = ({
             enableHover &&
             enableEditing &&
             columnDef.enableEditing !== false &&
-            editingMode !== 'row'
+            ['table', 'cell'].includes(editingMode ?? '')
               ? theme.palette.mode === 'dark'
-                ? `${lighten(
-                    theme.palette.background.default,
-                    0.13,
-                  )} !important`
-                : `${darken(theme.palette.background.default, 0.07)} !important`
+                ? `${lighten(theme.palette.background.default, 0.2)} !important`
+                : `${darken(theme.palette.background.default, 0.1)} !important`
               : undefined,
         },
         ...(tableCellProps?.sx instanceof Function
@@ -281,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) &&
@@ -291,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>
@@ -301,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

@@ -1,13 +1,18 @@
-import React, { FC } from 'react';
-import { Box, IconButton, Tooltip } from '@mui/material';
+import React from 'react';
+import { Box, Button, IconButton, Tooltip } from '@mui/material';
 import type { MRT_Row, MRT_TableInstance } from '..';
 
-interface Props {
-  row: MRT_Row;
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any> = {}> {
+  row: MRT_Row<TData>;
+  table: MRT_TableInstance<TData>;
+  variant?: 'icon' | 'text';
 }
 
-export const MRT_EditActionButtons: FC<Props> = ({ row, table }) => {
+export const MRT_EditActionButtons = <TData extends Record<string, any> = {}>({
+  row,
+  table,
+  variant = 'icon',
+}: Props<TData>) => {
   const {
     getState,
     options: {
@@ -15,40 +20,59 @@ export const MRT_EditActionButtons: FC<Props> = ({ row, table }) => {
       localization,
       onEditingRowSave,
     },
+    refs: { editInputRefs },
     setEditingRow,
   } = table;
   const { editingRow } = getState();
 
-  const handleCancel = () => {
-    row._valuesCache = { ...row.original };
-    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 (
     <Box sx={{ display: 'flex', gap: '0.75rem' }}>
-      <Tooltip arrow title={localization.cancel}>
-        <IconButton aria-label={localization.cancel} onClick={handleCancel}>
-          <CancelIcon />
-        </IconButton>
-      </Tooltip>
-      <Tooltip arrow title={localization.save}>
-        <IconButton
-          aria-label={localization.save}
-          color="info"
-          onClick={handleSave}
-        >
-          <SaveIcon />
-        </IconButton>
-      </Tooltip>
+      {variant === 'icon' ? (
+        <>
+          <Tooltip arrow title={localization.cancel}>
+            <IconButton aria-label={localization.cancel} onClick={handleCancel}>
+              <CancelIcon />
+            </IconButton>
+          </Tooltip>
+          <Tooltip arrow title={localization.save}>
+            <IconButton
+              aria-label={localization.save}
+              color="info"
+              onClick={handleSave}
+            >
+              <SaveIcon />
+            </IconButton>
+          </Tooltip>
+        </>
+      ) : (
+        <>
+          <Button onClick={handleCancel}>{localization.cancel}</Button>
+          <Button onClick={handleSave} variant="contained">
+            {localization.save}
+          </Button>
+        </>
+      )}
     </Box>
   );
 };

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 (