material-react-table 0.3.1 → 0.3.2

package/dist/useMaterialReactTable.d.ts

@@ -1,11 +1,11 @@
 import React, { PropsWithChildren } from 'react';
-import { TableInstance } from 'react-table';
+import { Row, TableInstance } from 'react-table';
 import { MaterialReactTableProps } from './MaterialReactTable';
 import { UseMRTCalcs } from './utils/useMRTCalcs';
 export interface UseMaterialReactTable<D extends {}> extends MaterialReactTableProps<D>, UseMRTCalcs {
-    currentEditingRowId: string | null;
+    currentEditingRow: Row<D> | null;
     densePadding: boolean;
-    setCurrentEditingRowId: (currentRowEditingId: string | null) => void;
+    setCurrentEditingRow: (currentRowEditingId: Row<D> | null) => void;
     setDensePadding: (densePadding: boolean) => void;
     setShowFilters: (showFilters: boolean) => void;
     showFilters: boolean;

package/dist/utils/localization.d.ts

@@ -11,13 +11,14 @@ export interface MRT_Localization {
     expandButtonTitle: string;
     filterTextFieldClearButtonTitle: string;
     filterTextFieldPlaceholder: string;
-    rowActionMenuButtonTitle: string;
-    rowActionsColumnTitle: string;
-    rowActionButtonSave: string;
     rowActionButtonCancel: string;
+    rowActionButtonSave: string;
+    rowActionMenuButtonTitle: string;
     rowActionMenuItemEdit: string;
+    rowActionsColumnTitle: string;
     searchTextFieldClearButtonTitle: string;
     searchTextFieldPlaceholder: string;
+    selectAllCheckboxTitle: string;
     showHideColumnsButtonTitle: string;
     toggleDensePaddingSwitchTitle: string;
     toggleFilterButtonTitle: string;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.3.1",
+  "version": "0.3.2",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material-UI implementation of react-table, inspired by material-table and the mui DataGrid, written from the ground up in TypeScript.",
@@ -13,7 +13,7 @@
     "type": "git",
     "url": "https://github.com/KevinVandy/material-react-table"
   },
-  "homepage": "https://github.com/KevinVandy/material-react-table#readme",
+  "homepage": "https://www.material-react-table.com/",
   "bugs": {
     "url": "https://github.com/KevinVandy/material-react-table/issues"
   },
@@ -24,7 +24,7 @@
     "src"
   ],
   "engines": {
-    "node": ">=14"
+    "node": ">=12"
   },
   "scripts": {
     "start": "tsdx watch",
@@ -55,24 +55,25 @@
     }
   ],
   "devDependencies": {
-    "@babel/core": "^7.16.12",
+    "@babel/core": "^7.17.0",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
+    "@etchteam/storybook-addon-status": "^4.2.0",
     "@faker-js/faker": "^6.0.0-alpha.5",
     "@mui/icons-material": "^5.3.1",
-    "@mui/material": "^5.3.1",
+    "@mui/material": "^5.4.0",
     "@size-limit/preset-small-lib": "^7.0.5",
-    "@storybook/addon-a11y": "^6.4.16",
-    "@storybook/addon-actions": "^6.4.16",
+    "@storybook/addon-a11y": "^6.4.18",
+    "@storybook/addon-actions": "^6.4.18",
     "@storybook/addon-console": "^1.2.3",
-    "@storybook/addon-essentials": "^6.4.16",
+    "@storybook/addon-essentials": "^6.4.18",
     "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.4.16",
-    "@storybook/addon-storysource": "^6.4.16",
-    "@storybook/addons": "^6.4.16",
-    "@storybook/react": "^6.4.16",
+    "@storybook/addon-links": "^6.4.18",
+    "@storybook/addon-storysource": "^6.4.18",
+    "@storybook/addons": "^6.4.18",
+    "@storybook/react": "^6.4.18",
     "@types/faker": "^6.6.8",
-    "@types/react": "^17.0.38",
+    "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
     "@types/react-table": "^7.7.9",
     "babel-loader": "^8.2.3",
@@ -93,7 +94,7 @@
     "@emotion/react": ">=11",
     "@mui/icons-material": ">=5",
     "@mui/material": ">=5",
-    "react": ">=17",
+    "react": ">=16.8",
     "react-table": ">=7"
   }
 }

