如何以编程方式更新DataGrid状态？
我正在使用MUI DataGrid来显示和过滤某些表格数据。
DataGrid工具栏包含用于筛选、排序等的按钮。我想添加一个显示某些预定义配置选项的自定义按钮。例如，假设DataGrid有8列从ColA到ColH。如果有人从菜单中选择presetA，则DataGrid只显示从A到C的列。类似地，如果有人从菜单中选择presetB，则DataGrid将显示列B和F。这些列也反映在单击“列”按钮面板上。如何实现此功能？
我能够在工具栏中添加一个自定义按钮。但是，无法找到基于所选预置以编程方式更新列可见性的方法。
我尝试使用文档中的以下示例访问DataGrid状态：
function CustomRowCounter() {
const { rows } = useGridSlotComponentProps();
return <div>Row count: {rows.length} </div>;
}但是，它会引发一个错误：
错误:资料-用户界面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",回答 2
Stack Overflow用户
发布于 2021-10-20 20:36:06
使用Grid实现了一个演示。
https://codesandbox.io/s/kind-jepsen-ekgv2?file=/src/App.tsx
这也被用作控制列可见性的一个特性。如果您想阅读更多关于这方面的内容，请参考https://github.com/mui-org/material-ui-x/issues/1412
Stack Overflow用户
发布于 2021-10-19 18:01:34
可以使用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 />
}}
/>请参阅槽段，以了解可以在DataGridPro中重写哪些组件。
https://stackoverflow.com/questions/69631895
复制相似问题
腾讯云开发者
