table-state

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Load

intent load @tanstack/table-core#table-state

first for shared ownership, initialization, updater, and reset rules.

useTable

selects all registered state by default. Its second argument changes the selected shape exposed as

table.state

and shallow-gates owner rerenders. Atom

.get()

and

table.store.state

reads are snapshots; use selected state or a rendered

table.Subscribe

to update the UI.

请先加载

intent load @tanstack/table-core#table-state

以了解共享所有权、初始化、更新器和重置规则。

useTable

默认选择所有已注册的状态。它的第二个参数会更改作为

table.state

暴露的所选状态结构，并对所有者的重渲染进行浅层门控。通过Atom的

.get()

方法和

table.store.state

读取到的是快照；请使用所选状态或渲染后的

table.Subscribe

来更新UI。

Controlled slice setup

受控切片设置

tsrx

import { useState } from 'octane'
import {
  rowPaginationFeature,
  tableFeatures,
  useTable,
} from '@tanstack/octane-table'

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

function PageStatus() @{
  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 20 })
  const table = useTable({
    features,
    columns,
    data,
    state: { pagination },
    onPaginationChange: setPagination,
  })

  <button onClick={() => table.nextPage()}>
    Page {String(table.state.pagination.pageIndex + 1)}
  </button>
}

tsrx

import { useState } from 'octane'
import {
  rowPaginationFeature,
  tableFeatures,
  useTable,
} from '@tanstack/octane-table'

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

function PageStatus() @{
  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 20 })
  const table = useTable({
    features,
    columns,
    data,
    state: { pagination },
    onPaginationChange: setPagination,
  })

  <button onClick={() => table.nextPage()}>
    Page {String(table.state.pagination.pageIndex + 1)}
  </button>
}

Reactive boundaries

响应式边界

Pass both the controlled value and its callback. Octane setters accept Table's value-or-updater callbacks; a callback alone cannot feed the new value back.
Render
```
<table.Subscribe>
```
as a component. Calling it as a normal function shares the owner's compiler slots instead of creating an independent hook scope.
```
useTable
```
stages fresh options for same-render reads. Controlled state reaches the store only from an accepted layout commit, so abandoned work cannot publish speculative values.
A stable atom from
```
@tanstack/octane-store
```
is a direct synchronous owner. Table writes reach it immediately; it takes precedence over controlled
```
state
```
for the same slice.
Keep features, columns, and data stable. Use the default selector until render cost justifies narrower subscriptions.

同时传入受控值及其回调。Octane的setter接受Table的值或更新器回调；仅靠回调无法将新值回传。
将
```
<table.Subscribe>
```
作为组件渲染。将其作为普通函数调用会共享所有者的编译器槽位，而不会创建独立的hook作用域。
```
useTable
```
为同渲染读取暂存最新选项。受控状态仅在布局提交被接受时才会到达store，因此被放弃的工作不会发布推测值。
来自
```
@tanstack/octane-store
```
的稳定Atom是直接的同步所有者。Table的写入会立即同步到它；对于同一切片，它的优先级高于受控
```
state
```
。
保持features、columns和data的稳定性。在渲染成本足以证明需要更窄范围的订阅之前，请使用默认选择器。

Read for the task

任务相关阅读

For advanced reactive boundaries, shared atoms, or detailed subscription examples, read reactivity. For construction or rendering setup, read getting-started.

如需了解高级响应式边界、共享Atom或详细的订阅示例，请阅读响应式。如需了解构建或渲染设置，请阅读入门指南。

API discovery

API 查找方式

Inspect

node_modules/@tanstack/octane-table/src/index.d.ts

, the matching

*.tsrx.d.ts

sidecar, and

src/types.ts

. This package publishes authored source; core APIs are in installed

@tanstack/table-core/dist/

请查看

node_modules/@tanstack/octane-table/src/index.d.ts

、配套的

*.tsrx.d.ts

侧文件以及

src/types.ts

。此包发布了原始源码；核心API位于已安装的

@tanstack/table-core/dist/

目录中。