CODEWITHSUNDEEP
reactjsmaterial-ui
Normal
Normal

Reputation: 3736

How to hide the options menu for only one column in MUI datagrid?

I am using MUI x (community version) and I want to hide the options' menu from a particular column, not for all the columns. I still want the others to display this menu, but only for this column, I want to hide it. How?

disableColumnMenu disables it for all the columns.

// const columns = [ ... etc, then eventually
{ field: 'actionMenu', headerName: strings.actions, sortable: false, filterable: false },
// ]

<DataGrid
  disableSelectionOnClick
  rows={rows}
  columns={columns}
  density="compact"
  loading={isLoading}
  components={{ Toolbar: GridToolbar }}
  localeText={{
    noRowsLabel: strings.noModerators,
  }}
/>

enter image description here

Upvotes: 6

Views: 5130

Answers (2)

Normal
Normal

Reputation: 3736

If you're trying to achieve what I was trying to achieve in the question, MUI provides a built-in way to create an "actions" column.

the columns with type actions have no column menu by default.

The "actions column" will include "action cells", the action cells may have buttons, or maybe a menu button where you click and drop a listed menu with other buttons.

Using the built-in way is a better decision because it makes your action column compatible with the already built-in data grid filters.

To declare an action column, in your column definition, use the type: 'actions' property with the getActions: (cell) => [] property, and with the <GridActionsCellItem /> component, example:

export default function ProductsDataGrid() {
  const columns = [
    {
      field: "name",
      width: 200,
      type: "string",
    },
    {
      field: "price",
      width: 100,
      type: "number",
    },
    {
      field: "actions",
      type: "actions",
      width: 100,
      getActions: (cell) => [
        <GridActionsCellItem
          label="delete"
          icon={<DeleteIcon />}
          onClick={() => openDeleteModal(cell.row)}
        />,
      ],
    },
  ];

  const data = [{ name: "Egg", price: 20 }];

  return <DataGrid columns={columns} rows={data} autoHeight />;
}

This will result in showing a delete button inside a cell.

If you want it to show up inside the menu, just use the showInMenu prop:

 <GridActionsCellItem
  showInMenu
  label="delete"
  icon={<DeleteIcon />}
  onClick={() => openDeleteModal(cell.row)}
/>,

The actions column by default doesn't have a filter, and it won't show you the header actions.

Upvotes: 0

Akis
Akis

Reputation: 2282

You are very close.

Try this one in the field you want to hide the menu

{ 
  field: 'actionMenu', 
  headerName: strings.actions, 
  sortable: false, 
  filterable: false, 
  disableColumnMenu: true // This will hide it only for the Actions column
},

Also please have a look at this working codesandbox, I am hiding the menu only for the 'Age' column and the rest they display the menu on hover

Upvotes: 9

Related Questions