@tanstack/solid-table
Version:
Headless UI for building powerful tables & datagrids for Solid.
176 lines (141 loc) • 3.76 kB
Markdown
---
name: getting-started
description: >
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.
metadata:
{
type: framework,
library: '@tanstack/solid-table',
library_version: '9.1.2',
framework: solid,
}
requires: ['@tanstack/table-core#core', '@tanstack/table-core#table-features']
sources:
- 'TanStack/table:docs/framework/solid/guide/migrating.md'
- 'TanStack/table:examples/solid/basic-use-table'
- 'TanStack/table:packages/solid-table/src/index.tsx'
---
This skill builds on `@tanstack/table-core
```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>
)
}
```
```tsx
const table = createTable({
features,
columns,
get data() {
return data()
},
})
```
```tsx
const features = tableFeatures({
rowSortingFeature,
sortedRowModel: createSortedRowModel(),
})
```
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`
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`
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`
Inspect `node_modules/@tanstack/solid-table/dist/index.d.ts`, then `createTable.d.ts`, `FlexRender.d.ts`, and installed core feature directories.