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

•

디자인 도구

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

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.

주요 기능

01Tiered implementation framework based on data volume (10 to 1M+ rows)

02158 GitHub stars

03Accessibility-first design patterns following WCAG and ARIA standards

04Multiple responsive strategies including card stacking and priority columns

05Performance optimization via virtual scrolling and windowing

06Library-specific implementations for TanStack Table and AG Grid

사용 사례

01Building enterprise-grade dashboards with massive, sortable datasets

02Implementing advanced spreadsheet-like functionality with inline editing

03Creating accessible and mobile-friendly data entry interfaces

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ancoleman/ai-design-components building-tables

For use in Claude.ai and ChatGPT

주요 기능

01Tiered implementation framework based on data volume (10 to 1M+ rows)

02158 GitHub stars

03Accessibility-first design patterns following WCAG and ARIA standards

04Multiple responsive strategies including card stacking and priority columns

05Performance optimization via virtual scrolling and windowing

06Library-specific implementations for TanStack Table and AG Grid

사용 사례

01Building enterprise-grade dashboards with massive, sortable datasets

02Implementing advanced spreadsheet-like functionality with inline editing

03Creating accessible and mobile-friendly data entry interfaces

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ancoleman/ai-design-components building-tables

For use in Claude.ai and ChatGPT