有什么方法可以保存Mui DataGrid Toolbar的状态吗？

Question

我正在使用带有默认工具栏的 React Mui DataGrid 组件。用户可以使用工具栏以多种方式配置网格，例如排序顺序/隐藏列/过滤/更改密度等。有没有简单的方法来导出（保存）/导入（传递）工具栏设置？

Answer 1

您可以将整个表状态导出为json并将其保存到localstorage并在渲染组件时检索它。

每次用户编辑列宽度或编辑列可见性时，我们都会存储状态。当用户更改过滤器时，您还可以添加保存方法。

const apiRef = useGridApiRef();

useEffect(() => {
  try {
    const stateJSON = localStorage.getItem("ORDERS_TABLE_STATE");
    if (stateJSON) apiRef.current.restoreState(JSON.parse(stateJSON));
  } catch (e) {
    console.log(e);
  }
}, []);

return (
  <DataGridPro
    apiRef={apiRef}
    onColumnVisibilityModelChange={() => {
      const state = apiRef.current.exportState();
      localStorage.setItem("ORDERS_TABLE_STATE", JSON.stringify(state));
    }}
    onColumnWidthChange={() => {
      const state = apiRef.current.exportState();
      localStorage.setItem("ORDERS_TABLE_STATE", JSON.stringify(state));
    }}
  />
);

Answer 2

您可以使用columnVisibilityModel和filterModel：

const visibilityJSON = localStorage.getItem("bonds_visibility")
const visibilityModel = (visibilityJSON) ? JSON.parse(visibilityJSON) : {}
const [columnVisibilityModel, setColumnVisibilityModel] = useState<GridColumnVisibilityModel>(visibilityModel)
const filterJSON = localStorage.getItem("bonds_filter")
const initialFilterModel = (filterJSON) ? JSON.parse(filterJSON) : {items: []}
const [filterModel, setFilterModel] = useState<GridFilterModel>(initialFilterModel)
...
return (
    <DataGrid
        ...
        columnVisibilityModel={columnVisibilityModel}
        onColumnVisibilityModelChange={(newModel) => {
            localStorage.setItem("bonds_visibility", JSON.stringify(newModel))
            setColumnVisibilityModel(newModel)
        }}
        filterModel={filterModel}
        onFilterModelChange={(newModel) => {
            localStorage.setItem("bonds_filter", JSON.stringify(newModel))
            setFilterModel(newModel)
        }}
    />
)

Answer 3

我知道问题提出以来已经过去了，但我自己也需要一个类似的解决方案，我想在这里分享我的研究：

如何立即保存/加载完整的数据网格状态：

当使用

subscribeEvent

上的

stateChange

时，我们可以侦听每个状态更改（可见性、过滤器、密度、快速过滤/搜索、每页行数等），并将此更新后的对象作为 JSON 字符串保存在我们的

localStorage

中.

现在，当我们重新加载页面时，我们会注意之前保存的

localStorage

项是否存在，解析它并将其设置为

initialState

组件的

<DataGrid />

。

{...}
import React, { useEffect } from 'react';
import { DataGrid } from '@mui/x-data-grid';
import { useGridApiRef } from '@mui/x-data-grid';

function Example() {
  {...}
  const apiRef = useGridApiRef();

  useEffect(() => {
    const handleStateChange = params => {
      localStorage.setItem('initialState', JSON.stringify(params));
    };

    // The `subscribeEvent` method will automatically unsubscribe in the cleanup function of the `useEffect`.
    return apiRef.current.subscribeEvent('stateChange', handleStateChange);
  }, [apiRef]);

  return (
    {...}
    <DataGrid
      {...}
      apiRef={apiRef}
      initialState={JSON.parse(localStorage.getItem('initialState')) ?? null}
    />
  );
}

export default Example;