MUI：如何以编程方式更新 DataGrid 状态？

Posted 2023-02-21

【中文标题】MUI：如何以编程方式更新 DataGrid 状态？

【英文标题】：MUI: How to update the DataGrid state programmatically?

【发布时间】：2021-12-06 10:37:52

【问题描述】：

我正在使用 MUI DataGrid 来显示和过滤某些表格数据。

DataGrid 工具栏包含用于过滤、排序等的按钮。我想添加一个自定义按钮，用于显示某些预定义配置的选项。例如，假设DataGrid 具有从 ColA 到 ColH 的 8 列。如果有人从菜单中选择了预设 A，DataGrid 只显示从 A 到 C 的列。同样，如果有人从菜单中选择预设 B，DataGrid 会显示列 B 和 F。这些列也反映在单击列按钮面板。 如何实现此功能？

我能够在工具栏中添加一个自定义按钮。但是，无法找到基于所选预设以编程方式更新列可见性的方法。

我尝试使用文档中的以下示例访问DataGrid 状态：

function CustomRowCounter() 
  const  rows  = useGridSlotComponentProps();

  return <div>Row count: rows.length </div>;

但是，它会引发错误：

错误：Material-UI X：找不到数据网格上下文。它看起来 就像您在 DataGrid 或 DataGridPro 之外渲染组件一样 父组件。如果您捆绑多个 数据网格的版本。

我使用DataGridPro如下：

import  DataGridPro, 
GridToolbar, 
GridToolbarColumnsButton, 
GridToolbarContainer, 
GridToolbarDensitySelector, 
GridToolbarExport, 
GridToolbarFilterButton, 
useGridApiRef,
useGridSlotComponentProps  from '@mui/x-data-grid-pro';

以下是依赖项：

"@material-ui/core": "^4.12.3",
"@material-ui/icons": "^4.11.2",
"@mui/x-data-grid-pro": "^4.0.1",

【问题讨论】：

你能告诉我你是如何使用DataGridPro组件的吗？

我正在使用未经许可的产品，因为我只是在试验它。但我们将购买 XGrid 许可证。从“@mui/x-data-grid-pro”导入 DataGridPro；并且在渲染时写入

【参考方案1】：

您可以使用GridApi.setColumnVisibility()修改列的可见性状态：

const setVisible = (columns) => () => 
  apiRef.current
    .getAllColumns()
    .map((c) => c.field)
    .forEach((c) => 
      const isVisible = columns.includes(c);
      apiRef.current.setColumnVisibility(c, isVisible);
    );

  handleClose();
;

<Button variant="contained" onClick=handleClick sx= mb: 1 >
  Preset
</Button>
<Menu anchorEl=anchorEl open=open onClose=handleClose>
  <MenuItem onClick=setVisible(["default"])>Col1</MenuItem>
  <MenuItem onClick=setVisible(["name", "stars"])>
    Col2 & 3
  </MenuItem>
</Menu>

---

关于错误，您将CustomRowCounter 放在DataGridPro 之外。因为您在其中使用 useGridSlotComponentProps 需要访问网格上下文数据。该数据由GridContextProvider 提供——DataGrid/DataGridPro 的根组件。要修复它，您需要更改以下内容：

<DataGridPro ... />
<CustomRowCounter />

收件人：

<DataGridPro
  components=
    Footer: () => <CustomRowCounter />
  
/>

查看slots section，了解更多关于DataGridPro中可以覆盖哪些组件。

【讨论】：

非常感谢您的回复。我实际上想要 GridToolbar 中的预设按钮，就像其他 GridToolbar 按钮一样。我昨天已经能够使用 GridAPI 实现这一点，并在下面的答案中发布了沙箱的链接。

另外，我试图按照您显示的那样放置自定义按钮组件，但仍然出现错误。无论如何，我已经放弃了 useGridSlotComponentProps()。

【参考方案2】：

使用 Grid API 实现了一个演示。

https://codesandbox.io/s/kind-jepsen-ekgv2?file=/src/App.tsx

这也被用作控制列可见性的功能。 如果您想了解更多相关信息，请参阅https://github.com/mui-org/material-ui-x/issues/1412