material-react-table 0.4.7 → 0.5.0

package/dist/menus/MRT_ColumnActionMenu.d.ts

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

package/dist/menus/MRT_RowActionMenu.d.ts

@@ -1,8 +1,8 @@
 import { FC } from 'react';
-import { Row } from 'react-table';
+import { MRT_Row } from '..';
 interface Props {
     anchorEl: HTMLElement | null;
-    row: Row;
+    row: MRT_Row;
     setAnchorEl: (anchorEl: HTMLElement | null) => void;
     handleEdit: () => void;
 }

package/dist/menus/MRT_ShowHideColumnsMenu.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
-import { ColumnInstance } from 'react-table';
+import { MRT_ColumnInstance } from '..';
 interface Props {
-    column: ColumnInstance;
+    column: MRT_ColumnInstance;
 }
 export declare const MRT_ShowHideColumnsMenu: FC<Props>;
 export {};

package/dist/useMRT.d.ts

@@ -1,24 +1,24 @@
 import React, { PropsWithChildren } from 'react';
-import { Row, TableInstance } from 'react-table';
+import { MRT_Row, MRT_TableInstance } from '.';
 import { MRT_Icons } from './icons';
 import { MRT_Localization } from './localization';
 import { MaterialReactTableProps } from './MaterialReactTable';
 export declare type UseMRT<D extends {} = {}> = MaterialReactTableProps<D> & {
     anyRowsCanExpand: boolean;
     anyRowsExpanded: boolean;
-    currentEditingRow: Row<D> | null;
+    currentEditingRow: MRT_Row<D> | null;
     densePadding: boolean;
     fullScreen: boolean;
     icons: MRT_Icons;
     localization: MRT_Localization;
-    setCurrentEditingRow: (currentRowEditingId: Row<D> | null) => void;
+    setCurrentEditingRow: (currentRowEditingId: MRT_Row<D> | null) => void;
     setDensePadding: (densePadding: boolean) => void;
     setFullScreen: (fullScreen: boolean) => void;
     setShowFilters: (showFilters: boolean) => void;
     setShowSearch: (showSearch: boolean) => void;
     showFilters: boolean;
     showSearch: boolean;
-    tableInstance: TableInstance<D>;
+    tableInstance: MRT_TableInstance<D>;
 };
 export declare const MaterialReactTableProvider: <D extends {}>(props: React.PropsWithChildren<MaterialReactTableProps<D>>) => JSX.Element;
 export declare const useMRT: <D extends {}>() => UseMRT<D>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.4.7",
+  "version": "0.5.0",
   "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.",
@@ -61,8 +61,8 @@
     "@emotion/styled": "^11.8.1",
     "@etchteam/storybook-addon-status": "^4.2.0",
     "@faker-js/faker": "^6.0.0-alpha.7",
-    "@mui/icons-material": "^5.4.2",
-    "@mui/material": "^5.4.3",
+    "@mui/icons-material": "^5.4.4",
+    "@mui/material": "^5.4.4",
     "@size-limit/preset-small-lib": "^7.0.8",
     "@storybook/addon-a11y": "^6.4.19",
     "@storybook/addon-actions": "^6.4.19",

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

@@ -1,102 +1,23 @@
-import { ChangeEvent, ReactNode } from 'react';
-import { TableCellProps, TextFieldProps } from '@mui/material';
 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';
