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

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

@@ -16,6 +16,7 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell, tableInstance }) => {
     options: {
       enableClickToCopy,
       enableColumnPinning,
+      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={{
@@ -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,
+      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_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_ToggleRowActionMenuButton.tsx

@@ -27,7 +27,7 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({
   const {
     getState,
     options: {
-      enableRowEditing,
+      enableEditing,
       icons: { EditIcon, MoreHorizIcon },
       localization,
       renderRowActionMenuItems,
@@ -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/buttons/MRT_ToggleSearchButton.tsx

@@ -23,13 +23,18 @@ export const MRT_ToggleSearchButton: FC<Props> = ({
 
   const { showSearch } = getState();
 
+  const textFieldProps =
+    muiSearchTextFieldProps instanceof Function
+      ? muiSearchTextFieldProps({ tableInstance })
+      : muiSearchTextFieldProps;
+
   const handleToggleSearch = () => {
     setShowSearch(!showSearch);
     setTimeout(
       () =>
         document
           .getElementById(
-            muiSearchTextFieldProps?.id ?? `mrt-${idPrefix}-search-text-field`,
+            textFieldProps?.id ?? `mrt-${idPrefix}-search-text-field`,
           )
           ?.focus(),
       200,

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

@@ -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,38 @@ 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 +55,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}
     />

package/src/inputs/MRT_FilterTextField.tsx

@@ -44,12 +44,12 @@ export const MRT_FilterTextField: FC<Props> = ({ header, tableInstance }) => {
 
   const mTableHeadCellFilterTextFieldProps =
     muiTableHeadCellFilterTextFieldProps instanceof Function
-      ? muiTableHeadCellFilterTextFieldProps(column)
+      ? muiTableHeadCellFilterTextFieldProps({ column, tableInstance })
       : muiTableHeadCellFilterTextFieldProps;
 
   const mcTableHeadCellFilterTextFieldProps =
     column.muiTableHeadCellFilterTextFieldProps instanceof Function
-      ? column.muiTableHeadCellFilterTextFieldProps(column)
+      ? column.muiTableHeadCellFilterTextFieldProps({ column, tableInstance })
       : column.muiTableHeadCellFilterTextFieldProps;
 
   const textFieldProps = {

package/src/inputs/MRT_SearchTextField.tsx

@@ -41,7 +41,7 @@ export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
   const handleChange = useCallback(
     debounce((event: ChangeEvent<HTMLInputElement>) => {
       setGlobalFilter(event.target.value ?? undefined);
-      onGlobalFilterChange?.(event);
+      onGlobalFilterChange?.({ event, tableInstance });
     }, 200),
     [],
   );
@@ -55,6 +55,11 @@ export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
     setGlobalFilter(undefined);
   };
 
+  const textFieldProps =
+    muiSearchTextFieldProps instanceof Function
+      ? muiSearchTextFieldProps({ tableInstance })
+      : muiSearchTextFieldProps;
+
   return (
     <Collapse in={showSearch} orientation="horizontal">
       <TextField
@@ -97,8 +102,8 @@ export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
             </InputAdornment>
           ),
         }}
-        {...muiSearchTextFieldProps}
-        sx={{ justifySelf: 'end', ...muiSearchTextFieldProps?.sx }}
+        {...textFieldProps}
+        sx={{ justifySelf: 'end', ...textFieldProps?.sx }}
       />
       <MRT_FilterTypeMenu
         anchorEl={anchorEl}

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -32,27 +32,29 @@ export const MRT_SelectCheckbox: FC<Props> = ({
   const handleSelectChange = (event: ChangeEvent<HTMLInputElement>) => {
     if (selectAll) {
       getToggleAllRowsSelectedProps?.()?.onChange?.(event as any);
-      onSelectAllChange?.(
+      onSelectAllChange?.({
         event,
-        event.target.checked ? getRowModel().flatRows : [],
-      );
+        selectedRows: event.target.checked ? getRowModel().flatRows : [],
+        tableInstance,
+      });
     } else if (row) {
       row?.getToggleSelectedProps()?.onChange?.(event as any);
-      onSelectChange?.(
+      onSelectChange?.({
         event,
         row,
-        event.target.checked
+        selectedRows: event.target.checked
           ? [...getSelectedRowModel().flatRows, row]
           : getSelectedRowModel().flatRows.filter(
               (selectedRow) => selectedRow.id !== row.id,
             ),
-      );
+        tableInstance,
+      });
     }
   };
 
   const mTableBodyRowSelectCheckboxProps =
     muiSelectCheckboxProps instanceof Function
-      ? muiSelectCheckboxProps(selectAll, row, tableInstance)
+      ? muiSelectCheckboxProps({ isSelectAll: !!selectAll, row, tableInstance })
       : muiSelectCheckboxProps;
 
   const rtSelectCheckboxProps = selectAll

package/src/localization.ts

@@ -33,6 +33,7 @@ export interface MRT_Localization {
   pinToLeft: string;
   pinToRight: string;
   rowActions: string;
+  rowNumber: string;
   rowNumbers: string;
   save: string;
   search: string;
@@ -89,12 +90,12 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   pinToLeft: 'Pin to left',
   pinToRight: 'Pin to right',
   rowActions: 'Row Actions',
+  rowNumber: '#',
   rowNumbers: 'Row Numbers',
   save: 'Save',
   search: 'Search',
   selectedCountOfRowCountRowsSelected:
     '{selectedCount} of {rowCount} row(s) selected',
-
   select: 'Select',
   showAll: 'Show all',
   showAllColumns: 'Show all columns',

package/src/menus/MRT_RowActionMenu.tsx

@@ -25,7 +25,7 @@ export const MRT_RowActionMenu: FC<Props> = ({
     getState,
     options: {
       icons: { EditIcon },
-      enableRowEditing,
+      enableEditing,
       localization,
       renderRowActionMenuItems,
     },
@@ -42,7 +42,7 @@ export const MRT_RowActionMenu: FC<Props> = ({
         dense: isDensePadding,
       }}
     >
-      {enableRowEditing && (
+      {enableEditing && (
         <MenuItem onClick={handleEdit} sx={commonMenuItemStyles}>
           <Box sx={commonListItemStyles}>
             <ListItemIcon>
@@ -52,9 +52,11 @@ export const MRT_RowActionMenu: FC<Props> = ({
           </Box>
         </MenuItem>
       )}
-      {renderRowActionMenuItems?.(row, tableInstance, () =>
-        setAnchorEl(null),
-      ) ?? null}
+      {renderRowActionMenuItems?.({
+        row,
+        tableInstance,
+        closeMenu: () => setAnchorEl(null),
+      })}
     </Menu>
   );
 };

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -34,12 +34,11 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
     } else {
       column.toggleVisibility();
     }
-    onColumnHide?.(
+    onColumnHide?.({
       column,
-      Object.entries(columnVisibility)
-        .filter((entry) => entry[1])
-        .map((entry) => entry[0]),
-    );
+      columnVisibility,
+      tableInstance,
+    });
   };
 
   return (

package/src/table/MRT_Table.tsx

@@ -23,7 +23,7 @@ export const MRT_Table: FC<Props> = ({ pinned, tableInstance }) => {
 
   const mTableProps =
     muiTableProps instanceof Function
-      ? muiTableProps(tableInstance)
+      ? muiTableProps({ tableInstance })
       : muiTableProps;
 
   const tableProps = {