UG666

UG666 UI
@ug666/react 文档演示

Table 表格

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

导入方式

所有示例均直接使用 @ug666/react 中的真实组件导出。

import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@ug666/react'

变体预览

基础成员表格展示。

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

状态展示

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

环境域名最后发布
Productionui.ug666.dev5 分钟前
Previewpreview-128.ug666.dev刚刚

尺寸展示

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

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

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

代码示例

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

import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@ug666/react'

export function MembersTable() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>姓名</TableHead>
          <TableHead>角色</TableHead>
          <TableHead>状态</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>林木</TableCell>
          <TableCell>设计负责人</TableCell>
          <TableCell>在线</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  )
}

Props 说明

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