Can this skill handle server-side data?

Yes, while the core patterns show client-side state, the structure is designed to easily integrate with server-side pagination, filtering, and sorting workflows.

How does it help with file organization?

It suggests a three-file pattern (columns.tsx, data-table.tsx, and page.tsx) to keep your logic, UI, and data fetching concerns separated and manageable.

Does it support complex cell rendering?

Absolutely. It provides patterns for custom cell formatters, including currency formatting, status icons, and row action dropdowns.

What libraries are required for this skill?

This skill requires @tanstack/react-table for logic and shadcn/ui components such as Table, Button, Checkbox, and Dropdown Menu for the interface.

Shadcn Data Table

Name: Shadcn Data Table
Author: xyqyear

byxyqyear

0•

デザインツール

Streamlines the creation of powerful, accessible data tables using TanStack Table v8 and shadcn/ui components.

Provides a standardized workflow and implementation pattern for building feature-rich data tables in React applications. This skill handles the complex integration between TanStack Table's headless logic and shadcn/ui's styled components, enabling developers to quickly implement advanced features like multi-column sorting, faceted filtering, pagination, row selection, and dynamic column visibility. It promotes a clean architecture by separating column definitions from UI components, making data grids easier to maintain and extend.

主な機能

01Comprehensive pagination and sorting controls

020 GitHub stars

03Advanced filtering including faceted search and global inputs

04Standardized file structure for scalable table implementations

05Headless table logic via TanStack Table v8

06Customizable row selection and column visibility management

ユースケース

01Building searchable inventory or product listings with multi-select actions

02Creating interactive data grids with custom cell formatting and row-level menus

03Developing administrative dashboards with complex data management needs

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add xyqyear/my-claude-skills shadcn-datatable

For use in Claude.ai and ChatGPT

主な機能

01Comprehensive pagination and sorting controls

020 GitHub stars

03Advanced filtering including faceted search and global inputs

04Standardized file structure for scalable table implementations

05Headless table logic via TanStack Table v8

06Customizable row selection and column visibility management

ユースケース

01Building searchable inventory or product listings with multi-select actions

02Creating interactive data grids with custom cell formatting and row-level menus

03Developing administrative dashboards with complex data management needs

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add xyqyear/my-claude-skills shadcn-datatable

For use in Claude.ai and ChatGPT