Agents & OrchestrationSûr100100/100

Create Table Hook (TanStack) — Solid Table

Create reusable Solid table infrastructure with createTableHook, createAppTable, createAppColumnHelper, shared features/defaults, component registries, App wrappers, and typed context hooks. Load for recurring app conventions, reactive per-table getters, or prop drilling.

ou envoie-le directement à ton agent.

Installer dans ton projet

$ curl -fsSL https://arboristhree.xyz/cli/install-skill.mjs -o /tmp/arboris-install-skill.mjs && node /tmp/arboris-install-skill.mjs create-table-hook__tanstack-table__packages-solid-table-skills-867c68f4ec0c
TanStack
TanStack/table
Contenu à copier
---
name: create-table-hook
description: >
  Create reusable Solid table infrastructure with createTableHook, createAppTable, createAppColumnHelper, shared features/defaults, component registries, App wrappers, and typed context hooks. Load for recurring app conventions, reactive per-table getters, or prop drilling.
metadata:
  origin: TanStack
  {
    type: framework,
    library: '@tanstack/solid-table',
    library_version: '9.2.4',
    framework: solid,
  }
requires: ['@tanstack/table-core#core', getting-started, table-state]
sources:
  - 'TanStack/table:docs/framework/solid/guide/composable-tables.md'
  - 'TanStack/table:examples/solid/composable-tables'
  - 'TanStack/table:packages/solid-table/src/createTableHook.tsx'
---

This skill builds on `@tanstack/table-core#core`, `getting-started`, and `table-state`. Use a factory when tables share policy; keep one-off tables on `createTable`.

## Setup

```tsx
import {
  createTableHook,
  rowSelectionFeature,
  tableFeatures,
} from '@tanstack/solid-table'

export const { createAppColumnHelper, createAppTable, useTableContext } =
  createTableHook({
    features: tableFeatures({ rowSelectionFeature }),
    getRowId: (row: { id: string }) => row.id,
  })
```

## Core Patterns

### Infer columns with the bound helper

```tsx
type Person = { id: string; name: string }
const helper = createAppColumnHelper<Person>()
const columns = helper.columns([helper.accessor('name', { header: 'Name' })])
```

### Preserve per-table reactivity

```tsx
const table = createAppTable({
  columns,
  get data() {
    return data()
  },
})
return <table.AppTable>{() => <RowCount />}</table.AppTable>
```

## Common Mistakes

### MEDIUM Abstracting a one-off table

Wrong:

```tsx
const app = createTableHook({ features: tableFeatures({}) })
```

Correct:

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

The factory should encode repeated app conventions rather than add ceremony.

Source: `docs/framework/solid/guide/composable-tables.md`

### HIGH Passing per-table snapshots

Wrong:

```tsx
createAppTable({ columns, data: data() })
```

Correct:

```tsx
createAppTable({
  columns,
  get data() {
    return data()
  },
})
```

The getter preserves Solid tracking when the signal changes.

Source: `examples/solid/composable-tables`

### HIGH Reading context outside wrappers

Wrong:

```tsx
return <RowCount />
```

Correct:

```tsx
return <table.AppTable>{() => <RowCount />}</table.AppTable>
```

Returned context hooks must run under the matching factory wrapper; use them instead of prop drilling registered components.

Source: `packages/solid-table/src/createTableHook.tsx`

## API Discovery

Inspect `node_modules/@tanstack/solid-table/dist/createTableHook.d.ts` for exact returned names, component binding, context providers, and reactive option merging.
Colle ce Markdown dans ton agent ou utilise les boutons ci-dessus pour l’écrire dans ton projet.

Ce que fait Create Table Hook (TanStack) — Solid Table

Applique les pratiques du skill create-table-hook__tanstack-table__packages-solid-table-skills-867c68f4ec0c.

Comment utiliser Create Table Hook (TanStack) — Solid Table

1
Copie le prompt
Un clic copie le prompt packagé (ou l'envoie à ton agent).
2
L'agent installe le skill
Il ajoute le SKILL.md et ses ressources à ton projet.
3
Activation automatique
Le skill s'active dès que le contexte correspond.

Déclencheurs pour Create Table Hook (TanStack) — Solid Table

Dis simplement à ton agent quelque chose comme :

Applique le skill create-table-hook__tanstack-table__packages-solid-table-skills-867c68f4ec0c à cette tâche
Utilise create-table-hook__tanstack-table__packages-solid-table-skills-867c68f4ec0c pour améliorer cette implémentation
Passe en revue ce sujet avec create-table-hook__tanstack-table__packages-solid-table-skills-867c68f4ec0c

Skills liés à Create Table Hook (TanStack) — Solid Table