data-table-dashboard

Build interactive data tables and dashboards with TanStack Table v8 and Recharts.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/SynthropicTechnology/diegobarbosa-os --skill data-table-dashboard-synthropictechnology
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: data-table-dashboard
Source: https://github.com/SynthropicTechnology/diegobarbosa-os/tree/main/.claude/skills/data-table-dashboard
Command: npx skills add https://github.com/SynthropicTechnology/diegobarbosa-os --skill data-table-dashboard-synthropictechnology

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designing and maintaining scalable, interactive data tables and dashboards for complex enterprise applications can be time-consuming and error-prone. This Skill provides a structured blueprint to implement tables with advanced filtering, sorting, virtualization, and integrated charts using TanStack Table v8, shadcn/ui, and Recharts.

Core Features & Use Cases

  • TanStack Table v8 integration for feature-rich tables with sorting, filtering, pagination, and virtualization.
  • Shadcn/ui components integration with Recharts visualizations to deliver cohesive dashboards.
  • Type-safe data models, server-state management with TanStack Query, and form validation with React Hook Form + Zod.
  • Real-world use case: admin dashboards that list thousands of records with fast search, multi-column filters, and charts to visualize key metrics.

Quick Start

Create a new dashboard page that renders a TanStack Table with filtering, pagination, and a chart, wired to a REST API.

Frequently Asked Questions about data-table-dashboard

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

FAQPage Schema
How do I build an interactive React data table with multi-column filtering and sorting?▼

To build an interactive React data table with multi-column filtering and sorting, you can integrate TanStack Table v8 with shadcn/ui components. This approach provides feature-rich tables equipped with pagination, advanced filtering, and row virtualization to handle large datasets.

What's the best way to add data visualizations to an enterprise dashboard?▼

Adding data visualizations to an enterprise dashboard is best achieved by integrating Recharts with shadcn/ui components. This combination delivers cohesive dashboards that visualize key metrics directly alongside interactive tables.

Does TanStack Table v8 support row virtualization for thousands of records?▼

Yes, TanStack Table v8 supports row virtualization for rendering thousands of records efficiently. It enables feature-rich tables with fast search and multi-column filters, ensuring smooth performance for large enterprise datasets.

How do I manage server-state and form validation in a React dashboard?▼

You manage server-state and form validation in a React dashboard by using TanStack Query for data fetching and React Hook Form paired with Zod. This ensures type-safe data models and validated inputs across your application.

Can I use shadcn/ui components with Recharts to display dashboard metrics?▼

Yes, you can use shadcn/ui components with Recharts to display dashboard metrics. This integration provides a structured blueprint for cohesive dashboards, combining accessible UI with interactive data visualizations.