用途:该技能用于在页面中渲染结构化表格数据。<sgds-table> 从数组生成表格,表头与数据通过 JavaScript 属性数组传入,而非 HTML 插槽内容。
主要能力:用 headerPosition 控制表头位置——horizontal(默认,列头在顶部,设置 columnHeader)、vertical(行头在左侧,设置 rowHeader)、both(同时提供 rowHeader 与 columnHeader)。responsive 可用 sm、md、lg、xl 或 always,在指定断点以下启用横向滚动,适合宽表。headerBackground 为表头单元格加背景色,tableBorder 为所有单元格加边框。
使用方式:先参考 sgds-components-setup 完成安装与框架集成(涉及 React 19+ 与 React ≤18、Vue、Angular)。典型写法:定义 <sgds-table id="my-table"></sgds-table>,再通过脚本获取元素并赋值 table.columnHeader 与 table.tableData。tableData 为二维数组,每个内层数组是一行,列数需与 columnHeader 数量对齐(horizontal 或 both),行数需与 rowHeader 数量对齐(vertical 或 both);both 模式下 tableData[i][j] 表示第 i 行第 j 列单元格。
限制:所有数据属性必须作为 JavaScript 属性设置,不能用 HTML 属性;该组件未暴露 CSS 自定义属性与 CSS parts,不支持自定义 CSS 样式修改;组件没有自定义事件,也没有公开方法。