material-react-table 0.3.1 → 0.3.5

package/src/body/MRT_TableBodyRow.tsx

@@ -1,13 +1,24 @@
 import React, { FC, MouseEvent } from 'react';
-import { alpha, TableCell, TableRow, useTheme } 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';
+import {
+  MRT_StyledTableBodyCell,
+  MRT_TableBodyCell,
+} from './MRT_TableBodyCell';
+import { useMRT } from '../useMRT';
 import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
 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;
 }
@@ -16,13 +27,13 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
   const {
     anyRowsCanExpand,
     enableRowActions,
+    enableRowNumbers,
     enableSelection,
     muiTableBodyRowProps,
     onRowClick,
     positionActionsColumn,
     renderDetailPanel,
-  } = useMaterialReactTable();
-  const theme = useTheme();
+  } = useMRT();
 
   const mTableBodyRowProps =
     muiTableBodyRowProps instanceof Function
@@ -33,9 +44,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,16 +52,18 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
   return (
     <>
       <TableRow
+        isSelected={row.isSelected}
         hover
         onClick={(event: MouseEvent<HTMLTableRowElement>) =>
           onRowClick?.(event, row)
         }
         {...tableRowProps}
       >
+        {enableRowNumbers && (
+          <MRT_StyledTableBodyCell>{row.index + 1}</MRT_StyledTableBodyCell>
+        )}
         {enableRowActions && positionActionsColumn === 'first' && (
-          <TableCell>
-            <MRT_ToggleRowActionMenuButton row={row} />
-          </TableCell>
+          <MRT_ToggleRowActionMenuButton row={row} />
         )}
         {(anyRowsCanExpand || renderDetailPanel) && (
           <MRT_ExpandButton row={row} />
@@ -63,9 +73,7 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
           <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,7 +1,21 @@
 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';
+import { useMRT } from '../useMRT';
+
+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;
@@ -14,7 +28,7 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row }) => {
     muiTableDetailPanelProps,
     muiTableBodyRowProps,
     onDetailPanelClick,
-  } = useMaterialReactTable();
+  } = useMRT();
 
   const mTableBodyRowProps =
     muiTableBodyRowProps instanceof Function
@@ -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