package/src/@types/faker.d.ts

@@ -0,0 +1,4 @@
+declare module '@faker-js/faker' {
+  import faker from 'faker';
+  export default faker;
+}

package/src/@types/react-table-config.d.ts

@@ -0,0 +1,153 @@
+import { TableCellProps, TextFieldProps } from '@mui/material';
+import { ReactNode } from 'react';
+import {
+  UseColumnOrderInstanceProps,
+  UseColumnOrderState,
+  UseExpandedHooks,
+  UseExpandedInstanceProps,
+  UseExpandedOptions,
+  UseExpandedRowProps,
+  UseExpandedState,
+  UseFiltersColumnOptions,
+  UseFiltersColumnProps,
+  UseFiltersInstanceProps,
+  UseFiltersOptions,
+  UseFiltersState,
+  UseGlobalFiltersColumnOptions,
+  UseGlobalFiltersInstanceProps,
+  UseGlobalFiltersOptions,
+  UseGlobalFiltersState,
+  UseGroupByCellProps,
+  UseGroupByColumnOptions,
+  UseGroupByColumnProps,
+  UseGroupByHooks,
+  UseGroupByInstanceProps,
+  UseGroupByOptions,
+  UseGroupByRowProps,
+  UseGroupByState,
+  UsePaginationInstanceProps,
+  UsePaginationOptions,
+  UsePaginationState,
+  UseResizeColumnsColumnOptions,
+  UseResizeColumnsColumnProps,
+  UseResizeColumnsOptions,
+  UseResizeColumnsState,
+  UseRowSelectHooks,
+  UseRowSelectInstanceProps,
+  UseRowSelectOptions,
+  UseRowSelectRowProps,
+  UseRowSelectState,
+  UseRowStateCellProps,
+  UseRowStateInstanceProps,
+  UseRowStateOptions,
+  UseRowStateRowProps,
+  UseRowStateState,
+  UseSortByColumnOptions,
+  UseSortByColumnProps,
+  UseSortByHooks,
+  UseSortByInstanceProps,
+  UseSortByOptions,
+  UseSortByState,
+} from 'react-table';
+
+declare module 'react-table' {
+  export interface TableOptions<D extends Record<string, unknown>>
+    extends UseExpandedOptions<D>,
+      UseFiltersOptions<D>,
+      UseGlobalFiltersOptions<D>,
+      UseGroupByOptions<D>,
+      UsePaginationOptions<D>,
+      UseResizeColumnsOptions<D>,
+      UseRowSelectOptions<D>,
+      UseRowStateOptions<D>,
+      UseSortByOptions<D>,
+      Record<string, any> {}
+
+  export interface Hooks<
+    D extends Record<string, unknown> = Record<string, unknown>,
+  > extends UseExpandedHooks<D>,
+      UseGroupByHooks<D>,
+      UseRowSelectHooks<D>,
+      UseSortByHooks<D> {}
+
+  export interface TableInstance<
+    D extends Record<string, unknown> = Record<string, unknown>,
+  > extends UseColumnOrderInstanceProps<D>,
+      UseExpandedInstanceProps<D>,
+      UseFiltersInstanceProps<D>,
+      UseGlobalFiltersInstanceProps<D>,
+      UseGroupByInstanceProps<D>,
+      UsePaginationInstanceProps<D>,
+      UseRowSelectInstanceProps<D>,
+      UseRowStateInstanceProps<D>,
+      UseSortByInstanceProps<D> {}
+
+  export interface TableState<
+    D extends Record<string, unknown> = Record<string, unknown>,
+  > extends UseColumnOrderState<D>,
+      UseExpandedState<D>,
+      UseFiltersState<D>,
+      UseGlobalFiltersState<D>,
+      UseGroupByState<D>,
+      UsePaginationState<D>,
+      UseResizeColumnsState<D>,
+      UseRowSelectState<D>,
+      UseRowStateState<D>,
+      UseSortByState<D> {}
+
+  export interface ColumnInterface<
+    D extends Record<string, unknown> = Record<string, unknown>,
+  > extends UseFiltersColumnOptions<D>,
+      UseGlobalFiltersColumnOptions<D>,
+      UseGroupByColumnOptions<D>,
+      UseResizeColumnsColumnOptions<D>,
+      UseSortByColumnOptions<D> {
+    disableFilters?: boolean;
+    Filter?: ({ column }: { column: HeaderGroup<D> }) => ReactNode;
+    editable?: boolean;
+    Edit?: ({
+      cell,
+      onChange,
+    }: {
+      cell: Cell<D>;
+      onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    }) => ReactNode;
+    muiTableBodyCellProps?:
+      | TableCellProps
+      | ((cell?: Cell<D>) => TableCellProps);
+    muiTableHeadCellProps?:
+      | TableCellProps
+      | ((column: Column<D>) => TableCellProps);
+    muiTableFooterCellProps?:
+      | TableCellProps
+      | ((column: Column<D>) => TableCellProps);
+    muiTableBodyCellEditTextFieldProps?:
+      | TextFieldProps
+      | ((cell?: Cell<D>) => TextFieldProps);
+    muiTableHeadCellFilterTextFieldProps?:
+      | TextFieldProps
+      | ((column: Column<D>) => TextFieldProps);
+  }
+
+  export interface ColumnInstance<
+    D extends Record<string, unknown> = Record<string, unknown>,
+  > extends UseFiltersColumnProps<D>,
+      UseGroupByColumnProps<D>,
+      UseResizeColumnsColumnProps<D>,
+      UseSortByColumnProps<D> {}
+
+  export interface Cell<
+    D extends Record<string, unknown> = Record<string, unknown>,
+    V = any,
+  > extends UseGroupByCellProps<D>,
+      UseRowStateCellProps<D> {}
+
+  export interface Row<
+    D extends Record<string, unknown> = Record<string, unknown>,
+  > extends UseExpandedRowProps<D>,
+      UseGroupByRowProps<D>,
+      UseRowSelectRowProps<D>,
+      UseRowStateRowProps<D> {}
+}
+
+export module 'react-table';

