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 (
    <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

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.