React 组件

UGTable 基础表格

提供原生表格语义、稳定行列布局、横向溢出与样式扩展。排序、筛选、列拖拽、编辑和虚拟滚动属于独立的高级表格。

导入方式

按需从包入口导入组件，并在应用入口引入一次样式文件。

tsx
import {
  UGTable,
  UGTableHeader,
  UGTableBody,
  UGTableRow,
  UGTableHead,
  UGTableCell,
} from '@ug666/ui-react'

基础用法

用组合式子组件表达表头、数据行和单元格，业务内容保持清晰。

成员职责团队状态
林木设计负责人设计系统在线
阿青前端开发Web 平台审阅中
子墨产品经理产品体验离线
小北移动端开发跨端平台在线

行样式与信息密度

通过 bordered、striped 和 size 统一控制常用表格外观；业务强调色仍由数据语义决定。

环境域名最后发布
Productionui.ug666.dev5 分钟前
Previewpreview-128.ug666.dev刚刚
构建任务分支耗时
docs-buildmain42s
package-checkrelease18s

空数据与横向溢出

空状态保持合法表格结构；列宽超过容器时由 UGTable 提供横向滚动。

名称负责人更新时间
暂无数据
项目仓库负责人环境更新时间
UG UIug666/ug-ui林木Production刚刚

代码示例

基础表格只负责结构和视觉；复杂数据能力使用后续独立的高级表格。

tsx
import { UGTable, UGTableBody, UGTableCell, UGTableHead, UGTableHeader, UGTableRow } from '@ug666/ui-react'

export function MembersTable() {
  return (
    <UGTable>
      <UGTableHeader>
        <UGTableRow>
          <UGTableHead>成员</UGTableHead>
          <UGTableHead>职责</UGTableHead>
          <UGTableHead className="text-right">状态</UGTableHead>
        </UGTableRow>
      </UGTableHeader>
      <UGTableBody>
        <UGTableRow>
          <UGTableCell className="font-medium">林木</UGTableCell>
          <UGTableCell>设计负责人</UGTableCell>
          <UGTableCell className="text-right">在线</UGTableCell>
        </UGTableRow>
      </UGTableBody>
    </UGTable>
  )
}

属性

属性类型默认值说明
UGTableTableHTMLAttributes—基础 table 容器，提供横向溢出和原生表格语义。
scrollRegionLabelstring'数据表格滚动区域'横向滚动容器的可访问名称。
scrollRegionTabIndexnumber0滚动容器的 Tab 顺序；设为 -1 时只允许编程聚焦。
size'sm' | 'md' | 'lg''md'统一控制表头高度、字号和单元格内边距。
borderedbooleanfalse显示完整外边框和单元格分隔线。
stripedbooleanfalse为偶数数据行增加弱背景。
hoverablebooleantrue启用数据行悬停反馈。
UGTableHeaderHTMLAttributes<HTMLTableSectionElement>—表头区域，对应 thead。
UGTableBodyHTMLAttributes<HTMLTableSectionElement>—表格主体，对应 tbody。
UGTableRowHTMLAttributes<HTMLTableRowElement>—数据行，对应 tr，内置分隔线和悬停反馈。
UGTableHeadThHTMLAttributes—表头单元格，对应 th。
UGTableCellTdHTMLAttributes—数据单元格，对应 td，支持 colSpan、rowSpan 和对齐样式。