package/src/MaterialReactTable.tsx

@@ -65,6 +65,9 @@ export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
     isLoading?: boolean;
     localization?: Partial<MRT_Localization>;
     muiSearchTextFieldProps?: TextFieldProps;
+    muiTableBodyCellEditTextFieldProps?:
+      | TextFieldProps
+      | ((cell?: Cell<D>) => TextFieldProps);
     muiTableBodyCellProps?:
       | TableCellProps
       | ((cell?: Cell<D>) => TableCellProps);
@@ -81,6 +84,9 @@ export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
     muiTableFooterRowProps?:
       | TableRowProps
       | ((footerGroup: HeaderGroup<D>) => TableRowProps);
+    muiTableHeadCellFilterTextFieldProps?:
+      | TextFieldProps
+      | ((column: Column<D>) => TextFieldProps);
     muiTableHeadCellProps?:
       | TableCellProps
       | ((column: Column<D>) => TableCellProps);
@@ -122,16 +128,16 @@ export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
     positionActionsColumn?: 'first' | 'last';
     positionPagination?: 'bottom' | 'top' | 'both';
     positionToolbarActions?: 'bottom' | 'top';
-    renderRowActions?: (
-      row: Row<D>,
-      tableInstance: TableInstance<D>,
-    ) => ReactNode;
     renderDetailPanel?: (row: Row<D>) => ReactNode;
     renderRowActionMenuItems?: (
       rowData: Row<D>,
       tableInstance: TableInstance<D>,
       closeMenu: () => void,
     ) => ReactNode[];
+    renderRowActions?: (
+      row: Row<D>,
+      tableInstance: TableInstance<D>,
+    ) => ReactNode;
     title?: string | ReactNode;
   };
 

package/src/body/MRT_TableBody.tsx

@@ -1,10 +1,5 @@
 import React, { FC } from 'react';
-import {
-  alpha,
-  CircularProgress,
-  styled,
-  TableBody as MuiTableBody,
-} from '@mui/material';
+import { styled, TableBody as MuiTableBody } from '@mui/material';
 import { MRT_TableBodyRow } from './MRT_TableBodyRow';
 import { useMaterialReactTable } from '../useMaterialReactTable';
 
@@ -12,21 +7,10 @@ const TableBody = styled(MuiTableBody)({
   overflowY: 'hidden',
 });
 
