Building Tables & Data Grids

Purpose

This skill enables systematic creation of tables and data grids from simple HTML tables to enterprise-scale virtualized grids handling millions of rows. It provides clear decision frameworks based on data volume and required features, ensuring optimal performance, accessibility, and responsive design across all implementations.

When to Use

Activate this skill when:

• Creating tables, data grids, or spreadsheet-like interfaces
• Displaying tabular or structured data
• Implementing sorting, filtering, or pagination features
• Handling large datasets or addressing performance concerns
• Building inline editing or data entry interfaces
• Requiring row selection or bulk operations
• Implementing data export (CSV, Excel, PDF)
• Ensuring table accessibility or responsive behavior

Quick Decision Framework

Select implementation tier based on data volume:

<100 rows        → Simple HTML table with progressive enhancement
100-1,000 rows   → Client-side features (sort, filter, paginate)
1,000-10,000     → Server-side operations with API pagination
10,000-100,000   → Virtual scrolling with windowing
>100,000 rows    → Enterprise grid with streaming and workers

For detailed selection criteria, reference references/selection-framework.md.

Core Implementation Patterns

Tier 1: Basic Tables (<100 rows)

For simple, read-only data display:

• Use semantic HTML <table> structure
• Add responsive behavior via CSS
• Implement client-side sorting if needed
• Reference references/basic-tables.md for patterns

Example: examples/simple-responsive-table.tsx

Tier 2: Interactive Tables (100-10K rows)

For feature-rich interactions:

• Add filtering, pagination, and selection
• Implement inline or modal editing
• Use client-side operations up to 1K rows
• Switch to server-side beyond 1K rows
• Reference references/interactive-tables.md

Example: examples/sortable-filtered-table.tsx