# Getting Started

Create and render Table v9 with the octane adapter.

- Repository: https://github.com/TanStack/table (28539 stars)
- Category: Engineering
- License: MIT
- Last updated: 2026-10-21
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add TanStack/table --skill getting-started -g -a claude-code -y`
Codex: `npx skills add TanStack/table --skill getting-started -g -a codex -y`
Cursor: `npx skills add TanStack/table --skill getting-started -g -a cursor -y`
Gemini CLI: `npx skills add TanStack/table --skill getting-started -g -a gemini-cli -y`

## Description

Create and render Table v9 with the octane adapter. Route reusable createTableHook components, and framework setup; use table-state for reactive ownership.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

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

## Setup

```tsrx
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.

The rest: https://github.com/TanStack/table/blob/HEAD/packages/octane-table/skills/getting-started/SKILL.md