building-tables

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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.

本技能支持系统化创建表格与数据网格，范围从简单的HTML表格到可处理数百万行数据的企业级虚拟化网格。它基于数据量和所需功能提供清晰的决策框架，确保所有实现都具备最优性能、无障碍性和响应式设计。

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

在以下场景中启用本技能：

创建表格、数据网格或类电子表格界面
展示表格型或结构化数据
实现排序、筛选或分页功能
处理大型数据集或解决性能问题
构建内联编辑或数据录入界面
需要行选择或批量操作功能
实现数据导出（CSV、Excel、PDF格式）
确保表格的无障碍性或响应式表现

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

根据数据量选择实现层级：

<100 行        → 基础HTML表格 + 渐进式增强
100-1,000 行   → 客户端功能（排序、筛选、分页）
1,000-10,000   → 服务端操作 + API分页
10,000-100,000 → 虚拟滚动 + 窗口化
>100,000 行    → 企业级网格 + 流式处理与Worker

如需详细选择标准，请参考

references/selection-framework.md

。

Core Implementation Patterns

核心实现模式

Tier 1: Basic Tables (<100 rows)

层级1：基础表格（<100行）

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

适用于简单的只读数据展示：

使用语义化HTML
```
<table>
```
结构
通过CSS添加响应式表现
按需实现客户端排序
参考
```
references/basic-tables.md
```
获取相关模式

示例：

examples/simple-responsive-table.tsx

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

层级2：交互式表格（100-10,000行）

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

适用于功能丰富的交互场景：

添加筛选、分页和选择功能
实现内联或模态框编辑
1000行以内使用客户端操作
超过1000行切换为服务端操作
参考
```
references/interactive-tables.md
```

示例：

examples/sortable-filtered-table.tsx

Tier 3: Advanced Grids (10K+ rows)

层级3：高级网格（10,000+行）

For massive datasets:

Implement virtual scrolling
Use server-side aggregation
Add grouping and hierarchies
Consider enterprise solutions
Reference
```
references/advanced-grids.md
```

Example:

examples/virtual-scrolling-grid.tsx

适用于超大规模数据集：

实现虚拟滚动
使用服务端聚合
添加分组与层级结构
考虑企业级解决方案
参考
```
references/advanced-grids.md
```

示例：

examples/virtual-scrolling-grid.tsx

Performance Optimization

性能优化

Critical performance thresholds:

Client-side operations: <1,000 rows (instant, <50ms)
Server-side operations: 1,000-10,000 rows (<200ms API)
Virtual scrolling: 10,000+ rows (60fps, constant memory)
Streaming: 100,000+ rows (progressive rendering)

To benchmark performance:

bash

undefined

关键性能阈值：

客户端操作：<1,000行（即时响应，<50ms）
服务端操作：1,000-10,000行（API响应<200ms）
虚拟滚动：10,000+行（60fps帧率，内存占用稳定）
流式处理：100,000+行（渐进式渲染）

如需基准测试性能：

bash

undefined

Generate test data

生成测试数据

python scripts/generate_mock_data.py --rows 10000

Analyze rendering performance

分析渲染性能

node scripts/analyze_performance.js


For optimization strategies, reference `references/performance-optimization.md`.

node scripts/analyze_performance.js


如需优化策略，请参考`references/performance-optimization.md`。

Feature Implementation

功能实现

Sorting

排序

Single or multi-column sorting
Custom sort logic (numeric, date, natural)
Visual indicators and keyboard support
Reference
```
references/sorting-filtering.md
```

单列或多列排序
自定义排序逻辑（数值、日期、自然排序）
视觉标识与键盘支持
参考
```
references/sorting-filtering.md
```

Filtering & Search

筛选与搜索

Column-specific filters (text, range, select)
Global search across all columns
Advanced filter logic (AND/OR)
Reference
```
references/sorting-filtering.md
```

列专属筛选器（文本、范围、选择）
全列全局搜索
高级筛选逻辑（AND/OR）
参考
```
references/sorting-filtering.md
```

Pagination

分页

Client-side for small datasets
Server-side for large datasets
Infinite scroll alternative
Reference
```
references/pagination-strategies.md
```

小型数据集使用客户端分页
大型数据集使用服务端分页
无限滚动替代方案
参考
```
references/pagination-strategies.md
```

Selection & Bulk Actions

选择与批量操作

Single or multi-row selection
Range selection (Shift+click)
Bulk operations toolbar
Reference
```
references/selection-patterns.md
```

单行或多行选择
范围选择（Shift+点击）
批量操作工具栏
参考
```
references/selection-patterns.md
```

Inline Editing

内联编辑

Cell-level or row-level editing
Validation and error handling
Optimistic updates
Reference
```
references/editing-patterns.md
```

单元格级或行级编辑
验证与错误处理
乐观更新
参考
```
references/editing-patterns.md
```

Export

导出

CSV, Excel, PDF formats
Preserve formatting and encoding
Stream large exports
Run
```
scripts/export_table_data.py
```

CSV、Excel、PDF格式
保留格式与编码
大型导出流式处理
运行
```
scripts/export_table_data.py
```

