material-react-table 0.8.7 → 0.8.10

package/package.json

@@ -1,8 +1,8 @@
 {
-  "version": "0.8.7",
+  "version": "0.8.10",
   "license": "MIT",
   "name": "material-react-table",
-  "description": "A fully featured Material UI implementation of Tanstack react-table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",
+  "description": "A fully featured Material UI implementation of TanStack React Table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",
   "author": "Kevin Vandy",
   "keywords": [
     "react-table",
@@ -81,6 +81,7 @@
     "react-dom": "^17.0.2",
     "react-is": "^18.1.0",
     "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "size-limit": "^7.0.8",
     "storybook-dark-mode": "^1.1.0",
@@ -98,7 +99,7 @@
   "dependencies": {
     "@tanstack/match-sorter-utils": "^8.0.0-alpha.83",
     "@tanstack/react-table": "^8.0.0-alpha.89",
-    "react-dnd": "^15.1.2",
-    "react-dnd-html5-backend": "^15.1.2"
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1"
   }
 }

package/src/MaterialReactTable.tsx

@@ -137,7 +137,7 @@ export type MRT_TableState<D extends Record<string, any> = {}> = Omit<
 
 export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
   ColumnDef<D>,
-  'header' | 'footer' | 'columns' | 'filterFn'
+  'accessorFN' | 'header' | 'footer' | 'columns' | 'filterFn'
 > & {
   Edit?: ({
     cell,
@@ -153,20 +153,24 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
     header: MRT_Header<D>;
     tableInstance: MRT_TableInstance<D>;
   }) => ReactNode;
-  Footer?: ({
-    footer,
-    tableInstance,
-  }: {
-    footer: MRT_Header<D>;
-    tableInstance: MRT_TableInstance<D>;
-  }) => ReactNode;
-  Header?: ({
-    header,
-    tableInstance,
-  }: {
-    header: MRT_Header<D>;
-    tableInstance: MRT_TableInstance<D>;
-  }) => ReactNode;
+  Footer?:
+    | ReactNode
+    | (({
+        footer,
+        tableInstance,
+      }: {
+        footer: MRT_Header<D>;
+        tableInstance: MRT_TableInstance<D>;
+      }) => ReactNode);
+  Header?:
+    | ReactNode
+    | (({
+        header,
+        tableInstance,
+      }: {
+        header: MRT_Header<D>;
+        tableInstance: MRT_TableInstance<D>;
+      }) => ReactNode);
   Cell?: ({
     cell,
     tableInstance,
@@ -174,7 +178,7 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
     cell: MRT_Cell<D>;
     tableInstance: MRT_TableInstance<D>;
   }) => ReactNode;
-  id: keyof D | string;
+  accessorFN?: (row: D) => any;
   columns?: MRT_ColumnDef<D>[];
   enableClickToCopy?: boolean;
   enableColumnActions?: boolean;
@@ -185,6 +189,7 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
   filterSelectOptions?: (string | { text: string; value: string })[];
   footer?: string;
   header: string;
+  id: keyof D | string;
   muiTableBodyCellCopyButtonProps?:
     | ButtonProps
     | (({
@@ -280,13 +285,12 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
 export type MRT_Column<D extends Record<string, any> = {}> = Omit<
   Column<D>,
   'header' | 'footer' | 'columns'
-> &
-  MRT_ColumnDef<D> & {
-    columns?: MRT_Column<D>[];
-    columnDef: MRT_ColumnDef<D>;
-    header: string;
-    footer: string;
-  };
+> & {
+  columns?: MRT_Column<D>[];
+  columnDef: MRT_ColumnDef<D>;
+  header: string;
+  footer: string;
+};
 
 export type MRT_Header<D extends Record<string, any> = {}> = Omit<
   Header<D>,
@@ -304,12 +308,13 @@ export type MRT_HeaderGroup<D extends Record<string, any> = {}> = Omit<
 
 export type MRT_Row<D extends Record<string, any> = {}> = Omit<
   Row<D>,
-  'getVisibleCells' | 'getAllCells' | 'subRows' | 'original'
+  'getVisibleCells' | 'getAllCells' | 'subRows' | 'original' | '_valuesCache'
 > & {
   getAllCells: () => MRT_Cell<D>[];
   getVisibleCells: () => MRT_Cell<D>[];
   subRows?: MRT_Row<D>[];
   original: D;
+  _valuesCache?: D;
 };
 
 export type MRT_Cell<D extends Record<string, any> = {}> = Omit<

package/src/body/MRT_TableBodyCell.tsx

@@ -39,15 +39,17 @@ export const MRT_TableBodyCell: FC<Props> = ({
 
   const { column, row } = cell;
 
+  const { columnDef } = column;
+
   const mTableCellBodyProps =
     muiTableBodyCellProps instanceof Function
       ? muiTableBodyCellProps({ cell, tableInstance })
       : muiTableBodyCellProps;
 
   const mcTableCellBodyProps =
-    column.muiTableBodyCellProps instanceof Function
-      ? column.muiTableBodyCellProps({ cell, tableInstance })
-      : column.muiTableBodyCellProps;
+    columnDef.muiTableBodyCellProps instanceof Function
+      ? columnDef.muiTableBodyCellProps({ cell, tableInstance })
+      : columnDef.muiTableBodyCellProps;
 
   const tableCellProps = {
     ...mTableCellBodyProps,
@@ -64,7 +66,8 @@ export const MRT_TableBodyCell: FC<Props> = ({
   );
 
   const isEditable =
-    (enableEditing || column.enableEditing) && column.enableEditing !== false;
+    (enableEditing || columnDef.enableEditing) &&
+    columnDef.enableEditing !== false;
 
   const isEditing =
     isEditable &&
@@ -74,8 +77,8 @@ export const MRT_TableBodyCell: FC<Props> = ({
 
   const handleDoubleClick = (_event: MouseEvent<HTMLTableCellElement>) => {
     if (
-      (enableEditing || column.enableEditing) &&
-      column.enableEditing !== false &&
+      (enableEditing || columnDef.enableEditing) &&
+      columnDef.enableEditing !== false &&
       editingMode === 'cell'
     ) {
       setCurrentEditingCell(cell);
@@ -160,7 +163,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
       })}
       style={{
         maxWidth: `min(${column.getSize()}px, fit-content)`,
-        minWidth: `max(${column.getSize()}px, ${column.minSize ?? 30}px)`,
+        minWidth: `max(${column.getSize()}px, ${columnDef.minSize ?? 30}px)`,
         width: column.getSize(),
       }}
     >
@@ -173,7 +176,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
             {...muiTableBodyCellSkeletonProps}
           />
         ) : column.columnDefType === 'display' ? (
-          column.columnDef.Cell?.({ cell, tableInstance })
+          columnDef.Cell?.({ cell, tableInstance })
         ) : cell.getIsPlaceholder() ||
           (row.getIsGrouped() &&
             column.id !==
@@ -181,8 +184,8 @@ export const MRT_TableBodyCell: FC<Props> = ({
           cell.renderAggregatedCell()
         ) : isEditing ? (
           <MRT_EditCellTextField cell={cell} tableInstance={tableInstance} />
-        ) : (enableClickToCopy || column.enableClickToCopy) &&
-          column.enableClickToCopy !== false ? (
+        ) : (enableClickToCopy || columnDef.enableClickToCopy) &&
+          columnDef.enableClickToCopy !== false ? (
           <>
             <MRT_CopyButton cell={cell} tableInstance={tableInstance}>
               <>

package/src/buttons/MRT_CopyButton.tsx

@@ -31,9 +31,12 @@ export const MRT_CopyButton: FC<Props> = ({
       : muiTableBodyCellCopyButtonProps;
 
   const mcTableBodyCellCopyButtonProps =
-    cell.column.muiTableBodyCellCopyButtonProps instanceof Function
-      ? cell.column.muiTableBodyCellCopyButtonProps({ cell, tableInstance })
-      : cell.column.muiTableBodyCellCopyButtonProps;
+    cell.column.columnDef.muiTableBodyCellCopyButtonProps instanceof Function
+      ? cell.column.columnDef.muiTableBodyCellCopyButtonProps({
+          cell,
+          tableInstance,
+        })
+      : cell.column.columnDef.muiTableBodyCellCopyButtonProps;
 
   const buttonProps = {
     ...mTableBodyCellCopyButtonProps,

package/src/buttons/MRT_ToggleColumnActionMenuButton.tsx

@@ -36,12 +36,13 @@ export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({
       : muiTableHeadCellColumnActionsButtonProps;
 
   const mcTableHeadCellColumnActionsButtonProps =
-    column.muiTableHeadCellColumnActionsButtonProps instanceof Function
-      ? column.muiTableHeadCellColumnActionsButtonProps({
+    column.columnDef.muiTableHeadCellColumnActionsButtonProps instanceof
+    Function
+      ? column.columnDef.muiTableHeadCellColumnActionsButtonProps({
           column,
           tableInstance,
         })
-      : column.muiTableHeadCellColumnActionsButtonProps;
+      : column.columnDef.muiTableHeadCellColumnActionsButtonProps;
 
   const iconButtonProps = {
     ...mTableHeadCellColumnActionsButtonProps,

package/src/footer/MRT_TableFooterCell.tsx

@@ -17,15 +17,17 @@ export const MRT_TableFooterCell: FC<Props> = ({ footer, tableInstance }) => {
 
   const { column } = footer;
 
+  const { columnDef } = column;
+
   const mTableFooterCellProps =
     muiTableFooterCellProps instanceof Function
       ? muiTableFooterCellProps({ column, tableInstance })
       : muiTableFooterCellProps;
 
   const mcTableFooterCellProps =
-    column.muiTableFooterCellProps instanceof Function
-      ? column.muiTableFooterCellProps({ column, tableInstance })
-      : column.muiTableFooterCellProps;
+    columnDef.muiTableFooterCellProps instanceof Function
+      ? columnDef.muiTableFooterCellProps({ column, tableInstance })
+      : columnDef.muiTableFooterCellProps;
 
   const tableCellProps = {
     ...mTableFooterCellProps,
@@ -57,11 +59,13 @@ export const MRT_TableFooterCell: FC<Props> = ({ footer, tableInstance }) => {
       <>
         {footer.isPlaceholder
           ? null
-          : column.columnDef.Footer?.({
+          : columnDef.Footer instanceof Function
+          ? columnDef.Footer?.({
               footer,
               tableInstance,
-            }) ??
-            column.columnDef.footer ??
+            })
+          : columnDef.Footer ??
+            columnDef.footer ??
             footer.renderFooter() ??
             null}
       </>

package/src/head/MRT_TableHeadCell.tsx

@@ -41,25 +41,31 @@ export const MRT_TableHeadCell: FC<Props> = ({
 
   const { column } = header;
 
+  const { columnDef, columnDefType } = column;
+
   const mTableHeadCellProps =
     muiTableHeadCellProps instanceof Function
       ? muiTableHeadCellProps({ column, tableInstance })
       : muiTableHeadCellProps;
 
   const mcTableHeadCellProps =
-    column.muiTableHeadCellProps instanceof Function
-      ? column.muiTableHeadCellProps({ column, tableInstance })
-      : column.muiTableHeadCellProps;
+    columnDef.muiTableHeadCellProps instanceof Function
+      ? columnDef.muiTableHeadCellProps({ column, tableInstance })
+      : columnDef.muiTableHeadCellProps;
 
   const tableCellProps = {
     ...mTableHeadCellProps,
     ...mcTableHeadCellProps,
   };
 
-  const headerElement = (column.columnDef?.Header?.({
-    header,
-    tableInstance,
-  }) ?? header.renderHeader()) as ReactNode;
+  const headerElement = (
+    column.columnDef?.Header instanceof Function
+      ? column.columnDef?.Header?.({
+          header,
+          tableInstance,
+        })
+      : column.columnDef?.Header ?? header.renderHeader()
+  ) as ReactNode;
 
   const getIsLastLeftPinnedColumn = () => {
     return (
@@ -83,13 +89,13 @@ export const MRT_TableHeadCell: FC<Props> = ({
 
   return (
     <TableCell
-      align={column.columnDefType === 'group' ? 'center' : 'left'}
+      align={columnDefType === 'group' ? 'center' : 'left'}
       colSpan={header.colSpan}
       {...tableCellProps}
-      ref={column.columnDefType === 'data' ? dropRef : undefined}
+      ref={columnDefType === 'data' ? dropRef : undefined}
       sx={(theme: Theme) => ({
         backgroundColor:
-          column.getIsPinned() && column.columnDefType !== 'group'
+          column.getIsPinned() && columnDefType !== 'group'
             ? alpha(lighten(theme.palette.background.default, 0.04), 0.95)
             : 'inherit',
         backgroundImage: 'inherit',
@@ -106,19 +112,19 @@ export const MRT_TableHeadCell: FC<Props> = ({
             : undefined,
         overflow: 'visible',
         p: isDensePadding
-          ? column.columnDefType === 'display'
+          ? columnDefType === 'display'
             ? '0 0.5rem'
             : '0.5rem'
-          : column.columnDefType === 'display'
+          : columnDefType === 'display'
           ? '0.5rem 0.75rem'
           : '1rem',
-        pb: column.columnDefType === 'display' ? 0 : undefined,
+        pb: columnDefType === 'display' ? 0 : undefined,
         position:
-          column.getIsPinned() && column.columnDefType !== 'group'
+          column.getIsPinned() && columnDefType !== 'group'
             ? 'sticky'
             : undefined,
         pt:
-          column.columnDefType === 'display'
+          columnDefType === 'display'
             ? 0
             : isDensePadding
             ? '0.75rem'
@@ -129,18 +135,18 @@ export const MRT_TableHeadCell: FC<Props> = ({
         verticalAlign: 'text-top',
         zIndex: column.getIsResizing()
           ? 3
-          : column.getIsPinned() && column.columnDefType !== 'group'
+          : column.getIsPinned() && columnDefType !== 'group'
           ? 2
           : 1,
         ...(tableCellProps?.sx as any),
       })}
       style={{
         maxWidth: `min(${column.getSize()}px, fit-content)`,
-        minWidth: `max(${column.getSize()}px, ${column.minSize ?? 30}px)`,
+        minWidth: `max(${column.getSize()}px, ${columnDef.minSize ?? 30}px)`,
         width: header.getSize(),
       }}
     >
-      {header.isPlaceholder ? null : column.columnDefType === 'display' ? (
+      {header.isPlaceholder ? null : columnDefType === 'display' ? (
         headerElement
       ) : (
         <Box
@@ -149,7 +155,7 @@ export const MRT_TableHeadCell: FC<Props> = ({
             alignItems: 'flex-start',
             display: 'flex',
             justifyContent:
-              column.columnDefType === 'group' ? 'center' : 'space-between',
+              columnDefType === 'group' ? 'center' : 'space-between',
             opacity: isDragging ? 0.5 : 1,
             width: '100%',
           }}
@@ -159,25 +165,23 @@ export const MRT_TableHeadCell: FC<Props> = ({
             sx={{
               alignItems: 'center',
               cursor:
-                column.getCanSort() && column.columnDefType !== 'group'
+                column.getCanSort() && columnDefType !== 'group'
                   ? 'pointer'
                   : undefined,
               display: 'flex',
               flexWrap: 'nowrap',
               whiteSpace:
-                (column.columnDef.header?.length ?? 0) < 24
-                  ? 'nowrap'
-                  : 'normal',
+                (columnDef.header?.length ?? 0) < 24 ? 'nowrap' : 'normal',
             }}
           >
             {headerElement}
-            {column.columnDefType === 'data' && column.getCanSort() && (
+            {columnDefType === 'data' && column.getCanSort() && (
               <MRT_TableHeadCellSortLabel
                 header={header}
                 tableInstance={tableInstance}
               />
             )}
-            {column.columnDefType === 'data' &&
+            {columnDefType === 'data' &&
               enableColumnFilters &&
               column.getCanFilter() && (
                 <MRT_TableHeadCellFilterLabel
@@ -187,19 +191,19 @@ export const MRT_TableHeadCell: FC<Props> = ({
               )}
           </Box>
           <Box sx={{ whiteSpace: 'nowrap' }}>
-            {column.columnDefType === 'data' &&
+            {columnDefType === 'data' &&
               ((enableColumnOrdering &&
-                column.enableColumnOrdering !== false) ||
-                (enableGrouping && column.enableGrouping !== false)) && (
+                columnDef.enableColumnOrdering !== false) ||
+                (enableGrouping && columnDef.enableGrouping !== false)) && (
                 <MRT_TableHeadCellGrabHandle
                   header={header}
                   ref={dragRef as Ref<HTMLButtonElement>}
                   tableInstance={tableInstance}
                 />
               )}
-            {(enableColumnActions || column.enableColumnActions) &&
-              column.enableColumnActions !== false &&
-              column.columnDefType !== 'group' && (
+            {(enableColumnActions || columnDef.enableColumnActions) &&
+              columnDef.enableColumnActions !== false &&
+              columnDefType !== 'group' && (
                 <MRT_ToggleColumnActionMenuButton
                   header={header}
                   tableInstance={tableInstance}
@@ -214,7 +218,7 @@ export const MRT_TableHeadCell: FC<Props> = ({
           )}
         </Box>
       )}
-      {column.columnDefType === 'data' && column.getCanFilter() && (
+      {columnDefType === 'data' && column.getCanFilter() && (
         <MRT_TableHeadCellFilterContainer
           header={header}
           tableInstance={tableInstance}

package/src/inputs/MRT_EditCellTextField.tsx

@@ -31,19 +31,22 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
 
   const { column, row } = cell;
 
+  const { columnDef } = column;
+
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value);
-    column.onCellEditChange?.({ event, cell, tableInstance });
+    columnDef.onCellEditChange?.({ event, cell, tableInstance });
     onCellEditChange?.({ event, cell, tableInstance });
   };
 
   const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
     if (getState().currentEditingRow) {
-      row._valuesCache[column.id] = value;
+      if (!row._valuesCache) row._valuesCache = {};
+      (row._valuesCache as Record<string, any>)[column.id] = value;
       setCurrentEditingRow({ ...getState().currentEditingRow } as MRT_Row);
     }
     setCurrentEditingCell(null);
-    column.onCellEditBlur?.({ event, cell, tableInstance });
+    columnDef.onCellEditBlur?.({ event, cell, tableInstance });
     onCellEditBlur?.({ event, cell, tableInstance });
   };
 
@@ -53,17 +56,20 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
       : muiTableBodyCellEditTextFieldProps;
 
   const mcTableBodyCellEditTextFieldProps =
-    column.muiTableBodyCellEditTextFieldProps instanceof Function
-      ? column.muiTableBodyCellEditTextFieldProps({ cell, tableInstance })
-      : column.muiTableBodyCellEditTextFieldProps;
+    columnDef.muiTableBodyCellEditTextFieldProps instanceof Function
+      ? columnDef.muiTableBodyCellEditTextFieldProps({
+          cell,
+          tableInstance,
+        })
+      : columnDef.muiTableBodyCellEditTextFieldProps;
 
   const textFieldProps = {
     ...mTableBodyCellEditTextFieldProps,
     ...mcTableBodyCellEditTextFieldProps,
   };
 
-  if (enableEditing && column.enableEditing !== false && column.Edit) {
-    return <>{column.Edit?.({ cell, tableInstance })}</>;
+  if (enableEditing && columnDef.enableEditing !== false && columnDef.Edit) {
+    return <>{columnDef.Edit?.({ cell, tableInstance })}</>;
   }
 
   return (
@@ -73,7 +79,7 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
       onBlur={handleBlur}
       onChange={handleChange}
       onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
-      placeholder={column.columnDef.header}
+      placeholder={columnDef.header}
       value={value}
       variant="standard"
       {...textFieldProps}

package/src/inputs/MRT_FilterTextField.tsx

@@ -43,6 +43,8 @@ export const MRT_FilterTextField: FC<Props> = ({
 
   const { column } = header;
 
+  const { columnDef } = column;
+
   const { currentFilterFns } = getState();
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -53,9 +55,12 @@ export const MRT_FilterTextField: FC<Props> = ({
       : muiTableHeadCellFilterTextFieldProps;
 
   const mcTableHeadCellFilterTextFieldProps =
-    column.muiTableHeadCellFilterTextFieldProps instanceof Function
-      ? column.muiTableHeadCellFilterTextFieldProps({ column, tableInstance })
-      : column.muiTableHeadCellFilterTextFieldProps;
+    columnDef.muiTableHeadCellFilterTextFieldProps instanceof Function
+      ? columnDef.muiTableHeadCellFilterTextFieldProps({
+          column,
+          tableInstance,
+        })
+      : columnDef.muiTableHeadCellFilterTextFieldProps;
 
   const textFieldProps = {
     ...mTableHeadCellFilterTextFieldProps,
@@ -109,15 +114,15 @@ export const MRT_FilterTextField: FC<Props> = ({
     }));
   };
 
-  if (column.Filter) {
-    return <>{column.Filter?.({ header, tableInstance })}</>;
+  if (columnDef.Filter) {
+    return <>{columnDef.Filter?.({ header, tableInstance })}</>;
   }
 
   const filterId = `mrt-${idPrefix}-${header.id}-filter-text-field${
     inputIndex ?? ''
   }`;
   const filterFn = currentFilterFns?.[header.id];
-  const isSelectFilter = !!column.filterSelectOptions;
+  const isSelectFilter = !!columnDef.filterSelectOptions;
   const filterChipLabel =
     !(filterFn instanceof Function) &&
     [MRT_FILTER_OPTION.EMPTY, MRT_FILTER_OPTION.NOT_EMPTY].includes(
@@ -132,14 +137,14 @@ export const MRT_FilterTextField: FC<Props> = ({
     inputIndex === undefined
       ? localization.filterByColumn?.replace(
           '{column}',
-          String(column.columnDef.header),
+          String(columnDef.header),
         )
       : inputIndex === 0
       ? localization.min
       : inputIndex === 1
       ? localization.max
       : '';
-
+  console.log({ textFieldProps });
   return (
     <>
       <TextField
@@ -252,7 +257,7 @@ export const MRT_FilterTextField: FC<Props> = ({
         sx={{
           m: '-0.25rem',
           p: 0,
-          minWidth: !filterChipLabel ? '6rem' : 'auto',
+          minWidth: !filterChipLabel ? '8rem' : 'auto',
           width: 'calc(100% + 0.5rem)',
           mt: isSelectFilter && !filterValue ? '-1rem' : undefined,
           '&	.MuiSelect-icon': {
@@ -266,7 +271,7 @@ export const MRT_FilterTextField: FC<Props> = ({
             {localization.clearFilter}
           </MenuItem>
         )}
-        {column?.filterSelectOptions?.map((option) => {
+        {columnDef?.filterSelectOptions?.map((option) => {
           let value;
           let text;
           if (typeof option === 'string') {

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -60,6 +60,8 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
 
   const { column } = header;
 
+  const { columnDef } = column;
+
   const { columnSizing, columnVisibility, isDensePadding } = getState();
 
   const [filterMenuAnchorEl, setFilterMenuAnchorEl] =
@@ -178,7 +180,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
               </ListItemIcon>
               {localization.sortByColumnAsc?.replace(
                 '{column}',
-                String(column.columnDef.header),
+                String(columnDef.header),
               )}
             </Box>
           </MenuItem>,
@@ -195,7 +197,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
               </ListItemIcon>
               {localization.sortByColumnDesc?.replace(
                 '{column}',
-                String(column.columnDef.header),
+                String(columnDef.header),
               )}
             </Box>
           </MenuItem>,
@@ -227,10 +229,10 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
               </ListItemIcon>
               {localization.filterByColumn?.replace(
                 '{column}',
-                String(column.columnDef.header),
+                String(columnDef.header),
               )}
             </Box>
-            {!column.filterSelectOptions && (
+            {!columnDef.filterSelectOptions && (
               <IconButton
                 onClick={handleOpenFilterModeMenu}
                 onMouseEnter={handleOpenFilterModeMenu}
@@ -264,7 +266,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
               </ListItemIcon>
               {localization[
                 column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn'
-              ]?.replace('{column}', String(column.columnDef.header))}
+              ]?.replace('{column}', String(columnDef.header))}
             </Box>
           </MenuItem>,
         ]}
@@ -328,7 +330,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
       ]}
       {enableHiding && [
         <MenuItem
-          disabled={column.enableHiding === false}
+          disabled={columnDef.enableHiding === false}
           key={0}
           onClick={handleHideColumn}
           sx={commonMenuItemStyles}
@@ -339,7 +341,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             </ListItemIcon>
             {localization.hideColumn?.replace(
               '{column}',
-              String(column.columnDef.header),
+              String(columnDef.header),
             )}
           </Box>
         </MenuItem>,
@@ -358,7 +360,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             </ListItemIcon>
             {localization.showAllColumns?.replace(
               '{column}',
-              String(column.columnDef.header),
+              String(columnDef.header),
             )}
           </Box>
           <IconButton