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.

Answer 1

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}
        >
            <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
                        }}
                    />

Answer 2

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.