core

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

TanStack Table core

TanStack Table 核心

TanStack Table coordinates state and row processing. The renderer owns markup, styles, semantics, and interaction accessibility. Use the installed framework adapter in UI code; use

constructTable

for framework-neutral integrations.

TanStack Table 负责协调状态与行处理。渲染层负责标记、样式、语义和交互可访问性。在UI代码中使用已安装的框架适配器；对于与框架无关的集成，请使用

constructTable

。

Minimal setup

最小化设置

import {
  constructTable,
  createColumnHelper,
  tableFeatures,
} from '@tanstack/table-core'
import { storeReactivityBindings } from '@tanstack/table-core/store-reactivity-bindings'

type Person = { id: string; name: string }
const features = tableFeatures({
  coreReactivityFeature: storeReactivityBindings(),
})
const helper = createColumnHelper<typeof features, Person>()
const columns = helper.columns([helper.accessor('name', { header: 'Name' })])
const data: Person[] = [{ id: '1', name: 'Ada' }]
const table = constructTable({
  features,
  columns,
  data,
  getRowId: (row) => row.id,
})

for (const row of table.getRowModel().rows) {
  console.log(row.getAllCells().map((cell) => cell.getValue()))
}

import {
  constructTable,
  createColumnHelper,
  tableFeatures,
} from '@tanstack/table-core'
import { storeReactivityBindings } from '@tanstack/table-core/store-reactivity-bindings'

type Person = { id: string; name: string }
const features = tableFeatures({
  coreReactivityFeature: storeReactivityBindings(),
})
const helper = createColumnHelper<typeof features, Person>()
const columns = helper.columns([helper.accessor('name', { header: 'Name' })])
const data: Person[] = [{ id: '1', name: 'Ada' }]
const table = constructTable({
  features,
  columns,
  data,
  getRowId: (row) => row.id,
})

for (const row of table.getRowModel().rows) {
  console.log(row.getAllCells().map((cell) => cell.getValue()))
}

Essential constraints

核心约束

The core row model is automatic. Optional APIs and state exist only after their feature is registered.
Keep
```
features
```
,
```
data
```
, and
```
columns
```
stable between meaningful changes. Derive changing arrays with the adapter's memo/computed mechanism; an inline
```
.map()
```
,
```
.filter()
```
, column factory, or fresh
```
[]
```
fallback invalidates model work and can cause render loops.
Let
```
createColumnHelper
```
and
```
helper.columns()
```
preserve accessor value types. Derive feature types from the concrete registry when an explicit boundary is needed.
Call row, cell, column, and header methods on their instance. Use
```
row.getValue('name')
```
or a callback that calls it; extracting
```
const { getValue } = row
```
loses its
```
this
```
receiver.
Render the final
```
table.getRowModel().rows
```
. The table object itself is not a DOM component.

核心行模型是自动生成的。可选API和状态仅在其对应功能注册后才可用。
在两次有意义的变更之间，请保持
```
features
```
、
```
data
```
和
```
columns
```
的稳定性。使用适配器的memo/computed机制来派生变化的数组；内联的
```
.map()
```
、
```
.filter()
```
、列工厂函数或者新的
```
[]
```
默认值会使模型的计算失效，并可能导致渲染循环。
让
```
createColumnHelper
```
和
```
helper.columns()
```
保留访问器值类型。当需要明确的类型边界时，从具体的注册表中派生功能类型。
请在实例上调用行、单元格、列和表头的方法。使用
```
row.getValue('name')
```
或者调用该方法的回调；解构
```
const { getValue } = row
```
会丢失其
```
this
```
上下文。
渲染最终的
```
table.getRowModel().rows
```
。table对象本身并不是一个DOM组件。

Read for the current task

当前任务参考阅读

Task	Read
Add or repair optional features, processing slots, or prerequisites	Feature architecture, then its relevant feature reference
Choose state ownership, initialize or reset state	Shared state
Fix `ColumnDef` inference, reusable options, or scoped meta	TypeScript inference
Diagnose a missing export, option, state slice, or instance method	API discovery
Implement row numbers, identity, or display-index behavior	Rows
Author behavior beyond built-ins or typed meta	Custom features
Migrate an existing v8 table	Migration audit

For framework construction and rendering, load the installed package's

getting-started

skill with

intent load <package>#getting-started

, replacing

<package>

with the actual adapter package, such as

@tanstack/react-table

. For reactive reads or controlled wiring, load that package's

table-state

skill directly.

任务	阅读内容
添加或修复可选功能、处理插槽或前置条件	功能架构，然后阅读其相关功能参考
选择状态归属、初始化或重置状态	共享状态
修复 `ColumnDef` 类型推断、可复用选项或作用域元数据	TypeScript类型推断
诊断缺失的导出、选项、状态片段或实例方法	API查找
实现行号、标识或显示索引行为	行
开发内置功能或类型化元数据之外的自定义行为	自定义功能
迁移现有的v8表格	迁移审计

对于框架构建和渲染，请使用

intent load <package>#getting-started

加载已安装包的

getting-started

技能，将

<package>

替换为实际的适配器包，例如

@tanstack/react-table

。对于响应式读取或受控绑定，请直接加载该包的

table-state

技能。

Installed API discovery

已安装API查找

Start at

node_modules/@tanstack/table-core/dist/index.d.ts

and follow exported declarations. Adapter declaration layouts and missing-API diagnosis are in API discovery; read it when the expected export or declaration path is absent.

从

node_modules/@tanstack/table-core/dist/index.d.ts

开始，跟随导出的声明查找。适配器声明布局和缺失API诊断请参见API查找；当预期的导出或声明路径不存在时，请阅读该文档。