Which libraries are recommended for implementation?

The skill provides specific guidance and examples for TanStack Table (headless) and AG Grid (enterprise features).

How does this skill handle massive datasets?

It utilizes a tiered framework that recommends virtual scrolling and windowing for datasets exceeding 10,000 rows to maintain high performance.

How do these tables behave on mobile devices?

It offers four proven responsive strategies: horizontal scrolling, card stacking, priority column hiding, and truncate-and-expand patterns.

Are the table designs accessible?

Yes, the skill enforces WCAG compliance using semantic HTML, ARIA patterns, and full keyboard navigation support.

Can I implement server-side operations?

Absolutely. The skill includes patterns for server-side pagination, sorting, and filtering for datasets where client-side processing is inefficient.

Building Tables & Data Grids

Name: Building Tables & Data Grids
Author: ancoleman

byancoleman

•

158

Design Tools

Constructs high-performance, accessible data grids and tables optimized for everything from simple displays to enterprise-level datasets.

About

The Building Tables & Data Grids skill provides a systematic framework for creating tabular interfaces within AI-assisted development workflows. It offers a tiered implementation strategy that scales from basic semantic HTML tables to enterprise-grade virtualized grids handling over 100,000 rows. By integrating performance optimization techniques, WCAG-compliant accessibility patterns, and responsive design strategies, this skill helps developers implement complex features like multi-column sorting, server-side filtering, and inline editing while leveraging industry-standard libraries like TanStack Table and AG Grid.

Key Features

Tiered implementation framework based on data volume (10 to 1M+ rows)
158 GitHub stars
Accessibility-first design patterns following WCAG and ARIA standards
Multiple responsive strategies including card stacking and priority columns
Performance optimization via virtual scrolling and windowing
Library-specific implementations for TanStack Table and AG Grid

Use Cases

Building enterprise-grade dashboards with massive, sortable datasets
Implementing advanced spreadsheet-like functionality with inline editing
Creating accessible and mobile-friendly data entry interfaces

About

Key Features

Tiered implementation framework based on data volume (10 to 1M+ rows)
158 GitHub stars
Accessibility-first design patterns following WCAG and ARIA standards
Multiple responsive strategies including card stacking and priority columns
Performance optimization via virtual scrolling and windowing
Library-specific implementations for TanStack Table and AG Grid

Use Cases

Building enterprise-grade dashboards with massive, sortable datasets
Implementing advanced spreadsheet-like functionality with inline editing
Creating accessible and mobile-friendly data entry interfaces