How does it handle column sizing?

It uses a custom flexBehavior meta property that allows for 'fixed' widths for elements like checkboxes and 'fluid' widths for content that should fill remaining space.

Does this skill support TanStack Table v8?

Yes, it is specifically designed for @tanstack/react-table v8 implementations using a standardized DataGrid wrapper.

Can I use React hooks inside table cells?

Yes, the skill provides patterns for named function cell renderers which allow for the safe use of hooks while following React's rules.

Why should I avoid calling useReactTable directly?

The skill promotes using a centralized DataGrid wrapper to ensure consistent behavior, styling, and easier maintenance across the project.

Does it include pagination support?

Yes, it provides integrated layout patterns for combining the DataGrid component with shared Pagination and header components.

TanStack React Table Patterns

Name: TanStack React Table Patterns
Author: dding-g

bydding-g

0•

デザインツール

Implements standardized TanStack React Table v8 architectures using a specialized DataGrid wrapper for consistent and scalable data grid development.

This skill provides a comprehensive architectural framework for building complex data tables using TanStack React Table v8. It enforces a scalable file structure, promotes the use of a centralized DataGrid wrapper over direct library calls, and provides optimized patterns for column definitions, pagination, and interactive cell rendering. By integrating domain-specific logic like flex-based sizing and event propagation handling, it ensures high-performance, maintainable, and bug-free table implementations across large-scale React applications.

主な機能

01Robust cell renderer patterns for badges, menus, and interactive elements

02Flexible column definition patterns with factory function support

030 GitHub stars

04Standardized DataGrid wrapper for consistent table state management

05Advanced width management using 'fixed' and 'fluid' flex behaviors

06Integrated row selection and pagination layout configurations

ユースケース

01Building complex administrative dashboards with extensive data filtering and sorting

02Implementing interactive data grids with custom cell actions and row selection

03Migrating legacy tables to a standardized, maintainable TanStack Table architecture

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add dding-g/ddingg-claude-marketplace react-table-patterns

For use in Claude.ai and ChatGPT

Download Skill