⚡

表格与数据网格构建Skill building-tables

该技能用于系统化创建表格和数据网格，从简单HTML表格到处理数百万行的企业级虚拟化网格。它提供决策框架、性能优化策略、可访问性设计和响应式布局，适用于前端开发中的数据展示、排序、筛选、分页、内联编辑和数据导出等功能实现。关键词：表格、数据网格、前端开发、性能优化、可访问性、响应式设计、排序、筛选、分页。

前端开发 0 次安装 2 次浏览 更新于 3/23/2026

name: 构建表格 description: 从简单HTML表格到复杂企业数据网格，构建用于显示表格信息的表格和数据网格。适用于创建表格、实现排序/筛选/分页、处理大型数据集（10行到100万+行）、构建类似电子表格的界面或设计数据密集型组件。提供性能优化策略、可访问性模式（WCAG/ARIA）、响应式设计以及库推荐（TanStack Table, AG Grid）。

构建表格与数据网格

目的

该技能使得能够系统化创建从简单HTML表格到企业级虚拟化网格（可处理数百万行）的表格和数据网格。它基于数据量和所需功能提供清晰的决策框架，确保在所有实现中优化性能、可访问性和响应式设计。

何时使用

激活此技能时：

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

快速决策框架

基于数据量选择实现层级：

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

如需详细选择标准，参考 references/selection-framework.md。

核心实现模式

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

用于简单、只读数据显示：

  • 使用语义HTML <table> 结构
  • 通过CSS添加响应式行为
  • 必要时实现客户端排序
  • 参考 references/basic-tables.md 获取模式

示例：examples/simple-responsive-table.tsx

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

用于功能丰富的交互：

  • 添加筛选、分页和选择
  • 实现内联或模态编辑
  • 对最多1,000行使用客户端操作
  • 超过1,000行切换到服务器端操作
  • 参考 references/interactive-tables.md

示例：examples/sortable-filtered-table.tsx

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

用于海量数据集：

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

示例：examples/virtual-scrolling-grid.tsx

性能优化

关键性能阈值：

  • 客户端操作：<1,000行（瞬时，<50ms）
  • 服务器端操作：1,000-10,000行（<200ms API）
  • 虚拟滚动：10,000+行（60fps，恒定内存）
  • 流式处理：100,000+行（渐进渲染）

性能基准测试：

# 生成测试数据
python scripts/generate_mock_data.py --rows 10000

# 分析渲染性能
node scripts/analyze_performance.js

优化策略参考 references/performance-optimization.md。

功能实现

排序

  • 单列或多列排序
  • 自定义排序逻辑（数值、日期、自然）
  • 视觉指示器和键盘支持
  • 参考 references/sorting-filtering.md

筛选与搜索

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

分页

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

选择与批量操作

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

内联编辑

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

导出

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

可访问性要求

基本WCAG合规：

  • 语义HTML与适当结构
  • 交互式表格的ARIA网格模式
  • 完整键盘导航
  • 屏幕阅读器公告

验证可访问性：

node scripts/validate_accessibility.js

完整要求参考 references/accessibility-patterns.md。

响应式设计

四种已验证策略：

  1. 水平滚动 - 简单，保留结构
  2. 卡片堆叠 - 移动设备上将行转换为卡片
  3. 优先级列 - 隐藏不重要列
  4. 截断与展开 - 紧凑显示，需求时展开详情

实现参考 examples/responsive-patterns.tsx。 详细策略参考 references/responsive-strategies.md。

库推荐

主要：TanStack Table（无头）

最佳用于自定义设计和完全控制：

  • 优先TypeScript，优秀开发体验
  • 小包大小（约15KB）
  • 框架无关
  • 支持虚拟滚动
npm install @tanstack/react-table

设置参考 examples/tanstack-basic.tsx。

企业级：AG Grid

最佳用于功能齐全的解决方案：

  • 处理数百万行
  • 内置高级功能
  • 社区版（免费）+ 企业版（付费）
  • Excel类用户体验
npm install ag-grid-react

设置参考 examples/ag-grid-enterprise.tsx。

详细比较参考 references/library-comparison.md。

设计令牌集成

表格使用design-tokens技能进行一致主题化：

  • 颜色令牌用于背景、边框和状态
  • 间距令牌用于单元格填充
  • 排版令牌用于文本样式
  • 阴影令牌用于高程

支持亮色、暗色、高对比度和自定义主题。 主题切换参考design-tokens技能。

工作示例

从匹配需求的示例开始：

simple-responsive-table.tsx    # 基本HTML表格
sortable-filtered-table.tsx    # 带排序和筛选
paginated-server-table.tsx      # 服务器端分页
virtual-scrolling-grid.tsx      # 高性能处理100K+行
editable-data-grid.tsx         # 内联编辑与验证
grouped-aggregated-table.tsx   # 层级与聚合

测试工具

生成测试数据：

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

性能基准测试：

node scripts/analyze_performance.js --rows 10000

验证可访问性：

node scripts/validate_accessibility.js

后续步骤

  1. 确定数据量和功能需求
  2. 选择适当的实现层级
  3. 在TanStack Table（灵活性）和AG Grid（功能）之间选择
  4. 从匹配的示例文件开始
  5. 逐步实现核心功能
  6. 测试性能和可访问性
  7. 应用响应式策略以适应移动设备