如何禁用MUI DataGrid列菜单面板中的复选框选择切换项

我正在用MUI DataGridPro组件，加了checkboxSelection属性实现行选择复选框，效果没问题。当前代码是这样的：

<DataGridPro
  sortingOrder={['asc', 'desc']} 
  checkboxSelection
  disableColumnMenu
  disableSelectionOnClick
  columnBuffer={Number.MAX_SAFE_INTEGER}
  components={{
    Toolbar: GridToolbar,
  }}
/>

现在想禁用列菜单面板里的复选框选择切换项，自定义列可以加hideable: false来禁用切换，但复选框选择是内置列，不知道怎么处理，求可行的实现方法？

方法1：修改内置选择列的隐藏属性 #

通过getColumnProps方法定位到内置的checkboxSelection列，把它的hideable设为false，这样列菜单里就不会出现它的切换选项了：

<DataGridPro
  sortingOrder={['asc', 'desc']} 
  checkboxSelection
  disableSelectionOnClick
  columnBuffer={Number.MAX_SAFE_INTEGER}
  components={{
    Toolbar: GridToolbar,
  }}
  getColumnProps={(params) => {
    // 匹配内置的选择列
    if (params.field === 'checkboxSelection') {
      return { hideable: false };
    }
    return {};
  }}
/>

注意要把原来的disableColumnMenu删掉，不然整个列菜单都会被禁用，达不到只隐藏选择列切换项的目的。

方法2：自定义列菜单过滤选项 #

如果需要更灵活的控制，可以自己写个列菜单组件，把选择列的选项过滤掉：

import { GridColumnMenu, GridColumnMenuItems } from '@mui/x-data-grid-pro';

const CustomColumnMenu = (props) => {
  // 过滤掉checkboxSelection列的切换项
  const filteredMenuItems = props.items.filter(item => item.field !== 'checkboxSelection');
  
  return (
    <GridColumnMenu {...props}>
      <GridColumnMenuItems items={filteredMenuItems} {...props} />
    </GridColumnMenu>
  );
};

// 在DataGridPro中使用自定义菜单
<DataGridPro
  sortingOrder={['asc', 'desc']} 
  checkboxSelection
  disableSelectionOnClick
  columnBuffer={Number.MAX_SAFE_INTEGER}
  components={{
    Toolbar: GridToolbar,
    ColumnMenu: CustomColumnMenu,
  }}
/>

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