How can you disable specific Material-UI DataGrid Column Menu options?

Question

I know that 'disableColumnMenu' will disable the entire column, and setting 'sortable' and 'filterable' to false will remove those options for that column. Is there a way to disable specific menu options, or otherwise modify the column menu? I want to keep the columns sortable and filterable, but remove the 'show' and 'hide' options.

Gorgonian

Answer 1

To remove the "Show"-columns and "Hide" menu items from the column menu, I just added the disableColumnSelector to the DataGrid Component as show in the code image below.

Constance

This option disableColumnSelector removes only the showColumn option, but not the hide option. How can the hide option be removed? – Grunberg

@Nemanja Milosavljevic : I'm able to remove both items from the menu. Can you post code or something that allows me to see what you are seeing? – Constance

@NemanjaMilosavljevic column hide property is now deprecated mui.com/x/react-data-grid/column-visibility/… – Donohoe

Answer 2

You can do this by creating a custom menu and only including the filter and sort menu options.

// Assuming other imports such as React...

import {
    GridColumnMenuContainer, 
    GridFilterMenuItem, 
    SortGridMenuItems
} from '@material-ui/data-grid';

const CustomColumnMenu = (props) => {
    const { hideMenu, currentColumn } = props;
    return (
        <GridColumnMenuContainer
            hideMenu={hideMenu}
            currentColumn={currentColumn} 
            {...props}
        >
            <SortGridMenuItems onClick={hideMenu} column={currentColumn} />
            <GridFilterMenuItem onClick={hideMenu} column={currentColumn} />
        </GridColumnMenuContainer>
    );
};

export default CustomColumnMenu;

Then, use it in your grid like so:

// Assuming imports are done including DataGrid, CustomColumnMenu, and React...
                    <DataGrid
                        // Assuming: rows, rowHeight, etc...
                        components={{
                            ColumnMenu: CustomColumnMenu
                        }}
                    />

Devonadevondra

After implementing this, if I clicked on the menu button, it worked as expected and displayed only the items I wanted. However, I would receive an error in my console: Failed prop type: The prop open is marked as required in ForwardRef(GridColumnMenuContainer), but its value is undefined. After much experimentation I fixed it by adding {...props} to the component like this: <GridColumnMenuContainer {...props} hideMenu={hideMenu} currentColumn={currentColumn}> Thanks Neil! With my small edit, your solution works great. – Marsden

your response is deprecated as the API changed. – Hardened

Answer 3

There is also a prop disableColumnSelector={true} (passed to DataGrid component), however it will disable column selection for all columns, not only 1 specific column header.

Stony

How do we remove specific column from the Show/Hide Columns menu? – Fad

Answer 4

You can do this by using the hideable field in the columns definitions.

const columns: Array<GridColDef> = [
  {
    field: 'foo',
    hideable: false
  },
  // ... other cols 
]

<DataGrid columns={columns} rows={rows} />

Pernick

Answer 5

This is not the ideal answer, but can be helpful for a specific use case for version 5.

In my case, I have the toolbar with filter option, and I wanted to remove the Filter from the options in column menu header.

There are couple of options, like creating a custom header. What I did is to add display none property to the element:

 <DataGrid
      {...props}
      componentsProps={{
        columnMenu: {
          sx: {
            "& li:nth-child(4)": {
              // Filter is the 4th item in the column menu
              display: "none",
            },
          },
        },
      }}
    />

Opus