# Getting Started

Create and render Table v9 with the alpine 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 alpine 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.

## Setup

```ts
import Alpine from 'alpinejs'
import {
  FlexRender,
  createTable,
  tableFeatures,
  type ColumnDef,
} from '@tanstack/alpine-table'

type Person = { id: string; name: string }
const features = tableFeatures({})
const columns: Array<ColumnDef<typeof features, Person>> = [
  { accessorKey: 'name', header: 'Name' },
]

Alpine.data('peopleTable', () => {
  const local = Alpine.reactive({
    data: [{ id: '1', name: 'Ada' }] as Array<Person>,
  })
  const table = createTable({
    features,
    columns,
    get data() {
      return local.data
    },
    getRowId: (row) => row.id,
  })

  return { table, FlexRender }
})

window.Alpine = Alpine
Alpine.start()
```

Render real table structure with `x-for`; use `x-html="FlexRender({ header })"` or `x-html="FlexRender({ cell })"` only for renderer output.

## Construction and rendering

Wrap changing data in `Alpine.reactive` and expose it with `get data()`. The adapter tracks option getters; `data: local.data` captures a snapshot and does not follow later array replacements. Keep static columns and features outside getters.

The returned table is a reactive proxy. Read Table APIs directly in `x-text`, `x-for`, `x-if`, or bound attributes; no Subscribe component is needed.

Build table structure and interactive controls as real Alpine markup. Use `x-html="FlexRender({ header })"` or `x-html="FlexRender({ cell })"` for renderer output. Alpine does not initialize directives inside `x-html` strings; use templates or `Alpine.bind` bundles for buttons and inputs.

## Read for the task

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