material-react-table 0.3.3 → 0.3.4

package/dist/menus/MRT_ColumnActionMenu.d.ts

@@ -1,8 +1,8 @@
 import { FC } from 'react';
-import { ColumnInstance } from 'react-table';
+import { HeaderGroup } from 'react-table';
 interface Props {
     anchorEl: HTMLElement | null;
-    column: ColumnInstance;
+    column: HeaderGroup;
     setAnchorEl: (anchorEl: HTMLElement | null) => void;
 }
 export declare const MRT_ColumnActionMenu: FC<Props>;

package/dist/menus/MRT_RowActionMenu.d.ts

@@ -4,6 +4,7 @@ interface Props {
     anchorEl: HTMLElement | null;
     row: Row;
     setAnchorEl: (anchorEl: HTMLElement | null) => void;
+    handleEdit: () => void;
 }
 export declare const MRT_RowActionMenu: FC<Props>;
 export {};

package/dist/table/MRT_TableButtonCell.d.ts

@@ -0,0 +1,3 @@
+export declare const MRT_TableButtonCell: import("@emotion/styled").StyledComponent<import("@mui/material").TableCellProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    densePadding?: boolean | undefined;
+}, {}, {}>;

package/dist/useMaterialReactTable.d.ts

@@ -8,7 +8,9 @@ export interface UseMaterialReactTable<D extends {}> extends MaterialReactTableP
     setCurrentEditingRow: (currentRowEditingId: Row<D> | null) => void;
     setDensePadding: (densePadding: boolean) => void;
     setShowFilters: (showFilters: boolean) => void;
+    setShowSearch: (showSearch: boolean) => void;
     showFilters: boolean;
+    showSearch: boolean;
     tableInstance: TableInstance<D>;
 }
 export declare const MaterialReactTableProvider: <D extends {}>(props: React.PropsWithChildren<MaterialReactTableProps<D>>) => JSX.Element;

package/dist/utils/localization.d.ts

@@ -19,8 +19,10 @@ export interface MRT_Localization {
     searchTextFieldClearButtonTitle: string;
     searchTextFieldPlaceholder: string;
     selectAllCheckboxTitle: string;
+    selectCheckboxTitle: string;
     showHideColumnsButtonTitle: string;
     toggleDensePaddingSwitchTitle: string;
     toggleFilterButtonTitle: string;
+    toggleSearchButtonTitle: string;
 }
 export declare const defaultLocalization: MRT_Localization;

package/dist/utils/useMRTCalcs.d.ts

@@ -7,5 +7,5 @@ export interface UseMRTCalcs {
 interface Props<D extends {}> {
     tableInstance: TableInstance<D>;
 }
-export declare const useMRTCalcs: <D extends {}>({ tableInstance, }: Props<D>) => UseMRTCalcs;
+export declare const useMRTCalcs: <D extends {}>({ tableInstance }: Props<D>) => UseMRTCalcs;
 export {};

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.3.3",
+  "version": "0.3.4",
   "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.",
@@ -27,20 +27,21 @@
     "node": ">=12"
   },
   "scripts": {
-    "start": "tsdx watch",
+    "analyze": "size-limit --why",
     "build": "tsdx build && size-limit",
-    "test": "tsdx test --passWithNoTests",
+    "build-storybook": "build-storybook",
+    "format": "prettier -w .",
     "lint": "tsdx lint",
     "prepare": "tsdx build",
     "size": "size-limit",
-    "analyze": "size-limit --why",
+    "start": "tsdx watch",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "test": "tsdx test --passWithNoTests",
     "upgrade": "ncu -u && npm i"
   },
   "husky": {
     "hooks": {
-      "pre-commit": "tsdx lint"
+      "pre-commit": "tsdx lint && format"
     }
   },
   "module": "dist/material-react-table.esm.js",
@@ -84,6 +85,7 @@
     "react-is": "^17.0.2",
     "react-table": "^7.7.0",
     "size-limit": "^7.0.5",
+    "storybook-addon-paddings": "^4.2.1",
     "storybook-addon-performance": "^0.16.1",
     "storybook-dark-mode": "^1.0.8",
     "tsdx": "^0.14.1",

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

