table-state

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

useTable

table.state

.get()

table.store.state

table.Subscribe

Controlled slice setup

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.

Read for the task

API discovery

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

*.tsrx.d.ts

src/types.ts

@tanstack/table-core/dist/