React 组件

UGTable 表格

UGTable 采用组合式 API，适合后台列表、数据对比与状态展示。

导入方式

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

tsx

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

变体预览

基础成员表格展示。

成员	角色	状态
林木	设计负责人	在线
阿青	前端开发	审阅中
子墨	产品经理	离线

状态展示

悬停行、空值列与高亮列都可以通过 className 扩展。

环境	域名	最后发布
Production	ui.ug666.dev	5 分钟前
Preview	preview-128.ug666.dev	刚刚

尺寸展示

表格通常通过容器宽度而非 size 属性控制展示密度。

窄表格：适合摘要信息与小型配置面板。

宽表格：适合后台管理与复杂数据列表。

代码示例

使用组合式子组件比单一配置更灵活。

tsx

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

export function MembersTable() {
  return (
    <UGTable>
      <UGTableHeader>
        <UGTableRow>
          <UGTableHead>姓名</UGTableHead>
          <UGTableHead>角色</UGTableHead>
          <UGTableHead>状态</UGTableHead>
        </UGTableRow>
      </UGTableHeader>
      <UGTableBody>
        <UGTableRow>
          <UGTableCell>林木</UGTableCell>
          <UGTableCell>设计负责人</UGTableCell>
          <UGTableCell>在线</UGTableCell>
        </UGTableRow>
      </UGTableBody>
    </UGTable>
  )
}

Props

属性	类型	默认值	说明
className	string	—	各个子组件均可通过 className 调整布局与颜色。
children	ReactNode	—	通过 Header、Body、Row、Cell 组合构建表格。