Accessibility Requirements

无障碍设计要求

Essential WCAG compliance:

Semantic HTML with proper structure
ARIA grid pattern for interactive tables
Full keyboard navigation
Screen reader announcements

To validate accessibility:

bash

node scripts/validate_accessibility.js

For complete requirements, reference

references/accessibility-patterns.md

核心WCAG合规要求：

使用语义化HTML与正确结构
交互式表格采用ARIA网格模式
完整的键盘导航支持
屏幕阅读器播报

如需验证无障碍性：

bash

node scripts/validate_accessibility.js

如需完整要求，请参考

references/accessibility-patterns.md

。

Responsive Design

响应式设计

Four proven strategies:

Horizontal scroll - Simple, preserves structure
Card stack - Transform rows to cards on mobile
Priority columns - Hide less important columns
Truncate & expand - Compact with details on demand

See

examples/responsive-patterns.tsx

for implementations. Reference

references/responsive-strategies.md

for details.

四种已验证的策略：

横向滚动 - 实现简单，保留结构
卡片堆叠 - 移动端将行转换为卡片
优先级列 - 隐藏次要列
截断与展开 - 紧凑显示，按需查看详情

实现示例请见

examples/responsive-patterns.tsx

。详情参考

references/responsive-strategies.md

。

Library Recommendations

库推荐

Primary: TanStack Table (Headless)

首选：TanStack Table（无头UI）

Best for custom designs and complete control:

TypeScript-first with excellent DX
Small bundle size (~15KB)
Framework agnostic
Virtual scrolling support

bash

npm install @tanstack/react-table

See

examples/tanstack-basic.tsx

for setup.

适合自定义设计与完全控制场景：

优先支持TypeScript，开发体验优异
包体积小（约15KB）
框架无关
支持虚拟滚动

bash

npm install @tanstack/react-table

设置示例请见

examples/tanstack-basic.tsx

。

Enterprise: AG Grid

企业级：AG Grid

Best for feature-complete solutions:

Handles millions of rows
Built-in advanced features
Community (free) + Enterprise (paid)
Excel-like user experience

bash

npm install ag-grid-react

See

examples/ag-grid-enterprise.tsx

for setup.

For detailed comparison, reference

references/library-comparison.md

适合功能完备的解决方案：

可处理数百万行数据
内置高级功能
社区版（免费）+ 企业版（付费）
类Excel用户体验

bash

npm install ag-grid-react

设置示例请见

examples/ag-grid-enterprise.tsx

。

如需详细对比，请参考

references/library-comparison.md

。

Design Token Integration

设计令牌集成

Tables use the design-tokens skill for consistent theming:

Color tokens for backgrounds, borders, and states
Spacing tokens for cell padding
Typography tokens for text styling
Shadow tokens for elevation

Supports light, dark, high-contrast, and custom themes. Reference the design-tokens skill for theme switching.

表格使用设计令牌技能实现一致主题：

颜色令牌用于背景、边框与状态
间距令牌用于单元格内边距
排版令牌用于文本样式
阴影令牌用于层级效果

支持亮色、暗色、高对比度与自定义主题。主题切换请参考设计令牌技能。

Working Examples

可用示例

Start with the example matching the requirements:

simple-responsive-table.tsx    # Basic HTML table
sortable-filtered-table.tsx    # With sorting and filtering
paginated-server-table.tsx      # Server-side pagination
virtual-scrolling-grid.tsx      # High-performance for 100K+ rows
editable-data-grid.tsx         # Inline editing with validation
grouped-aggregated-table.tsx   # Hierarchical with aggregations

根据需求选择对应示例开始开发：

simple-responsive-table.tsx    # 基础HTML表格
sortable-filtered-table.tsx    # 带排序与筛选功能
paginated-server-table.tsx      # 服务端分页
virtual-scrolling-grid.tsx      # 高性能处理10万+行数据
editable-data-grid.tsx         # 带验证的内联编辑
grouped-aggregated-table.tsx   # 带聚合的层级结构

Testing Tools

测试工具

Generate test data:

bash

python scripts/generate_mock_data.py --rows 100000 --columns 20

Benchmark performance:

bash

node scripts/analyze_performance.js --rows 10000

Validate accessibility:

bash

node scripts/validate_accessibility.js

生成测试数据：

bash

python scripts/generate_mock_data.py --rows 100000 --columns 20

基准测试性能：

bash

node scripts/analyze_performance.js --rows 10000

验证无障碍性：

bash

node scripts/validate_accessibility.js

Next Steps

下一步行动

Determine the data volume and feature requirements
Select the appropriate implementation tier
Choose between TanStack Table (flexibility) or AG Grid (features)
Start with the matching example file
Implement core features progressively
Test performance and accessibility
Apply responsive strategy for mobile

确定数据量与功能需求
选择合适的实现层级
在TanStack Table（灵活性）与AG Grid（功能完备）之间选择
从匹配的示例文件开始
渐进式实现核心功能
测试性能与无障碍性
为移动端应用响应式策略