material-react-table 0.8.9 → 0.8.12

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 = (
+    columnDef?.Header instanceof Function
+      ? columnDef?.Header?.({
+          header,
+          tableInstance,
+        })
+      : 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,41 +112,36 @@ 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'
-            ? 0
-            : isDensePadding
-            ? '0.75rem'
-            : '1.25rem',
+        pt: columnDefType !== 'data' ? 0 : isDensePadding ? '0.25' : '.5rem',
         right:
           column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined,
         transition: `all ${enableColumnResizing ? 0 : '0.2s'} ease-in-out`,
         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 +150,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 +160,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 +186,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 +213,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/head/MRT_TableHeadCellFilterLabel.tsx

@@ -24,11 +24,13 @@ export const MRT_TableHeadCellFilterLabel: FC<Props> = ({
 
   const { column } = header;
 
+  const { columnDef } = column;
+
   const filterFn = getState()?.currentFilterFns?.[header.id];
 
   const filterTooltip = !!column.getFilterValue()
     ? localization.filteringByColumn
-        .replace('{column}', String(column.columnDef.header))
+        .replace('{column}', String(columnDef.header))
         .replace(
           '{filterType}',
           filterFn instanceof Function

package/src/head/MRT_TableHeadCellResizeHandle.tsx

@@ -17,6 +17,8 @@ export const MRT_TableHeadCellResizeHandle: FC<Props> = ({
 
   const { column } = header;
 
+  const { columnDefType } = column;
+
   return (
     <Divider
       flexItem
@@ -26,8 +28,7 @@ export const MRT_TableHeadCellResizeHandle: FC<Props> = ({
         borderRadius: '2px',
         borderRightWidth: '2px',
         cursor: 'col-resize',
-        height:
-          showFilters && column.columnDefType === 'data' ? '4rem' : '2rem',
+        height: showFilters && columnDefType === 'data' ? '4rem' : '2rem',
         opacity: 0.8,
         position: 'absolute',
         right: '1px',

package/src/head/MRT_TableHeadCellSortLabel.tsx

@@ -17,16 +17,12 @@ export const MRT_TableHeadCellSortLabel: FC<Props> = ({
 
   const { column } = header;
 
+  const { columnDef } = column;
+
   const sortTooltip = !!column.getIsSorted()
     ? column.getIsSorted() === 'desc'
-      ? localization.sortedByColumnDesc.replace(
-          '{column}',
-          column.columnDef.header,
-        )
-      : localization.sortedByColumnAsc.replace(
-          '{column}',
-          column.columnDef.header,
-        )
+      ? localization.sortedByColumnDesc.replace('{column}', columnDef.header)
+      : localization.sortedByColumnAsc.replace('{column}', columnDef.header)
     : localization.unsorted;
 
   return (

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,7 +137,7 @@ export const MRT_FilterTextField: FC<Props> = ({
     inputIndex === undefined
       ? localization.filterByColumn?.replace(
           '{column}',
-          String(column.columnDef.header),
+          String(columnDef.header),
         )
       : inputIndex === 0
       ? localization.min
@@ -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/localization.ts

@@ -37,6 +37,7 @@ export interface MRT_Localization {
   pinToLeft: string;
   pinToRight: string;
   resetColumnSize: string;
+  resetOrder: string;
   rowActions: string;
   rowNumber: string;
   rowNumbers: string;
@@ -104,6 +105,7 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   pinToLeft: 'Pin to left',
   pinToRight: 'Pin to right',
   resetColumnSize: 'Reset column size',
+  resetOrder: 'Reset order',
   rowActions: 'Row Actions',
   rowNumber: '#',
   rowNumbers: 'Row Numbers',

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

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -47,6 +47,10 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
   const { isDensePadding, currentFilterFns, currentGlobalFilterFn } =
     getState();
 
+  const { column } = header ?? {};
+
+  const { columnDef } = column ?? {};
+
   const filterOptions: {
     option: MRT_FILTER_OPTION;
     label: string;
@@ -122,9 +126,9 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
           fn: notEmpty,
         },
       ].filter((filterType) =>
-        header
-          ? !header.column.enabledColumnFilterOptions ||
-            header.column.enabledColumnFilterOptions.includes(filterType.option)
+        columnDef
+          ? !columnDef.enabledColumnFilterOptions ||
+            columnDef.enabledColumnFilterOptions.includes(filterType.option)
           : (!enabledGlobalFilterOptions ||
               enabledGlobalFilterOptions.includes(filterType.option)) &&
             [MRT_FILTER_OPTION.FUZZY, MRT_FILTER_OPTION.CONTAINS].includes(
@@ -135,7 +139,7 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
   );
 
   const handleSelectFilterType = (value: MRT_FILTER_OPTION) => {
-    if (header) {
+    if (header && column) {
       setCurrentFilterFns((prev: { [key: string]: MRT_FilterFn }) => ({
         ...prev,
         [header.id]: value,
@@ -143,11 +147,11 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
       if (
         [MRT_FILTER_OPTION.EMPTY, MRT_FILTER_OPTION.NOT_EMPTY].includes(value)
       ) {
-        header.column.setFilterValue(' ');
+        column.setFilterValue(' ');
       } else if (value === MRT_FILTER_OPTION.BETWEEN) {
-        header.column.setFilterValue(['', '']);
+        column.setFilterValue(['', '']);
       } else {
-        header.column.setFilterValue('');
+        column.setFilterValue('');
       }
     } else {
       setCurrentGlobalFilterFn(value);

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useMemo } from 'react';
 import { Button, Menu, Divider, Box } from '@mui/material';
 import { MRT_ShowHideColumnsMenuItems } from './MRT_ShowHideColumnsMenuItems';
-import { MRT_Column, MRT_TableInstance } from '..';
+import type { MRT_Column, MRT_TableInstance } from '..';
 
 interface Props {
   anchorEl: HTMLElement | null;
@@ -18,42 +18,36 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
 }) => {
   const {
     getAllColumns,
+    getAllLeafColumns,
     getIsAllColumnsVisible,
-    getIsSomeColumnsVisible,
     getIsSomeColumnsPinned,
+    getIsSomeColumnsVisible,
     getState,
     toggleAllColumnsVisible,
-    getAllLeafColumns,
-    options: { localization, enablePinning },
+    options: { localization, enablePinning, enableColumnOrdering },
   } = tableInstance;
 
-  const { isDensePadding } = getState();
+  const { isDensePadding, columnOrder, columnPinning } = getState();
 
   const hideAllColumns = () => {
     getAllLeafColumns()
-      .filter((col) => col.enableHiding !== false)
+      .filter((col) => col.columnDef.enableHiding !== false)
       .forEach((col) => col.toggleVisibility(false));
   };
 
-  const allDisplayColumns = useMemo(
-    () => getAllColumns().filter((col) => col.columnDefType === 'display'),
-    [getAllColumns()],
-  );
-
-  const allDataColumns: (MRT_Column | null)[] = useMemo(() => {
-    const dataColumns = getAllColumns().filter(
-      (col) => col.columnDefType !== 'display',
-    );
-    return getIsSomeColumnsPinned()
-      ? [
-          ...dataColumns.filter((c) => c.getIsPinned() === 'left'),
-          null,
-          ...dataColumns.filter((c) => c.getIsPinned() === false),
-          null,
-          ...dataColumns.filter((c) => c.getIsPinned() === 'right'),
-        ]
-      : dataColumns;
-  }, [getAllColumns(), getState().columnPinning, getIsSomeColumnsPinned()]);
+  const allColumns = useMemo(() => {
+    const columns = getAllColumns();
+    if (
+      columnOrder.length > 0 &&
+      !columns.some((col) => col.columnDefType === 'group')
+    ) {
+      return (
+        columnOrder.map((colId) => columns.find((col) => col.id === colId)) ??
+        columns
+      );
+    }
+    return columns;
+  }, [getAllColumns(), columnOrder, columnPinning]) as MRT_Column[];
 
   return (
     <Menu
@@ -80,6 +74,11 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
             {localization.hideAll}
           </Button>
         )}
+        {!isSubMenu && enableColumnOrdering && (
+          <Button onClick={() => tableInstance.resetColumnOrder()}>
+            {localization.resetOrder}
+          </Button>
+        )}
         {!isSubMenu && enablePinning && (
           <Button
             disabled={!getIsSomeColumnsPinned()}
@@ -96,7 +95,7 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
         </Button>
       </Box>
       <Divider />
-      {allDisplayColumns.map((column, index) => (
+      {allColumns.map((column, index) => (
         <MRT_ShowHideColumnsMenuItems
           column={column}
           isSubMenu={isSubMenu}
@@ -104,19 +103,6 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
           tableInstance={tableInstance}
         />
       ))}
-      <Divider />
-      {allDataColumns.map((column, index) =>
-        column ? (
-          <MRT_ShowHideColumnsMenuItems
-            column={column}
-            isSubMenu={isSubMenu}
-            key={`${index}-${column.id}`}
-            tableInstance={tableInstance}
-          />
-        ) : (
-          <Divider key={`${index}-divider`} />
-        ),
-      )}
     </Menu>
   );
 };

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { FormControlLabel, MenuItem, Switch } from '@mui/material';
-import type { MRT_Column, MRT_TableInstance } from '..';
 import { MRT_ColumnPinningButtons } from '../buttons/MRT_ColumnPinningButtons';
+import type { MRT_Column, MRT_TableInstance } from '..';
 
 interface Props {
   column: MRT_Column;
@@ -21,13 +21,15 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
 
   const { columnVisibility } = getState();
 
+  const { columnDef, columnDefType } = column;
+
   const switchChecked =
-    (column.columnDefType !== 'group' && column.getIsVisible()) ||
-    (column.columnDefType === 'group' &&
+    (columnDefType !== 'group' && column.getIsVisible()) ||
+    (columnDefType === 'group' &&
       column.getLeafColumns().some((col) => col.getIsVisible()));
 
   const handleToggleColumnHidden = (column: MRT_Column) => {
-    if (column.columnDefType === 'group') {
+    if (columnDefType === 'group') {
       column?.columns?.forEach?.((childColumn: MRT_Column) => {
         childColumn.toggleVisibility(!switchChecked);
       });
@@ -59,11 +61,18 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
           />
         )}
         <FormControlLabel
-          componentsProps={{ typography: { sx: { marginBottom: 0 } } }}
+          componentsProps={{
+            typography: {
+              sx: {
+                marginBottom: 0,
+                opacity: columnDefType !== 'display' ? 1 : 0.5,
+              },
+            },
+          }}
           checked={switchChecked}
           control={<Switch />}
           disabled={(isSubMenu && switchChecked) || !column.getCanHide()}
-          label={column.columnDef.header}
+          label={columnDef.header}
           onChange={() => handleToggleColumnHidden(column)}
         />
       </MenuItem>