building-tableslisted

# 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 - Impleme