data-tables

Name: data-tables
Availability: InStock
Author: simyv

Consolidate TanStack Table patterns for React data tables with sorting, pagination, filtering, and row selection.

Updated Aug 27, 2026

Search Tags:#tanstack #pagination #sorting #react-table #row-selection #datatable

Ready to run

npx skills add https://github.com/SimyV/agent-system --skill data-tables-simyv

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: data-tables
Source: https://github.com/SimyV/agent-system/tree/main/config/skills/data-tables
Command: npx skills add https://github.com/SimyV/agent-system --skill data-tables-simyv

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Building consistent, scalable data table UIs in React can be verbose and error-prone. This skill consolidates TanStack Table patterns to deliver feature-rich tables with predictable behavior and a clean interface.

Core Features & Use Cases

Sorting, filtering, and pagination to manage large datasets in admin dashboards.
Column visibility, responsive layout, and row selection for flexible interactions.
Typed column definitions and reusable table components to ensure consistency across apps.
Real-world use case: implement a user management table with sortable columns, per-column filters, and bulk actions.

Quick Start

Create a reusable TanStack Table powered data table component with sorting, pagination, filtering, and row selection.

Frequently Asked Questions about data-tables

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

FAQPage Schema

How do I build a TanStack Table data table with sorting and pagination in React?▼

To build a TanStack Table data table in React, you define typed column definitions and apply the provided patterns for sorting, pagination, and filtering to manage large datasets with predictable state persistence.

How does TanStack Table handle row selection for bulk actions in admin dashboards?▼

TanStack Table handles row selection by integrating state persistence patterns, enabling flexible interactions like bulk actions within admin dashboards while maintaining predictable behavior across your React components.

Can I use this approach to manage column visibility and filtering for analytics panels?▼

Yes, you can use this approach for analytics panels; it applies typed column definitions to manage column visibility, responsive layouts, and per-column filtering for flexible data interactions.

What is the best way to ensure consistent TanStack Table components across a React application?▼

The best way to ensure consistency is by enforcing typed column definitions and utilizing reusable table components, which standardize behavior like sorting and row selection across your application.

Why do my React data tables become verbose and error-prone when scaling?▼

React data tables become verbose and error-prone when scaling due to inconsistent state management, a problem solved by consolidating TanStack Table patterns to deliver predictable behavior and clean interfaces.