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 when you mention:

• "data table" or "datagrid"
• "server-side pagination" or "server-side filtering"
• "TanStack Table" or "React Table"
• "table with large dataset"
• "paginate/filter/sort with API"
• "Cloudflare D1 table integration"
• "virtualize table" or "large list performance"

Use this skill when:

• Building data tables with pagination, filtering, or sorting
• Implementing server-side table features (API-driven)
• Integrating tables with TanStack Query for data fetching
• Working with large datasets (1000+ rows) needing virtualization
• Connecting tables to Cloudflare D1 databases
• Need headless table logic without opinionated UI
• Migrating from other table libraries to TanStack Table v8

What This Skill Provides

1. Production Templates (7)

• Basic client-side table - Simple table with local data
• Server-paginated table - API-driven pagination with TanStack Query
• D1 database integration - Cloudflare D1 + Workers API + Table
• Column configuration patterns - Type-safe column definitions
• Controlled table state - Column visibility, pinning, ordering, fuzzy/global filtering, row selection
• Virtualized large dataset - Performance optimization with TanStack Virtual
• shadcn/ui styled table - Integration with Tailwind v4 + shadcn

2. Server-Side Patterns

• Pagination with API backends
• Filtering with query parameters
• Sorting with database queries
• State management (page, filters, sorting)
• URL synchronization
• TanStack Query coordination

3. Cloudflare Integration

• D1 database query patterns
• Workers API endpoints for table data
• Pagination + filtering + sorting in SQL
• Bindings setup (wrangler.jsonc)
• Client-side integration patterns

4. Performance Optimization

• Virtualization with TanStack Virtual
• Large dataset rendering (10k+ rows)
• Memory-efficient patterns
• useVirtualizer() integration

5. Feature Controls & UX

• Column visibility toggles and pinning (frozen columns)
• Column ordering and sizing defaults
• Global + fuzzy search and faceted filters
• Row selection and row pinning patterns
• Controlled state checklist to avoid perf regressions

6. Error Prevention

Documents and prevents 6+ common issues:

1. Server-side state management confusion
2. TanStack Query integration errors (query key coordination)
3. Column filtering with API backends
4. Manual sorting setup mistakes
5. URL state synchronization issues
6. Large dataset performance problems
7. Over-controlling table state (columnSizingInfo) causing extra renders

Quick Start

Installation

# Core table library
bun add @tanstack/react-table@latest

# Optional: For virtualization (1000+ rows)
bun add @tanstack/react-virtual@latest

# Optional: For fuzzy/global search
bun add @tanstack/match-sorter-utils@latest

Latest verified versions (as of 2025-12-09):

• @tanstack/react-table: v8.21.3 (stable)
• @tanstack/react-virtual: v3.13.12
• @tanstack/match-sorter-utils: v8.21.3 (for fuzzy filtering)

React support: Works on React 16.8+ through React 19; React Compiler is not supported.

Basic Client-Side Table

import { useReactTable, getCoreRowModel, ColumnDef } from '@tanstack/react-table'
import { useMemo } from 'react'

interface User {
  id: string
  name: string
  email: string
}

const columns: ColumnDef<User>[] = [
  { accessorKey: 'id', header: 'ID' },
  { accessorKey: 'name', header: 'Name' },
  { accessorKey: 'email', header: 'Email' },
]

function UsersTable() {
  // CRITICAL: Memoize data and columns to prevent infinite re-renders
  const data = useMemo<User[]>(() => [
    { id: '1', name: 'Alice', email: '[email protected]' },
    { id: '2', name: 'Bob', email: '[email protected]' },
  ], [])

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(), // Required
  })

  return (
    <table>
      <thead>
        {table.getHeaderGroups().map(headerGroup => (
          <tr key={headerGroup.id}>
            {headerGroup.headers.map(header => (
              <th key={header.id}>
                {header.isPlaceholder ? null : header.column.columnDef.header}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody>
        {table.getRowModel().rows.map(row => (
          <tr key={row.id}>
            {row.getVisibleCells().map(cell => (
              <td key={cell.id}>
                {cell.renderValue()}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  )
}

Server-Side Patterns (Recommended for Large Datasets)

Pattern 1: Server-Side Pagination with TanStack Query

Cloudflare Workers API Endpoint:

// src/routes/api/users.ts
import { Env } from '../../types'

export async function onRequestGet(context: { request: Request; env: Env }) {
  const url = new URL(context.request.url)
  const page = Number(url.searchParams.get('page')) || 0
  const pageSize = Number(url.searchParams.get('pageSize')) || 20

  const offset = page * pageSize

  // Query D1 database
  const { results, meta } = await context.env.DB.prepare(`
    SELECT id, name, email, created_at
    FROM users
    ORDER BY created_at DESC
    LIMIT ? OFFSET ?
  `).bind(pageSize, offset).all()

  // Get total count for pagination
  const countResult = await context.env.DB.prepare(`
    SELECT COUNT(*) as total FROM users
  `).first<{ total: number }>()

  return Response.json({
    data: results,
    pagination: {
      page,
      pageSize,
      total: countResult
how to use tanstack-table
CursorClaude CodeClineCodexWindsurfGooseGitHub CopilotVS CodeGemini CLIKiloOpencodeKimi CLIRoo ClineAiderContinueZedBolt.newLovablev0Replit AgentSweepSmol DeveloperDevinCavemanAmpAntigravity
How to use tanstack-table on Cursor
AI-first code editor with Composer
1
Prerequisites
Before installing skills in Cursor, ensure your development environment meets these requirements:
›Cursor installed and configured on your development machine
›Node.js version 16.0+ with npm package manager (verify with node --version)
›Active project directory or workspace where you want to add tanstack-table
2
Execute installation command
Execute the skills CLI command in your project's root directory to begin installation:
$npx skills add https://github.com/secondsky/claude-skills --skill tanstack-tablecopy
The skills CLI fetches tanstack-table from GitHub repository secondsky/claude-skills and configures it for Cursor.
3
Select Cursor when prompted
The CLI will show a list of available agents. Use arrow keys to navigate and space to select Cursor:
◆ Which agents do you want to install to?
│
│ ── Universal (.agents/skills) ── always included ────
│   • Amp
│   • Antigravity
│   • Cline
│   • Codex
│ ●Cursor(selected)
│   • Cursor
│   • Windsurf
4
Verify installation
Confirm successful installation by checking the skill directory location:
.cursor/skills/tanstack-table
Reload or restart Cursor to activate tanstack-table. Access the skill through slash commands (e.g., /tanstack-table) or your agent's skill management interface.
⚠
Security & Verification Notice
We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.
Skills execute code in your development environment. Always verify the publisher's identity, review recent commits, and test in isolated environments before production deployment.
Additional Resources
›View source code on GitHub›Skills CLI documentation›Learn more about Cursor›What are agent skills?