# Getting Started

> Create a Solid Table v9 table with createTable, explicit tableFeatures, reactive data getters, stable static inputs, and Solid JSX/FlexRender. Load when starting a Solid table, replacing createSolidTable, or adapting React examples.

- Skill: `tanstack/getting-started-5` (Agent Skill)
- Install (CLI): `npx skillmds@latest add tanstack/getting-started-5`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tanstack/getting-started-5/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: TanStack (https://skillmd.com/u/tanstack)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tanstack/getting-started-5

---


This skill builds on `@tanstack/table-core#core` and `@tanstack/table-core#table-features`. Solid Table supplies reactive models; the application still renders and styles its own headless markup.

## Setup

```tsx
import { For, createSignal } from 'solid-js'
import {
  createColumnHelper,
  createTable,
  tableFeatures,
} from '@tanstack/solid-table'

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

export function PeopleTable() {
  const [data] = createSignal<Person[]>([{ name: 'Ada' }])
  const table = createTable({
    features,
    columns,
    get data() {
      return data()
    },
  })
  return (
    <table>
      <thead>
        <For each={table.getHeaderGroups()}>
          {(group) => (
            <tr>
              <For each={group.headers}>
                {(header) => (
                  <th>
                    <table.FlexRender header={header} />
                  </th>
                )}
              </For>
            </tr>
          )}
        </For>
      </thead>
      <tbody>
        <For each={table.getRowModel().rows}>
          {(row) => (
            <tr>
              <For each={row.getAllCells()}>
                {(cell) => (
                  <td>
                    <table.FlexRender cell={cell} />
                  </td>
                )}
              </For>
            </tr>
          )}
        </For>
      </tbody>
    </table>
  )
}
```

## Core Patterns

### Expose changing inputs through getters

```tsx
const table = createTable({
  features,
  columns,
  get data() {
    return data()
  },
})
```

### Keep feature definitions static

```tsx
const features = tableFeatures({
  rowSortingFeature,
  sortedRowModel: createSortedRowModel(),
})
```

## Common Mistakes

### HIGH Using the v8 constructor

Wrong:

```tsx
const table = createSolidTable({ data: data(), columns })
```

Correct:

```tsx
const table = createTable({
  features,
  columns,
  get data() {
    return data()
  },
})
```

V9 uses `createTable`, explicit features, and reactive option access.

Source: `docs/framework/solid/guide/migrating.md`

### HIGH Passing a signal snapshot

Wrong:

```tsx
const table = createTable({ features, columns, data: data() })
```

Correct:

```tsx
const table = createTable({
  features,
  columns,
  get data() {
    return data()
  },
})
```

The snapshot is read once; the getter lets the adapter track later signal changes.

Source: `examples/solid/basic-use-table`

### HIGH Expecting Table to render UI

Wrong:

```tsx
return <div>{table}</div>
```

Correct:

```tsx
return <For each={table.getRowModel().rows}>{(row) => <div>{row.id}</div>}</For>
```

Table is headless; Solid markup, CSS, semantics, and interactions remain renderer-owned.

Source: `packages/solid-table/src/createTable.ts`

## API Discovery

Inspect `node_modules/@tanstack/solid-table/dist/index.d.ts`, then `createTable.d.ts`, `FlexRender.d.ts`, and installed core feature directories.