# Getting Started

Create and render Table v9 with the ember 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 ember adapter. Route reusable createTableHook defaults, 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.

Ember 5.8 or newer requires Embroider or ember-auto-import v2. Prefer `.gts` or `.gjs` template-tag components with Glint.

## Setup

```gts
import Component from '@glimmer/component'
import { tracked } from '@glimmer/tracking'
import {
  FlexRenderCell,
  createColumnHelper,
  tableFeatures,
  useTable,
  type Cell,
  type Row,
} from '@tanstack/ember-table'

type Person = { id: string; name: string }

const features = tableFeatures({})
const columnHelper = createColumnHelper<typeof features, Person>()
const columns = columnHelper.columns([
  columnHelper.accessor('name', { header: 'Name' }),
])
const initialData: Person[] = [{ id: '1', name: 'Ada' }]
const getRowId = (row: Person) => row.id

const getAllCells = (
  row: Row<typeof features, Person>,
): Array<Cell<typeof features, Person>> => row.getAllCells()

export default class PeopleTable extends Component {
  @tracked data = initialData

  table = useTable(this, () => ({
    features,
    columns,
    data: this.data,
    getRowId,
  }))

  get rows() {
    return this.table.getRowModel().rows
  }

  <template>
    <table>
      <tbody>
        {{#each this.rows as |row|}}
          <tr>
            {{#each (getAllCells row) as |cell|}}
              <td><FlexRenderCell @cell={{cell}} /></td>
            {{/each}}
          </tr>
        {{/each}}
      </tbody>
    </table>
  </template>
}
```

## Construction and rendering

`useTable` takes an options thunk. Read tracked data inside it, and keep features, atoms, and columns stable. In a component, pass `this` as the owner to bind external-atom cleanup to the component lifecycle. The one-argument thunk form remains available for standalone tables.

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