Data table 数据表格

/DAY-tuh TAY-bul/ · noun · 数据类模式 · #070

行与列,让许多条记录在同一组属性下可比较。可排序的表头是契约,对齐方式替眼睛干活。

Data table(数据表格) UI 模式示例:CatchUI 图鉴标本

你可能会这样叫它

  • “数据表格”
  • “可以排序的表格”
  • “像 Excel 一样的列表”
  • “带表头的行列数据”
  • “数据网格”

……它的名字是 数据表格(Data table)。

代码里叫什么

SwiftUITable
UIKit UITableView 是单列列表,不是数据表格;数据表格要用网格布局的 UICollectionView
Jetpack Compose / Android 没有数据表格组件,通常是由对齐单元格组成的 LazyColumn 行
FlutterDataTable PaginatedDataTable
Web (HTML / ARIA)<table> <th scope="col"> aria-sort

复制给 AI 编程工具

把这些数据做成表格:第一行是列名,每条记录一行;数字右对齐,文字左对齐。点列名按该列排序,再点一次倒序;已排序的列显示箭头,并在表头上设置 aria-sort。滚动时表头保持可见;小屏上让表格横向滚动,而不是挤压列宽;网页上用真正的 <table> 和 <th scope="col">。

用 AI 写界面时该怎么说:UI 用词指南(英文)→

相关模式

传一张截图,抓住这个模式 →

学会从视觉线索认出 UI 模式(英文)