material-react-table 0.7.0-alpha.9 → 0.7.2

package/src/footer/MRT_TableFooterCell.tsx

@@ -46,8 +46,11 @@ export const MRT_TableFooterCell: FC<Props> = ({ footer, tableInstance }) => {
           0.05,
         )},${alpha(theme.palette.common.white, 0.05)})`,
         fontWeight: 'bold',
+        maxWidth: `min(${column.getWidth()}px, ${column.maxWidth}px)`,
+        minWidth: `max(${column.getWidth()}px, ${column.minWidth}px)`,
         p: isDensePadding ? '0.5rem' : '1rem',
         transition: `all ${enableColumnResizing ? '10ms' : '0.2s'} ease-in-out`,
+        width: column.getWidth(),
         verticalAlign: 'text-top',
         //@ts-ignore
         ...tableCellProps?.sx,

package/src/head/MRT_TableHeadCell.tsx

@@ -30,8 +30,8 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
       icons: { FilterAltIcon, FilterAltOff },
       localization,
       muiTableHeadCellProps,
-      setShowFilters,
     },
+    setShowFilters,
   } = tableInstance;
 
   const { isDensePadding, showFilters } = getState();
@@ -56,9 +56,9 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
 
   const sortTooltip = !!column.getIsSorted()
     ? column.getIsSorted() === 'desc'
-      ? localization.clearSort
-      : localization.sortByColumnDesc.replace('{column}', column.header)
-    : localization.sortByColumnAsc.replace('{column}', column.header);
+      ? localization.sortedByColumnDesc.replace('{column}', column.header)
+      : localization.sortedByColumnAsc.replace('{column}', column.header)
+    : localization.unsorted;
 
   const filterType = getState()?.currentFilterTypes?.[header.id];
 
@@ -97,10 +97,10 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
           theme.palette.common.white,
           0.05,
         )},${alpha(theme.palette.common.white, 0.05)})`,
-        boxShadow: `3px 0 6px ${alpha(theme.palette.common.black, 0.1)}`,
         fontWeight: 'bold',
         height: '100%',
-        minWidth: `max(${header.getWidth()}, 100px)`,
+        maxWidth: `min(${column.getWidth()}px, ${column.maxWidth}px)`,
+        minWidth: `max(${column.getWidth()}px, ${column.minWidth}px)`,
         p: isDensePadding
           ? column.columnDefType === 'display'
             ? '0 0.5rem'
@@ -115,9 +115,11 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
             ? '0.75rem'
             : '1.25rem',
         pb: column.columnDefType === 'display' ? 0 : undefined,
+        overflow: 'visible',
         transition: `all ${enableColumnResizing ? 0 : '0.2s'} ease-in-out`,
         verticalAlign: 'text-top',
         width: header.getWidth(),
+        zIndex: column.getIsResizing() ? 2 : 1,
         //@ts-ignore
         ...tableCellProps?.sx,
       })}
@@ -135,7 +137,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
           }}
         >
           <Box
-            {...column.getToggleSortingProps()}
+            onClick={() => column.toggleSorting()}
             sx={{
               alignItems: 'center',
               cursor:
@@ -144,12 +146,11 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
                   : undefined,
               display: 'flex',
               flexWrap: 'nowrap',
-              whiteSpace: column.header.length < 15 ? 'nowrap' : 'normal',
+              whiteSpace: column.header.length < 24 ? 'nowrap' : 'normal',
             }}
-            title={undefined}
           >
             {headerElement}
