Skip to main content

getting-started

Create and render Table v9 with the solid adapter. Route reusable createTableHook components, Query and Virtual integration, and framework setup; use table-state for reactive ownership.

소스 정보

저장소
TanStack/table
최근 소스 활동
2026년 10월 12일 16:41
감지된 SKILL.md 언어
영어
스타
28,550
포크
3,585

설치 방법

기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.

소스 파일 검토

설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.

파일 탐색기
4 개 파일

SKILL.md 표시 중

SKILL.md
소스 지침 · 읽기 전용 미리보기
name
getting-started
description
Create and render Table v9 with the solid adapter. Route reusable createTableHook components, Query and Virtual integration, and framework setup; use table-state for reactive ownership.
metadata
{"type":"framework","library":"@tanstack/solid-table","library_version":"9.3.1","framework":"solid"}
requires
["@tanstack/table-core#core"]
sources
["TanStack/table:docs/framework/solid/guide/migrating.md","TanStack/table:examples/solid/basic-use-table","TanStack/table:packages/solid-table/src/index.tsx","TanStack/table:docs/framework/solid/guide/composable-tables.md","TanStack/table:examples/solid/composable-tables","TanStack/table:packages/solid-table/src/createTableHook.tsx","TanStack/table:examples/solid/with-tanstack-query","TanStack/table:docs/framework/solid/guide/pagination.md","TanStack/table:docs/framework/solid/guide/virtualization.md","TanStack/table:examples/solid/virtualized-rows","TanStack/table:examples/solid/virtualized-columns","TanStack/table:examples/solid/virtualized-infinite-scrolling"]
# Solid Table setup and integration Before starting, run `intent load @tanstack/table-core#core` for the shared headless model and stable-input rules. ## Setup ```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> ) } ``` ## Essential constraints Use `createTable` in a Solid owner. Preserve changing data with `get data() { return data() }`; `data: data()` captures a snapshot. Keep features and columns stable and derive transformed arrays with `createMemo`. Table owns models and state. The application owns markup, CSS, interactions, and accessibility. Core-only tables use `row.getAllCells()`; visibility-aware methods need `columnVisibilityFeature`. Optional state and APIs require their features. Put row-model slots after their prerequisite features in `tableFeatures()`. ## Load by task - For repeated features, defaults, typed contexts, or component registries, read [reusable app hooks](references/create-table-hook.md). - For Query-backed data, server pages, sorting, filtering, or request keys, read [TanStack Query integration](references/with-tanstack-query.md). - For virtual rows, columns, dynamic measurement, or infinite scrolling, read [TanStack Virtual integration](references/with-tanstack-virtual.md). - For controlled state, tracked reads, or render subscriptions, read [table state](../table-state/SKILL.md). - For feature registration, missing feature APIs, or processing ownership, run `intent load @tanstack/table-core#table-features` and read only references needed by the task. - For v8 code, read the [migration checklist](../migrate-v8-to-v9/SKILL.md). ## API discovery Inspect `node_modules/@tanstack/solid-table/dist/index.d.ts`, then the exported adapter declarations for the installed version. Inspect optional core APIs under `node_modules/@tanstack/table-core/dist/features/`.
GitHub에서 보기