tanstack-table
TanStack Table v8 skill provides production templates for building headless data tables optimized for server-side operations and Cloudflare Workers. Covers pagination, filtering, sorting, column controls, virtualization for 10k+ rows, and TanStack Query integration with error prevention for common state management pitfalls.
TanStack Table builds headless, production-ready data tables with server-side pagination, filtering, sorting, and virtualization for large datasets.
AI-generated summary based on this skill's SKILL.md
Install
secondsky/claude-skills/tanstack-table · repository language: TypeScript
git clone https://github.com/secondsky/claude-skills
cp -r claude-skills/plugins/tanstack-table/skills/tanstack-table ~/.claude/skills/tanstack-tablenpx skillfed install secondsky/claude-skills/tanstack-tableFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How to build a data table with pagination using TanStack Table?
TanStack Table enables server-side pagination through state management of page index and page size. Configure pagination state in your table instance, sync it with API calls via TanStack Query, and update row data based on server responses. TanStack Table handles the UI logic while you control the backend pagination parameters, allowing efficient handling of large datasets without loading all rows client-side.
How does TanStack Table integrate with Cloudflare Workers and D1?
TanStack Table coordinates with Cloudflare Workers as your API layer and D1 as your database. Workers handle pagination, filtering, and sorting queries against D1, returning paginated results. TanStack Table manages the client-side state and UI, while TanStack Query fetches data from your Worker endpoints. This architecture keeps heavy operations server-side and maintains a lightweight, responsive frontend.
What's the best way to optimize table rendering for large datasets?
TanStack Table supports virtualization through libraries like TanStack Virtual, which renders only visible rows. For tables with 10,000+ rows, virtualization dramatically improves performance by reducing DOM nodes. Combine this with server-side pagination to fetch manageable chunks, lazy-load columns, and memoize row components to prevent unnecessary re-renders and maintain smooth scrolling.
How do I sync TanStack Table state with TanStack Query?
TanStack Table provides hooks and state management that coordinate with TanStack Query's caching and fetching. Store pagination, sorting, and filtering state in TanStack Table, pass these as dependencies to your Query key, and let Query handle data fetching. When table state changes, Query automatically refetches with new parameters, keeping your table synchronized with server data.
What common TanStack Table errors should I prevent?
TanStack Table skill covers preventing infinite re-renders caused by unstable state references, state mismatches between client and server, and improper dependency arrays in effects. Use proper memoization, stable callback references, and careful Query key construction. Avoid recreating table instances on every render and ensure sorting/filtering state matches your API contract to maintain consistency.
Can TanStack Table handle column pinning and visibility controls?
TanStack Table provides built-in column visibility and pinning state management. Configure which columns are visible, frozen, or hidden through table options. Persist these preferences to localStorage or your database for user-specific layouts. TanStack Table handles the rendering logic; you control the UI for toggling columns, making it easy to build customizable data tables with TypeScript type safety.
SKILL.md
rendered from the published skill — quoted content, verbatim
TanStack Table Skill
Build production-ready, headless data tables with TanStack Table v8, optimized for server-side patterns and Cloudflare Workers integration.
When to Use This Skill
**Auto-triggers
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 15 files
plugins/tanstack-table/skills/tanstack-table/SKILL.md
plugins/tanstack-table/skills/tanstack-table/references/cloudflare-d1-examples.md
plugins/tanstack-table/skills/tanstack-table/references/common-errors.md
plugins/tanstack-table/skills/tanstack-table/references/feature-controls.md
plugins/tanstack-table/skills/tanstack-table/references/performance-virtualization.md
plugins/tanstack-table/skills/tanstack-table/references/query-integration.md
plugins/tanstack-table/skills/tanstack-table/references/server-side-patterns.md
plugins/tanstack-table/skills/tanstack-table/templates/basic-client-table.tsx
plugins/tanstack-table/skills/tanstack-table/templates/column-configuration.tsx
plugins/tanstack-table/skills/tanstack-table/templates/controlled-table-state.tsx
plugins/tanstack-table/skills/tanstack-table/templates/d1-database-example.tsx
plugins/tanstack-table/skills/tanstack-table/templates/package.json
plugins/tanstack-table/skills/tanstack-table/templates/server-paginated-table.tsx
plugins/tanstack-table/skills/tanstack-table/templates/shadcn-styled-table.tsx
plugins/tanstack-table/skills/tanstack-table/templates/virtualized-large-dataset.tsx