reactjs - MUI : How to update the DataGrid state programmatically?

Question

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

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

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

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

function CustomRowCounter() {
  const { rows } = useGridSlotComponentProps();

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

但是，它会抛出一个错误:

Error: Material-UI X: Could not find the data grid context. It lookslike you rendered your component outside of a DataGrid or DataGridProparent component. This can also happen if you are bundling multipleversions of the data grid.

我正在使用 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",

Answer 1

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

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

这也被认为是要实现的一个功能来控制列的可见性。如果您想了解更多相关信息，请参阅 https://github.com/mui-org/material-ui-x/issues/1412