-            {column.columnDefType !== 'group' && column.getCanSort() && (
+            {column.columnDefType === 'data' && column.getCanSort() && (
               <Tooltip arrow placement="top" title={sortTooltip}>
                 <TableSortLabel
                   aria-label={sortTooltip}
@@ -162,7 +163,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
                 />
               </Tooltip>
             )}
-            {column.columnDefType !== 'group' &&
+            {column.columnDefType === 'data' &&
               enableColumnFilters &&
               !!column.getCanColumnFilter() && (
                 <Tooltip arrow placement="top" title={filterTooltip}>
@@ -185,67 +186,64 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
                     }}
                   >
                     {showFilters && !column.getColumnFilterValue() ? (
-                      <FilterAltOff fontSize="small" />
+                      <FilterAltOff />
                     ) : (
-                      <FilterAltIcon fontSize="small" />
+                      <FilterAltIcon />
                     )}
                   </IconButton>
                 </Tooltip>
               )}
           </Box>
-          <Box
-            sx={{ alignItems: 'center', display: 'flex', flexWrap: 'nowrap' }}
-          >
-            {(enableColumnActions || column.enableColumnActions) &&
-              column.enableColumnActions !== false &&
-              column.columnDefType !== 'group' && (
-                <MRT_ToggleColumnActionMenuButton
-                  header={header}
-                  tableInstance={tableInstance}
-                />
-              )}
-            {enableColumnResizing && column.columnDefType !== 'group' && (
-              <Divider
-                flexItem
-                orientation="vertical"
-                onDoubleClick={() => header.resetSize()}
-                sx={(theme: Theme) => ({
-                  borderRightWidth: '2px',
-                  borderRadius: '2px',
-                  maxHeight: '2rem',
-                  cursor: 'col-resize',
-                  userSelect: 'none',
-                  touchAction: 'none',
-                  '&:active': {
-                    backgroundColor: theme.palette.secondary.dark,
-                    opacity: 1,
-                  },
-                })}
-                {...(header.getResizerProps((props: ColumnResizerProps) => ({
-                  ...props,
-                  style: {
-                    transform: column.getIsResizing()
-                      ? `translateX(${
-                          getState().columnSizingInfo.deltaOffset
-                        }px)`
-                      : '',
-                  },
-                })) as any)}
+          {(enableColumnActions || column.enableColumnActions) &&
+            column.enableColumnActions !== false &&
+            column.columnDefType !== 'group' && (
+              <MRT_ToggleColumnActionMenuButton
+                header={header}
+                tableInstance={tableInstance}
               />
             )}
-          </Box>
+          {column.getCanResize() && (
+            <Divider
+              flexItem
+              orientation="vertical"
+              onDoubleClick={() => header.resetSize()}
+              sx={(theme: Theme) => ({
+                borderRadius: '2px',
+                borderRightWidth: '2px',
+                cursor: 'col-resize',
+                height:
+                  showFilters && column.columnDefType === 'data'
+                    ? '4rem'
+                    : '2rem',
+                opacity: 0.8,
+                position: 'absolute',
+                right: '1px',
+                touchAction: 'none',
+                transition: 'all 0.2s ease-in-out',
+                userSelect: 'none',
+                zIndex: 2000,
+                '&:active': {
+                  backgroundColor: theme.palette.info.main,
+                  opacity: 1,
+                },
+              })}
+              {...(header.getResizerProps((props: ColumnResizerProps) => ({
+                ...props,
+                style: {
+                  transform: column.getIsResizing()
+                    ? `translateX(${getState().columnSizingInfo.deltaOffset}px)`
+                    : '',
+                },
+              })) as any)}
+            />
+          )}
         </Box>
       )}
-      {column.columnDefType === 'data' &&
-        enableColumnFilters &&
-        column.getCanColumnFilter() && (
-          <Collapse in={showFilters}>
-            <MRT_FilterTextField
-              header={header}
-              tableInstance={tableInstance}
-            />
-          </Collapse>
-        )}
+      {column.columnDefType === 'data' && column.getCanColumnFilter() && (
+        <Collapse in={showFilters}>
+          <MRT_FilterTextField header={header} tableInstance={tableInstance} />
+        </Collapse>
+      )}
     </TableCell>
   );
 };

package/src/head/MRT_TableHeadRow.tsx

