如何隐藏 MUI 数据网格中只有一列的选项菜单？答案

【问题标题】：How to hide the options menu for only one column in MUI datagrid?如何隐藏 MUI 数据网格中只有一列的选项菜单？
【发布时间】：2023-01-20 15:36:50
【问题描述】：

我正在使用 MUI x（社区版），我想隐藏特定列的选项菜单，而不是所有列。我仍然希望其他人显示此菜单，但仅针对此列，我想隐藏它。如何？

disableColumnMenu 为所有列禁用它。

// const columns = [ ... etc, then eventually
{ field: 'actionMenu', headerName: strings.actions, sortable: false, filterable: false },
// ]

<DataGrid
  disableSelectionOnClick
  rows={rows}
  columns={columns}
  density="compact"
  loading={isLoading}
  components={{ Toolbar: GridToolbar }}
  localeText={{
    noRowsLabel: strings.noModerators,
  }}
/>

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

你很亲近。

在要隐藏菜单的字段中试试这个

{ 
  field: 'actionMenu', 
  headerName: strings.actions, 
  sortable: false, 
  filterable: false, 
  disableColumnMenu: true // This will hide it only for the Actions column
},

也请看看这个working codesandbox，我只隐藏了“年龄”列的菜单，其余的在悬停时显示菜单

【讨论】：

【解决方案2】：

如果您想要实现我在问题中想要实现的目标，MUI 提供了一种内置的方式来创建“行动”柱子。

这“行动栏”会包括“行动细胞”，操作单元可能是按钮，或者可能是菜单按钮，您可以在其中单击它并放下带有其他按钮的列表菜单。

使用内置方式是一个更好的决定，因为它使您行动栏与已经内置的数据网格过滤器兼容。

要声明操作列，请在您的列定义中使用 type: 'actions' 属性和 getActions: (cell) => [] 属性以及 <GridActionsCellItem /> 组件，例如：

export default function ProductsDataGrid() {
  const columns = [
    {
      field: "name",
      width: 200,
      type: "string",
    },
    {
      field: "price",
      width: 100,
      type: "number",
    },
    {
      field: "actions",
      type: "actions",
      width: 100,
      getActions: (cell) => [
        <GridActionsCellItem
          label="delete"
          icon={<DeleteIcon />}
          onClick={() => openDeleteModal(cell.row)}
        />,
      ],
    },
  ];

  const data = [{ name: "Egg", price: 20 }];

  return <DataGrid columns={columns} rows={data} autoHeight />;
}

这将导致在单元格内显示一个删除按钮。

如果你想让它显示在菜单中，只需使用 showInMenu 属性：

 <GridActionsCellItem
  showInMenu
  label="delete"
  icon={<DeleteIcon />}
  onClick={() => openDeleteModal(cell.row)}
/>,

默认情况下，操作列没有过滤器，它不会向您显示标题操作。

【讨论】：