-const CircularProgressWrapper = styled('div')(({ theme }) => ({
-  backgroundColor: alpha(theme.palette.background.paper, 0.5),
-  display: 'grid',
-  height: '100%',
-  justifyContent: 'center',
-  margin: 'auto',
-  paddingTop: '5rem',
-  position: 'fixed',
-  width: 'calc(100% - 2rem)',
-}));
-
 interface Props {}
 
 export const MRT_TableBody: FC<Props> = () => {
-  const { tableInstance, muiTableBodyProps, isLoading, manualPagination } =
+  const { tableInstance, muiTableBodyProps, manualPagination } =
     useMaterialReactTable();
 
   const rows = manualPagination ? tableInstance.rows : tableInstance.page;
@@ -42,11 +26,6 @@ export const MRT_TableBody: FC<Props> = () => {
 
   return (
     <TableBody {...tableBodyProps}>
-      {isLoading && (
-        <CircularProgressWrapper>
-          <CircularProgress />
-        </CircularProgressWrapper>
-      )}
       {rows.map((row) => {
         tableInstance.prepareRow(row);
         return <MRT_TableBodyRow key={row.getRowProps().key} row={row} />;

package/src/body/MRT_TableBodyCell.tsx

@@ -1,40 +1,60 @@
 import React, { FC, MouseEvent } from 'react';
-import { TableCell } from '@mui/material';
+import { styled, TableCell as MuiTableCell } from '@mui/material';
 import { Cell } from 'react-table';
 import { useMaterialReactTable } from '../useMaterialReactTable';
+import { MRT_EditCellTextfield } from '../inputs/MRT_EditCellTextfield';
+
+const TableCell = styled(MuiTableCell, {
+  shouldForwardProp: (prop) => prop !== 'densePadding',
+})<{ densePadding?: boolean }>(({ densePadding }) => ({
+  padding: densePadding ? '0.5rem' : '1rem',
+  transition: 'all 0.2s ease-in-out',
+}));
 
 interface Props {
   cell: Cell;
 }
 
 export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
-  const { onCellClick, muiTableBodyCellProps, densePadding } =
-    useMaterialReactTable();
+  const {
+    onCellClick,
+    muiTableBodyCellProps,
+    densePadding,
+    currentEditingRow,
+  } = useMaterialReactTable();
 
   const mTableCellBodyProps =
     muiTableBodyCellProps instanceof Function
       ? muiTableBodyCellProps(cell)
       : muiTableBodyCellProps;
 
+  const mcTableCellBodyProps =
+    cell.column.muiTableBodyCellProps instanceof Function
+      ? cell.column.muiTableBodyCellProps(cell)
+      : cell.column.muiTableBodyCellProps;
+
   const tableCellProps = {
     ...mTableCellBodyProps,
+    ...mcTableCellBodyProps,
     ...cell.getCellProps(),
     style: {
-      padding: densePadding ? '0.5rem' : '1rem',
-      transition: 'all 0.2s ease-in-out',
       ...cell.getCellProps().style,
       ...(mTableCellBodyProps?.style ?? {}),
+      ...(mcTableCellBodyProps?.style ?? {}),
     },
   };
 
   return (
     <TableCell
+      densePadding={densePadding}
       onClick={(event: MouseEvent<HTMLTableCellElement>) =>
         onCellClick?.(event, cell)
       }
       {...tableCellProps}
     >
-      {cell.isPlaceholder ? null : cell.isAggregated ? (
+      {currentEditingRow?.id === cell.row.id ? (
+        <MRT_EditCellTextfield cell={cell} />
+      ) : cell.isPlaceholder ? null : cell.isAggregated ? (
         cell.render('Aggregated')
       ) : cell.isGrouped ? (
         <span>
@@ -43,6 +63,7 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
       ) : (
         cell.render('Cell')
       )}
+      {}
     </TableCell>
   );
 };

package/src/body/MRT_TableBodyRow.tsx

@@ -1,5 +1,10 @@
 import React, { FC, MouseEvent } from 'react';
-import { alpha, TableCell, TableRow, useTheme } from '@mui/material';
+import {
+  alpha,
+  styled,
+  TableCell,
+  TableRow as MuiTableRow,
+} from '@mui/material';
 import { Row } from 'react-table';
 import { MRT_TableBodyCell } from './MRT_TableBodyCell';
 import { useMaterialReactTable } from '../useMaterialReactTable';
@@ -8,6 +13,14 @@ import { MRT_ExpandButton } from '../buttons/MRT_ExpandButton';
 import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
 import { MRT_ToggleRowActionMenuButton } from '../buttons/MRT_ToggleRowActionMenuButton';
 
+export const TableRow = styled(MuiTableRow, {
+  shouldForwardProp: (prop) => prop !== 'isSelected',
+})<{ isSelected?: boolean }>(({ isSelected, theme }) => ({
+  backgroundColor: isSelected
+    ? alpha(theme.palette.primary.light, 0.1)
+    : 'transparent',
+}));
+
 interface Props {
   row: Row;
 }
@@ -22,7 +35,6 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
     positionActionsColumn,
     renderDetailPanel,
   } = useMaterialReactTable();
-  const theme = useTheme();
 
   const mTableBodyRowProps =
     muiTableBodyRowProps instanceof Function
@@ -33,9 +45,6 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
     ...mTableBodyRowProps,
     ...row.getRowProps(),
     style: {
-      backgroundColor: row.isSelected
-        ? alpha(theme.palette.primary.light, 0.1)
-        : 'transparent',
       ...row.getRowProps().style,
       ...(mTableBodyRowProps?.style ?? {}),
     },
@@ -44,6 +53,7 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
   return (
     <>
       <TableRow
+        isSelected={row.isSelected}
         hover
         onClick={(event: MouseEvent<HTMLTableRowElement>) =>
           onRowClick?.(event, row)

package/src/body/MRT_TableDetailPanel.tsx

@@ -1,8 +1,22 @@
 import React, { FC, MouseEvent } from 'react';
-import { Collapse, TableCell, TableRow } from '@mui/material';
+import {
+  Collapse,
+  styled,
+  TableCell as MuiTableCell,
+  TableRow,
+} from '@mui/material';
 import { Row } from 'react-table';
 import { useMaterialReactTable } from '../useMaterialReactTable';
 
+const TableCell = styled(MuiTableCell, {
+  shouldForwardProp: (prop) => prop !== 'isExpanded',
+})<{ isExpanded?: boolean }>(({ isExpanded }) => ({
+  borderBottom: !isExpanded ? 'none' : undefined,
+  paddingBottom: isExpanded ? '1rem' : 0,
+  paddingTop: isExpanded ? '1rem' : 0,
+  transition: 'all 0.2s ease-in-out',
+}));
+
 interface Props {
   row: Row;
 }
@@ -38,11 +52,7 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row }) => {
   const tableCellProps = {
     ...mTableDetailPanelProps,
     style: {
-      borderBottom: !row.isExpanded ? 'none' : undefined,
-      paddingBottom: row.isExpanded ? '1rem' : 0,
-      paddingTop: row.isExpanded ? '1rem' : 0,
-      transition: 'all 0.2s ease-in-out',
-      ...(mTableDetailPanelProps?.style || {}),
+      ...(mTableDetailPanelProps?.style ?? {}),
     },
   };
 
@@ -50,6 +60,7 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row }) => {
     <TableRow hover {...tableRowProps}>
       <TableCell
         colSpan={tableInstance.visibleColumns.length + 10}
+        isExpanded={row.isExpanded}
         onClick={(event: MouseEvent<HTMLTableCellElement>) =>
           onDetailPanelClick?.(event, row)
         }

package/src/buttons/MRT_EditActionButtons.tsx

@@ -15,16 +15,20 @@ interface Props {
 }
 
 export const MRT_EditActionButtons: FC<Props> = ({ row }) => {
-  const { localization, setCurrentEditingRowId, onRowEditSubmit } =
-    useMaterialReactTable();
+  const {
+    localization,
+    setCurrentEditingRow,
+    onRowEditSubmit,
+    currentEditingRow,
+  } = useMaterialReactTable();
 
   const handleCancel = () => {
-    setCurrentEditingRowId(null);
+    setCurrentEditingRow(null);
   };
 
   const handleSave = async () => {
-    setCurrentEditingRowId(null);
-    await onRowEditSubmit?.(row);
+    await onRowEditSubmit?.(currentEditingRow ?? row);
+    setCurrentEditingRow(null);
   };
 
   return (

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -1,8 +1,15 @@
 import React, { FC } from 'react';
-import { IconButton, TableCell } from '@mui/material';
-import ArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
+import { IconButton, styled, TableCell } from '@mui/material';
+import MuiArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
 import { useMaterialReactTable } from '../useMaterialReactTable';
 
+const ArrowRightIcon = styled(MuiArrowRightIcon, {
+  shouldForwardProp: (prop) => prop !== 'rotation',
+})<{ rotation?: number }>(({ rotation }) => ({
+  transform: `rotate(${rotation}deg)`,
+  transition: 'transform 0.2s',
+}));
+
 interface Props {}
 
 export const MRT_ExpandAllButton: FC<Props> = () => {
@@ -30,14 +37,9 @@ export const MRT_ExpandAllButton: FC<Props> = () => {
       >
         <ArrowRightIcon
           fontSize="small"
-          style={{
-            transform: tableInstance.isAllRowsExpanded
-              ? 'rotate(-180deg)'
-              : anyRowsExpanded
-              ? 'rotate(-90deg)'
-              : 'rotate(0)',
-            transition: 'transform 0.2s',
-          }}
+          rotation={
+            tableInstance.isAllRowsExpanded ? -180 : anyRowsExpanded ? -90 : 0
+          }
         />
       </IconButton>
     </TableCell>

package/src/buttons/MRT_ExpandButton.tsx

@@ -1,46 +1,49 @@
 import React, { FC } from 'react';
-import { IconButton, TableCell } from '@mui/material';
+import { IconButton, styled, TableCell as MuiTableCell } from '@mui/material';
 import { Row } from 'react-table';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import MuiExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { useMaterialReactTable } from '../useMaterialReactTable';
 
+const TableCell = styled(MuiTableCell, {
+  shouldForwardProp: (prop) => prop !== 'densePadding' && prop !== 'depth',
+})<{ densePadding?: boolean; depth: number }>(({ densePadding, depth }) => ({
+  padding: densePadding ? '0' : '0.6rem',
+  paddingLeft: `${depth + 0.5}rem`,
+  transition: 'all 0.2s ease-in-out',
+}));
+
+const ExpandMoreIcon = styled(MuiExpandMoreIcon, {
+  shouldForwardProp: (prop) => prop !== 'rotation',
+})<{ rotation?: number }>(({ rotation }) => ({
+  transform: `rotate(${rotation}deg)`,
+  transition: 'transform 0.2s',
+}));
+
 interface Props {
   row: Row;
 }
 
 export const MRT_ExpandButton: FC<Props> = ({ row }) => {
-  const { localization, tableInstance, densePadding, renderDetailPanel } =
+  const { localization, densePadding, renderDetailPanel } =
     useMaterialReactTable();
 
   return (
-    <TableCell
-      size="small"
-      style={{
-        padding: densePadding ? '0' : '0.6rem 0',
-        paddingLeft: `${row.depth + 0.5}rem`,
-        transition: 'all 0.2s ease-in-out',
-        width: `${
-          renderDetailPanel ? 2 : tableInstance.expandedDepth - row.depth + 2
-        }rem`,
-      }}
-    >
+    <TableCell size="small" densePadding={densePadding} depth={row.depth}>
       <IconButton
-        disabled={!row.canExpand && !renderDetailPanel}
         aria-label={localization?.expandButtonTitle}
+        disabled={!row.canExpand && !renderDetailPanel}
         title={localization?.expandButtonTitle}
         {...row.getToggleRowExpandedProps()}
       >
         <ExpandMoreIcon
           fontSize={row.canExpand || renderDetailPanel ? 'medium' : 'small'}
-          style={{
-            transform:
-              !row.canExpand && !renderDetailPanel
-                ? 'rotate(-90deg)'
-                : row.isExpanded
-                ? 'rotate(-180deg)'
-                : 'rotate(0)',
-            transition: 'transform 0.2s',
-          }}
+          rotation={
+            !row.canExpand && !renderDetailPanel
+              ? -90
+              : row.isExpanded
+              ? -180
+              : 0
+          }
         />
       </IconButton>
     </TableCell>

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -24,7 +24,7 @@ interface Props {
 export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
   const {
     localization,
-    currentEditingRowId,
+    currentEditingRow,
     renderRowActions,
     tableInstance,
   } = useMaterialReactTable();
@@ -41,7 +41,7 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
     return <>{renderRowActions(row, tableInstance)}</>;
   }
 
-  if (row.id === currentEditingRowId) {
+  if (row.id === currentEditingRow?.id) {
     return <MRT_EditActionButtons row={row} />;
   }