@@ -1,5 +1,5 @@
-import React, { FC } from 'react';
-import { TableRow } from '@mui/material';
+import React, { CSSProperties, FC } from 'react';
+import { alpha, TableRow } from '@mui/material';
 import { MRT_TableHeadCell } from './MRT_TableHeadCell';
 import type { MRT_Header, MRT_HeaderGroup, MRT_TableInstance } from '..';
 
@@ -24,7 +24,16 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup, tableInstance }) => {
   };
 
   return (
-    <TableRow {...tableRowProps}>
+    <TableRow
+      {...tableRowProps}
+      sx={(theme) =>
+        ({
+          boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`,
+          //@ts-ignore
+          ...tableRowProps?.sx,
+        } as CSSProperties)
+      }
+    >
       {headerGroup.headers.map((header: MRT_Header, index) => (
         <MRT_TableHeadCell
           header={header}

package/src/icons.ts

@@ -19,6 +19,7 @@ import FullscreenIcon from '@mui/icons-material/Fullscreen';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import PushPinIcon from '@mui/icons-material/PushPin';
+import RestartAltIcon from '@mui/icons-material/RestartAlt';
 import SaveIcon from '@mui/icons-material/Save';
 import SearchIcon from '@mui/icons-material/Search';
 import SearchOffIcon from '@mui/icons-material/SearchOff';
@@ -48,6 +49,7 @@ export interface MRT_Icons {
   MoreHorizIcon: any;
   MoreVertIcon: any;
   PushPinIcon: any;
+  RestartAltIcon: any;
   SaveIcon: any;
   SearchIcon: any;
   SearchOffIcon: any;
@@ -78,6 +80,7 @@ export const MRT_Default_Icons: MRT_Icons = {
   MoreHorizIcon,
   MoreVertIcon,
   PushPinIcon,
+  RestartAltIcon,
   SaveIcon,
   SearchIcon,
   SearchOffIcon,

package/src/inputs/MRT_EditCellTextField.tsx

@@ -16,11 +16,8 @@ interface Props {
 export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
   const {
     getState,
-    options: {
-      enableEditing,
-      muiTableBodyCellEditTextFieldProps,
-      setCurrentEditingRow,
-    },
+    options: { enableEditing, muiTableBodyCellEditTextFieldProps },
+    setCurrentEditingRow,
   } = tableInstance;
 
   const [value, setValue] = useState(cell.value);

package/src/inputs/MRT_FilterTextField.tsx

@@ -32,8 +32,8 @@ export const MRT_FilterTextField: FC<Props> = ({ header, tableInstance }) => {
       idPrefix,
       localization,
       muiTableHeadCellFilterTextFieldProps,
-      setCurrentFilterTypes,
     },
+    setCurrentFilterTypes,
   } = tableInstance;
 
   const { column } = header;
@@ -206,7 +206,7 @@ export const MRT_FilterTextField: FC<Props> = ({ header, tableInstance }) => {
                       width: '1.75rem',
                     }}
                   >
-                    <CloseIcon fontSize="small" />
+                    <CloseIcon />
                   </IconButton>
                 </span>
               </Tooltip>

package/src/inputs/MRT_SearchTextField.tsx

@@ -29,11 +29,11 @@ export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
       idPrefix,
       localization,
       muiSearchTextFieldProps,
-      onGlobalFilterChange,
+      onGlobalSearchFilterChange,
     },
   } = tableInstance;
 
-  const { globalFilter, showSearch } = getState();
+  const { globalFilter, showGlobalFilter } = getState();
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [searchValue, setSearchValue] = useState(globalFilter ?? '');
@@ -41,7 +41,7 @@ export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
   const handleChange = useCallback(
     debounce((event: ChangeEvent<HTMLInputElement>) => {
       setGlobalFilter(event.target.value ?? undefined);
-      onGlobalFilterChange?.({ event, tableInstance });
+      onGlobalSearchFilterChange?.({ event, tableInstance });
     }, 200),
     [],
   );
@@ -61,7 +61,7 @@ export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
       : muiSearchTextFieldProps;
 
   return (
-    <Collapse in={showSearch} orientation="horizontal">
+    <Collapse in={showGlobalFilter} orientation="horizontal">
       <TextField
         id={`mrt-${idPrefix}-search-text-field`}
         placeholder={localization.search}
@@ -82,7 +82,7 @@ export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
                     size="small"
                     sx={{ height: '1.75rem', width: '1.75rem' }}
                   >
-                    <SearchIcon fontSize="small" />
+                    <SearchIcon />
                   </IconButton>
                 </span>
               </Tooltip>
@@ -97,7 +97,7 @@ export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
                 size="small"
                 title={localization.clearSearch}
               >
-                <CloseIcon fontSize="small" />
+                <CloseIcon />
               </IconButton>
             </InputAdornment>
           ),

package/src/localization.ts

@@ -32,6 +32,7 @@ export interface MRT_Localization {
   hideColumn: string;
   pinToLeft: string;
   pinToRight: string;
+  resetColumnSize: string;
   rowActions: string;
   rowNumber: string;
   rowNumbers: string;
@@ -46,6 +47,8 @@ export interface MRT_Localization {
   showHideSearch: string;
   sortByColumnAsc: string;
   sortByColumnDesc: string;
+  sortedByColumnAsc: string;
+  sortedByColumnDesc: string;
   thenBy: string;
   toggleDensePadding: string;
   toggleFullScreen: string;
@@ -53,6 +56,7 @@ export interface MRT_Localization {
   toggleSelectRow: string;
   ungroupByColumn: string;
   unpin: string;
+  unsorted: string;
 }
 
 export const MRT_DefaultLocalization_EN: MRT_Localization = {
@@ -89,6 +93,7 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   hideColumn: 'Hide {column} column',
   pinToLeft: 'Pin to left',
   pinToRight: 'Pin to right',
+  resetColumnSize: 'Reset column size',
   rowActions: 'Row Actions',
   rowNumber: '#',
   rowNumbers: 'Row Numbers',
@@ -104,6 +109,8 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   showHideSearch: 'Show/Hide search',
   sortByColumnAsc: 'Sort by {column} ascending',
   sortByColumnDesc: 'Sort by {column} descending',
+  sortedByColumnAsc: 'Sorted by {column} ascending',
+  sortedByColumnDesc: 'Sorted by {column} descending',
   thenBy: ', then by ',
   toggleDensePadding: 'Toggle dense padding',
   toggleFullScreen: 'Toggle full screen',
@@ -111,4 +118,5 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   toggleSelectRow: 'Toggle select row',
   ungroupByColumn: 'Ungroup by {column}',
   unpin: 'Unpin',
+  unsorted: 'Unsorted',
 };

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -35,9 +35,10 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
     setColumnOrder,
     options: {
       enableColumnFilters,
-      enableColumnPinning,
+      enableColumnResizing,
       enableGrouping,
       enableHiding,
+      enablePinning,
       enableSorting,
       icons: {
         ArrowRightIcon,
@@ -48,17 +49,18 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
         FilterListOffIcon,
         PushPinIcon,
         SortIcon,
+        RestartAltIcon,
         VisibilityOffIcon,
       },
       idPrefix,
       localization,
-      setShowFilters,
     },
+    setShowFilters,
   } = tableInstance;
 
   const { column } = header;
 
-  const { isDensePadding, columnVisibility } = getState();
+  const { columnSizing, columnVisibility, isDensePadding } = getState();
 
   const [filterMenuAnchorEl, setFilterMenuAnchorEl] =
     useState<null | HTMLElement>(null);
@@ -81,6 +83,11 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
     setAnchorEl(null);
   };
 
+  const handleResetColumnSize = () => {
+    column.resetSize();
+    setAnchorEl(null);
+  };
+
   const handleHideColumn = () => {
     column.toggleVisibility(false);
     setAnchorEl(null);
@@ -245,7 +252,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
       {enableGrouping &&
         column.getCanGroup() && [
           <MenuItem
-            divider={enableColumnPinning}
+            divider={enablePinning}
             key={0}
             onClick={handleGroupByColumn}
             sx={commonMenuItemStyles}
@@ -260,10 +267,10 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             </Box>
           </MenuItem>,
         ]}
-      {enableColumnPinning &&
+      {enablePinning &&
         column.getCanPin() && [
           <MenuItem
-            disabled={column.getIsPinned() === 'left'}
+            disabled={column.getIsPinned() === 'left' || !column.getCanPin()}
             key={0}
             onClick={() => handlePinColumn('left')}
             sx={commonMenuItemStyles}
@@ -276,7 +283,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             </Box>
           </MenuItem>,
           <MenuItem
-            disabled={column.getIsPinned() === 'right'}
+            disabled={column.getIsPinned() === 'right' || !column.getCanPin()}
             key={0}
             onClick={() => handlePinColumn('right')}
             sx={commonMenuItemStyles}
@@ -303,6 +310,21 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             </Box>
           </MenuItem>,
         ]}
+      {enableColumnResizing && [
+        <MenuItem
+          disabled={!column.getCanResize() || !columnSizing[column.id]}
+          key={0}
+          onClick={handleResetColumnSize}
+          sx={commonMenuItemStyles}
+        >
+          <Box sx={commonListItemStyles}>
+            <ListItemIcon>
+              <RestartAltIcon />
+            </ListItemIcon>
+            {localization.resetColumnSize}
+          </Box>
+        </MenuItem>,
+      ]}
       {enableHiding && [
         <MenuItem
           disabled={column.enableHiding === false}

package/src/menus/MRT_FilterTypeMenu.tsx

@@ -39,12 +39,9 @@ export const MRT_FilterTypeMenu: FC<Props> = ({
 }) => {
   const {
     getState,
-    options: {
-      enabledGlobalFilterTypes,
-      localization,
-      setCurrentFilterTypes,
-      setCurrentGlobalFilterType,
-    },
+    options: { enabledGlobalFilterTypes, localization },
+    setCurrentFilterTypes,
+    setCurrentGlobalFilterType,
   } = tableInstance;
 
   const { isDensePadding, currentFilterTypes, currentGlobalFilterType } =
@@ -126,8 +123,8 @@ export const MRT_FilterTypeMenu: FC<Props> = ({
         },
       ].filter((filterType) =>
         header
-          ? !header.column.enabledFilterTypes ||
-            header.column.enabledFilterTypes.includes(filterType.type)
+          ? !header.column.enabledColumnFilterTypes ||
+            header.column.enabledColumnFilterTypes.includes(filterType.type)
           : (!enabledGlobalFilterTypes ||
               enabledGlobalFilterTypes.includes(filterType.type)) &&
             [

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -1,10 +1,10 @@
 import React, { FC } from 'react';
 import { FormControlLabel, MenuItem, Switch } from '@mui/material';
-import type { MRT_ColumnInstance, MRT_TableInstance } from '..';
+import type { MRT_Column, MRT_TableInstance } from '..';
 import { commonMenuItemStyles } from './MRT_ColumnActionMenu';
 
 interface Props {
-  column: MRT_ColumnInstance;
+  column: MRT_Column;
   isSubMenu?: boolean;
   tableInstance: MRT_TableInstance;
 }
@@ -16,7 +16,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
 }) => {
   const {
     getState,
-    options: { onColumnHide },
+    options: { onToggleColumnVisibility },
   } = tableInstance;
 
   const { columnVisibility } = getState();
@@ -26,15 +26,15 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
     (column.columnDefType === 'group' &&
       column.getLeafColumns().some((col) => col.getIsVisible()));
 
-  const handleToggleColumnHidden = (column: MRT_ColumnInstance) => {
+  const handleToggleColumnHidden = (column: MRT_Column) => {
     if (column.columnDefType === 'group') {
-      column?.columns?.forEach?.((childColumn: MRT_ColumnInstance) => {
+      column?.columns?.forEach?.((childColumn: MRT_Column) => {
         childColumn.toggleVisibility(!switchChecked);
       });
     } else {
       column.toggleVisibility();
     }
-    onColumnHide?.({
+    onToggleColumnVisibility?.({
       column,
       columnVisibility,
       tableInstance,
@@ -57,7 +57,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
           onChange={() => handleToggleColumnHidden(column)}
         />
       </MenuItem>
-      {column.columns?.map((c: MRT_ColumnInstance, i) => (
+      {column.columns?.map((c: MRT_Column, i) => (
         <MRT_ShowHideColumnsMenuItems
           key={`${i}-${c.id}`}
           column={c}

package/src/table/MRT_Table.tsx

@@ -14,10 +14,10 @@ export const MRT_Table: FC<Props> = ({ pinned, tableInstance }) => {
   const {
     getTableProps,
     options: {
-      enableStickyHeader,
-      hideTableFooter,
-      hideTableHead,
       muiTableProps,
+      enableTableHead,
+      enableTableFooter,
+      enableStickyHeader,
     },
   } = tableInstance;
 
@@ -33,11 +33,11 @@ export const MRT_Table: FC<Props> = ({ pinned, tableInstance }) => {
 
   return (
     <Table stickyHeader={enableStickyHeader} {...tableProps}>
-      {!hideTableHead && (
+      {enableTableHead && (
         <MRT_TableHead pinned={pinned} tableInstance={tableInstance} />
       )}
       <MRT_TableBody pinned={pinned} tableInstance={tableInstance} />
-      {!hideTableFooter && (
+      {enableTableFooter && (
         <MRT_TableFooter pinned={pinned} tableInstance={tableInstance} />
       )}
     </Table>

package/src/table/MRT_TableContainer.tsx

@@ -1,6 +1,5 @@
-import React, { FC, useLayoutEffect, useState } from 'react';
+import React, { CSSProperties, FC, useEffect, useState } from 'react';
 import { alpha, Box, TableContainer, Theme } from '@mui/material';
-import { SystemStyleObject } from '@mui/material/node_modules/@mui/system';
 import { MRT_TableInstance } from '..';
 import { MRT_Table } from './MRT_Table';
 
@@ -12,10 +11,10 @@ const commonBoxStyles = ({
   pinned?: 'left' | 'right';
   theme: Theme;
   visible?: boolean;
-}): SystemStyleObject<Theme> => ({
+}): CSSProperties => ({
   display: 'grid',
   minWidth: visible ? '200px' : 0,
-  overflowX: 'auto',
+  overflowX: pinned ? 'scroll' : 'auto',
   boxShadow:
     pinned === 'left'
       ? `0 1px 12px ${alpha(theme.palette.common.black, 0.5)}`
@@ -36,7 +35,7 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
     getRightTableWidth,
     getState,
     options: {
-      enableColumnPinning,
+      enablePinning,
       enableStickyHeader,
       idPrefix,
       muiTableContainerProps,
@@ -52,7 +51,7 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
       ? muiTableContainerProps({ tableInstance })
       : muiTableContainerProps;
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     const topToolbarHeight =
       typeof document !== 'undefined'
         ? document?.getElementById(`mrt-${idPrefix}-toolbar-top`)
@@ -85,7 +84,7 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
           : undefined,
       }}
     >
-      {enableColumnPinning && getIsSomeColumnsPinned() ? (
+      {enablePinning && getIsSomeColumnsPinned() ? (
         <Box
           sx={{
             display: 'grid',