SuperAPI AI 工具集

shadcn_ui-table

前端与建站

查看项目

更新于 10-16 04:00

技能介绍

用途

Shadcn UI — Table 用于构建响应式表格。资料同时提供两种构建方式:适用于小数据量的列表方式,以及适用于大数据量的 builder 方式。

主要能力

  • ShadTable.list(小表格):一次构建全部行,传入 header、footer(由 ShadTableCell.header / ShadTableCell.footer 组成的列表)以及 children(由行单元格列表组成的列表,每行是一组 ShadTableCell)。
  • ShadTable(大数据量表格):使用 columnCount、rowCount、header、builder、footer,按需构建,仅构建可见行。
  • 列宽控制:通过 columnSpanExtent 设置,例如 FixedTableSpanExtent(130) 表示固定宽度,MaxTableSpanExtent(FixedTableSpanExtent(120), RemainingTableSpanExtent()) 表示在固定与剩余宽度之间取较大值。
  • 表头与表尾对齐:ShadTableCell.header 与 ShadTableCell.footer 支持 alignment,例如 Alignment.centerRight 实现右对齐。

使用方式

列表方式(小表格)

ShadTable.list 接受 header、footer、columnSpanExtent 与 children 参数。header / footer 中每一项为 ShadTableCell.header / ShadTableCell.footer,children 中每一项是一行的 ShadTableCell 列表。columnSpanExtent 是一个接收列索引的函数,可按索引返回不同类型的宽度范围对象或 null。

Builder 方式(大表格)

使用 ShadTable,传入 columnCount:、rowCount:、header: (context, column) => ...、columnSpanExtent: (index) => ...、builder: (context, index) => ShadTableCell(...) 与 footer: (context, column) => ...。builder 接收带 row 与 column 的表格索引;大数据量时优先使用 builder,以便只构建可见行。

适用场景

  • 需要展示发票等带表头、表尾与金额列的表格(资料示例为发票列表)。
  • 需要响应式、可控制列宽的表格布局。
  • 数据量较大时,使用 builder 按需构建以优化性能。

限制

资料未提供平台限制、收费、价格、安装命令或依赖要求等信息,暂未提供。更多关于列跨度与 builder 模式的细节,资料指向 reference.md,但未给出其具体内容。