mcpField
T
table-state

table-state

github.com/tanstack开发28.5k61 次安装1 周前更新
代码仓库

关于 table-state

table-state 是用于 React Table 状态管理的技能，涵盖状态读取与控制、订阅管理及响应式边界。它介绍选择器、受控状态切片、外部 atom，以及如何查找已安装版本的 API。

主要功能

  1. 01响应式状态选择
  2. 02受控状态切片
  3. 03外部 atom 集成
  4. 04订阅边界指南
  5. 05查找已安装版本的 API

适用场景

  1. 01使用状态选择器限制重渲染
  2. 02同步受控分页状态
  3. 03将外部 atom 连接到表格界面

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/tanstack/table --skill table-state

安装后在 Claude Code 中输入/table-state确认已加载。

附带文件references/reactivity.md

详细介绍

React 表格状态

开始前，运行 intent load @tanstack/table-core#table-state，了解共享所有权、初始化、更新和重置。修复状态无需加载设置指南。

读取响应式状态

默认情况下，useTable 会选择所有已注册状态。可选的第二个参数选择器用于控制重新渲染以及 table.state 的形状。table.atoms.<slice>.get() 和 table.store.state 是当前快照，不是 React 订阅。

在所有者组件的渲染中使用选取的 table.state。如需更精细的边界，请使用 table.Subscribe 或 @tanstack/react-store 中的 useSelector。不提供 source 时，table.Subscribe 会从 table.store 选择；提供 source 时，则会订阅该 atom 或 store。先使用默认选择器，直到渲染开销需要缩小选择范围。

控制一个状态切片

保持功能、列和数据稳定。注册拥有受控状态切片的功能。以下示例控制分页，不添加客户端行处理：

import { useState } from 'react'
import {
  rowPaginationFeature,
  tableFeatures,
  useTable,
  type PaginationState,
} from '@tanstack/react-table'

const features = tableFeatures({ rowPaginationFeature })
const columns = [{ accessorKey: 'name' }]
const data = [{ name: 'Ada' }]

export function PageControl() {
  const [pagination, setPagination] = useState<PaginationState>({
    pageIndex: 0,
    pageSize: 20,
  })
  const table = useTable({
    features,
    columns,
    data,
    state: { pagination },
    onPaginationChange: setPagination,
  })
  return (
    <button onClick={() => table.setPageSize(50)}>
      {table.state.pagination.pageSize} rows per page
    </button>
  )
}

React setter 接受值和函数式更新器。除了 onPaginationChange，还要提供当前的 state.pagination；仅提供回调不会使表格保持同步。

对于由外部拥有的 atom，使用 @tanstack/react-store 中的 useCreateAtom 创建它，将其传入 atoms.<slice>，并在其他 UI 需要其值时使用 useSelector 订阅。

响应式边界

对于经 React Compiler 记忆化的子组件，请将 Subscribe 放在隐藏构建器方法读取的组件内部，或将选取的值作为会变化的属性传入。忽略订阅值的外层订阅无法刷新稳定的子组件。在核心类型的单元格／表头上下文中，请导入独立的 Subscribe。

关于外部 atom 示例、选择器依赖项、更精细的边界以及 React Compiler 问题，请阅读响应性详情。如果此任务更改了处理功能，请运行 intent load @tanstack/table-core#table-features 并阅读相关功能参考文档。

API 探索

检查 node_modules/@tanstack/react-table/dist/useTable.d.ts 和 Subscribe.d.ts，以及已安装的 @tanstack/react-store 中有关 atom 钩子的声明。

评论

支持 Markdown