material-react-table 0.7.0-alpha.1 → 0.7.0-alpha.12

package/src/body/MRT_TableBody.tsx

@@ -22,7 +22,7 @@ export const MRT_TableBody: FC<Props> = ({ pinned, tableInstance }) => {
 
   const mTableBodyProps =
     muiTableBodyProps instanceof Function
-      ? muiTableBodyProps(tableInstance)
+      ? muiTableBodyProps({ tableInstance })
       : muiTableBodyProps;
 
   const tableBodyProps = {

package/src/body/MRT_TableBodyCell.tsx

@@ -15,7 +15,8 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell, tableInstance }) => {
     getState,
     options: {
       enableClickToCopy,
-      enableColumnPinning,
+      enablePinning,
+      enableEditing,
       isLoading,
       muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps,
@@ -29,12 +30,12 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell, tableInstance }) => {
 
   const mTableCellBodyProps =
     muiTableBodyCellProps instanceof Function
-      ? muiTableBodyCellProps(cell)
+      ? muiTableBodyCellProps({ cell, tableInstance })
       : muiTableBodyCellProps;
 
   const mcTableCellBodyProps =
     column.muiTableBodyCellProps instanceof Function
-      ? column.muiTableBodyCellProps(cell)
+      ? column.muiTableBodyCellProps({ cell, tableInstance })
       : column.muiTableBodyCellProps;
 
   const tableCellProps = {
@@ -55,7 +56,7 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell, tableInstance }) => {
   return (
     <TableCell
       onClick={(event: MouseEvent<HTMLTableCellElement>) =>
-        onCellClick?.(event, cell)
+        onCellClick?.({ event, cell, tableInstance })
       }
       {...tableCellProps}
       sx={{
@@ -72,7 +73,7 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell, tableInstance }) => {
             : undefined,
         transition: 'all 0.2s ease-in-out',
         whiteSpace:
-          isDensePadding || (enableColumnPinning && getIsSomeColumnsPinned())
+          isDensePadding || (enablePinning && getIsSomeColumnsPinned())
             ? 'nowrap'
             : 'normal',
         //@ts-ignore
@@ -93,19 +94,21 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell, tableInstance }) => {
           column.id !==
             row.groupingColumnId) ? null : cell.getIsAggregated() ? (
         cell.renderAggregatedCell()
-      ) : column.enableEditing && currentEditingRow?.id === row.id ? (
+      ) : enableEditing &&
+        column.enableEditing !== false &&
+        currentEditingRow?.id === row.id ? (
         <MRT_EditCellTextField cell={cell} tableInstance={tableInstance} />
       ) : (enableClickToCopy || column.enableClickToCopy) &&
         column.enableClickToCopy !== false ? (
         <>
           <MRT_CopyButton cell={cell} tableInstance={tableInstance}>
-            {cell.renderCell()}
+            {cell.column?.Cell?.({ cell, tableInstance }) ?? cell.renderCell()}
           </MRT_CopyButton>
           {row.getIsGrouped() && <> ({row.subRows?.length})</>}
         </>
       ) : (
         <>
-          {cell.renderCell()}
+          {cell.column?.Cell?.({ cell, tableInstance }) ?? cell.renderCell()}
           {row.getIsGrouped() && <> ({row.subRows?.length})</>}
         </>
       )}

package/src/body/MRT_TableBodyRow.tsx

