Tanstack Table

{
  "name": "tanstack-table",
  "description": "Build headless data tables with TanStack Table v8. Server-side pagination, filtering, sorting, and virtualization for Cloudflare Workers + D1. Prevents 12 documented errors. Use when building tables with large datasets, coordinating with TanStack Query, or fixing state management, performance, or React 19+ compatibility issues.",
  "version": "1.0.0",
  "author": {
    "name": "Jeremy Dawes",
    "email": "jeremy@jezweb.net"
  },
  "license": "MIT",
  "repository": "https://github.com/jezweb/claude-skills",
  "keywords": []
}


# TanStack Table Skill

Build production-ready, headless data tables with TanStack Table v8, optimized for server-side patterns and Cloudflare Workers integration.

## Auto-Trigger Keywords

This skill automatically activates when you mention:
- "data table", "datagrid", "table component"
- "server-side pagination", "server-side filtering", "server-side sorting"
- "TanStack Table", "React Table", "React Table v8"
- "table with large dataset", "large list performance"
- "paginate API", "filter API", "sort API"
- "Cloudflare D1 table", "D1 database table"
- "virtualize table", "virtualized list"
- "table state management", "table URL sync"

## What This Skill Provides

### 🎯 Core Features
- **Server-side patterns** - Pagination, filtering, sorting with API backends
- **Cloudflare D1 integration** - Complete Workers + D1 + Table examples
- **TanStack Query coordination** - Proper query key patterns, state sync
- **Virtualization** - TanStack Virtual for large datasets (10k+ rows)
- **Column/Row Pinning** - Keep important columns/rows visible during scroll
- **Row Expanding** - Nested data and detail rows
- **Row Grouping** - Group by column values with aggregation
- **Type safety** - TypeScript patterns, column helper usage
- **Error prevention** - 6+ documented issues with solutions

### 📦 Templates (6 Production-Ready)
1. **Basic client-side table** - Simple table with local data
2. **Server-paginated table** - API-driven pagination with TanStack Query
3. **D1 database integration** - Cloudflare D1 + Workers API + Table
4. **Column configuration** - Type-safe column definitions
5. **Virtualized large dataset** - Performance optimization with TanStack Virtual
6. **shadcn/ui styled table** - Tailwind v4 + shadcn integration

### 📚 Reference Docs (5)
1. **Server-side patterns** - Complete guide to API-driven tables
2. **Query integration** - TanStack Query + Table coordination
3. **Cloudflare D1 examples** - Workers + D1 complete patterns
4. **Performance & virtualization** - TanStack Virtual guide
5. **Common errors** - 6+ issues with solutions

## Quick Example

### Server-Side Paginated Table

```typescript
import { useReactTable, getCoreRowModel } from '@tanstack/react-table'
import { useQuery } from '@tanstack/react-query'
import { useState } from 'react'

function UsersTable() {
  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 20 })

  // TanStack Query fetches data
  const { data } = useQuery({
    queryKey: ['users', pagination.pageIndex, pagination.pageSize],
    queryFn: () => fetch(`/api/users?page=${pagination.pageIndex}&pageSize=${pagination.pageSize}`)
      .then(r => r.json())
  })

  // TanStack Table manages display
  const table = useReactTable({
    data: data?.data ?? [],
    columns,
    getCoreRowModel: getCoreRowModel(),
    manualPagination: true, // Server handles pagination
    pageCount: data?.pagination.pageCount ?? 0,
    state: { pagination },
    onPaginationChange: setPagination,
  })

  return <div>{/* render table */}</div>
}
```

### Cloudflare D1 Backend

```typescript
// Cloudflare Workers API
export async function onRequestGet({ request, env }) {
  const url = new URL(request.url)
  const page = Number(url.searchParams.get('page')) || 0
  const pageSize = 20
  const offset = page * pageSize

  const { results } = await env.DB.prepare(`
    SELECT * FROM users
    ORDER BY created_at DESC
    LIM