getting-started

Load intent load @tanstack/table-core#core first for the headless model, stable inputs, and column inference.

Setup

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

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

function PeopleTable() @{
  const [data] = useState<Person[]>([{ name: 'Ada' }])
  const table = useTable({ features, columns, data })

  <table>
    <thead>
      @for (const group of table.getHeaderGroups(); key group.id) {
        <tr>
          @for (const header of group.headers; key header.id) {
            <th><table.FlexRender header={header} /></th>
          }
        </tr>
      }
    </thead>
    <tbody>
      @for (const row of table.getRowModel().rows; key row.id) {
        <tr>
          @for (const cell of row.getAllCells(); key cell.id) {
            <td><table.FlexRender cell={cell} /></td>
          }
        </tr>
      }
    </tbody>
  </table>
}

const rootElement = document.getElementById('root')
if (!rootElement) throw new Error('Root element not found')
createRoot(rootElement).render(PeopleTable)

Construction and rendering

This adapter distributes authored TypeScript and TSRX. Configure the consumer with octane() in vite.config.ts and the TSRX JSX import source octane. Author component bodies with @{ ... } and keyed @for loops for rows, headers, and cells.

Import from @tanstack/octane-table. Render table.FlexRender as a component so it gets its own Octane scope. It preserves numbers including 0, render descriptors, and component functions.

Keep features and column definitions at module scope. For inputs that depend on component state, use useMemo; pass the current stable data array to useTable. Convert non-renderable values with String(value) when displaying them as text.

Read for the task

• When adding or configuring optional features, load intent load @tanstack/table-core#table-features and read only references for the requested behavior.
• For state ownership or reactive reads, read table-state.
• When tables share features, defaults, or reusable UI, read create-table-hook.

API discovery

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/.