菜单
Compose Solid Query reactive options with Solid Table manual server processing. Load for tracked query-key signals, query result getters, server row counts, keepPreviousData, and avoiding React Query patterns or duplicated data state.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/TanStack/table --skill with-tanstack-query命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
Share Alpine tableFeatures, defaults, createAppTable, and createAppColumnHelper with createTableHook. Load when multiple Alpine tables repeat infrastructure; unlike JSX adapters, Alpine has no registered table/cell/header component or context registry.
Create an Alpine TanStack Table v9 table with createTable, explicit tableFeatures, Alpine.reactive data getters, x-for rendering, and FlexRender through x-html. Load for first-table setup, reactive options, or when nested Alpine directives rendered by x-html do not initialize.
Read automatically reactive Alpine table APIs in bindings and own slices with Alpine.reactive getters plus on*Change or external TanStack Store atoms. Load for controlled state, updater callbacks, selector gating, atom precedence, or code incorrectly adding table.Subscribe.
| name | with-tanstack-query |
| description | Compose Solid Query reactive options with Solid Table manual server processing. Load for tracked query-key signals, query result getters, server row counts, keepPreviousData, and avoiding React Query patterns or duplicated data state. |
| metadata | {"type":"composition","library":"@tanstack/solid-table","library_version":"9.2.4","framework":"solid"} |
| requires | ["@tanstack/table-core#client-vs-server","getting-started","table-state"] |
| sources | ["TanStack/table:examples/solid/with-tanstack-query","TanStack/table:docs/framework/solid/guide/pagination.md"] |
This skill builds on @tanstack/table-core#client-vs-server, getting-started, and table-state. Query owns remote data; Table receives already processed rows for each manual stage.
import { keepPreviousData, useQuery } from '@tanstack/solid-query'
import { createAtom, useSelector } from '@tanstack/solid-store'
import {
createTable,
rowPaginationFeature,
tableFeatures,
} from '@tanstack/solid-table'
const features = tableFeatures({ rowPaginationFeature })
const emptyRows: Array<{ id: string }> = []
const paginationAtom = createAtom({ pageIndex: 0, pageSize: 20 })
const pagination = useSelector(paginationAtom)
const result = useQuery(() => ({
queryKey: ['people', pagination()],
queryFn: () => fetchPeople(pagination()),
placeholderData: keepPreviousData,
}))
const table = createTable({
features,
columns,
get data() {
return result.data?.rows ?? emptyRows
},
get rowCount() {
return result.data?.rowCount
},
atoms: { pagination: paginationAtom },
manualPagination: true,
})
const result = useQuery(() => ({
queryKey: ['people', pagination(), sorting()],
queryFn: () => fetchPeople({ pagination: pagination(), sorting: sorting() }),
}))
const table = createTable({
features,
columns,
get data() {
return result.data?.rows ?? emptyRows
},
})
Wrong:
useQuery({ queryKey: ['people', pagination()], queryFn: fetchPeople })
Correct:
useQuery(() => ({
queryKey: ['people', pagination()],
queryFn: () => fetchPeople(pagination()),
}))
Solid Query's options factory tracks signals read while constructing the key and request.
Source: examples/solid/with-tanstack-query
Wrong:
useEffect(() => setRows(result.data?.rows ?? []), [result.data])
Correct:
get data() { return result.data?.rows ?? emptyRows }
Solid getters connect the query result directly without a second synchronization layer.
Source: examples/solid/with-tanstack-query
Wrong:
createTable({ features, columns, data, manualPagination: true })
Correct:
createTable({
features,
columns,
get data() {
return result.data?.rows ?? emptyRows
},
get rowCount() {
return result.data?.rowCount
},
manualPagination: true,
})
Manual pagination bypasses the client row model; it does not fetch, page, or count data.
Source: docs/framework/solid/guide/pagination.md
Inspect installed node_modules/@tanstack/solid-table/dist/createTable.d.ts and the relevant core feature source; inspect @tanstack/solid-query source for reactive option shapes.