@@ -27,7 +27,7 @@ export const MRT_TableBodyRow: FC<Props> = ({ pinned, row, tableInstance }) => {
 
   const mTableBodyRowProps =
     muiTableBodyRowProps instanceof Function
-      ? muiTableBodyRowProps(row)
+      ? muiTableBodyRowProps({ row, tableInstance })
       : muiTableBodyRowProps;
 
   const tableRowProps = {
@@ -47,7 +47,7 @@ export const MRT_TableBodyRow: FC<Props> = ({ pinned, row, tableInstance }) => {
       <TableRow
         hover
         onClick={(event: MouseEvent<HTMLTableRowElement>) =>
-          onRowClick?.(event, row)
+          onRowClick?.({ event, row, tableInstance })
         }
         selected={getIsSelected()}
         {...tableRowProps}

package/src/body/MRT_TableDetailPanel.tsx

@@ -20,12 +20,12 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row, tableInstance }) => {
 
   const tableRowProps =
     muiTableBodyRowProps instanceof Function
-      ? muiTableBodyRowProps(row)
+      ? muiTableBodyRowProps({ row, tableInstance })
       : muiTableBodyRowProps;
 
   const tableCellProps =
     muiTableDetailPanelProps instanceof Function
-      ? muiTableDetailPanelProps(row)
+      ? muiTableDetailPanelProps({ row, tableInstance })
       : muiTableDetailPanelProps;
 
   return (
@@ -33,7 +33,7 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row, tableInstance }) => {
       <TableCell
         colSpan={getVisibleFlatColumns().length + 10}
         onClick={(event: MouseEvent<HTMLTableCellElement>) =>
-          onDetailPanelClick?.(event, row)
+          onDetailPanelClick?.({ event, row, tableInstance })
         }
         {...tableCellProps}
         sx={{
@@ -44,7 +44,9 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row, tableInstance }) => {
           ...tableCellProps?.sx,
         }}
       >
-        <Collapse in={row.getIsExpanded()}>{renderDetailPanel?.(row)}</Collapse>
+        <Collapse in={row.getIsExpanded()}>
+          {renderDetailPanel?.({ row, tableInstance })}
+        </Collapse>
       </TableCell>
     </TableRow>
   );

package/src/buttons/MRT_CopyButton.tsx

@@ -1,10 +1,9 @@
-import React, { FC, ReactNode, useState } from 'react';
+import React, { FC, useState } from 'react';
 import { Button, Tooltip } from '@mui/material';
 import { MRT_Cell, MRT_TableInstance } from '..';
 
 interface Props {
   cell: MRT_Cell;
-  children: ReactNode;
   tableInstance: MRT_TableInstance;
 }
 
