如何实现React Table数据与状态的跨会话持久化

React Table 官方原生提供了状态托管相关API，不需要反向工程内部逻辑，直接对接标准接口即可实现规范的持久化功能，核心实现逻辑如下：

实现步骤 #

• 初始化表格时，从localStorage读取之前存储的状态，作为表格的初始状态
• 利用React Table提供的state、onStateChange顶层API，将表格状态交由外部组件托管
• 监听表格状态变更，做防抖处理后写入localStorage，避免频繁触发存储操作影响性能
• 可按需过滤不需要持久化的临时状态字段，比如悬浮高亮、临时弹窗状态等，减少存储体积

代码示例 #

import { useReactTable, getCoreRowModel } from '@tanstack/react-table'
import { useState, useEffect } from 'react'

// 按业务自定义存储key，避免不同表格冲突
const TABLE_STORAGE_KEY = 'user-list-table-state'

function PersistTable({ columns, data }) {
  // 初始化从localStorage读取历史状态
  const [tableState, setTableState] = useState(() => {
    const savedState = localStorage.getItem(TABLE_STORAGE_KEY)
    return savedState ? JSON.parse(savedState) : {}
  })

  // 防抖同步状态到localStorage，防抖时长可按需调整
  useEffect(() => {
    const timer = setTimeout(() => {
      // 可在此处删除不需要持久化的字段，示例为删除临时列宽调整状态、行选中状态
      const { columnSizingInfo, rowSelection, ...needPersistState } = tableState
      localStorage.setItem(TABLE_STORAGE_KEY, JSON.stringify(needPersistState))
    }, 300)
    return () => clearTimeout(timer)
  }, [tableState])

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    // 传入外部托管的状态
    state: tableState,
    // 状态变更时同步更新本地状态
    onStateChange: setTableState,
    // 其他表格配置和普通用法完全一致
  })

  // 表格渲染逻辑和普通用法无差异
  return (
    <table>
      {/* 表格渲染代码 */}
    </table>
  )
}

注意事项 #

• 如果表格状态结构后续会迭代，建议给存储的内容加版本号，迭代时可直接清空旧版本无效存储，避免结构不兼容导致报错
• 敏感数据不要存在localStorage中，如果表格状态包含隐私、权限相关内容，建议改为调用服务端接口读写状态
• 如果你使用的是v7及更早版本的React Table，对应API为useTable的initialState配置和useControlledState钩子，整体逻辑和上述方案一致，仅钩子名称略有差异

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