如何保存Material ui数据网格中列可见性的状态

Question

我有一个相当简单的数据网格表，可以选择隐藏/显示特定列。我想在重新渲染发生时保存列的状态（在我的例子中，当语言更改时）。

这是一个精简的示例。只需隐藏一列，然后单击按钮即可。列标题按预期更改，但隐藏列重新出现。

https://codesandbox.io/s/material-demo-forked-lq22m

我想我必须将隐藏属性正确设置为单击处理程序中列的当前状态：

 const handleButtonClick = () => {
    setColumnState((c) => c.map((d) => ({ ...d, hide:currentStateofHideForEachCol, headerName: "nombre" })));
  };

但我找不到访问它的方法。

Answer 1

目前，通过更新，columnState您将强制重新渲染新网格，而不是更新当前网格，从而丢失状态。

我更改了您的代码行为，因此它现在使用GridColDef.renderHeader和React.useContext根据语言更改列名称，而不会丢失网格的状态。

在保存网格状态方面，网格的整个状态是不可控的，因此很难做到这一点，特别是列的可见性无法访问。但是，其他属性（排序、过滤和选择模型）是可以控制的。例如，您可以控制page道具：

// This mimics the default page change behavior 
const [currentPage, setCurrentPage] = useState(1);
const handleChangePage = useCallback(
 (gridPageChangeParams)=> setCurrentPage(gridPageChangeParams.page),
  []
);
<DataGrid page ={currentPage} onPageChange={handleChangePage}