@tanstack/svelte-table
Version:
Headless UI for building powerful tables & datagrids for Svelte.
169 lines (124 loc) • 4.07 kB
Markdown
---
name: create-table-hook
description: >
Define a Svelte createAppTable/createAppColumnHelper using the adapter's rune-capable createTableHook implementation, shared features/defaults, reactive per-table getters, optional App component registries, and typed table/cell/header context hooks.
metadata:
type: framework
library: '@tanstack/svelte-table'
framework: svelte
library_version: '9.1.2'
requires:
- '@tanstack/table-core#core'
- getting-started
- table-state
sources:
- 'TanStack/table:docs/framework/svelte/guide/composable-tables.md'
- 'TanStack/table:examples/svelte/composable-tables'
- 'TanStack/table:packages/svelte-table/src/createTableHook.svelte.ts'
---
This skill builds on `@tanstack/table-core#core`, `getting-started`, and `table-state`. Use it when multiple tables share conventions; keep one-off tables on `createTable`.
## Setup
Use the shipped `createTableHook`; its implementation is rune-capable. The app hook module itself may be a normal `.ts` module, as in the maintained example.
```ts
import {
createTableHook,
rowSortingFeature,
tableFeatures,
} from '@tanstack/svelte-table'
export const {
createAppTable,
createAppColumnHelper,
useTableContext,
useCellContext,
useHeaderContext,
} = createTableHook({
features: tableFeatures({ rowSortingFeature }),
})
```
```svelte
<script lang="ts">
import { createAppColumnHelper, createAppTable } from './app-table.svelte'
type Person = { name: string }
const helper = createAppColumnHelper<Person>()
const columns = helper.columns([helper.accessor('name', { header: 'Name' })])
let data = $state<Person[]>([{ name: 'Ada' }])
const table = createAppTable({
columns,
get data() {
return data
},
})
</script>
```
## Core Patterns
### Register reusable components once
Pass stable `tableComponents`, `cellComponents`, and `headerComponents` to `createTableHook`. Render them through the returned `AppTable`, `AppCell`, and `AppHeader` wrappers so their typed context hooks have a provider.
### Prefer context inside registered components
```ts
import { useCellContext } from './app-table.svelte'
const cell = useCellContext<string>()
const value = cell.getValue()
```
This avoids prop drilling and keeps feature/component types bound to the app hook.
## Common Mistakes
### CRITICAL Reimplementing the rune-aware hook
Wrong:
```ts
// app-table.ts
export function createAppTable(options) {
return constructTable(options)
}
```
Correct:
```ts
// app-table.ts
export const { createAppTable } = createTableHook({ features })
```
The shipped implementation supplies Svelte rune reactivity, option synchronization, wrappers, and context plumbing that a plain core wrapper omits.
Source: `packages/svelte-table/src/createTableHook.svelte.ts`
### HIGH Freezing per-table rune inputs
Wrong:
```ts
const table = createAppTable({ columns, data })
```
Correct:
```ts
const table = createAppTable({
columns,
get data() {
return data
},
})
```
Shared defaults are static, but each table must still expose current reactive values.
Source: `docs/framework/svelte/guide/composable-tables.md`
### HIGH Reading context outside its wrapper
Wrong:
```ts
const cell = useCellContext()
```
Correct:
```svelte
<table.AppCell {cell}><cell.TextCell /></table.AppCell>
```
Context helpers require the matching App wrapper in the rendered ancestor tree.
Source: `packages/svelte-table/src/createTableHook.svelte.ts`
### MEDIUM Abstracting a single table too early
Wrong:
```ts
const hook = createTableHook({ features: tableFeatures({}) })
```
Correct:
```ts
const table = createTable({
features: tableFeatures({}),
columns,
get data() {
return data
},
})
```
Use the hook for recurring app conventions, not merely to rename standalone construction.
Source: `docs/framework/svelte/guide/composable-tables.md`
## API Discovery
Inspect `node_modules/@tanstack/svelte-table/dist/createTableHook.svelte.d.ts` and the `App*.svelte` wrappers for exact returned helpers and component contracts.