Table 表格

用于展示结构化数据的桌面级数据表格，支持排序、斑马纹、自定义列渲染。

基础用法

通过 columns 定义列，data 传入数据。

import { Table } from '@airo-ui/react'

function Demo() {
  const columns = [
    { label: '姓名', key: 'name', sortable: true },
    { label: '年龄', key: 'age', align: 'right' as const },
    { label: '城市', key: 'city' },
  ]

  const data = [
    { id: 1, name: '张三', age: 28, city: '北京' },
    { id: 2, name: '李四', age: 32, city: '上海' },
    { id: 3, name: '王五', age: 24, city: '广州' },
    { id: 4, name: '赵六', age: 35, city: '深圳' },
  ]

  return <Table columns={columns} data={data} />
}

斑马纹

设置 stripe 启用交替行背景色。

import { Table } from '@airo-ui/react'

<Table columns={columns} data={data} stripe />

紧凑模式

设置 size="sm" 启用紧凑模式，行高更小，适合桌面端高密度展示。

import { Table } from '@airo-ui/react'

<Table columns={columns} data={data} size="sm" />

边框模式

设置 bordered 显示列边框。

import { Table } from '@airo-ui/react'

<Table columns={columns} data={data} bordered />

自定义单元格

通过 columns 的 render 函数自定义列渲染。

import { Table } from '@airo-ui/react'

function Demo() {
  const columns = [
    {
      label: '姓名',
      key: 'name',
      render: (value: unknown, row: Record<string, unknown>) => (
        <strong>{value as string}</strong>
      ),
    },
    {
      label: '年龄',
      key: 'age',
      render: (value: unknown) => (
        <span style={{ color: 'var(--color-accent)' }}>{value as number} 岁</span>
      ),
    },
    { label: '城市', key: 'city' },
  ]

  return <Table columns={columns} data={data} />
}

排序

设置 sortable 启用列排序，通过 onSortChange 监听排序变化。

import { Table } from '@airo-ui/react'

function Demo() {
  const columns = [
    { label: '姓名', key: 'name', sortable: true },
    { label: '年龄', key: 'age', sortable: true, align: 'right' as const },
    { label: '城市', key: 'city' },
  ]

  return (
    <Table
      columns={columns}
      data={data}
      onSortChange={({ key, order }) => {
        console.log('排序字段:', key, '排序方向:', order)
      }}
    />
  )
}

加载中

设置 loading 显示加载遮罩。

import { Table } from '@airo-ui/react'

<Table columns={columns} data={data} loading />

API

Props

名称	类型	默认值	说明
columns	TableColumn[]	—	列定义（必填）
data	T[]	—	数据源（必填）
stripe	boolean	false	斑马纹
bordered	boolean	false	显示边框
size	'sm' | 'md'	'md'	尺寸
loading	boolean	false	加载状态
rowKey	string	'id'	行唯一键字段
onSortChange	(payload: { key: string; order: 'asc' | 'desc' | '' }) => void	—	排序变化时触发

TableColumn 定义

属性	类型	说明
label	string	列标题
key	string	字段名
sortable	boolean	是否可排序
width	string	列宽
align	'left' | 'center' | 'right'	对齐方式
render	(value: unknown, row: T, index: number) => ReactNode	自定义渲染函数

交互特性

• 点击表头排序，三态循环（asc -> desc -> 无）
• 排序指示器图标随状态变色
• 行 hover 高亮
• 加载状态显示旋转遮罩
• 空数据友好提示
• 紧凑模式适合高密度桌面场景