TanStackTable-Solid：如何用Solid Store作数据源且避免性能损耗？

当Solid Store中的数据更新时，Table组件无法自动触发表格更新，核心原因是当前createSolidTable的配置没有正确追踪Solid Store数据的响应式变化，仅在组件初始化时读取一次数据。

解决方案 #

修改Table组件中createSolidTable的配置，将data和columns改为Accessor函数（箭头函数形式），让Solid Table自动监听数据的响应式变化，无需拷贝数组。

修改后的完整代码：

type TableProps<T, U> = Omit<JSX.HTMLAttributes<HTMLTableElement>, 'children'> & {
  data: T[]
  ref?: HTMLTableElement
  columns: ColumnDef<T, U>[]
  pageSize?: number
}

export function Table<T, U>(props: TableProps<T, U>) {
  const [local, rest] = splitProps(props, ['data', 'columns', 'pageSize', 'class'])

  const table = createSolidTable<T>({
    // 将getter改为Accessor函数，确保响应式追踪
    data: () => local.data,
    columns: () => local.columns,
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
  })

  return (
    // 原有渲染代码...
  )
}

原理说明 #

• Solid Table的createSolidTable支持传入Accessor类型的data和columns参数，这类函数会在响应式上下文中执行，自动追踪依赖的变化。
• Solid Store返回的数组是细粒度响应式的代理对象，当通过setState修改数组内容或结构时，Accessor函数会重新执行，触发表格更新，完全保留Store的性能优势。

内容的提问来源于stack exchange，提问作者André Luís de Andrade