Search code examples
reactjsdatagridmaterial-ui

How to disable the menu button option in DataGrid MUI?


I want to disable the button that pops all the options like: Sort, Filter, Hide, Etc.

enter image description here

I know you can remove the sorting option in the columns with sortable: false and if I want to remove everything else then I can simply use Both of this disableColumnFilter to remove the filter and disableColumnSelector to remove pretty much everything else However even if I remove all the options the button is still there and I want to remove it.

enter image description here


Solution

  • I should have done more research before asking but I found the answer after checking for something else.

    So you have 3 'modifiers'

    • disableColumnMenu
    • disableColumnFilter
    • disableColumnSelector

    disableColumnMenu will completely remove the button with the options disableColumnFilter will just remove the filter option disableColumnSelector will remove the hide/show columns

    you can check the sort true/false while creating the columns with a simple sortable = true/false

    Ej:

    const columns = [
            { field: 'name', headerName: 'Name', width: 450, sortable: true/false}
          ]
    

    And this is how it looks with disableColumnMenu it doesn't show the button anymore at all

    enter image description here