tanstack-solid-table-getting-started

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

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 ( {(group) => ( {(header) => ( <table.FlexRender header={header} /> )} )} {(row) => ( {(cell) => ( <table.FlexRender cell={cell} /> )} )} ) }

## Core Patterns

### Expose changing inputs through getters

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

Keep feature definitions static

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

Common Mistakes

HIGH Using the v8 constructor

Wrong:

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

Correct:

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:

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

Correct:

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:

return <div>{table}</div>

Correct:

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.