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