TanStack Table

Build server-side paginated data grids with TanStack Table v8 and Cloudflare D1.

18|4|Updated Jan 15, 2026
One-click install
npx skills add https://github.com/ataschz/tanstack-start-mastra-example --skill tanstack-table-ataschz
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: TanStack Table
Source: https://github.com/ataschz/tanstack-start-mastra-example/tree/main/.agents/skills/TanStack%20Table
Command: npx skills add https://github.com/ataschz/tanstack-start-mastra-example --skill tanstack-table-ataschz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

TanStack Table skills address the challenge of building scalable, interactive data tables with server-side capabilities on Cloudflare. They provide a ready-to-use pattern for pagination, filtering, sorting, and virtualization to handle large datasets and real-time UI rendering.

Core Features & Use Cases

  • Server-side pagination, filtering, and sorting: offload heavy data operations to your backend or API layer.
  • Virtualization support: efficiently render tens of thousands of rows using TanStack Virtual.
  • Cloudflare D1 integration: optimized data access patterns for edge environments with secure and fast queries.
  • Use Case: You have a 50k-row dataset; you need a responsive, paged UI with server-side sorting and filtering for dashboards.

Quick Start

Run the TanStack Table skill to scaffold a server-side table with sample data and connect it to a Cloudflare D1 endpoint.

Frequently Asked Questions about TanStack Table

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement server-side pagination and sorting with TanStack Table v8?

Server-side pagination and sorting with TanStack Table v8 involve offloading heavy data operations to your backend API layer. This skill provides patterns for state synchronization and safe API integration to handle large datasets efficiently without client-side bottlenecks.

What is the best way to render large datasets with tens of thousands of rows in a React data grid?

Rendering tens of thousands of rows requires virtualization support. This skill implements TanStack Virtual patterns to efficiently render large datasets, ensuring responsive UI rendering for dashboards without overwhelming the browser DOM.

Can I use TanStack Table with Cloudflare Workers and D1 for edge data access?

Yes, TanStack Table works with Cloudflare Workers and D1. This skill provides optimized data access patterns for edge environments, including secure and fast D1 queries directly integrated with server-side table state management.

How do I manage query keys and API state synchronization for server-side data tables?

Managing query keys and API state synchronization requires aligning TanStack Table APIs with your data fetching layer. This skill satisfies best practices for query-key design and safe API integration to maintain consistent server-side table states.

Does this TanStack Table pattern scaffold sample data for testing server-side features?

Yes, running this skill scaffolds a server-side table with sample data. It connects directly to a Cloudflare D1 endpoint, allowing you to immediately test pagination, filtering, and sorting capabilities in a real edge environment.

Related Skills