跳到内容 Shopify标志 北极星

数据表

数据表用于组织和显示数据集中的所有信息。数据可视化表示数据集的一部分，而数据表允许商家查看整个数据集的详细信息。这有助于商家比较和分析数据。

用于显示少量数据，供商家静态查看。

进口｛页面，卡，数据表｝从“@shopify /北极星”；进口反应从“反应”；函数DataTableExample（）｛常量行＝［［“翡翠丝绸礼服”，875.00美元的，124689，140，“122500美元”］，［淡紫色羊绒围巾的，230.00美元的，124533，83，“19090美元”］，［“海军蓝美利奴羊毛西装外套，卡其斜纹棉布裤，黄腰带”，445.00美元的，124518，32，“14240美元”，］，］；返回（<页面标题＝“产品销售”><卡><DataTable columnContentTypes＝｛［“文本”，“数字”，“数字”，“数字”，“数字”，］｝标题＝｛［“产品”，“价格”，“SKU号”，“净数量”，“净销售额”，］｝行＝｛行｝总数＝｛［”，”，”，255，“155830美元”］｝/></卡></页面>）；｝

道具

想让这个功能变得更好吗?请分享你的反馈．

接口 DataTableProps
columnContentTypes “文本”|“数字”［］

数据类型列表，它确定每列的内容对齐方式。数据类型是“文本”，向左对齐，或“数字”，向右对齐。
标题 反应．ReactNode［］

列标题列表。
总数? 任何［］

数字列总数的列表，在列标题下面的表标题中突出显示。使用空字符串作为没有总数的列的占位符。
totalsName? ｛单数：反应．ReactNode；复数：反应．ReactNode；｝

自定义合计行标题。
showTotalsInFooter? 布尔

在表中放置合计行。
行 任何[] []

映射到表主体行的数据点列表。
hideScrollIndicator? 布尔

当表水平折叠为可滚动时，隐藏标题上方的列可见性和导航按钮。

默认为假．
截断? 布尔

截断第一列的内容而不是换行。

默认为真正的．
verticalAlign? “高级”|“底”|“中间”|“基线”

单元格内容的垂直排列。

默认为“高级”．
footerContent? 任何

位于表页脚行全宽单元格中心的内容。
hoverable? 布尔

表行具有悬停状态。默认值为true。
可分类的? 布尔［］

布尔值列表，它映射到是否为每一列启用排序。对所有列默认为false。
defaultSortDirection? “提升”|“降序”|“没有”

在第一次单击或按可排序列标题时对表行进行排序的方向。默认为升序。

默认为“提升”．
initialSortColumnIndex? 数量

表行最初按其排序的标题的索引。默认为第一列。

默认为0．
onSort? （headingIndex：数量，方向：“提升”|“降序”|“没有”) = >无效

在单击或按下可排序列标题时触发回调。
increasedTableDensity? 布尔

增加密度。
hasZebraStripingOnData? 布尔

为数据行添加斑马条纹。
stickyHeader? 布尔

滚动时，页眉变得粘滞，并钉到表的顶部。
hasFixedFirstColumn? 布尔

警告
在水平滚动上添加固定的第一列。使用fixedFirstColumns = {n}。
fixedFirstColumns? 数量

在水平滚动上添加固定列。
firstColumnMinWidth? 字符串

如果需要，为第一列指定最小宽度。

最佳实践

数据表:

  • 跨多个类别和度量显示价值。
  • 当比较不是优先级时，允许过滤和排序。
  • 帮助商家从整个数据集中可视化和扫描许多值。
  • 通过使用链接帮助商家在数据层次结构中找到其他值。
  • 通过只包含支持数据用途的值来减少混乱。
  • 包含汇总行以显示列总数。
  • 不包括摘要行中的计算。
  • 包装而不是截断内容。这是因为如果行标题以相同的单词开头，那么它们在截断时会显示相OB欧宝娱乐APP同的内容。
  • 不能用于链接到详细信息页面的可操作项目列表。对于此功能，请使用资源列表组件．

对齐

列内容类型被内置到组件道具中，因此遵循以下对齐规则:

  • 数值=右对齐
  • 文本数据=左对齐
  • 将标头与其相关数据对齐
  • 不要居中对齐

内容的指导方针

标题:

  • 内容翔实，描述性强
  • 简洁而能扫描的
  • 包含测量符号的单位，这样它们就不会在整个列中重复
  • 使用句子大小写(第一个单词大写，其余小写)

做

温度°C

不

温度

列内容:

  • 要简明易懂
  • 不包含计量单位符号(将这些符号放在标题中)
  • 使用句子大小写(第一个单词大写，其余小写)

小数

保留小数一致。例如，不要在一行中使用3个小数，而在另一行中使用2个小数。

  • 要创建链接到详细信息页面的相关项目的可操作列表，例如客户列表，请使用资源列表组件．

可访问性

结构

原生HTML表为屏幕阅读器用户提供了大量的结构化信息。依赖屏幕阅读器的商家可以浏览表格并识别数据单元之间的关系(< td >)和头文件(< th >)使用特定于屏幕阅读器的键。

可排序表使用aria-sort属性来传递哪些列是可排序的(以及按什么方向排序)。他们也用aria-label对按钮进行排序，以传达激活按钮将做什么。

做

对表格数据使用表。

不

使用表格进行布局。对于不使用表HTML元素的类似表格的布局，请使用资源列表组件．

键盘支持

数据表组件的排序控件是用原生HTML按钮实现的。

  • 给按键键盘焦点与选项卡键(或转变+选项卡当向后移动)
  • 激活按钮。输入/返回而且空间键