[data grid] How to hide the checkbox selection field from the columns menu panel

[ak-mid]

Order ID 💳

35878

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

The problem in depth 🔍

I'm using the data grid with checkboxSelection enabled. That means the first column of my grid are checkbox cells. Now I want to hide that checkbox column from the columns menu panel completely.

The only possible setting I saw was hideable: false, which only deactivates the toggle switch but doesn't hide it. Is there a way to hide (remove) the checkbox field completely from the columns menu panel?

BTW: I tried to use { field: '__check__', hideable: false } which will also remove all checkboxes from the grid cells which looks like a bug to me.

Your environment 🌎

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[flaviendelangle]

It is currently not possible to hide instead of disabling the toggle. We could add a hideDisableLines prop to ColumnsPanel to customize this behavior.

@alexfauquette what do you think ?

---

BTW: I tried to use { field: 'check', hideable: false } which will also remove all checkboxes from the grid cells which looks like a bug to me.

This one is being discussed on https://github.com/mui/mui-x/issues/3420 If you add a __check__ column, the grid takes for granted that the column you give is a valid selection column and therefore does not add its own.

[alexfauquette]

I see a conflict about the future reordering columns feature?

If I have the following columns

• col A
• col B (disabled and hidden)
• col C
• col D

When dragging "col D" between A and C. Should it be placed between A and B or between B and C

[flaviendelangle]

True

I will add the "Waiting for upvote" to see how much this feature is needed.

[ak-mid]

Is there a CSS solution to hide the first row? I tried to access the columnsPanel via sx prop but failed.

componentsProps={{
  columnsPanel: {
    sx: {
      "& .MuiDataGrid-panelContent": { backgroundColor: "blue" }
          }
    }
}}

[flaviendelangle]

https://codesandbox.io/s/datagrid-v5-quick-start-forked-zdrlhv?file=/src/App.tsx

Seems like we aren't passing the props of GridColumnsPanel to the DOM But the following is working because we do pass the props of GridPanel to the DOM which is the parent of GridColumnsPanel.

        componentsProps={{
          panel: {
            sx: {
              [`& .MuiDataGrid-columnsPanel > div:first-child`]: {
                display: "none"
              }
            }
          }
        }}

[alexfauquette]

@ak-mid Seems that it's a bug from our side

The property you specify componentsProps?.columnsPanel is passed to the columnPanel:

https://github.com/alexfauquette/material-ui-x/blob/ab686675f7c25a8dd6099e20f0822bd4a3c265e4/packages/grid/x-data-grid/src/components/panel/GridPreferencesPanel.tsx#L32:L33

But the default GridColumnsPanel does not accept props. https://github.com/alexfauquette/material-ui-x/blob/ab686675f7c25a8dd6099e20f0822bd4a3c265e4/packages/grid/x-data-grid/src/components/panel/GridColumnsPanel.tsx#L61:L61

I'm opening a dedicated issue for that

[ak-mid]

@flaviendelangle Thanks for the code snippet. That did work out for me!

[reedasha]

@flaviendelangle doesn't this break the search then? If you search for a column it will also hide the first result

[Ankur-Marwaha]

This is possible in newer mui version (7.3.1) This screenshot explains how you can do it.

After doing this, you will not see the option in the columns section. and still see the checkboxes in the table.

[flaviendelangle]

Thanks a lot for your detailed example It seems that this issue was missed when getToggableColumns was introduced I think we can close the issue @cherniavskii , I let you do it or re-purpose it for doc improvement if the feature is not correctly documented :pray:

[suretrust]

For those that have the older version of MUI and looking to hide all disabled fields, you can hide them without breaking the search using:

slotProps={{
  panel: {
    sx: {
      // hide disabled columns from the column panel
      '& .MuiDataGrid-columnsPanel > div:has(input:disabled)': {
        display: 'none',
       },
     }
   },
}}

[flaviendelangle]

@michelengelen I let you check if we can close this issue :+1:

[michelengelen]

IMO there is enough information for anyone searching for a solution. I'll close it, but feel free to add comments if you encounter any problems with the solutions provided here! Thanks @all! 🙇

[github-actions[bot]]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

[!NOTE] We value your feedback @ak-mid! How was your experience with our support team? If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!