如何在MUI DataGrid组件中实现筛选数据本地存储与重载恢复？

核心思路 #

监听DataGrid的筛选变更事件，将筛选状态存入localStorage；组件初始化时从本地存储读取并恢复筛选配置。

具体实现步骤 #

1. 初始化筛选状态 #

用React的useState管理筛选状态，初始值优先从localStorage读取，无存储数据则设为空对象：

import { useState } from 'react';
import { DataGrid } from '@mui/x-data-grid';

const MyDataGrid = () => {
  // 从本地存储读取并解析筛选配置
  const initialFilterModel = JSON.parse(localStorage.getItem('dataGridFilters')) || {};
  const [filterModel, setFilterModel] = useState(initialFilterModel);

2. 同步筛选变更到本地存储 #

通过DataGrid的onFilterModelChange回调，每次筛选变化时更新状态并写入本地存储：

const handleFilterChange = (newFilterModel) => {
    setFilterModel(newFilterModel);
    // 将筛选对象转为字符串存入本地存储
    localStorage.setItem('dataGridFilters', JSON.stringify(newFilterModel));
  };

3. 绑定状态与回调到DataGrid #

把filterModel和onFilterModelChange传递给DataGrid组件，完成状态绑定：

return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={yourRows} // 替换为你的业务行数据
        columns={yourColumns} // 替换为你的列配置
        filterModel={filterModel}
        onFilterModelChange={handleFilterChange}
        // 其他自定义配置项
      />
    </div>
  );
};

export default MyDataGrid;

4. 可选优化处理 #

• 多表格区分：如果页面有多个DataGrid，给本地存储的key加专属前缀（比如'userListDataGridFilters'），避免状态冲突。
• 重置筛选：添加重置按钮，清空状态并删除本地存储的对应项：

const handleResetFilters = () => {
  const emptyFilterModel = {};
  setFilterModel(emptyFilterModel);
  localStorage.removeItem('dataGridFilters');
};

注意事项 #

• localStorage仅支持字符串存储，必须用JSON.stringify和JSON.parse完成对象与字符串的转换。
• 本地存储的数据会随浏览器缓存清除而丢失，若需跨设备同步，需改用后端存储方案。

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