skills.rest
oakoss
oakossOFFICIAL
Explore all skills by this author →
Website𝕏@oak_ossGitHub

tanstack-table

Build accessible data tables with TanStack Table and React Aria Components.

1|Updated Jan 22, 2026
Search Tags:#react#filtering#pagination#sorting#data-table#accessible#tanstack-table
One-click install
npx skills add https://github.com/oakoss/open-saas-kit --skill tanstack-table-oakoss
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-table
Source: https://github.com/oakoss/open-saas-kit/tree/main/.claude/skills/tanstack-table
Command: npx skills add https://github.com/oakoss/open-saas-kit --skill tanstack-table-oakoss

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides patterns and code examples to build accessible and feature-rich data tables using TanStack Table and React Aria Components, streamlining sorting, filtering, pagination, and visibility controls.

Core Features & Use Cases

  • Table construction: Build tables with column definitions, data sources, and header cells.
  • Feature set: Sorting, filtering, pagination, row selection, and column visibility.
  • Use Case: Build an admin dashboard data view with sortable, filterable tables.

Quick Start

Install the TanStack Table package and set up useReactTable with a basic data and column definitions. Then render a simple table with headers and rows.

Frequently Asked Questions about tanstack-table

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

FAQPage Schema
How do I build an accessible React data table with sorting and pagination?▼

You can build an accessible React data table by using TanStack Table for core row models and React Aria Components for accessibility. This combination provides sorting, filtering, pagination, and row selection with TSX examples.

What is the best way to set up column visibility controls in a React admin dashboard?▼

The best way to set up column visibility in a React dashboard is using TanStack Table's visibility controls. It provides functional requirements for toggling column display alongside core row models for data-heavy interfaces.

Can I use TanStack Table with React Aria Components for data-heavy interfaces?▼

Yes, TanStack Table works with React Aria Components to create robust and accessible data tables. This pairing satisfies functional requirements for sorting, filtering, and pagination in web apps.

How do I implement row selection and filtering in a TanStack Table?▼

You implement row selection and filtering in a TanStack Table by applying the respective feature plugins to your table instance. The Skill provides patterns for these features alongside core row models and column definitions.

Does this approach support server-side data fetching for pagination and sorting?▼

The Skill provides patterns for sorting, filtering, and pagination using TanStack Table and React Aria. It includes TSX examples for setting up useReactTable with data sources and column definitions for admin dashboards.

Related Skills

Explore More Software Engineering Skills→
nklischnklisch
7

tanstack-table-v8

Configure useReactTable with column definitions and render rows via flexRender.

Community
Advanced
vecearvecear

table-builder

Generate configurable React Table components with sorting, filtering, and pagination.

Community
Advanced
rblood79rblood79

react-aria

Create accessible React UI components using ARIA hooks and primitives.

Community
Advanced
iEnergyyiEnergyy

tanstack-table

Implement headless table logic for sorting, filtering, pagination, and selection with TanStack Table.

Community
Intermediate