菜单
Paginate with rowPaginationFeature and paginatedRowModel or manualPagination. Load for pageIndex/pageSize state, rowCount/pageCount, unknown next-page limits, already-paginated server data, or autoResetPageIndex surprises.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/TanStack/table --skill pagination命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
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.
正在显示 SKILL.md
| name | pagination |
| description | Paginate with rowPaginationFeature and paginatedRowModel or manualPagination. Load for pageIndex/pageSize state, rowCount/pageCount, unknown next-page limits, already-paginated server data, or autoResetPageIndex surprises. |
| metadata | {"type":"sub-skill","library":"@tanstack/table-core","library_version":"9.2.4"} |
| requires | ["core","table-features","client-vs-server"] |
| sources | ["TanStack/table:docs/framework/react/guide/pagination.md","TanStack/table:packages/table-core/src/features/row-pagination","TanStack/table:examples/react/pagination"] |
This skill builds on core, table-features, and client-vs-server. Choose client slicing or server pages, never both accidentally.
import {
createPaginatedRowModel,
rowPaginationFeature,
tableFeatures,
} from '@tanstack/table-core'
export const features = tableFeatures({
rowPaginationFeature,
paginatedRowModel: createPaginatedRowModel(),
})
export const initialState = { pagination: { pageIndex: 0, pageSize: 25 } }
const serverOptions = { manualPagination: true, rowCount: response.total }
Pass one already-processed page and either rowCount or pageCount.
Wrong: const options = { data: allRows, manualPagination: true }
Correct: const options = { data: requestedPageRows, manualPagination: true, rowCount: totalRows }
Manual pagination trusts the provided data as the current page.
Source: https://github.com/TanStack/table/issues/4917
Wrong: const options = { data: pageRows, manualPagination: true }
Correct: const options = { data: pageRows, manualPagination: true, rowCount: 1234 }
Without a count, last-page and next-page availability cannot reflect the server dataset.
Source: packages/table-core/src/features/row-pagination/rowPaginationFeature.types.ts
Wrong: onPaginationChange: setPagination
Correct: const options = { onPaginationChange: setPagination, autoResetPageIndex: false }
Client data and processing changes may reset page index; configure the policy when product state must retain it.
Source: docs/framework/react/guide/pagination.md#auto-reset-page-index
Inspect node_modules/@tanstack/table-core/dist/features/row-pagination/ for reset rules, count calculation, and navigation APIs.