material-react-table 0.36.2 → 0.37.2

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>;
@@ -631,7 +650,8 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => ReactNode[];
-    renderRowActions?: ({ row, table, }: {
+    renderRowActions?: ({ cell, row, table, }: {
+        cell: MRT_Cell<TData>;
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => ReactNode;
@@ -645,13 +665,19 @@ 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>>);
 };
 declare const _default: <TData extends Record<string, any> = {}>({ aggregationFns, autoResetExpanded, columnResizeMode, defaultColumn, editingMode, enableBottomToolbar, enableColumnActions, enableColumnFilterChangeMode, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterChangeMode, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarInternalActions, enableTopToolbar, filterFns, icons, localization, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, rowNumberMode, selectAllMode, sortingFns, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
 
+interface Props$6<TData extends Record<string, any> = {}> {
+    cell: MRT_Cell<TData>;
+    children: ReactNode;
+    table: MRT_TableInstance<TData>;
+}
+declare const MRT_CopyButton: <TData extends Record<string, any> = {}>({ cell, children, table, }: Props$6<TData>) => JSX.Element;
+
 interface Props$5<TData extends Record<string, any> = {}> extends IconButtonProps {
     table: MRT_TableInstance<TData>;
 }
@@ -682,4 +708,4 @@ interface Props<TData extends Record<string, any> = {}> extends IconButtonProps
 }
 declare const MRT_ToggleGlobalFilterButton: <TData extends Record<string, any> = {}>({ table, ...rest }: Props<TData>) => JSX.Element;
 
-export { MRT_Cell, MRT_Column, MRT_ColumnDef, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterFn, MRT_FilterOption, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_Header, MRT_HeaderGroup, MRT_Icons, MRT_Localization, MRT_Row, MRT_RowModel, MRT_ShowHideColumnsButton, MRT_SortingFn, MRT_SortingOption, MRT_TableInstance, MRT_TableState, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MaterialReactTableProps, _default as default };
+export { MRT_Cell, MRT_Column, MRT_ColumnDef, MRT_CopyButton, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterFn, MRT_FilterOption, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_Header, MRT_HeaderGroup, MRT_Icons, MRT_Localization, MRT_Row, MRT_RowModel, MRT_ShowHideColumnsButton, MRT_SortingFn, MRT_SortingOption, MRT_TableInstance, MRT_TableState, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MaterialReactTableProps, _default as default };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.36.2",
+  "version": "0.37.2",
   "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.
@@ -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>;
@@ -732,9 +769,11 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
       table: MRT_TableInstance<TData>;
     }) => ReactNode[];
     renderRowActions?: ({
+      cell,
       row,
       table,
     }: {
+      cell: MRT_Cell<TData>;
       row: MRT_Row<TData>;
       table: MRT_TableInstance<TData>;
     }) => ReactNode;
@@ -752,7 +791,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 +812,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

@@ -18,6 +18,7 @@ import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
 import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
 import type { MRT_Cell, MRT_TableInstance } from '..';
 import { MRT_TableBodyRowGrabHandle } from './MRT_TableBodyRowGrabHandle';
+import { MRT_TableBodyCellValue } from './MRT_TableBodyCellValue';
 
 interface Props {
   cell: MRT_Cell;
@@ -48,8 +49,8 @@ export const MRT_TableBodyCell: FC<Props> = ({
       muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps,
       rowNumberMode,
-      tableId,
     },
+    refs: { editInputRefs },
     setEditingCell,
     setHoveredColumn,
   } = table;
@@ -68,7 +69,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 +116,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,32 +278,19 @@ 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) &&
           columnDef.enableClickToCopy !== false ? (
-          <>
-            <MRT_CopyButton cell={cell} table={table}>
-              <>
-                {row.getIsGrouped() && !cell.getIsGrouped()
-                  ? null
-                  : columnDef?.Cell?.({ cell, column, table }) ??
-                    cell.renderValue()}
-              </>
-            </MRT_CopyButton>
-            {cell.getIsGrouped() && <> ({row.subRows?.length})</>}
-          </>
+          <MRT_CopyButton cell={cell} table={table}>
+            <MRT_TableBodyCellValue cell={cell} table={table} />
+          </MRT_CopyButton>
         ) : (
-          <>
-            {row.getIsGrouped() && !cell.getIsGrouped()
-              ? null
-              : columnDef?.Cell?.({ cell, column, table }) ??
-                cell.renderValue()}
-            {cell.getIsGrouped() && <> ({row.subRows?.length ?? ''})</>}
-          </>
+          <MRT_TableBodyCellValue cell={cell} table={table} />
         )}
       </>
+      {cell.getIsGrouped() && <> ({row.subRows?.length})</>}
     </TableCell>
   );
 };

package/src/body/MRT_TableBodyCellValue.tsx

@@ -0,0 +1,27 @@
+import React, { FC } from 'react';
+import { MRT_Cell, MRT_TableInstance } from '..';
+
+interface Props {
+  cell: MRT_Cell;
+  table: MRT_TableInstance;
+}
+
+export const MRT_TableBodyCellValue: FC<Props> = ({ cell, table }) => {
+  const { column, row } = cell;
+  const { columnDef } = column;
+
+  return (
+    <>
+      {cell.getIsAggregated() && column.columnDef.aggregationFn
+        ? columnDef.AggregatedCell?.({
+            cell,
+            column,
+            row,
+            table,
+          })
+        : row.getIsGrouped() && !cell.getIsGrouped()
+        ? null
+        : columnDef?.Cell?.({ cell, column, row, table }) ?? cell.renderValue()}
+    </>
+  );
+};

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

@@ -1,18 +1,22 @@
-import React, { FC, ReactNode, useState } from 'react';
+import React, { ReactNode, useState } from 'react';
 import { Button, Tooltip } from '@mui/material';
 import { MRT_Cell, MRT_TableInstance } from '..';
 
-interface Props {
-  cell: MRT_Cell;
+interface Props<TData extends Record<string, any> = {}> {
+  cell: MRT_Cell<TData>;
   children: ReactNode;
-  table: MRT_TableInstance;
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_CopyButton: FC<Props> = ({ cell, children, table }) => {
+export const MRT_CopyButton = <TData extends Record<string, any> = {}>({
+  cell,
+  children,
+  table,
+}: Props<TData>) => {
   const {
     options: { localization, muiTableBodyCellCopyButtonProps },
   } = table;
-  const { column } = cell;
+  const { column, row } = cell;
   const { columnDef } = column;
 
   const [copied, setCopied] = useState(false);
@@ -25,7 +29,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 (