如何在DataGrid MUI中禁用菜单按钮选项？

Question

我希望禁用弹出所有选项的按钮，例如：排序、筛选、隐藏等。

我知道你可以通过使用 sortable: false 来移除列中的排序选项，如果我想移除其他所有内容，那么我可以简单地使用这两个选项：disableColumnFilter 来移除筛选器，disableColumnSelector 来移除几乎所有其他内容。然而，即使我移除了所有选项，按钮仍然存在，我想移除它。

- ReactPotato

---

“disableColumnFilter” 对你无效吗？你想要完全删除按钮还是只想让它处于禁用状态（不能点击，变灰）？ - NearHuscarl

我找到了答案，显然有三个修饰符，我马上会发布。 - ReactPotato

Answer 1

在询问问题之前，我应该做更多的研究，但通过查找其他内容，我找到了答案。

所以你有3个“修饰符”

• disableColumnMenu
• disableColumnFilter
• disableColumnSelector

disableColumnMenu将完全删除带有选项的按钮， disableColumnFilter只会删除过滤器选项， disableColumnSelector将删除隐藏/显示列的选项。

您可以在创建列时通过简单的 sortable = true/false 检查排序是true还是false。

例如：

const columns = [
        { field: 'name', headerName: 'Name', width: 450, sortable: true/false}
      ]

加上disableColumnMenu后，就完全不会再显示按钮了：

- ReactPotato

---

有没有想法只针对特定列禁用列菜单？ - justdvl

你可以尝试在要禁用菜单的列中添加参数。不过我不确定这样是否有效。 - ReactPotato

确实，将disableColumnMenu: true添加到列定义对象(GridColDef类型)中就可以解决问题。谢谢。 - justdvl

Answer 2

我遇到了同样的问题，需要禁用单个列的排序和筛选。

发现MUI GridColDef接口文档非常有帮助：https://mui.com/x/api/data-grid/grid-col-def/。

• sortable
• disableColumnMenu

- bknoelle

Answer 3

我们可以使用CSS来隐藏按钮，以显示列的功能。

.MuiDataGrid-columnHeader:not(.MuiDataGrid-columnHeader--sorted) .MuiDataGrid-sortIcon {
  opacity: 0;
  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  display: none;
  background-color: transparent !important;
}

- Sandeep Jain