CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

72

Quality

90%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

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.

Repository
TanStack/table
Path

packages/solid-table/skills/getting-started/SKILL.md

Commit

9e523bc

Last updated
First committed

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.

Claim skill