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

Question

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

标签： datagridmaterial-ui

Answer 1

您可以通过创建自定义菜单并仅包括过滤器和排序菜单选项来做到这一点。

// 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}
        >
            <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
                        }}
                    />