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

【问题标题】：MUI: How to update the DataGrid state programmatically?MUI：如何以编程方式更新 DataGrid 状态？
【发布时间】：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}；并且在渲染时写入

标签： reactjs datagrid material-ui state

【解决方案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

【讨论】：