Table 表格 · Oink UI

基本用法

传列定义和数据。第一列自动加粗作为行的主信息；numeric 的列右对齐并用等宽数字。指针移上去时，一块共享的浅灰底跟着在行之间滑动。

给列加 sortable 后表头变成按钮，点击在升序 → 降序 → 不排序之间循环。默认按 accessor（或 row[key]）的值比较，数字、日期、字符串各有合理的顺序；也可以传 compare 自定义。服务端排序时加 manualSort，组件只发事件不动数据。

当前排序：commits 降序

selectable 在首列加复选框，表头是全选（部分选中时显示半选）。选中的 key 可受控。

已选 1 人

已选择 1 行

scroll 让表格限高（默认 320，可用 maxHeight 改）、表头固定在顶部。滚动完全是浏览器原生行为，只换了滚动条的外观；纵向滚动时悬停高亮直接对位，不做滑动动画。

默认情况下表格在窄屏会在容器内横向滚动。加 stackOnMobile 后，视口窄于 520px 时每一行变成一张卡片，单元格变成“列名 —— 值”；可排序的列留在上方排成一行按钮。把浏览器调窄，或在手机上看这个示例。

没有数据时显示 empty（默认是“暂无数据”四个字），可以放一个 EmptyState。

		城市		状态
还没有成员邀请同事加入后会出现在这里。

属性	类型	默认值	说明
`columns`*	`TableColumn<T>[]`	—	列定义。
`data`*	`T[]`	—	行数据。
`rowKey`	`keyof T \| ((row, index) => string)`	—	行的唯一标识：字段名或函数。默认用下标。
`label`	`string`	—	表格的名字（aria-label）；可滚动时也是滚动区域的名字。
`caption`	`ReactNode`	—	可见的表格标题，渲染成 `caption`。
`sort / defaultSort`	`{ key: string; direction: 'asc' \| 'desc' } \| null`	`null`	排序，受控 / 非受控。null 表示不排序。
`onSortChange`	`(sort: TableSort) => void`	—	排序变化时。
`manualSort`	`boolean`	—	只发出排序事件、不在内部排序（服务端排序）。
`selectable`	`boolean`	—	行选择：首列出现复选框，表头是全选。
`selectedKeys / defaultSelectedKeys`	`string[]`	—	选中的行 key，受控 / 非受控。
`onSelectionChange`	`(keys: string[]) => void`	—	选择变化时。
`getRowLabel`	`(row, index) => string`	—	行的名字，用在复选框的 aria-label 里。默认取第一列的文字。
`scroll`	`boolean`	—	可滚动变体：限高、表头吸顶。
`maxHeight`	`number \| string`	`320`	可滚动变体的最大高度。
`stackOnMobile`	`boolean`	—	窄屏（< 520px）把每一行变成卡片式的键值对。
`empty`	`ReactNode`	`'暂无数据'`	没有数据时显示的内容。
`noHighlight`	`boolean`	—	关掉跟随指针的共享悬停高亮，退回普通的整行变色。

属性	类型	默认值	说明
`key`*	`string`	—	列标识；没有 accessor / render 时也用它从行数据里取值。
`header`*	`ReactNode`	—	表头内容。
`label`	`string`	—	表头不是纯文字时，给读屏和卡片式布局用的文字标签。
`accessor`	`(row: T) => unknown`	—	取值，用于排序和默认渲染。
`render`	`(row: T, index: number) => ReactNode`	—	自定义单元格。
`sortable`	`boolean`	—	可排序。
`compare`	`(a: T, b: T) => number`	—	自定义比较（升序）；降序时自动取反。
`numeric`	`boolean`	—	数字列：右对齐、等宽数字。
`align`	`'start' \| 'center' \| 'end'`	—	对齐方式。
`width`	`number \| string`	—	列宽。