MUI Data Grid列与筛选状态留存问题：隐藏列刷新后恢复显示

要解决刷新页面后隐藏列恢复、状态无法留存的问题，可结合MUI Data Grid内置的状态管理API和localStorage实现列状态与筛选状态的持久化，具体实现如下：

核心实现逻辑 #

• 组件初始化时从localStorage读取之前保存的表格状态
• 通过onStateChange监听表格状态变化，实时将列状态、筛选状态写入localStorage
• 合并默认列配置与保存的列可见性状态，确保组件加载时应用已保存的列隐藏设置

修改后的完整代码 #

import { MrfColumns } from "./MrfTableColumns";
import { getMrfTabledata } from "./MrfTableServices";
import { GridState, GridStateChangeParams } from '@mui/x-data-grid'; // 导入所需类型

const MrfTable = () => {
  const [loading, setLoading] = React.useState(true);
  const [pageSize, setPageSize] = React.useState<number>(20);
  const [mrfTableData, setMrfTableData] = React.useState([]);
  
  // 从localStorage读取初始状态，无保存数据则为空对象
  const [gridState, setGridState] = React.useState<GridState>(() => {
    const savedState = localStorage.getItem('mrfGridState');
    return savedState ? JSON.parse(savedState) : {};
  });

  // 监听表格状态变化，仅保存列状态和筛选状态
  const handleStateChange = React.useCallback((params: GridStateChangeParams) => {
    if (params.state.columns || params.state.filter) {
      const updatedState = { ...gridState, ...params.state };
      setGridState(updatedState);
      localStorage.setItem('mrfGridState', JSON.stringify(updatedState));
    }
  }, [gridState]);

  // 合并默认列配置与保存的列可见性状态
  const columnsWithState = React.useMemo(() => {
    if (!gridState.columns?.columnVisibilityModel) return MrfColumns;
    return MrfColumns.map(column => ({
      ...column,
      visible: gridState.columns.columnVisibilityModel[column.field] ?? column.visible ?? true
    }));
  }, [MrfColumns, gridState.columns]);

  useEffect(() => {
    getMrfTabledata().then((resp: any) => {
      setMrfTableData(resp.data);
      setLoading(false);
    });
  }, []);

  console.log(ctx.mrfId);
  return (
    <Box
      sx={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        px: 4,
        height: "77vh",
      }}
    >
      <DataGrid
        rows={mrfTableData}
        columns={columnsWithState} // 使用合并后的列配置
        components={{
          Toolbar: MrfCustomToolbar,
          NoRowsOverlay: CustomeNoRowsOverlay,
          LoadingOverlay: LinearProgress,
        }}
        loading={loading}
        rowsPerPageOptions={[20, 30, 40]}
        pageSize={pageSize}
        onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}
        pagination
        checkboxSelection
        disableSelectionOnClick
        initialState={gridState} // 传递初始状态
        onStateChange={handleStateChange} // 监听状态变化
      />
    </Box>
  );
};

export default MrfTable;

补充说明 #

1. 唯一键名：示例中用mrfGridState作为localStorage的键名，建议根据组件或页面的唯一标识命名，避免和其他表格状态冲突
2. 扩展功能：如果需要保存分页、排序等更多状态，只需在handleStateChange中添加对应状态的判断即可
3. 状态重置：若需提供重置状态的功能，可添加按钮触发localStorage.removeItem('mrfGridState')后刷新组件

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