SuperAPI AI 工具集

getting-started

前端与建站

查看项目

更新于 10-16 02:00

技能介绍

用途

本技能是关于 TanStack Table v9 的入门与集成指南,使用 React 适配器创建和渲染表格。资料说明:在开始前,应先运行 intent load @tanstack/table-core#core 以获取共享的无头模型(headless model)和稳定输入(stable-input)相关规则。

主要能力

资料给出的设置示例包含以下内容:

import { useState } from 'react'
import {
  createColumnHelper,
  tableFeatures,
  useTable,
} from '@tanstack/react-table'

type Person = { name: string; age: number }
const features = tableFeatures({})
const helper = createColumnHelper<typeof features, Person>()
const columns = helper.columns([
  helper.accessor('name', { header: 'Name' }),
  helper.accessor('age', { header: 'Age' }),
])

通过 useTable 获取 table 实例,再用 table.getHeaderGroups() 渲染表头、table.getRowModel().rows 渲染行,并配合 table.FlexRender 渲染 header 与 cell。资料指出:Table 生成模型和状态,React 负责语义标记、样式、事件可供性(event affordances)与可访问性。

使用方式与关键约束

  • v9 使用 useTable。
  • features、columns 以及 fallback data 应放在模块作用域或稳定的 state/memo 中。像 response.data ?? [] 这样的新 fallback 会在每次渲染时使行模型失效。
  • 默认 selector 会让所有者订阅所有已注册状态。
  • Table 拥有模型和状态;应用(application)拥有标记、CSS、交互与可访问性。
  • 仅核心(core-only)表格使用 row.getAllCells();需要可见性感知的方法需要 columnVisibilityFeature。
  • 可选的状态和 API 需要其对应的 features。
  • 在 tableFeatures() 中,应把行模型槽位(row-model slots)放在其前置 features 之后。

按任务加载的参考文档

资料列出以下按任务划分的延伸阅读:

  • 对于重复特性(repeated features)、默认值、类型化上下文或组件注册表,阅读 reusable app hooks。
  • 对于由 Query 驱动的数据、服务端分页、排序、过滤或请求键,阅读 TanStack Query integration。
  • 对于虚拟行、虚拟列、动态测量或无限滚动,阅读 TanStack Virtual integration。
  • 对于受控状态、跟踪读取(tracked reads)或渲染订阅,阅读 table state。
  • 对于 feature 注册、缺失 feature API 或处理归属(processing ownership),运行 intent load @tanstack/table-core#table-features,并只阅读任务所需的引用。
  • 对于 v8 代码,阅读 migration checklist。

API 发现

资料建议:先检查 node_modules/@tanstack/react-table/dist/index.d.ts,再查看已安装版本导出的适配器声明;可选的核心 API 位于 node_modules/@tanstack/table-core/dist/features/。

适用场景

在 React 项目中创建、渲染无头(headless)表格,并需要按需集成 Query 数据、Virtual 虚拟滚动、受控状态或从 v8 迁移时适用。

限制

资料未提供具体的收费、价格、平台限制或效果承诺。具体 API 签名与可用性以已安装版本的声明文件为准;其余未在资料中说明的事项暂未提供。