如何移除MUI DataGrid列显示/隐藏面板中的指定选项

我需要控制MUI DataGrid工具栏内<GridToolbarColumnsButton/>弹出的列选择面板中显示的列（列面板包含多个列选项，目标是隐藏名为'Commodity'的选项）。

首选方案需求 #

希望通过官方API实现，但未找到相关功能，也没有<GridToolbarColumnsButton/>的详细文档。

当前临时解决方案 #

通过原生JS定位面板中包含文本'Commodity'的行，添加自定义类名后，在DataGrid的componentsProps中设置该类的display: none来隐藏：

useEffect(() => {
  const divs = document.querySelectorAll('div .MuiDataGrid-columnsPanelRow');
  for (let i = 0; i < divs.length; i++) {
    if (divs[i].textContent === 'Commodity') {
      divs[i].classList.add("column-panel-cust");
    }
  }
});

<DataGridPro
  // 其他配置...
  componentsProps={{
    panel: {
      sx: {
        paddingTop: '15px',
        '& .column-panel-cust': {
          display: 'none',
        },
      },
    },
  }}
/>

存在的问题 #

列面板在初始渲染时并未挂载，必须打开面板并触发强制重渲染后，'Commodity'选项才会被隐藏。

官方API解决方案（推荐） #

MUI DataGrid其实提供了直接控制列是否在选择面板中显示的配置项，无需通过原生JS操作DOM：

在定义列数组时，给目标列添加hideInColumnsPanel: true属性即可：

const columns = [
  // 其他列配置...
  {
    field: 'commodity',
    headerName: 'Commodity',
    hideInColumnsPanel: true, // 关键配置：让该列不在选择面板中显示
    // 其他列属性...
  },
];

<DataGridPro
  columns={columns}
  // 其他配置...
/>

该方案完全基于官方API实现，规避了DOM操作带来的时序问题，是更稳定可靠的解决方式。

内容的提问来源于stack exchange，提问作者user3377364