@@ -1,5 +1,5 @@
+import { ChangeEvent, ReactNode } from 'react';
 import { TableCellProps, TextFieldProps } from '@mui/material';
-import { ReactNode } from 'react';
 import {
   UseColumnOrderInstanceProps,
   UseColumnOrderState,
@@ -50,6 +50,24 @@ import {
   UseSortByState,
 } from 'react-table';
 
+export type MRT_ColumnInterface<D 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> }) => 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);
+    onCellEditChange?: (event: ChangeEvent<HTMLInputElement>, cell: Cell<D>) => void;
+    onFilterChange?: (event: ChangeEvent<HTMLInputElement>, filterValue: any) => void;
+  };
+
 declare module 'react-table' {
   export interface TableOptions<D extends Record<string, unknown>>
     extends UseExpandedOptions<D>,
@@ -63,16 +81,14 @@ declare module 'react-table' {
       UseSortByOptions<D>,
       Record<string, any> {}
 
-  export interface Hooks<
-    D extends Record<string, unknown> = Record<string, unknown>,
-  > extends UseExpandedHooks<D>,
+  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>,
+  export interface TableInstance<D extends Record<string, unknown> = Record<string, unknown>>
+    extends UseColumnOrderInstanceProps<D>,
       UseExpandedInstanceProps<D>,
       UseFiltersInstanceProps<D>,
       UseGlobalFiltersInstanceProps<D>,
@@ -82,9 +98,8 @@ declare module 'react-table' {
       UseRowStateInstanceProps<D>,
       UseSortByInstanceProps<D> {}
 
-  export interface TableState<
-    D extends Record<string, unknown> = Record<string, unknown>,
-  > extends UseColumnOrderState<D>,
+  export interface TableState<D extends Record<string, unknown> = Record<string, unknown>>
+    extends UseColumnOrderState<D>,
       UseExpandedState<D>,
       UseFiltersState<D>,
       UseGlobalFiltersState<D>,
@@ -95,59 +110,22 @@ declare module 'react-table' {
       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 ColumnInterface<D extends Record<string, unknown> = Record<string, unknown>>
+    extends MRT_ColumnInterface {}
 
-  export interface ColumnInstance<
-    D extends Record<string, unknown> = Record<string, unknown>,
-  > extends UseFiltersColumnProps<D>,
+  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>,
+  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>,
+  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

@@ -10,7 +10,6 @@ import {
   TableRowProps,
   TextFieldProps,
   ToolbarProps,
-  TypographyProps,
 } from '@mui/material';
 import {
   Cell,
@@ -28,12 +27,15 @@ import {
   UseRowSelectOptions,
   UseRowStateOptions,
   UseSortByOptions,
+  UseTableOptions,
 } from 'react-table';
 import { MaterialReactTableProvider } from './useMaterialReactTable';
 import { MRT_TableContainer } from './table/MRT_TableContainer';
 import { defaultLocalization, MRT_Localization } from './utils/localization';
+import { MRT_ColumnInterface } from './@types/react-table-config';
 
 export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
+  UseTableOptions<D> &
   UseExpandedOptions<D> &
   UseFiltersOptions<D> &
   UseGlobalFiltersOptions<D> &
@@ -43,8 +45,10 @@ export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
   UseRowSelectOptions<D> &
   UseRowStateOptions<D> &
   UseSortByOptions<D> & {
+    columns: (Column<D> & MRT_ColumnInterface)[];
     defaultDensePadding?: boolean;
     defaultShowFilters?: boolean;
+    defaultShowSearchTextField?: boolean;
     disableColumnActions?: boolean;
     disableColumnHiding?: boolean;
     disableDensePaddingToggle?: boolean;
@@ -65,66 +69,33 @@ 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);
+    muiTableBodyCellEditTextFieldProps?: TextFieldProps | ((cell?: Cell<D>) => TextFieldProps);
+    muiTableBodyCellProps?: TableCellProps | ((cell?: Cell<D>) => TableCellProps);
     muiTableBodyProps?: TableBodyProps;
     muiTableBodyRowProps?: TableRowProps | ((row: Row<D>) => TableRowProps);
     muiTableContainerProps?: TableContainerProps;
-    muiTableDetailPanelProps?:
-      | TableCellProps
-      | ((row: Row<D>) => TableCellProps);
-    muiTableFooterCellProps?:
-      | TableCellProps
-      | ((column: Column<D>) => TableCellProps);
+    muiTableDetailPanelProps?: TableCellProps | ((row: Row<D>) => TableCellProps);
+    muiTableFooterCellProps?: TableCellProps | ((column: Column<D>) => TableCellProps);
     muiTableFooterProps?: TableFooterProps;
-    muiTableFooterRowProps?:
-      | TableRowProps
-      | ((footerGroup: HeaderGroup<D>) => TableRowProps);
-    muiTableHeadCellFilterTextFieldProps?:
-      | TextFieldProps
-      | ((column: Column<D>) => TextFieldProps);
-    muiTableHeadCellProps?:
-      | TableCellProps
-      | ((column: Column<D>) => TableCellProps);
+    muiTableFooterRowProps?: TableRowProps | ((footerGroup: HeaderGroup<D>) => TableRowProps);
+    muiTableHeadCellFilterTextFieldProps?: TextFieldProps | ((column: Column<D>) => TextFieldProps);
+    muiTableHeadCellProps?: TableCellProps | ((column: Column<D>) => TableCellProps);
     muiTableHeadProps?: TableHeadProps;
-    muiTableHeadRowProps?:
-      | TableRowProps
-      | ((row: HeaderGroup<D>) => TableRowProps);
+    muiTableHeadRowProps?: TableRowProps | ((row: HeaderGroup<D>) => TableRowProps);
     muiTablePaginationProps?:
       | Partial<TablePaginationProps>
       | ((tableInstance: TableInstance<D>) => Partial<TablePaginationProps>);
     muiTableProps?: TableProps;
-    muiTableTitleProps?: TypographyProps;
-    muiTableToolbarBottomProps?:
-      | ToolbarProps
-      | ((tableInstance: TableInstance<D>) => ToolbarProps);
-    muiTableToolbarTopProps?:
-      | ToolbarProps
-      | ((tableInstance: TableInstance<D>) => ToolbarProps);
-    onCellClick?: (
-      event: MouseEvent<HTMLTableCellElement>,
-      cell: Cell<D>,
-    ) => void;
-    onDetailPanelClick?: (
-      event: MouseEvent<HTMLTableCellElement>,
-      row: Row<D>,
-    ) => void;
+    muiTableToolbarBottomProps?: ToolbarProps | ((tableInstance: TableInstance<D>) => ToolbarProps);
+    muiTableToolbarTopProps?: ToolbarProps | ((tableInstance: TableInstance<D>) => ToolbarProps);
+    onCellClick?: (event: MouseEvent<HTMLTableCellElement>, cell: Cell<D>) => void;
+    onColumnHide?: (column: Column<D>, visibleColumns: Column<D>[]) => void;
+    onDetailPanelClick?: (event: MouseEvent<HTMLTableCellElement>, row: Row<D>) => void;
     onGlobalFilterChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     onRowClick?: (event: MouseEvent<HTMLTableRowElement>, row: Row<D>) => void;
     onRowEditSubmit?: (row: Row<D>) => Promise<void> | void;
-    onRowExpandChange?: (
-      event: MouseEvent<HTMLButtonElement>,
-      row: Row<D>,
-    ) => void;
-    onRowSelectChange?: (
-      event: ChangeEvent,
-      row: Row<D>,
-      selectedRows: Row<D>[],
-    ) => void;
+    onRowExpandChange?: (event: MouseEvent<HTMLButtonElement>, row: Row<D>) => void;
+    onRowSelectChange?: (event: ChangeEvent, row: Row<D>, selectedRows: Row<D>[]) => void;
     positionActionsColumn?: 'first' | 'last';
     positionPagination?: 'bottom' | 'top' | 'both';
     positionToolbarActions?: 'bottom' | 'top';
@@ -134,11 +105,8 @@ export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
       tableInstance: TableInstance<D>,
       closeMenu: () => void,
     ) => ReactNode[];
-    renderRowActions?: (
-      row: Row<D>,
-      tableInstance: TableInstance<D>,
-    ) => ReactNode;
-    title?: string | ReactNode;
+    renderRowActions?: (row: Row<D>, tableInstance: TableInstance<D>) => ReactNode;
+    renderToolbarActions?: (tableInstance: TableInstance<D>) => ReactNode;
   };
 
 export default <D extends {}>({

package/src/body/MRT_TableBody.tsx

@@ -10,8 +10,7 @@ const TableBody = styled(MuiTableBody)({
 interface Props {}
 
 export const MRT_TableBody: FC<Props> = () => {
-  const { tableInstance, muiTableBodyProps, manualPagination } =
-    useMaterialReactTable();
+  const { tableInstance, muiTableBodyProps, manualPagination } = useMaterialReactTable();
 
   const rows = manualPagination ? tableInstance.rows : tableInstance.page;
 

package/src/body/MRT_TableBodyCell.tsx

@@ -2,13 +2,14 @@ import React, { FC, MouseEvent } from 'react';
 import { styled, TableCell as MuiTableCell } from '@mui/material';
 import { Cell } from 'react-table';
 import { useMaterialReactTable } from '../useMaterialReactTable';
-import { MRT_EditCellTextfield } from '../inputs/MRT_EditCellTextfield';
+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',
+  whiteSpace: densePadding ? 'nowrap' : 'normal',
 }));
 
 interface Props {
@@ -16,17 +17,11 @@ interface Props {
 }
 
 export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
-  const {
-    onCellClick,
-    muiTableBodyCellProps,
-    densePadding,
-    currentEditingRow,
-  } = useMaterialReactTable();
+  const { onCellClick, muiTableBodyCellProps, densePadding, currentEditingRow } =
+    useMaterialReactTable();
 
   const mTableCellBodyProps =
-    muiTableBodyCellProps instanceof Function
-      ? muiTableBodyCellProps(cell)
-      : muiTableBodyCellProps;
+    muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps(cell) : muiTableBodyCellProps;
 
   const mcTableCellBodyProps =
     cell.column.muiTableBodyCellProps instanceof Function
@@ -47,13 +42,11 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
   return (
     <TableCell
       densePadding={densePadding}
-      onClick={(event: MouseEvent<HTMLTableCellElement>) =>
-        onCellClick?.(event, cell)
-      }
+      onClick={(event: MouseEvent<HTMLTableCellElement>) => onCellClick?.(event, cell)}
       {...tableCellProps}
     >
       {currentEditingRow?.id === cell.row.id ? (
-        <MRT_EditCellTextfield cell={cell} />
+        <MRT_EditCellTextField cell={cell} />
       ) : cell.isPlaceholder ? null : cell.isAggregated ? (
         cell.render('Aggregated')
       ) : cell.isGrouped ? (

package/src/body/MRT_TableBodyRow.tsx

@@ -1,10 +1,5 @@
 import React, { FC, MouseEvent } from 'react';
-import {
-  alpha,
-  styled,
-  TableCell,
-  TableRow as MuiTableRow,
-} from '@mui/material';
+import { alpha, styled, TableRow as MuiTableRow } from '@mui/material';
 import { Row } from 'react-table';
 import { MRT_TableBodyCell } from './MRT_TableBodyCell';
 import { useMaterialReactTable } from '../useMaterialReactTable';
@@ -16,9 +11,7 @@ import { MRT_ToggleRowActionMenuButton } from '../buttons/MRT_ToggleRowActionMen
 export const TableRow = styled(MuiTableRow, {
   shouldForwardProp: (prop) => prop !== 'isSelected',
 })<{ isSelected?: boolean }>(({ isSelected, theme }) => ({
-  backgroundColor: isSelected
-    ? alpha(theme.palette.primary.light, 0.1)
-    : 'transparent',
+  backgroundColor: isSelected ? alpha(theme.palette.primary.light, 0.1) : 'transparent',
 }));
 
 interface Props {
@@ -37,9 +30,7 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
   } = useMaterialReactTable();
 
   const mTableBodyRowProps =
-    muiTableBodyRowProps instanceof Function
-      ? muiTableBodyRowProps(row)
-      : muiTableBodyRowProps;
+    muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps(row) : muiTableBodyRowProps;
 
   const tableRowProps = {
     ...mTableBodyRowProps,
@@ -55,27 +46,19 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
       <TableRow
         isSelected={row.isSelected}
         hover
-        onClick={(event: MouseEvent<HTMLTableRowElement>) =>
-          onRowClick?.(event, row)
-        }
+        onClick={(event: MouseEvent<HTMLTableRowElement>) => onRowClick?.(event, row)}
         {...tableRowProps}
       >
         {enableRowActions && positionActionsColumn === 'first' && (
-          <TableCell>
-            <MRT_ToggleRowActionMenuButton row={row} />
-          </TableCell>
-        )}
-        {(anyRowsCanExpand || renderDetailPanel) && (
-          <MRT_ExpandButton row={row} />
+          <MRT_ToggleRowActionMenuButton row={row} />
         )}
+        {(anyRowsCanExpand || renderDetailPanel) && <MRT_ExpandButton row={row} />}
         {enableSelection && <MRT_SelectCheckbox row={row} />}
         {row.cells.map((cell) => (
           <MRT_TableBodyCell key={cell.getCellProps().key} cell={cell} />
         ))}
         {enableRowActions && positionActionsColumn === 'last' && (
-          <TableCell>
-            <MRT_ToggleRowActionMenuButton row={row} />
-          </TableCell>
+          <MRT_ToggleRowActionMenuButton row={row} />
         )}
       </TableRow>
       {renderDetailPanel && <MRT_TableDetailPanel row={row} />}

package/src/body/MRT_TableDetailPanel.tsx

@@ -1,10 +1,5 @@
 import React, { FC, MouseEvent } from 'react';
-import {
-  Collapse,
-  styled,
-  TableCell as MuiTableCell,
-  TableRow,
-} from '@mui/material';
+import { Collapse, styled, TableCell as MuiTableCell, TableRow } from '@mui/material';
 import { Row } from 'react-table';
 import { useMaterialReactTable } from '../useMaterialReactTable';
 
@@ -31,9 +26,7 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row }) => {
   } = useMaterialReactTable();
 
   const mTableBodyRowProps =
-    muiTableBodyRowProps instanceof Function
-      ? muiTableBodyRowProps(row)
-      : muiTableBodyRowProps;
+    muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps(row) : muiTableBodyRowProps;
 
   const tableRowProps = {
     ...mTableBodyRowProps,
@@ -61,9 +54,7 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row }) => {
       <TableCell
         colSpan={tableInstance.visibleColumns.length + 10}
         isExpanded={row.isExpanded}
-        onClick={(event: MouseEvent<HTMLTableCellElement>) =>
-          onDetailPanelClick?.(event, row)
-        }
+        onClick={(event: MouseEvent<HTMLTableCellElement>) => onDetailPanelClick?.(event, row)}
         {...tableCellProps}
       >
         <Collapse in={row.isExpanded}>{renderDetailPanel?.(row)}</Collapse>

package/src/buttons/MRT_EditActionButtons.tsx

@@ -15,14 +15,11 @@ interface Props {
 }
 
 export const MRT_EditActionButtons: FC<Props> = ({ row }) => {
-  const {
-    localization,
-    setCurrentEditingRow,
-    onRowEditSubmit,
-    currentEditingRow,
-  } = useMaterialReactTable();
+  const { localization, setCurrentEditingRow, onRowEditSubmit, currentEditingRow } =
+    useMaterialReactTable();
 
   const handleCancel = () => {
+    row.values = row.original;
     setCurrentEditingRow(null);
   };
 
@@ -34,10 +31,7 @@ export const MRT_EditActionButtons: FC<Props> = ({ row }) => {
   return (
     <EditActionButtonWrappers>
       <Tooltip arrow title={localization?.rowActionButtonCancel ?? ''}>
-        <IconButton
-          aria-label={localization?.rowActionButtonCancel}
-          onClick={handleCancel}
-        >
+        <IconButton aria-label={localization?.rowActionButtonCancel} onClick={handleCancel}>
           <CancelIcon />
         </IconButton>
       </Tooltip>

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -1,7 +1,8 @@
 import React, { FC } from 'react';
-import { IconButton, styled, TableCell } from '@mui/material';
+import { IconButton, styled } from '@mui/material';
 import MuiArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
 import { useMaterialReactTable } from '../useMaterialReactTable';
+import { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
 
 const ArrowRightIcon = styled(MuiArrowRightIcon, {
   shouldForwardProp: (prop) => prop !== 'rotation',
@@ -13,23 +14,13 @@ const ArrowRightIcon = styled(MuiArrowRightIcon, {
 interface Props {}
 
 export const MRT_ExpandAllButton: FC<Props> = () => {
-  const {
-    tableInstance,
-    localization,
-    anyRowsExpanded,
-    densePadding,
-    renderDetailPanel,
-  } = useMaterialReactTable();
+  const { tableInstance, localization, anyRowsExpanded, densePadding } = useMaterialReactTable();
 
   return (
-    <TableCell
+    <MRT_TableButtonCell
       size="small"
+      densePadding={densePadding}
       {...tableInstance.getToggleAllRowsExpandedProps()}
-      style={{
-        padding: densePadding ? '0' : '0.5rem 0.5rem',
-        transition: 'all 0.2s ease-in-out',
-        width: `${renderDetailPanel ? 2 : tableInstance.expandedDepth + 2}rem`,
-      }}
     >
       <IconButton
         aria-label={localization?.expandAllButtonTitle}
@@ -37,11 +28,9 @@ export const MRT_ExpandAllButton: FC<Props> = () => {
       >
         <ArrowRightIcon
           fontSize="small"
-          rotation={
-            tableInstance.isAllRowsExpanded ? -180 : anyRowsExpanded ? -90 : 0
-          }
+          rotation={tableInstance.isAllRowsExpanded ? -180 : anyRowsExpanded ? -90 : 0}
         />
       </IconButton>
-    </TableCell>
+    </MRT_TableButtonCell>
   );
 };

package/src/buttons/MRT_ExpandButton.tsx

@@ -1,15 +1,15 @@
 import React, { FC } from 'react';
-import { IconButton, styled, TableCell as MuiTableCell } from '@mui/material';
+import { IconButton, styled } from '@mui/material';
 import { Row } from 'react-table';
 import MuiExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { useMaterialReactTable } from '../useMaterialReactTable';
+import { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
 
-const TableCell = styled(MuiTableCell, {
-  shouldForwardProp: (prop) => prop !== 'densePadding' && prop !== 'depth',
-})<{ densePadding?: boolean; depth: number }>(({ densePadding, depth }) => ({
-  padding: densePadding ? '0' : '0.6rem',
+const TableCell = styled(MRT_TableButtonCell, {
+  shouldForwardProp: (prop) => prop !== 'depth',
+})<{ depth: number }>(({ depth }) => ({
   paddingLeft: `${depth + 0.5}rem`,
-  transition: 'all 0.2s ease-in-out',
+  textAlign: 'left',
 }));
 
 const ExpandMoreIcon = styled(MuiExpandMoreIcon, {
@@ -24,8 +24,7 @@ interface Props {
 }
 
 export const MRT_ExpandButton: FC<Props> = ({ row }) => {
-  const { localization, densePadding, renderDetailPanel } =
-    useMaterialReactTable();
+  const { localization, densePadding, renderDetailPanel } = useMaterialReactTable();
 
   return (
     <TableCell size="small" densePadding={densePadding} depth={row.depth}>
@@ -37,13 +36,7 @@ export const MRT_ExpandButton: FC<Props> = ({ row }) => {
       >
         <ExpandMoreIcon
           fontSize={row.canExpand || renderDetailPanel ? 'medium' : 'small'}
-          rotation={
-            !row.canExpand && !renderDetailPanel
-              ? -90
-              : row.isExpanded
-              ? -180
-              : 0
-          }
+          rotation={!row.canExpand && !renderDetailPanel ? -90 : row.isExpanded ? -180 : 0}
         />
       </IconButton>
     </TableCell>