CODEWITHSUNDEEP
datagridmaterial-ui
Robert
Robert

Reputation: 273

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

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.

enter image description here

Upvotes: 21

Views: 26087

Answers (5)

Ömer Keskinkilic
Ömer Keskinkilic

Reputation: 83

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.

Column header with Filter option

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

Upvotes: 0

Neil Gaetano Lindberg
Neil Gaetano Lindberg

Reputation: 2935

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

Result of using the outlined Custom Column Menu

Upvotes: 8

T04435
T04435

Reputation: 13992

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

Upvotes: 0

luis
luis

Reputation: 137

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.

remove-show-hide-from-menu

disableColumnSelector_code

Upvotes: 8

Serik Akimgereyev
Serik Akimgereyev

Reputation: 41

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.

Upvotes: 3

Related Questions