这叫啥 UI？
← 返回组件目录

COMPONENT 69 · Data Display

数据网格

Data Grid

也叫GridInteractive TableSpreadsheet Grid表格控件

像电子表格一样支持选择、编辑、排序或键盘导航的数据表。

An interactive, spreadsheet-like table supporting selection, editing, sorting, or grid navigation.

ANATOMY & USAGE

结构与使用建议

组成部分

  • 网格标题
  • 可交互行
  • 可聚焦单元格

适合使用

  • 用户需要直接操作大量二维数据而非只阅读时。

不建议使用

  • 数据只读且原生表格已足够时。

键盘与无障碍

  • 仅在需要网格交互时使用 role=grid；实现方向键、选择状态、编辑模式与焦点指示。

DESCRIBE IT TO AI

这样告诉编程助手

实现数据网格（Data Grid）：像电子表格一样支持选择、编辑、排序或键盘导航的数据表。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY
<div class="demo data-grid" role="grid" aria-label="预算">
  <div class="data-grid-row" role="row">
    <span role="columnheader">项目</span>
    <span role="columnheader">金额</span>
  </div>
  <div class="data-grid-row" role="row">
    <button role="gridcell" tabindex="0" aria-selected="true">设计</button>
    <button role="gridcell" tabindex="-1" aria-selected="false">¥800</button>
  </div>
  <div class="data-grid-row" role="row">
    <button role="gridcell" tabindex="-1" aria-selected="false">开发</button>
    <button role="gridcell" tabindex="-1" aria-selected="false">¥1200</button>
  </div>
</div>