如何禁用特定的 Material-UI DataGrid 列菜单选项？

Question

我知道 'disableColumnMenu' 将禁用整个列，将 'sortable' 和 'filterable' 设置为 false 将删除该列的这些选项。有没有办法禁用特定的菜单选项，或者以其他方式修改列菜单？我想保持列可排序和可过滤，但删除“显示”和“隐藏”选项。

Answer 1

要从列菜单中删除“显示”列和“隐藏”菜单项，我刚刚将其添加disableColumnSelector到 DataGrid 组件中，如下面的代码图像所示。

Answer 2

您可以通过创建自定义菜单并仅包含过滤器和排序菜单选项来实现此目的。

// Assuming other imports such as React...

import {
    GridColumnMenuContainer, 
    GridFilterMenuItem, 
    SortGridMenuItems
} from '@material-ui/data-grid';

const CustomColumnMenu = (props) => {
    const { hideMenu, currentColumn } = props;
    return (
        <GridColumnMenuContainer
            hideMenu={hideMenu}
            currentColumn={currentColumn} 
            {...props}
        >
            <SortGridMenuItems onClick={hideMenu} column={currentColumn} />
            <GridFilterMenuItem onClick={hideMenu} column={currentColumn} />
        </GridColumnMenuContainer>
    );
};

export default CustomColumnMenu;

然后，在网格中使用它，如下所示：

// Assuming imports are done including DataGrid, CustomColumnMenu, and React...
                    <DataGrid
                        // Assuming: rows, rowHeight, etc...
                        components={{
                            ColumnMenu: CustomColumnMenu
                        }}
                    />

Answer 3

还有一个属性disableColumnSelector={true}（传递给DataGrid组件），但是它将禁用所有列的列选择，而不仅仅是1个特定的列标题。