getting-started

name	getting-started
description	Create an @tanstack/octane-table v9 table with useTable, tableFeatures, stable inputs, TSRX component bodies, keyed @for rendering, and FlexRender. Load when starting an Octane table or translating a React/Preact example without changing its behavior.
metadata	{"type":"framework","library":"@tanstack/octane-table","library_version":"9.2.4","framework":"octane"}
requires	["@tanstack/table-core#core","@tanstack/table-core#table-features"]
sources	["TanStack/table:docs/framework/octane/quick-start.md","TanStack/table:examples/octane/basic-use-table","TanStack/table:packages/octane-table/src/index.ts","TanStack/table:packages/octane-table/src/useTable.tsrx"]

This skill builds on @tanstack/table-core#core and @tanstack/table-core#table-features. The adapter publishes authored TypeScript and TSRX, so the consuming app must compile it with Octane's integration.

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)