shadcn-data-tables

Build TanStack Table data tables with shadcn/ui components.

Updated Aug 23, 2026

Search Tags:#react #pagination #sorting #server-side #shadcn-ui #data-table #tanstack-table

Ready to run

npx skills add https://github.com/nthplusio/functional-claude --skill shadcn-data-tables

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: shadcn-data-tables
Source: https://github.com/nthplusio/functional-claude/tree/main/plugins/shadcn-dev/skills/shadcn-data-tables
Command: npx skills add https://github.com/nthplusio/functional-claude --skill shadcn-data-tables

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Developers often struggle to build polished, accessible data tables with consistent styling. This Skill provides a streamlined approach to composing TanStack Table-based data tables using shadcn/ui components, reducing boilerplate and design drift.

Core Features & Use Cases

TanStack Table integration: Define columns and render them with shadcn/ui table primitives.
Common table interactions: Sorting, filtering, pagination, row selection, and responsive layouts.
Use cases: Dashboards, admin panels, and data-heavy interfaces that require client-side or server-side data handling.

Quick Start

Define your columns using TanStack Table's ColumnDef and render them via the DataTable component by passing your data.

Frequently Asked Questions about shadcn-data-tables

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

FAQPage Schema

How do I build a data table with shadcn/ui and TanStack Table?▼

TanStack Table handles client-side and server-side interactions like sorting, filtering, and pagination through its state management, while shadcn/ui provides the styled table primitives for rendering. Defining ColumnDef structures allows the DataTable component to process data and display responsive layouts with row selection.

Can I implement server-side pagination and sorting with shadcn/ui data tables?▼

You can add expandable rows and row selection to a TanStack Table by configuring the corresponding features in your column definitions and DataTable component. This Skill supports these optional features alongside sorting and filtering, enabling complex data interactions within responsive layouts.

What's the best way to style TanStack Table columns using shadcn-ui components?▼

The best way to style TanStack Table columns is by rendering them through shadcn/ui table primitives within a dedicated DataTable component. This method prevents design drift and ensures your data table maintains consistent, polished styling across various dashboard and admin panel use cases.

Do I need to manually manage TanStack Table state for client-side data handling?▼

For client-side data handling, TanStack Table manages state internally based on your ColumnDef and data inputs, while shadcn/ui handles the visual rendering. You define the columns and data, and the DataTable component composition manages interactions like filtering and sorting without extensive boilerplate.