如何保存/导入MUI X Data Grid工具栏的配置状态？

MUI X Data Grid原生提供了状态导出与恢复的API，能轻松实现工具栏配置的保存与传递，核心是通过apiRef操作表格状态：

1. 初始化API引用 #

首先创建并绑定Data Grid的apiRef，这是操作表格状态的核心入口：

import { useGridApiRef } from '@mui/x-data-grid';

const MyDataGrid = () => {
  const apiRef = useGridApiRef();
  
  // 后续逻辑...
};

2. 导出配置 #

使用exportState()方法提取所需的配置项，可选择性指定导出的状态类型，避免冗余：

const exportGridConfig = () => {
  const gridState = apiRef.current.exportState({
    columns: true, // 列可见性、排列顺序等
    filter: true,  // 筛选规则
    sort: true,    // 排序配置
    density: true, // 行密度设置
  });
  
  // 保存到本地存储，也可传给后端或通过路由传递
  localStorage.setItem('savedGridConfig', JSON.stringify(gridState));
};

3. 导入/恢复配置 #

通过restoreState()方法将保存的状态恢复到表格中，可在组件挂载时自动执行，或通过按钮触发：

const importGridConfig = () => {
  const savedState = JSON.parse(localStorage.getItem('savedGridConfig'));
  if (savedState) {
    apiRef.current.restoreState(savedState);
  }
};

// 组件挂载时自动恢复配置
useEffect(() => {
  importGridConfig();
}, []);

4. 集成到默认工具栏 #

若要在默认工具栏中添加导出/导入按钮，可自定义Toolbar组件扩展默认功能：

import { GridToolbarContainer, GridToolbarExport } from '@mui/x-data-grid';

const CustomGridToolbar = () => (
  <GridToolbarContainer>
    <GridToolbarExport />
    <button style={{ marginLeft: 8 }} onClick={exportGridConfig}>
      导出配置
    </button>
    <button style={{ marginLeft: 8 }} onClick={importGridConfig}>
      导入配置
    </button>
  </GridToolbarContainer>
);

// 在Data Grid中使用自定义工具栏
<DataGrid
  apiRef={apiRef}
  components={{ Toolbar: CustomGridToolbar }}
  // 其他表格配置...
/>

注意事项 #

• 若使用自定义筛选器或复杂状态，需确保状态能被JSON正常序列化/反序列化，特殊类型（如函数）需额外处理。
• 跨页面传递配置时，可将导出的gridState通过URL参数、全局状态管理（如Redux）或后端接口传递，目标页面接收后调用restoreState即可。

内容的提问来源于stack exchange，提问作者Boldurean