building-tables

Build scalable HTML tables and data grids with sorting, filtering, and pagination.

9|2|Updated Mar 12, 2026

Search Tags:#accessibility #react #filtering #sorting #virtualization #table #data-grid

Ready to run

npx skills add https://github.com/hongmaple0820/agent-academy --skill building-tables-hongmaple0820

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: building-tables
Source: https://github.com/hongmaple0820/agent-academy/tree/main/skills/design/building-tables
Command: npx skills add https://github.com/hongmaple0820/agent-academy --skill building-tables-hongmaple0820

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires pandas, requests, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

Tables and data grids are complex to design, scale, and maintain across applications; this Skill provides a structured approach to building robust tables and grids with accessibility patterns, performance considerations, and scalable patterns.

Core Features & Use Cases

Supports sorting, filtering, pagination, virtualization, and responsive patterns for large datasets.
Provides guidance on library choices (TanStack Table, AG Grid), accessibility (ARIA), and pattern-driven design.
Includes practical examples, tooling references, and a framework for maintaining data grids across teams.

Quick Start

Begin by surveying your table data size, then implement a basic HTML table and progressively add sorting, filtering, pagination, and virtualization using TanStack Table or AG Grid as your needs grow.

Frequently Asked Questions about building-tables

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

FAQPage Schema

How do I build accessible data tables with sorting and filtering in React?▼

Build accessible data tables by starting with semantic HTML markup, then progressively integrate sorting and filtering using React libraries like TanStack Table or AG Grid. This approach ensures ARIA grid patterns and responsive behavior are maintained for scalable dashboards.

When do I need virtualization in my data grid?▼

Virtualization in data grids is required when rendering large datasets that cause performance bottlenecks. Implement virtualization to efficiently display thousands of rows by only rendering the visible subset, ensuring fast scrolling and responsive dashboard analytics.

What is the best way to choose between TanStack Table and AG Grid for an analytics dashboard?▼

Choosing between TanStack Table and AG Grid for analytics dashboards depends on your scaling requirements; both support sorting, filtering, and pagination, but selection requires evaluating library guidance and pattern-driven design to match your enterprise data display needs.

How do I implement ARIA grid patterns for accessible tabular data?▼

Implement ARIA grid patterns for accessible tabular data by applying semantic markup to your HTML tables. This ensures consistent presentation across applications while satisfying accessibility requirements for screen readers and keyboard navigation in data grids.

Can I use pandas data with React data grids?▼

Use pandas to structure and process tabular data before passing it to React data grids. Transform pandas DataFrames into compatible JSON formats to enable consistent presentation, sorting, and filtering across your dashboard applications.

How do I add pagination to a scalable HTML table?▼

Add pagination to scalable HTML tables by progressively enhancing a basic semantic structure with pagination controls. Use framework guidance from TanStack Table or AG Grid to maintain consistent presentation and performance as your dataset grows.