tanstack-table_skill

Overview

This skill helps you build headless, production-ready data tables using TanStack Table v8, optimized for server-side workflows and Cloudflare Workers + D1. It bundles reusable templates, server-side pagination/filtering/sorting patterns, virtualization examples, and common error fixes to get a robust table layer without opinionated UI. Use it to coordinate TanStack Table with TanStack Query and to scale tables for large datasets.

How this skill works

The skill provides concrete patterns and code templates that wire TanStack Table state (pagination, filters, sorting) to API endpoints backed by Cloudflare Workers and D1. It shows how to mark table features as manual, include table state in TanStack Query keys, and apply virtualization to render only visible rows. It also documents SQL parameterization, endpoint examples, and the exact client-side hooks and flags needed to avoid re-render, sync, and performance issues.

When to use it

• Building tables that require server-side pagination, filtering, or sorting
• Integrating TanStack Table with TanStack Query for cached API fetching
• Connecting a Cloudflare Workers + D1 backend to a React table
• Rendering very large datasets (1k–10k+ rows) where virtualization is needed
• When you need headless, type-safe column definitions and stable state management

Best practices

• Memoize data and column definitions (use useMemo or define outside components) to prevent infinite re-renders
• Include full table state (page, pageSize, filters, sorting) in your TanStack Query keys for correct cache/refetch behavior
• Set manualPagination/manualFiltering/manualSorting when the server owns those features and provide pageCount
• Use TanStack Virtual to render only visible rows and configure overscan and estimated row height
• Return total counts or pageCount from the API to enable correct pagination controls

Example use cases

• Server-paginated users list powered by a Cloudflare Worker endpoint and D1 SQL with LIMIT/OFFSET
• Searchable table where column filters are sent as query params to the API and applied in SQL
• Sortable audit log where header clicks update sorting state included in the query key and API
• Virtualized product catalog rendering 10k+ rows while fetching paginated subsets from the server
• Migrating from another table library to TanStack Table v8 with type-safe column helpers