building-tables

Standardizes tabular interfaces from HTML tables to enterprise grids with TanStack Table and AG Grid options.

1|Updated Apr 8, 2026
One-click install
npx skills add https://github.com/masermediagroup-stack/CursorSkills --skill building-tables-masermediagroup-stack
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: building-tables
Source: https://github.com/masermediagroup-stack/CursorSkills/tree/main/skills-bundle/skills/community/ai-design-components/skills/building-tables
Command: npx skills add https://github.com/masermediagroup-stack/CursorSkills --skill building-tables-masermediagroup-stack

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Building tables and grids across apps often results in inconsistent patterns, poor performance, and accessibility gaps. This Skill provides a structured approach to design and implement tabular interfaces from simple HTML tables to enterprise-grade grids.

Core Features & Use Cases

  • Provides decision frameworks to choose between simple HTML tables, TanStack Table, and AG Grid based on data volume.
  • Covers interactive features (sorting, filtering, pagination, selection, inline editing) and performance patterns (virtualization, streaming) for large datasets.
  • Includes accessibility patterns (WCAG/ARIA), responsive design strategies, and library recommendations to accelerate development.

Quick Start

Begin by assessing your dataset size and required features to choose a grid strategy and consult the provided references for ready-to-adapt patterns.

Frequently Asked Questions about building-tables

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

FAQPage Schema
How do I build responsive data tables with virtualization for large datasets?

To build responsive data tables with virtualization, apply performance patterns like row streaming and windowing. This Skill standardizes tabular interfaces for large datasets, providing clear component boundaries and guidelines for handling heavy data loads efficiently.

What is the best way to implement WCAG and ARIA accessibility in a datatable?

The best way to implement WCAG and ARIA accessibility in a datatable is to follow standardized front-end patterns. This Skill provides specific accessibility guidelines to ensure tabular interfaces satisfy compliance requirements for screen readers and keyboard navigation.

When should I use TanStack Table versus AG Grid for my frontend application?

You should choose between TanStack Table and AG Grid by assessing your dataset size and required interactive features. This Skill provides a decision framework to select the appropriate library based on your specific data volume and complexity needs.

How do I add sorting, filtering, and pagination to an admin panel data grid?

You add sorting, filtering, and pagination to an admin panel data grid by implementing standardized interactive features. This Skill covers these core table operations along with inline editing and selection patterns for dashboards and data portals.

Does this approach work for simple HTML tables or only enterprise-grade grids?

This approach works for both simple HTML tables and enterprise-grade grids. It standardizes the design and implementation of tabular interfaces across varying data volumes, scaling from basic static displays to complex interactive virtualized grids.