@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import { IconButton, styled, Tooltip } from '@mui/material';
 import SaveIcon from '@mui/icons-material/Save';
 import CancelIcon from '@mui/icons-material/Cancel';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 import { Row } from 'react-table';
 
 const EditActionButtonWrappers = styled('div')({
@@ -15,16 +15,21 @@ interface Props {
 }
 
 export const MRT_EditActionButtons: FC<Props> = ({ row }) => {
-  const { localization, setCurrentEditingRowId, onRowEditSubmit } =
-    useMaterialReactTable();
+  const {
+    localization,
+    setCurrentEditingRow,
+    onRowEditSubmit,
+    currentEditingRow,
+  } = useMRT();
 
   const handleCancel = () => {
-    setCurrentEditingRowId(null);
+    row.values = row.original;
+    setCurrentEditingRow(null);
   };
 
   const handleSave = async () => {
-    setCurrentEditingRowId(null);
-    await onRowEditSubmit?.(row);
+    await onRowEditSubmit?.(currentEditingRow ?? row);
+    setCurrentEditingRow(null);
   };
 
   return (

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -1,28 +1,27 @@
 import React, { FC } from 'react';
-import { IconButton, TableCell } from '@mui/material';
-import ArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { IconButton, styled } from '@mui/material';
+import MuiArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
+import { useMRT } from '../useMRT';
+import { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
+
+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> = () => {
-  const {
-    tableInstance,
-    localization,
-    anyRowsExpanded,
-    densePadding,
-    renderDetailPanel,
-  } = useMaterialReactTable();
+  const { tableInstance, localization, anyRowsExpanded, densePadding } =
+    useMRT();
 
   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}
@@ -30,16 +29,11 @@ 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>
+    </MRT_TableButtonCell>
   );
 };

package/src/buttons/MRT_ExpandButton.tsx

@@ -1,46 +1,48 @@
 import React, { FC } from 'react';
-import { IconButton, TableCell } from '@mui/material';
+import { IconButton, styled } from '@mui/material';
 import { Row } from 'react-table';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import MuiExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { useMRT } from '../useMRT';
+import { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
+
+const TableCell = styled(MRT_TableButtonCell, {
+  shouldForwardProp: (prop) => prop !== 'depth',
+})<{ depth: number }>(({ depth }) => ({
+  paddingLeft: `${depth + 0.5}rem`,
+  textAlign: 'left',
+}));
+
+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 } =
-    useMaterialReactTable();
+  const { localization, densePadding, renderDetailPanel } = useMRT();
 
   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_FullScreenToggleButton.tsx

@@ -0,0 +1,23 @@
+import React, { FC } from 'react';
+import { IconButton, Tooltip } from '@mui/material';
+import { useMRT } from '../useMRT';
+import FilterListIcon from '@mui/icons-material/Fullscreen';
+import FilterListOffIcon from '@mui/icons-material/FullscreenExit';
+
+type Props = {};
+
+export const MRT_FullScreenToggleButton: FC<Props> = () => {
+  const { localization, setFullScreen, fullScreen } = useMRT();
+
+  return (
+    <Tooltip arrow title={localization?.toggleFullScreenButtonTitle ?? ''}>
+      <IconButton
+        aria-label={localization?.toggleFilterButtonTitle}
+        onClick={() => setFullScreen(!fullScreen)}
+        size="small"
+      >
+        {fullScreen ? <FilterListOffIcon /> : <FilterListIcon />}
+      </IconButton>
+    </Tooltip>
+  );
+};

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -1,13 +1,26 @@
 import React, { FC, MouseEvent, useState } from 'react';
-import { IconButton, Menu, Tooltip } from '@mui/material';
+import {
+  Button,
+  IconButton,
+  Menu,
+  Tooltip,
+  styled,
+  Divider,
+} from '@mui/material';
 import ViewColumnIcon from '@mui/icons-material/ViewColumn';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 import { MRT_ShowHideColumnsMenu } from '../menus/MRT_ShowHideColumnsMenu';
 
+const MenuButtons = styled('div')({
+  display: 'flex',
+  justifyContent: 'space-between',
+  padding: '0 0.5rem 0.5rem 0.5rem',
+});
+
 interface Props {}
 
 export const MRT_ShowHideColumnsButton: FC<Props> = () => {
-  const { tableInstance, localization } = useMaterialReactTable();
+  const { tableInstance, localization } = useMRT();
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
@@ -31,6 +44,24 @@ export const MRT_ShowHideColumnsButton: FC<Props> = () => {
         open={!!anchorEl}
         onClose={() => setAnchorEl(null)}
       >
+        <MenuButtons>
+          <Button
+            disabled={
+              !tableInstance.getToggleHideAllColumnsProps().checked &&
+              !tableInstance.getToggleHideAllColumnsProps().indeterminate
+            }
+            onClick={() => tableInstance.toggleHideAllColumns(true)}
+          >
+            {localization?.columnShowHideMenuHideAll}
+          </Button>
+          <Button
+            disabled={tableInstance.getToggleHideAllColumnsProps().checked}
+            onClick={() => tableInstance.toggleHideAllColumns(false)}
+          >
+            {localization?.columnShowHideMenuShowAll}
+          </Button>
+        </MenuButtons>
+        <Divider />
         {tableInstance.columns.map((column, index) => (
           <MRT_ShowHideColumnsMenu
             key={`${index}-${column.id}`}

package/src/buttons/MRT_ToggleColumnActionMenuButton.tsx

@@ -1,7 +1,7 @@
 import React, { FC, MouseEvent, useState } from 'react';
 import { IconButton as MuiIconButton, styled } from '@mui/material';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 import { MRT_ColumnActionMenu } from '../menus/MRT_ColumnActionMenu';
 import { HeaderGroup } from 'react-table';
 
@@ -9,8 +9,8 @@ const IconButton = styled(MuiIconButton)({
   opacity: 0.5,
   transition: 'opacity 0.2s',
   marginRight: '2px',
-  height: '2rem',
-  width: '2rem',
+  height: '1.6rem',
+  width: '1.6rem',
   '&:hover': {
     opacity: 1,
   },
@@ -21,7 +21,7 @@ interface Props {
 }
 
 export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({ column }) => {
-  const { localization } = useMaterialReactTable();
+  const { localization } = useMRT();
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
@@ -35,9 +35,9 @@ export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({ column }) => {
     <>
       <IconButton
         aria-label={localization?.columnActionMenuButtonTitle}
-        title={localization?.columnActionMenuButtonTitle}
         onClick={handleClick}
         size="small"
+        title={localization?.columnActionMenuButtonTitle}
       >
         <MoreVertIcon />
       </IconButton>

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -1,13 +1,13 @@
 import React, { FC } from 'react';
 import { IconButton, Tooltip } from '@mui/material';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 import FilterListIcon from '@mui/icons-material/FilterList';
 import FilterListOffIcon from '@mui/icons-material/FilterListOff';
 
 type Props = {};
 
 export const MRT_ToggleFiltersButton: FC<Props> = () => {
-  const { localization, setShowFilters, showFilters } = useMaterialReactTable();
+  const { localization, setShowFilters, showFilters } = useMRT();
 
   return (
     <Tooltip arrow title={localization?.toggleFilterButtonTitle ?? ''}>

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -1,10 +1,12 @@
 import React, { FC, MouseEvent, useState } from 'react';
-import { IconButton as MuiIconButton, styled } from '@mui/material';
+import { IconButton as MuiIconButton, styled, Tooltip } from '@mui/material';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import EditIcon from '@mui/icons-material/Edit';
+import { useMRT } from '../useMRT';
 import { Row } from 'react-table';
 import { MRT_RowActionMenu } from '../menus/MRT_RowActionMenu';
 import { MRT_EditActionButtons } from './MRT_EditActionButtons';
+import { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
 
 const IconButton = styled(MuiIconButton)({
   opacity: 0.5,
@@ -23,11 +25,15 @@ interface Props {
 
 export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
   const {
+    currentEditingRow,
+    densePadding,
     localization,
-    currentEditingRowId,
+    renderRowActionMenuItems,
+    enableRowEditing,
+    setCurrentEditingRow,
     renderRowActions,
     tableInstance,
-  } = useMaterialReactTable();
+  } = useMRT();
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
@@ -37,29 +43,45 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
     setAnchorEl(event.currentTarget);
   };
 
-  if (renderRowActions) {
-    return <>{renderRowActions(row, tableInstance)}</>;
-  }
-
-  if (row.id === currentEditingRowId) {
-    return <MRT_EditActionButtons row={row} />;
-  }
+  const handleEdit = () => {
+    setCurrentEditingRow({ ...row });
+    setAnchorEl(null);
+  };
 
   return (
-    <>
-      <IconButton
-        aria-label={localization?.rowActionMenuButtonTitle}
-        title={localization?.rowActionMenuButtonTitle}
-        onClick={handleOpenRowActionMenu}
-        size="small"
-      >
-        <MoreHorizIcon />
-      </IconButton>
-      <MRT_RowActionMenu
-        anchorEl={anchorEl}
-        row={row}
-        setAnchorEl={setAnchorEl}
-      />
-    </>
+    <MRT_TableButtonCell densePadding={densePadding}>
+      {renderRowActions ? (
+        <>{renderRowActions(row, tableInstance)}</>
+      ) : row.id === currentEditingRow?.id ? (
+        <MRT_EditActionButtons row={row} />
+      ) : !renderRowActionMenuItems && enableRowEditing ? (
+        <Tooltip
+          placement="right"
+          arrow
+          title={localization?.rowActionMenuItemEdit ?? ''}
+        >
+          <IconButton onClick={handleEdit}>
+            <EditIcon />
+          </IconButton>
+        </Tooltip>
+      ) : renderRowActionMenuItems ? (
+        <>
+          <IconButton
+            aria-label={localization?.rowActionMenuButtonTitle}
+            title={localization?.rowActionMenuButtonTitle}
+            onClick={handleOpenRowActionMenu}
+            size="small"
+          >
+            <MoreHorizIcon />
+          </IconButton>
+          <MRT_RowActionMenu
+            anchorEl={anchorEl}
+            handleEdit={handleEdit}
+            row={row}
+            setAnchorEl={setAnchorEl}
+          />
+        </>
+      ) : null}
+    </MRT_TableButtonCell>
   );
 };

package/src/buttons/MRT_ToggleSearchButton.tsx

@@ -0,0 +1,33 @@
+import React, { FC } from 'react';
+import { IconButton, Tooltip } from '@mui/material';
+import { useMRT } from '../useMRT';
+import SearchIcon from '@mui/icons-material/Search';
+import SearchOffIcon from '@mui/icons-material/SearchOff';
+
+type Props = {};
+
+export const MRT_ToggleSearchButton: FC<Props> = () => {
+  const { localization, setShowSearch, showSearch, muiSearchTextFieldProps } =
+    useMRT();
+
+  const handleToggleSearch = () => {
+    setShowSearch(!showSearch);
+    setTimeout(
+      () =>
+        document
+          .getElementById(
+            muiSearchTextFieldProps?.id ?? `global-search-text-field`,
+          )
+          ?.focus(),
+      200,
+    );
+  };
+
+  return (
+    <Tooltip arrow title={localization?.toggleSearchButtonTitle ?? ''}>
+      <IconButton size="small" onClick={handleToggleSearch}>
+        {showSearch ? <SearchOffIcon /> : <SearchIcon />}
+      </IconButton>
+    </Tooltip>
+  );
+};

package/src/footer/MRT_TableFooter.tsx

@@ -1,18 +1,18 @@
 import React, { FC } from 'react';
 import { TableFooter } from '@mui/material';
 import { MRT_TableFooterRow } from './MRT_TableFooterRow';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 
 interface Props {}
 
 export const MRT_TableFooter: FC<Props> = () => {
-  const { muiTableFooterProps, tableInstance } = useMaterialReactTable();
+  const { muiTableFooterProps, tableInstance } = useMRT();
 
   return (
     <TableFooter {...muiTableFooterProps}>
-      {tableInstance.footerGroups.map((footerGroup, index) => (
+      {tableInstance.footerGroups.map((footerGroup) => (
         <MRT_TableFooterRow
-          key={`${index}-${footerGroup.id}`}
+          key={footerGroup.getFooterGroupProps().key}
           footerGroup={footerGroup}
         />
       ))}

package/src/footer/MRT_TableFooterCell.tsx

@@ -1,18 +1,27 @@
 import React, { FC } from 'react';
 import { styled, TableCell as MuiTableCell } from '@mui/material';
 import { HeaderGroup } from 'react-table';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 
-const TableCell = styled(MuiTableCell)({
-  fontWeight: 'bold',
-});
+const TableCell = styled(MuiTableCell, {
+  shouldForwardProp: (prop) =>
+    prop !== 'densePadding' && prop !== 'enableColumnResizing',
+})<{ densePadding?: boolean; enableColumnResizing?: boolean }>(
+  ({ densePadding, enableColumnResizing }) => ({
+    fontWeight: 'bold',
+    verticalAlign: 'text-top',
+    padding: densePadding ? '0.5rem' : '1rem',
+    transition: `all ${enableColumnResizing ? '10ms' : '0.2s'} ease-in-out`,
+  }),
+);
 
 interface Props {
   column: HeaderGroup;
 }
 
 export const MRT_TableFooterCell: FC<Props> = ({ column }) => {
-  const { muiTableFooterCellProps, densePadding } = useMaterialReactTable();
+  const { muiTableFooterCellProps, densePadding, enableColumnResizing } =
+    useMRT();
 
   const isParentHeader = (column?.columns?.length ?? 0) > 0;
 
@@ -21,20 +30,27 @@ export const MRT_TableFooterCell: FC<Props> = ({ column }) => {
       ? muiTableFooterCellProps(column)
       : muiTableFooterCellProps;
 
+  const mcTableFooterCellProps =
+    column.muiTableFooterCellProps instanceof Function
+      ? column.muiTableFooterCellProps(column)
+      : column.muiTableFooterCellProps;
+
   const tableCellProps = {
     ...mTableFooterCellProps,
+    ...mcTableFooterCellProps,
     ...column.getFooterProps(),
     style: {
-      padding: densePadding ? '0.5rem' : '1rem',
-      transition: 'all 0.2s ease-in-out',
       ...column.getFooterProps().style,
       ...(mTableFooterCellProps?.style ?? {}),
+      ...(mcTableFooterCellProps?.style ?? {}),
     },
   };
 
   return (
     <TableCell
       align={isParentHeader ? 'center' : 'left'}
+      densePadding={densePadding}
+      enableColumnResizing={enableColumnResizing}
       variant="head"
       {...tableCellProps}
     >