-
-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;
-    };
+import {
+  MRT_Cell,
+  MRT_ColumnInstance,
+  MRT_ColumnInterface,
+  MRT_Row,
+  MRT_TableInstance,
+  MRT_TableOptions,
+  MRT_TableState,
+} from '..';
 
 declare module 'react-table' {
+  // take this file as-is, or comment out the sections that don't apply to your plugin configuration
+
   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> {}
+    extends MRT_TableOptions<D> {}
 
   export interface Hooks<
     D extends Record<string, unknown> = Record<string, unknown>,
@@ -107,50 +28,26 @@ declare module 'react-table' {
 
   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> {}
+  > extends MRT_TableInstance<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> {}
+  > extends MRT_TableState<D> {}
 
   export interface ColumnInterface<
     D extends Record<string, unknown> = Record<string, unknown>,
-  > extends MRT_ColumnInterface {}
+  > extends MRT_ColumnInterface<D> {}
 
   export interface ColumnInstance<
     D extends Record<string, unknown> = Record<string, unknown>,
-  > extends UseFiltersColumnProps<D>,
-      UseGroupByColumnProps<D>,
-      UseResizeColumnsColumnProps<D>,
-      UseSortByColumnProps<D> {}
+  > extends MRT_ColumnInstance<D> {}
 
   export interface Cell<
     D extends Record<string, unknown> = Record<string, unknown>,
     V = any,
-  > extends UseGroupByCellProps<D>,
-      UseRowStateCellProps<D> {}
+  > extends MRT_Cell<D> {}
 
   export interface Row<
     D extends Record<string, unknown> = Record<string, unknown>,
-  > extends UseExpandedRowProps<D>,
-      UseGroupByRowProps<D>,
-      UseRowSelectRowProps<D>,
-      UseRowStateRowProps<D> {}
+  > extends MRT_Row<D> {}
 }

package/src/MaterialReactTable.tsx

@@ -16,29 +16,66 @@ import {
 import {
   Cell,
   Column,
+  ColumnInstance,
+  // ColumnInterface,
   HeaderGroup,
   Row,
   TableInstance,
   TableOptions,
+  TableState,
+  UseColumnOrderInstanceProps,
+  UseColumnOrderState,
+  UseExpandedInstanceProps,
   UseExpandedOptions,
+  UseExpandedRowProps,
+  UseExpandedState,
+  UseFiltersColumnOptions,
+  UseFiltersColumnProps,
+  UseFiltersInstanceProps,
   UseFiltersOptions,
+  UseFiltersState,
+  UseGlobalFiltersColumnOptions,
+  UseGlobalFiltersInstanceProps,
   UseGlobalFiltersOptions,
+  UseGlobalFiltersState,
+  UseGroupByCellProps,
+  UseGroupByColumnOptions,
+  UseGroupByColumnProps,
+  UseGroupByInstanceProps,
   UseGroupByOptions,
+  UseGroupByRowProps,
+  UseGroupByState,
+  UsePaginationInstanceProps,
   UsePaginationOptions,
+  UsePaginationState,
+  UseResizeColumnsColumnOptions,
+  UseResizeColumnsColumnProps,
   UseResizeColumnsOptions,
+  UseResizeColumnsState,
+  UseRowSelectInstanceProps,
   UseRowSelectOptions,
+  UseRowSelectRowProps,
+  UseRowSelectState,
+  UseRowStateCellProps,
+  UseRowStateInstanceProps,
   UseRowStateOptions,
+  UseRowStateRowProps,
+  UseRowStateState,
+  UseSortByColumnOptions,
+  UseSortByColumnProps,
+  UseSortByInstanceProps,
   UseSortByOptions,
+  UseSortByState,
+  UseTableHeaderGroupProps,
+  UseTableInstanceProps,
   UseTableOptions,
 } from 'react-table';
 import { MaterialReactTableProvider } from './useMRT';
 import { MRT_TableContainer } from './table/MRT_TableContainer';
-import { MRT_ColumnInterface } from './@types/react-table-config';
 import { MRT_Localization, MRT_DefaultLocalization_EN } from './localization';
 import { MRT_Default_Icons, MRT_Icons } from './icons';
 
-export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
-  UseTableOptions<D> &
+export type MRT_TableOptions<D extends {} = {}> = TableOptions<D> &
   UseExpandedOptions<D> &
   UseFiltersOptions<D> &
   UseGlobalFiltersOptions<D> &
@@ -49,10 +86,129 @@ export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
   UseRowStateOptions<D> &
   UseSortByOptions<D> & {
     columns: (Column<D> & MRT_ColumnInterface)[];
-    defaultDensePadding?: boolean;
-    defaultFullScreen?: boolean;
-    defaultShowFilters?: boolean;
-    defaultShowSearchTextField?: boolean;
+    data: D[];
+    initialState?: Partial<MRT_TableState>;
+  };
+
+export type MRT_TableInstance<D extends {} = {}> = TableInstance<D> &
+  UseTableInstanceProps<D> &
+  UseColumnOrderInstanceProps<D> &
+  UseExpandedInstanceProps<D> &
+  UseFiltersInstanceProps<D> &
+  UseGlobalFiltersInstanceProps<D> &
+  UseGroupByInstanceProps<D> &
+  UsePaginationInstanceProps<D> &
+  UseRowSelectInstanceProps<D> &
+  UseRowStateInstanceProps<D> &
+  UseSortByInstanceProps<D> & {
+    columns: (Column<D> & MRT_ColumnInstance<D>)[];
+    headerGroups: MRT_HeaderGroup<D>[];
+    footerGroups: MRT_HeaderGroup<D>[];
+    state: MRT_TableState<D>;
+    rows: MRT_Row<D>[];
+    page: MRT_Row<D>[];
+    resetResizing: () => void;
+    getToggleAllRowsExpandedProps: () => void;
+  };
+
+export type MRT_ColumnInterface<D extends {} = {}> =
+  // ColumnInterface<D> &
+  UseFiltersColumnOptions<D> &
+    UseGlobalFiltersColumnOptions<D> &
+    UseGroupByColumnOptions<D> &
+    UseResizeColumnsColumnOptions<D> &
+    UseSortByColumnOptions<D> & {
+      Edit?: ({
+        cell,
+        onChange,
+      }: {
+        cell: MRT_Cell<D>;
+        onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+      }) => ReactNode;
+      Filter?: ({ column }: { column: MRT_HeaderGroup<D> }) => ReactNode;
+      Footer?: string;
+      Header?: string;
+      disableFilters?: boolean;
+      editable?: boolean;
+      muiTableBodyCellEditTextFieldProps?:
+        | TextFieldProps
+        | ((cell: MRT_Cell<D>) => TextFieldProps);
+      muiTableBodyCellProps?:
+        | TableCellProps
+        | ((cell: MRT_Cell<D>) => TableCellProps);
+      muiTableFooterCellProps?:
+        | TableCellProps
+        | ((column: Column<D>) => TableCellProps);
+      muiTableHeadCellFilterTextFieldProps?:
+        | TextFieldProps
+        | ((column: Column<D>) => TextFieldProps);
+      muiTableHeadCellProps?:
+        | TableCellProps
+        | ((column: Column<D>) => TableCellProps);
+      onCellEditChange?: (
+        event: ChangeEvent<HTMLInputElement>,
+        cell: MRT_Cell<D>,
+      ) => void;
+      onFilterChange?: (
+        event: ChangeEvent<HTMLInputElement>,
+        filterValue: any,
+      ) => void;
+    };
+
+export type MRT_ColumnInstance<D extends {} = {}> = ColumnInstance<D> &
+  UseFiltersColumnProps<D> &
+  UseGroupByColumnProps<D> &
+  UseResizeColumnsColumnProps<D> &
+  UseSortByColumnProps<D> & {
+    columns?: MRT_ColumnInstance<D>[];
+  };
+
+export type MRT_HeaderGroup<D extends {} = {}> = HeaderGroup<D> &
+  MRT_ColumnInstance<D> &
+  UseTableHeaderGroupProps<D> & {
+    headers: MRT_HeaderGroup<D>[];
+  };
+
+export type MRT_Row<D extends {} = {}> = Row<D> &
+  UseExpandedRowProps<D> &
+  UseGroupByRowProps<D> &
+  UseRowSelectRowProps<D> &
+  UseRowStateRowProps<D> & {
+    cells: MRT_Cell<D>[];
+  };
+
+export type MRT_Cell<D extends {} = {}, _V = any> = Cell<D> &
+  UseGroupByCellProps<D> &
+  UseRowStateCellProps<D> & {};
+
+export type MRT_TableState<D extends {} = {}> = TableState<D> &
+  UseColumnOrderState<D> &
+  UseExpandedState<D> &
+  UseFiltersState<D> &
+  UseGlobalFiltersState<D> &
+  UseGroupByState<D> &
+  UsePaginationState<D> &
+  UseResizeColumnsState<D> &
+  UseRowSelectState<D> &
+  UseRowStateState<D> &
+  UseSortByState<D> & {
+    densePadding?: boolean;
+    fullScreen?: boolean;
+    showFilters?: boolean;
+    showSearchTextField?: boolean;
+  };
+
+export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
+  UseExpandedOptions<D> &
+  UseFiltersOptions<D> &
+  UseGlobalFiltersOptions<D> &
+  UseGroupByOptions<D> &
+  UsePaginationOptions<D> &
+  UseResizeColumnsOptions<D> &
+  UseRowSelectOptions<D> &
+  UseRowStateOptions<D> &
+  UseSortByOptions<D> &
+  MRT_TableOptions<D> & {
     disableColumnActions?: boolean;
     disableColumnHiding?: boolean;
     disableDensePaddingToggle?: boolean;
@@ -78,15 +234,15 @@ export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
     muiSearchTextFieldProps?: TextFieldProps;
     muiTableBodyCellEditTextFieldProps?:
       | TextFieldProps
-      | ((cell?: Cell<D>) => TextFieldProps);
+      | ((cell?: MRT_Cell<D>) => TextFieldProps);
     muiTableBodyCellProps?:
       | TableCellProps
-      | ((cell?: Cell<D>) => TableCellProps);
+      | ((cell?: MRT_Cell<D>) => TableCellProps);
     muiTableBodyProps?: TableBodyProps;
     muiTableBodyRowProps?: TableRowProps | ((row: Row<D>) => TableRowProps);
     muiTableContainerProps?:
       | TableContainerProps
-      | ((table: TableInstance<D>) => TableContainerProps);
+      | ((table: MRT_TableInstance<D>) => TableContainerProps);
     muiTableDetailPanelProps?:
       | TableCellProps
       | ((row: Row<D>) => TableCellProps);
@@ -96,7 +252,7 @@ export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
     muiTableFooterProps?: TableFooterProps;
     muiTableFooterRowProps?:
       | TableRowProps
-      | ((footerGroup: HeaderGroup<D>) => TableRowProps);
+      | ((footerGroup: MRT_HeaderGroup<D>) => TableRowProps);
     muiTableHeadCellFilterTextFieldProps?:
       | TextFieldProps
       | ((column: Column<D>) => TextFieldProps);
@@ -106,23 +262,25 @@ export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
     muiTableHeadProps?: TableHeadProps;
     muiTableHeadRowProps?:
       | TableRowProps
-      | ((row: HeaderGroup<D>) => TableRowProps);
+      | ((row: MRT_HeaderGroup<D>) => TableRowProps);
     muiTablePaginationProps?:
       | Partial<TablePaginationProps>
-      | ((tableInstance: TableInstance<D>) => Partial<TablePaginationProps>);
+      | ((
+          tableInstance: MRT_TableInstance<D>,
+        ) => Partial<TablePaginationProps>);
     muiTableProps?: TableProps;
     muiTableToolbarAlertBannerProps?:
       | AlertProps
-      | ((tableInstance: TableInstance<D>) => AlertProps);
+      | ((tableInstance: MRT_TableInstance<D>) => AlertProps);
     muiTableToolbarBottomProps?:
       | ToolbarProps
-      | ((tableInstance: TableInstance<D>) => ToolbarProps);
+      | ((tableInstance: MRT_TableInstance<D>) => ToolbarProps);
     muiTableToolbarTopProps?:
       | ToolbarProps
-      | ((tableInstance: TableInstance<D>) => ToolbarProps);
+      | ((tableInstance: MRT_TableInstance<D>) => ToolbarProps);
     onCellClick?: (
       event: MouseEvent<HTMLTableCellElement>,
-      cell: Cell<D>,
+      cell: MRT_Cell<D>,
     ) => void;
     onColumnHide?: (column: Column<D>, visibleColumns: Column<D>[]) => void;
     onDetailPanelClick?: (
@@ -149,16 +307,18 @@ export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
     renderDetailPanel?: (row: Row<D>) => ReactNode;
     renderRowActionMenuItems?: (
       rowData: Row<D>,
-      tableInstance: TableInstance<D>,
+      tableInstance: MRT_TableInstance<D>,
       closeMenu: () => void,
     ) => ReactNode[];
     renderRowActions?: (
       row: Row<D>,
-      tableInstance: TableInstance<D>,
+      tableInstance: MRT_TableInstance<D>,
+    ) => ReactNode;
+    renderToolbarCustomActions?: (
+      tableInstance: MRT_TableInstance<D>,
     ) => ReactNode;
-    renderToolbarCustomActions?: (tableInstance: TableInstance<D>) => ReactNode;
     renderToolbarInternalActions?: (
-      tableInstance: TableInstance<D>,
+      tableInstance: MRT_TableInstance<D>,
       {
         MRT_ToggleSearchButton,
         MRT_ToggleFiltersButton,

package/src/body/MRT_TableBody.tsx

@@ -1,11 +1,8 @@
 import React, { FC } from 'react';
-import { styled, TableBody as MuiTableBody } from '@mui/material';
+import { TableBody } from '@mui/material';
 import { MRT_TableBodyRow } from './MRT_TableBodyRow';
 import { useMRT } from '../useMRT';
-
-const TableBody = styled(MuiTableBody)({
-  overflowY: 'hidden',
-});
+import { MRT_Row } from '..';
 
 interface Props {}
 
@@ -19,13 +16,16 @@ export const MRT_TableBody: FC<Props> = () => {
     ...tableInstance.getTableBodyProps(),
     style: {
       ...tableInstance.getTableBodyProps().style,
-      ...(muiTableBodyProps?.style ?? {}),
+      ...muiTableBodyProps?.style,
     },
   };
 
   return (
-    <TableBody {...tableBodyProps}>
-      {rows.map((row) => {
+    <TableBody
+      {...tableBodyProps}
+      sx={{ overflowY: 'hidden', ...tableBodyProps?.sx }}
+    >
+      {rows.map((row: MRT_Row) => {
         tableInstance.prepareRow(row);
         return <MRT_TableBodyRow key={row.getRowProps().key} row={row} />;
       })}

package/src/body/MRT_TableBodyCell.tsx

@@ -1,19 +1,23 @@
 import React, { FC, MouseEvent } from 'react';
-import { styled, TableCell as MuiTableCell } from '@mui/material';
-import { Cell } from 'react-table';
+import { TableCell, TableCellProps } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
+import { MRT_Cell } from '..';
 
-export const MRT_StyledTableBodyCell = styled(MuiTableCell, {
-  shouldForwardProp: (prop) => prop !== 'densePadding',
-})<{ densePadding?: boolean }>(({ densePadding }) => ({
-  padding: densePadding ? '0.5rem' : '1rem',
+export const commonTableBodyCellStyles = (densePadding: boolean) => ({
+  p: densePadding ? '0.5rem' : '1rem',
   transition: 'all 0.2s ease-in-out',
   whiteSpace: densePadding ? 'nowrap' : 'normal',
-}));
+});
+
+export const commonTableBodyButtonCellStyles = (densePadding: boolean) => ({
+  p: densePadding ? '1px' : '0.6rem',
+  textAlign: 'center',
+  transition: 'all 0.2s ease-in-out',
+});
 
 interface Props {
-  cell: Cell;
+  cell: MRT_Cell;
 }
 
 export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
@@ -40,18 +44,23 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
     ...cell.getCellProps(),
     style: {
       ...cell.getCellProps().style,
-      ...(mTableCellBodyProps?.style ?? {}),
-      ...(mcTableCellBodyProps?.style ?? {}),
+      ...mTableCellBodyProps?.style,
+      ...mcTableCellBodyProps?.style,
     },
   };
 
   return (
-    <MRT_StyledTableBodyCell
-      densePadding={densePadding}
+    <TableCell
       onClick={(event: MouseEvent<HTMLTableCellElement>) =>
         onCellClick?.(event, cell)
       }
       {...tableCellProps}
+      sx={
+        {
+          ...commonTableBodyCellStyles(densePadding),
+          ...tableCellProps?.sx,
+        } as TableCellProps['sx']
+      }
     >
       {currentEditingRow?.id === cell.row.id ? (
         <MRT_EditCellTextField cell={cell} />
@@ -64,6 +73,6 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
       ) : (
         cell.render('Cell')
       )}
-    </MRT_StyledTableBodyCell>
+    </TableCell>
   );
 };