如何正确扩展TanStack React Table的核心行模型？

你的自定义行模型出现行不更新的核心原因是：提前缓存了初始的行模型实例，后续表格数据更新时没有重新生成新的行模型。原代码中你在自定义行模型函数执行时就获取了一次行模型并缓存，返回的函数始终返回这个旧实例，自然不会响应数据变化。

正确的核心行模型扩展方式 #

要确保每次表格更新时都能生成最新的行模型，需要让自定义行模型返回的函数每次调用都重新获取核心行模型并加工，同时推荐使用React Table官方的状态管理API来存储临时状态（避免直接修改row.meta可能导致的重渲染问题）。

修改后的自定义行模型代码 #

import { getCoreRowModel } from '@tanstack/react-table';

const customRowModelFunction = (table) => {
  // 仅获取核心行模型的工厂函数，不提前执行获取结果
  const coreRowModelFn = getCoreRowModel()(table);

  // 返回表格每次更新都会调用的函数
  return () => {
    // 每次调用都获取最新的核心行模型
    const coreModel = coreRowModelFn();

    // 遍历最新的行，添加自定义功能
    for (const row of coreModel.rows) {
      // 初始化行的saved状态（仅首次时设置）
      if (row.getState().saved === undefined) {
        row.setState({ saved: false });
      }

      // 定义标记已保存的方法
      row.rowSaved = () => {
        row.setState({ saved: true });
        setTimeout(() => {
          row.setState({ saved: false });
        }, 2000);
      };

      // 定义获取保存状态的方法
      row.getIsSaved = () => row.getState().saved;
    }

    return coreModel;
  };
};

export default customRowModelFunction;

关键修改点说明 #

1. 延迟获取行模型：不再提前执行coreRowModelFn()，而是让返回的函数在表格每次更新时才调用它，确保拿到最新的行数据。
2. 使用官方状态管理：用row.setState和row.getState来管理saved状态，替代直接修改row.meta，这样状态变化会自动触发表格重渲染，保证样式能及时更新。
3. 避免状态覆盖：仅在行状态中saved未定义时初始化，避免覆盖表格其他逻辑可能设置的行状态。

表格使用方式不变 #

你的表格初始化代码无需修改，保持如下即可：

import customRowModel from 'Utils/react-table/customRowModel';
const table = useReactTable({
    ...
    getCoreRowModel: customRowModel
})

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