building-tables

Name: building-tables
Author: ancoleman

58installs59forks

How to install building-tables?

ancoleman/ai-design-components/building-tables

$npx -y skills add ancoleman/ai-design-components --skill building-tables

Installs into the current project.

Summary

Builds tables and data grids for displaying tabular information, from simple HTML tables to complex enterprise data grids. Use when creating tables, implementing sorting/filtering/pagination, handling large datasets (10-1M+ rows), building spreadsheet-like interfaces, or designin

Files · 1

View on GitHub

SKILL.md

1	# Building Tables & Data Grids
2
3	## Purpose
4
5	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.
6
7	## When to Use
8
9	Activate this skill when:
10	- Creating tables, data grids, or spreadsheet-like interfaces
11	- Displaying tabular or structured data
12	- Implementing sorting, filtering, or pagination features
13	- Handling large datasets or addressing performance concerns
14	- Building inline editing or data entry interfaces
15	- Requiring row selection or bulk operations
16	- Implementing data export (CSV, Excel, PDF)
17	- Ensuring table accessibility or responsive behavior
18
19	## Quick Decision Framework
20
21	Select implementation tier based on data volume:
22
23	```
24	<100 rows → Simple HTML table with progressive enhancement
25	100-1,000 rows → Client-side features (sort, filter, paginate)
26	1,000-10,000 → Server-side operations with API pagination
27	10,000-100,000 → Virtual scrolling with windowing
28	>100,000 rows → Enterprise grid with streaming and workers
29	```
30
31	For detailed selection criteria, reference `references/selection-framework.md`.
32
33	## Core Implementation Patterns
34
35	### Tier 1: Basic Tables (<100 rows)
36
37	For simple, read-only data display:
38	- Use semantic HTML `<table>` structure
39	- Add responsive behavior via CSS
40	- Implement client-side sorting if needed
41	- Reference `references/basic-tables.md` for patterns
42
43	Example: `examples/simple-responsive-table.tsx`
44
45	### Tier 2: Interactive Tables (100-10K rows)
46
47	For feature-rich interactions:
48	- Add filtering, pagination, and selection
49	- Implement inline or modal editing
50	- Use client-side operations up to 1K rows
51	- Switch to server-side beyond 1K rows
52	- Reference `references/interactive-tables.md`
53
54	Example: `examples/sortable-filtered-table.tsx`
55
56	### Tier 3: Advanced Grids (10K+ rows)
57
58	For massive datasets:
59	- Implement virtual scrolling
60	- Use server-side aggregation
61	- Add grouping and hierarchies
62	- Consider enterprise solutions
63	- Reference `references/advanced-grids.md`
64
65	Example: `examples/virtual-scrolling-grid.tsx`
66
67	## Performance Optimization
68
69	Critical performance thresholds:
70	- Client-side operations: <1,000 rows (instant, <50ms)
71	- Server-side operations: 1,000-10,000 rows (<200ms API)
72	- Virtual scrolling: 10,000+ rows (60fps, constant memory)
73	- Streaming: 100,000+ rows (progressive rendering)
74
75	To benchmark performance:
76	```bash
77	# Generate test data
78	python scripts/generate_mock_data.py --rows 10000
79
80	# Analyze rendering performance
81	node scripts/analyze_performance.js
82	```
83
84	For optimization strategies, reference `references/performance-optimization.md`.
85
86	## Feature Implementation
87
88	### Sorting
89	- Single or multi-column sorting
90	- Custom sort logic (numeric, date, natural)
91	- Visual indicators and keyboard support
92	- Reference `references/sorting-filtering.md`
93
94	### Filtering & Search
95	- Column-specific filters (text, range, select)
96	- Global search across all columns
97	- Advanced filter logic (AND/OR)
98	- Reference `references/sorting-filtering.md`
99
100	### Pagination
101	- Client-side for small datasets
102	- Server-side for large datasets
103	- Infinite scroll alternative
104	- Reference `references/pagination-strategies.md`
105
106	### Selection & Bulk Actions
107	- Single or multi-row selection
108	- Range selection (Shift+click)
109	- Bulk operations toolbar
110	- Reference `references/selection-patterns.md`
111
112	### Inline Editing
113	- Cell-level or row-level editing
114	- Validation and error handling
115	- Optimistic updates
116	- Reference `references/editing-patterns.md`
117
118	### Export
119	- CSV, Excel, PDF formats
120	- Preserve formatting and encoding
121	- Stream large exports
122	- Run `scripts/export_table_data.py`
123
124	## Accessibility Requirements
125
126	Essential WCAG compliance:
127	- Semantic HTML with proper structure
128	- ARIA grid pattern for interactive tables
129	- Full keyboard navigation
130	- Screen reader announcements
131
132	To validate accessibility:
133	```bash
134	node scripts/validate_accessibility.js
135	```
136
137	For complete requirements, reference `references/accessibility-patterns.md`.
138
139	## Responsive Design
140
141	Four proven strategies:
142	1. Horizontal scroll - Simple, preserves structure
143	2. Card stack - Transform rows to cards on mobile
144	3. Priority columns - Hide less important columns
145	4. Truncate & expand - Compact with details on demand
146
147	See `examples/responsive-patterns.tsx` for implementations.
148	Reference `

People who liked this also viewed

6 picks

Type

building-tables

58installs59forks

View on GitHub

How to install building-tables?

ancoleman/ai-design-components/building-tables

$npx -y skills add ancoleman/ai-design-components --skill building-tables

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Building Tables & Data Grids
2
3	## Purpose
4
5	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.
6
7	## When to Use
8
9	Activate this skill when:
10	- Creating tables, data grids, or spreadsheet-like interfaces
11	- Displaying tabular or structured data
12	- Implementing sorting, filtering, or pagination features
13	- Handling large datasets or addressing performance concerns
14	- Building inline editing or data entry interfaces
15	- Requiring row selection or bulk operations
16	- Implementing data export (CSV, Excel, PDF)
17	- Ensuring table accessibility or responsive behavior
18
19	## Quick Decision Framework
20
21	Select implementation tier based on data volume:
22
23	```
24	<100 rows → Simple HTML table with progressive enhancement
25	100-1,000 rows → Client-side features (sort, filter, paginate)
26	1,000-10,000 → Server-side operations with API pagination
27	10,000-100,000 → Virtual scrolling with windowing
28	>100,000 rows → Enterprise grid with streaming and workers
29	```
30
31	For detailed selection criteria, reference `references/selection-framework.md`.
32
33	## Core Implementation Patterns
34
35	### Tier 1: Basic Tables (<100 rows)
36
37	For simple, read-only data display:
38	- Use semantic HTML `<table>` structure
39	- Add responsive behavior via CSS
40	- Implement client-side sorting if needed
41	- Reference `references/basic-tables.md` for patterns
42
43	Example: `examples/simple-responsive-table.tsx`
44
45	### Tier 2: Interactive Tables (100-10K rows)
46
47	For feature-rich interactions:
48	- Add filtering, pagination, and selection
49	- Implement inline or modal editing
50	- Use client-side operations up to 1K rows
51	- Switch to server-side beyond 1K rows
52	- Reference `references/interactive-tables.md`
53
54	Example: `examples/sortable-filtered-table.tsx`
55
56	### Tier 3: Advanced Grids (10K+ rows)
57
58	For massive datasets:
59	- Implement virtual scrolling
60	- Use server-side aggregation
61	- Add grouping and hierarchies
62	- Consider enterprise solutions
63	- Reference `references/advanced-grids.md`
64
65	Example: `examples/virtual-scrolling-grid.tsx`
66
67	## Performance Optimization
68
69	Critical performance thresholds:
70	- Client-side operations: <1,000 rows (instant, <50ms)
71	- Server-side operations: 1,000-10,000 rows (<200ms API)
72	- Virtual scrolling: 10,000+ rows (60fps, constant memory)
73	- Streaming: 100,000+ rows (progressive rendering)
74
75	To benchmark performance:
76	```bash
77	# Generate test data
78	python scripts/generate_mock_data.py --rows 10000
79
80	# Analyze rendering performance
81	node scripts/analyze_performance.js
82	```
83
84	For optimization strategies, reference `references/performance-optimization.md`.
85
86	## Feature Implementation
87
88	### Sorting
89	- Single or multi-column sorting
90	- Custom sort logic (numeric, date, natural)
91	- Visual indicators and keyboard support
92	- Reference `references/sorting-filtering.md`
93
94	### Filtering & Search
95	- Column-specific filters (text, range, select)
96	- Global search across all columns
97	- Advanced filter logic (AND/OR)
98	- Reference `references/sorting-filtering.md`
99
100	### Pagination
101	- Client-side for small datasets
102	- Server-side for large datasets
103	- Infinite scroll alternative
104	- Reference `references/pagination-strategies.md`
105
106	### Selection & Bulk Actions
107	- Single or multi-row selection
108	- Range selection (Shift+click)
109	- Bulk operations toolbar
110	- Reference `references/selection-patterns.md`
111
112	### Inline Editing
113	- Cell-level or row-level editing
114	- Validation and error handling
115	- Optimistic updates
116	- Reference `references/editing-patterns.md`
117
118	### Export
119	- CSV, Excel, PDF formats
120	- Preserve formatting and encoding
121	- Stream large exports
122	- Run `scripts/export_table_data.py`
123
124	## Accessibility Requirements
125
126	Essential WCAG compliance:
127	- Semantic HTML with proper structure
128	- ARIA grid pattern for interactive tables
129	- Full keyboard navigation
130	- Screen reader announcements
131
132	To validate accessibility:
133	```bash
134	node scripts/validate_accessibility.js
135	```
136
137	For complete requirements, reference `references/accessibility-patterns.md`.
138
139	## Responsive Design
140
141	Four proven strategies:
142	1. Horizontal scroll - Simple, preserves structure
143	2. Card stack - Transform rows to cards on mobile
144	3. Priority columns - Hide less important columns
145	4. Truncate & expand - Compact with details on demand
146
147	See `examples/responsive-patterns.tsx` for implementations.
148	Reference `

People who liked this also viewed

6 picks

Type