@@ -27,12 +26,12 @@ export const MRT_CopyButton: FC<Props> = ({
 
   const mTableBodyCellCopyButtonProps =
     muiTableBodyCellCopyButtonProps instanceof Function
-      ? muiTableBodyCellCopyButtonProps(cell)
+      ? muiTableBodyCellCopyButtonProps({ cell, tableInstance })
       : muiTableBodyCellCopyButtonProps;
 
   const mcTableBodyCellCopyButtonProps =
     cell.column.muiTableBodyCellCopyButtonProps instanceof Function
-      ? cell.column.muiTableBodyCellCopyButtonProps(cell)
+      ? cell.column.muiTableBodyCellCopyButtonProps({ cell, tableInstance })
       : cell.column.muiTableBodyCellCopyButtonProps;
 
   const buttonProps = {

package/src/buttons/MRT_EditActionButtons.tsx

@@ -14,18 +14,20 @@ export const MRT_EditActionButtons: FC<Props> = ({ row, tableInstance }) => {
     options: {
       icons: { CancelIcon, SaveIcon },
       localization,
-      onRowEditSubmit,
-      setCurrentEditingRow,
+      onEditSubmit,
     },
+    setCurrentEditingRow,
   } = tableInstance;
 
+  const { currentEditingRow } = getState();
+
   const handleCancel = () => {
     row.values = (row.original as RowValues) ?? {};
     setCurrentEditingRow(null);
   };
 
-  const handleSave = async () => {
-    await onRowEditSubmit?.(getState().currentEditingRow ?? row);
+  const handleSave = () => {
+    onEditSubmit?.({ row: currentEditingRow ?? row, tableInstance });
     setCurrentEditingRow(null);
   };
 

package/src/buttons/MRT_ExpandButton.tsx

@@ -22,7 +22,7 @@ export const MRT_ExpandButton: FC<Props> = ({ row, tableInstance }) => {
 
   const handleToggleExpand = (event: MouseEvent<HTMLButtonElement>) => {
     row.toggleExpanded();
-    onRowExpandChange?.(event, row);
+    onRowExpandChange?.({ event, row, tableInstance });
   };
 
   return (

package/src/buttons/MRT_FullScreenToggleButton.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, MouseEvent } from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
@@ -15,17 +15,27 @@ export const MRT_FullScreenToggleButton: FC<Props> = ({
     options: {
       icons: { FullscreenExitIcon, FullscreenIcon },
       localization,
-      setIsFullScreen,
+      onToggleFullScreen,
     },
+    setIsFullScreen,
   } = tableInstance;
 
   const { isFullScreen } = getState();
 
+  const handleToggleFullScreen = (event: MouseEvent<HTMLButtonElement>) => {
+    onToggleFullScreen?.({
+      event,
+      isFullScreen: !isFullScreen,
+      tableInstance,
+    });
+    setIsFullScreen(!isFullScreen);
+  };
+
   return (
     <Tooltip arrow title={localization.toggleFullScreen}>
       <IconButton
         aria-label={localization.showHideFilters}
-        onClick={() => setIsFullScreen(!isFullScreen)}
+        onClick={handleToggleFullScreen}
         size="small"
         {...rest}
       >

package/src/buttons/MRT_ToggleColumnActionMenuButton.tsx

@@ -32,12 +32,15 @@ export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({
 
   const mTableHeadCellColumnActionsButtonProps =
     muiTableHeadCellColumnActionsButtonProps instanceof Function
-      ? muiTableHeadCellColumnActionsButtonProps(column)
+      ? muiTableHeadCellColumnActionsButtonProps({ column, tableInstance })
       : muiTableHeadCellColumnActionsButtonProps;
 
   const mcTableHeadCellColumnActionsButtonProps =
     column.muiTableHeadCellColumnActionsButtonProps instanceof Function
-      ? column.muiTableHeadCellColumnActionsButtonProps(column)
+      ? column.muiTableHeadCellColumnActionsButtonProps({
+          column,
+          tableInstance,
+        })
       : column.muiTableHeadCellColumnActionsButtonProps;
 
   const iconButtonProps = {

package/src/buttons/MRT_ToggleDensePaddingButton.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, MouseEvent } from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
@@ -15,17 +15,27 @@ export const MRT_ToggleDensePaddingButton: FC<Props> = ({
     options: {
       icons: { DensityMediumIcon, DensitySmallIcon },
       localization,
-      setIsDensePadding,
+      onToggleDensePadding,
     },
+    setIsDensePadding,
   } = tableInstance;
 
   const { isDensePadding } = getState();
 
+  const handleToggleDensePadding = (event: MouseEvent<HTMLButtonElement>) => {
+    onToggleDensePadding?.({
+      event,
+      isDensePadding: !isDensePadding,
+      tableInstance,
+    });
+    setIsDensePadding(!isDensePadding);
+  };
+
   return (
     <Tooltip arrow title={localization.toggleDensePadding}>
       <IconButton
         aria-label={localization.toggleDensePadding}
-        onClick={() => setIsDensePadding(!isDensePadding)}
+        onClick={handleToggleDensePadding}
         size="small"
         {...rest}
       >

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, MouseEvent } from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
@@ -15,17 +15,27 @@ export const MRT_ToggleFiltersButton: FC<Props> = ({
     options: {
       icons: { FilterListIcon, FilterListOffIcon },
       localization,
-      setShowFilters,
+      onToggleShowFilters,
     },
+    setShowFilters,
   } = tableInstance;
 
   const { showFilters } = getState();
 
+  const handleToggleShowFilters = (event: MouseEvent<HTMLButtonElement>) => {
+    onToggleShowFilters?.({
+      event,
+      showFilters: !showFilters,
+      tableInstance,
+    });
+    setShowFilters(!showFilters);
+  };
+
   return (
     <Tooltip arrow title={localization.showHideFilters}>
       <IconButton
         aria-label={localization.showHideFilters}
-        onClick={() => setShowFilters(!showFilters)}
+        onClick={handleToggleShowFilters}
         size="small"
         {...rest}
       >

package/src/buttons/MRT_ToggleGlobalFilterButton.tsx

@@ -0,0 +1,57 @@
+import React, { FC, MouseEvent } from 'react';
+import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
+import { MRT_TableInstance } from '..';
+
+interface Props extends IconButtonProps {
+  tableInstance: MRT_TableInstance;
+}
+
+export const MRT_ToggleGlobalFilterButton: FC<Props> = ({
+  tableInstance,
+  ...rest
+}) => {
+  const {
+    getState,
+    options: {
+      icons: { SearchIcon, SearchOffIcon },
+      idPrefix,
+      localization,
+      muiSearchTextFieldProps,
+      onToggleShowGlobalFilter,
+    },
+    setShowGlobalFilter,
+  } = tableInstance;
+
+  const { showGlobalFilter } = getState();
+
+  const textFieldProps =
+    muiSearchTextFieldProps instanceof Function
+      ? muiSearchTextFieldProps({ tableInstance })
+      : muiSearchTextFieldProps;
+
+  const handleToggleSearch = (event: MouseEvent<HTMLButtonElement>) => {
+    onToggleShowGlobalFilter?.({
+      event,
+      showGlobalFilter: !showGlobalFilter,
+      tableInstance,
+    });
+    setShowGlobalFilter(!showGlobalFilter);
+    setTimeout(
+      () =>
+        document
+          .getElementById(
+            textFieldProps?.id ?? `mrt-${idPrefix}-search-text-field`,
+          )
+          ?.focus(),
+      200,
+    );
+  };
+
+  return (
+    <Tooltip arrow title={localization.showHideSearch}>
+      <IconButton size="small" onClick={handleToggleSearch} {...rest}>
+        {showGlobalFilter ? <SearchOffIcon /> : <SearchIcon />}
+      </IconButton>
+    </Tooltip>
+  );
+};

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -27,13 +27,13 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({
   const {
     getState,
     options: {
-      enableRowEditing,
+      enableEditing,
       icons: { EditIcon, MoreHorizIcon },
       localization,
       renderRowActionMenuItems,
       renderRowActions,
-      setCurrentEditingRow,
     },
+    setCurrentEditingRow,
   } = tableInstance;
 
   const { currentEditingRow } = getState();
@@ -46,7 +46,7 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({
     setAnchorEl(event.currentTarget);
   };
 
-  const handleEdit = () => {
+  const handleStartEditMode = () => {
     setCurrentEditingRow({ ...row });
     setAnchorEl(null);
   };
@@ -54,12 +54,12 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({
   return (
     <>
       {renderRowActions ? (
-        <>{renderRowActions(row, tableInstance)}</>
+        <>{renderRowActions({ row, tableInstance })}</>
       ) : row.id === currentEditingRow?.id ? (
         <MRT_EditActionButtons row={row} tableInstance={tableInstance} />
-      ) : !renderRowActionMenuItems && enableRowEditing ? (
+      ) : !renderRowActionMenuItems && enableEditing ? (
         <Tooltip placement="right" arrow title={localization.edit}>
-          <IconButton sx={commonIconButtonStyles} onClick={handleEdit}>
+          <IconButton sx={commonIconButtonStyles} onClick={handleStartEditMode}>
             <EditIcon />
           </IconButton>
         </Tooltip>
@@ -82,7 +82,7 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({
           </Tooltip>
           <MRT_RowActionMenu
             anchorEl={anchorEl}
-            handleEdit={handleEdit}
+            handleEdit={handleStartEditMode}
             row={row}
             setAnchorEl={setAnchorEl}
             tableInstance={tableInstance}

package/src/footer/MRT_TableFooter.tsx

@@ -19,7 +19,7 @@ export const MRT_TableFooter: FC<Props> = ({ pinned, tableInstance }) => {
 
   const tableFooterProps =
     muiTableFooterProps instanceof Function
-      ? muiTableFooterProps(tableInstance)
+      ? muiTableFooterProps({ tableInstance })
       : muiTableFooterProps;
 
   const getFooterGroupsMap = {

package/src/footer/MRT_TableFooterCell.tsx

@@ -19,12 +19,12 @@ export const MRT_TableFooterCell: FC<Props> = ({ footer, tableInstance }) => {
 
   const mTableFooterCellProps =
     muiTableFooterCellProps instanceof Function
-      ? muiTableFooterCellProps(column)
+      ? muiTableFooterCellProps({ column, tableInstance })
       : muiTableFooterCellProps;
 
   const mcTableFooterCellProps =
     column.muiTableFooterCellProps instanceof Function
-      ? column.muiTableFooterCellProps(column)
+      ? column.muiTableFooterCellProps({ column, tableInstance })
       : column.muiTableFooterCellProps;
 
   const tableCellProps = {

package/src/footer/MRT_TableFooterRow.tsx

@@ -26,7 +26,7 @@ export const MRT_TableFooterRow: FC<Props> = ({
 
   const mTableFooterRowProps =
     muiTableFooterRowProps instanceof Function
-      ? muiTableFooterRowProps(footerGroup)
+      ? muiTableFooterRowProps({ footerGroup, tableInstance })
       : muiTableFooterRowProps;
 
   const tableRowProps = {

package/src/head/MRT_TableHead.tsx

@@ -19,7 +19,7 @@ export const MRT_TableHead: FC<Props> = ({ pinned, tableInstance }) => {
 
   const tableHeadProps =
     muiTableHeadProps instanceof Function
-      ? muiTableHeadProps(tableInstance)
+      ? muiTableHeadProps({ tableInstance })
       : muiTableHeadProps;
 
   const getHeaderGroupsMap = {

package/src/head/MRT_TableHeadCell.tsx

@@ -30,8 +30,8 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
       icons: { FilterAltIcon, FilterAltOff },
       localization,
       muiTableHeadCellProps,
-      setShowFilters,
     },
+    setShowFilters,
   } = tableInstance;
 
   const { isDensePadding, showFilters } = getState();
@@ -40,12 +40,12 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
 
   const mTableHeadCellProps =
     muiTableHeadCellProps instanceof Function
-      ? muiTableHeadCellProps(column)
+      ? muiTableHeadCellProps({ column, tableInstance })
       : muiTableHeadCellProps;
 
   const mcTableHeadCellProps =
     column.muiTableHeadCellProps instanceof Function
-      ? column.muiTableHeadCellProps(column)
+      ? column.muiTableHeadCellProps({ column, tableInstance })
       : column.muiTableHeadCellProps;
 
   const tableCellProps = {
@@ -57,35 +57,28 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
   const sortTooltip = !!column.getIsSorted()
     ? column.getIsSorted() === 'desc'
       ? localization.clearSort
-      : localization.sortByColumnDesc.replace(
-          '{column}',
-          column.header as string,
-        )
-    : localization.sortByColumnAsc.replace('{column}', column.header as string);
+      : localization.sortByColumnDesc.replace('{column}', column.header)
+    : localization.sortByColumnAsc.replace('{column}', column.header);
 
-  // const filterType = getState()?.currentFilterTypes?.[id];
+  const filterType = getState()?.currentFilterTypes?.[header.id];
 
-  const filterTooltip = '';
-  // !!getColumnFilterValue()
-  //   ? localization.filteringByColumn
-  //       .replace('{column}', String(headerString))
-  //       .replace(
-  //         '{filterType}',
-  //         filterType instanceof Function
-  //           ? ''
-  //           : // @ts-ignore
-  //             localization[
-  //               `filter${
-  //                 filterType.charAt(0).toUpperCase() + filterType.slice(1)
-  //               }`
-  //             ],
-  //       )
-  //       .replace(
-  //         '{filterValue}',
-  //         getColumnFilterValue() as string,
-  //       )
-  //       .replace('" "', '')
-  //   : localization.showHideFilters;
+  const filterTooltip = !!column.getColumnFilterValue()
+    ? localization.filteringByColumn
+        .replace('{column}', String(column.header))
+        .replace(
+          '{filterType}',
+          filterType instanceof Function
+            ? ''
+            : // @ts-ignore
+              localization[
+                `filter${
+                  filterType.charAt(0).toUpperCase() + filterType.slice(1)
+                }`
+              ],
+        )
+        .replace('{filterValue}', column.getColumnFilterValue() as string)
+        .replace('" "', '')
+    : localization.showHideFilters;
 
   const headerElement =
     column?.Header?.({

package/src/head/MRT_TableHeadRow.tsx

@@ -15,7 +15,7 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup, tableInstance }) => {
 
   const mTableHeadRowProps =
     muiTableHeadRowProps instanceof Function
-      ? muiTableHeadRowProps(headerGroup)
+      ? muiTableHeadRowProps({ headerGroup, tableInstance })
       : muiTableHeadRowProps;
 
   const tableRowProps = {

package/src/inputs/MRT_EditCellTextField.tsx

@@ -1,6 +1,12 @@
-import React, { ChangeEvent, FC, MouseEvent } from 'react';
+import React, {
+  ChangeEvent,
+  FC,
+  FocusEvent,
+  MouseEvent,
+  useState,
+} from 'react';
 import { TextField } from '@mui/material';
-import type { MRT_Cell, MRT_TableInstance } from '..';
+import type { MRT_Cell, MRT_Row, MRT_TableInstance } from '..';
 
 interface Props {
   cell: MRT_Cell;
@@ -10,29 +16,35 @@ interface Props {
 export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
   const {
     getState,
-    options: { muiTableBodyCellEditTextFieldProps },
+    options: { enableEditing, muiTableBodyCellEditTextFieldProps },
+    setCurrentEditingRow,
   } = tableInstance;
 
+  const [value, setValue] = useState(cell.value);
+
   const { column, row } = cell;
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+    column.onCellEditChange?.({ event, cell, tableInstance });
+  };
+
+  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
     if (getState().currentEditingRow) {
-      row.values[column.id] = event.target.value;
-      // setCurrentEditingRow({
-      //   ...getState().currentEditingRow,
-      // });
+      row.values[column.id] = value;
+      setCurrentEditingRow({ ...getState().currentEditingRow } as MRT_Row);
     }
-    column.onCellEditChange?.(event, cell);
+    column.onCellEditBlur?.({ event, cell, tableInstance });
   };
 
   const mTableBodyCellEditTextFieldProps =
     muiTableBodyCellEditTextFieldProps instanceof Function
-      ? muiTableBodyCellEditTextFieldProps(cell)
+      ? muiTableBodyCellEditTextFieldProps({ cell, tableInstance })
       : muiTableBodyCellEditTextFieldProps;
 
   const mcTableBodyCellEditTextFieldProps =
     column.muiTableBodyCellEditTextFieldProps instanceof Function
-      ? column.muiTableBodyCellEditTextFieldProps(cell)
+      ? column.muiTableBodyCellEditTextFieldProps({ cell, tableInstance })
       : column.muiTableBodyCellEditTextFieldProps;
 
   const textFieldProps = {
@@ -40,17 +52,18 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
     ...mcTableBodyCellEditTextFieldProps,
   };
 
-  // if (enableEditing && Edit) {
-  //   return <>{Edit({ ...textFieldProps, cell })}</>;
-  // }
+  if (enableEditing && column.enableEditing !== false && column.Edit) {
+    return <>{column.Edit?.({ cell, tableInstance })}</>;
+  }
 
   return (
     <TextField
       margin="dense"
+      onBlur={handleBlur}
       onChange={handleChange}
       onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
       placeholder={column.header}
-      value={cell.value}
+      value={value}
       variant="standard"
       {...textFieldProps}
     />