reactjsmaterial-uimui-x-data-grid

How to hide the options menu for only one column in MUI X Data Grid?

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

Solution

  • 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