Table 表格

Rue Table 现在同时覆盖数据驱动表格和 daisyUI 风格的静态表格写法，使用 Rue 当前视觉风格，并补充更完整的排序、筛选、分页、选择、展开与分组表头能力。

可以先从基础用法进入，再根据场景查看筛选排序、选择模式、滚动布局与分组表头。静态样式写法仍然提供，可继续使用Table.Head、Table.Body等复合组件。

何时使用

需要展示结构化列表数据，并同时提供排序、筛选、分页等交互。
适合使用 Rue / daisyUI 的表格视觉风格，同时使用数据表式 API。
基础简单静态表格，也有复杂后台表格，想统一在一个组件里处理。

# 基础数据表格

最直接的 columns + dataSource 用法，适合作为大多数列表页的起点。


林青	杭州	设计工程师	体验平台
周宁	上海	前端工程师	设计系统
刘溪	深圳	产品经理	商业化
陈默	成都	测试开发	质量平台
顾安	北京	运营分析	增长

# 视觉风格与静态行态

使用当前视觉类示例：背景、激活行、hover、zebra 与尺寸示例。

带背景与激活行

姓名	岗位	城市
林青	设计工程师	杭州
周宁	前端工程师	上海

hover / zebra / xs


林青	杭州	设计工程师	体验平台
周宁	上海	前端工程师	设计系统
刘溪	深圳	产品经理	商业化

# 可控筛选与排序

恢复外部控制台式的筛选与排序示例，避免交互状态混在一起。

筛选：Name Jim / Address London；当前排序：年龄 / 降序

暂无匹配项		暂无匹配项
Jim Green	42	London No. 1 Lake Park
Jim Red	32	London No. 2 Lake Park

# 多列排序（优先级组合）

补回多列优先级排序示例，支持 { compare, multiple } 并按优先级组合排序。

当前优先级：语文降序 P3 / 数学降序 P2


Joe Black	98	90	70
Jim Green	98	66	89
John Brown	98	60	70
Jim Red	88	99	89

# 动态列显隐

把基础的隐藏列示例补回来，并用外部开关控制列可见性。


Cy Ganderton	Design Ops	Hangzhou	Hart Hagerty
Brice Swyre	Growth	Shanghai	Yancy Tear
Marjy Ferencz	Infra	Shenzhen	Maribeth Popping

# 选择模式

展示多选、单选、禁用项、部分禁用几类示例，并增加选择列表头与回调展示。

多选：当前 2


林青	体验平台	active
周宁	设计系统	active
刘溪	商业化	leave
陈默	质量平台	trial
顾安	增长	active

单选：当前 2


	林青	杭州
	周宁	上海
	刘溪	深圳
	陈默	成都

# 展开、摘要与空态

把展开行、按行点击展开、summary 和 emptyText 放在同一个业务场景里。


	林青	92
	周宁	88
团队：设计系统地址：武康路 12 号
	刘溪	79
	陈默	95
	顾安	83
当前行数：5平均绩效：87


暂无成员，请先创建数据。

# 滚动、标题、尾部与省略

展示滚动、title/footer、ellipsis 和滚动容器类示例，并串成一个长表格布局场景。

成员列表（当前页 15 行）


林青	杭州	设计工程师	体验平台	云谷路 88 号	148
周宁	上海	前端工程师	设计系统	武康路 12 号	203
刘溪	深圳	产品经理	商业化	深南大道 100 号	167
陈默	成都	测试开发	质量平台	天府三街 18 号	98
顾安	北京	运营分析	增长	望京 SOHO	132
林青	杭州	设计工程师	体验平台	云谷路 88 号	148
周宁	上海	前端工程师	设计系统	武康路 12 号	203
刘溪	深圳	产品经理	商业化	深南大道 100 号	167
陈默	成都	测试开发	质量平台	天府三街 18 号	98
顾安	北京	运营分析	增长	望京 SOHO	132
林青	杭州	设计工程师	体验平台	云谷路 88 号	148
周宁	上海	前端工程师	设计系统	武康路 12 号	203
刘溪	深圳	产品经理	商业化	深南大道 100 号	167
陈默	成都	测试开发	质量平台	天府三街 18 号	98
顾安	北京	运营分析	增长	望京 SOHO	132

展示了固定列、纵向滚动和 ellipsis。

# 分组表头、隐藏列与单元格属性

分组表头示例同时覆盖隐藏列、单元格 className/style 和操作列。

成员信息	工作概览
林青	杭州	设计工程师	体验平台	26000
周宁	上海	前端工程师	设计系统	31000
刘溪	深圳	产品经理	商业化	35000
陈默	成都	测试开发	质量平台	22000
顾安	北京	运营分析	增长	24500

# 静态样式、Pinned Rows 与 Pinned Cols

基础静态样式示例仍然提供，适合不需要 columns/dataSource 时直接写结构。

商品	负责人	渠道	库存	价格
套餐 A	前台	门店	42	199
套餐 B	门店	小程序	36	299
套餐 C	线上	官网	28	399
体验卡	运营	社群	86	99
企业版	销售	直销	12	1299
家庭版	门店	门店	25	699
增值包	客服	续费	57	159
旗舰包	线上	官网	18	999
季度包	增长	投放	64	499
年度包	销售	直销	21	1599

姓名	岗位	团队	城市	绩效	访问	月薪	地址
林青	设计工程师	体验平台	杭州	92	148	26000	云谷路 88 号
周宁	前端工程师	设计系统	上海	88	216	31000	武康路 12 号
刘溪	产品经理	商业化	深圳	76	174	35000	深南大道 100 号
陈默	测试开发	质量平台	成都	95	98	22000	天府三街 18 号
顾安	运营分析	增长	北京	83	132	24500	望京 SOHO
许嘉	数据分析	策略	南京	91	121	27000	软件大道 66 号
何澈	客户成功	企业服务	苏州	87	154	24000	金鸡湖大道 9 号

API

当前页面只列出 Rue Table 当前最常用的配置项，优先对应实际使用场景。

Table

属性	说明	类型	默认值
`columns`	列配置，支持分组表头、排序、筛选、隐藏列与单元格属性。	`ColumnItem[]`	`-`
`dataSource`	数据数组。	`any[]`	`-`
`rowKey`	行主键，可传字段名或函数。	`string \| (record) => key`	`key`
`rowSelection`	选择列配置，支持多选、单选、禁用项、表头标题。	`object`	`-`
`expandable`	展开行配置，支持按行点击展开与受控展开。	`object`	`-`
`pagination`	分页配置，设为 `false` 时关闭分页。	`object \| false`	`-`
`scroll`	横向 / 纵向滚动配置，可在变更后自动回到顶部。	`object`	`-`
`summary`	汇总栏渲染。	`(currentData, info) => any`	`-`

Column

属性	说明	类型	默认值
`title`	列标题，支持传节点或函数。	`any \| (context) => any`	`-`
`dataIndex`	字段路径，支持字符串和数组路径。	`string \| string[]`	`-`
`sorter / sortOrder`	本地排序、受控排序与多列排序。	`boolean \| fn \| { compare?: fn; multiple?: number } / SortOrder`	`-`
`filters / filterDropdown / filteredValue`	默认筛选菜单、自定义筛选面板与受控筛选值。	`FilterItem[] / render fn / any[]`	`-`
`filterSearch`	筛选项搜索。	`boolean \| fn`	`false`
`children`	分组表头子列。	`ColumnItem[]`	`-`
`hidden`	隐藏列但保持配置。	`boolean`	`false`
`onCell / onHeaderCell`	给单元格注入 className、style、colSpan、rowSpan 等属性。	`fn`	`-`

rowSelection

属性	说明	类型	默认值
`type`	选择模式。	`checkbox` \| `radio`	`checkbox`
`columnTitle`	选择列表头内容。	`any`	`-`
`hideSelectAll`	隐藏全选框。	`boolean`	`false`
`getCheckboxProps`	为某一行注入 disabled 等状态。	`(record) => object`	`-`
`onSelect / onSelectAll / onChange`	选择行为回调。	`fn`	`-`

expandable

属性	说明	类型	默认值
`expandedRowRender`	展开内容渲染函数。	`(record, index) => any`	`-`
`expandRowByClick`	点击行即可展开。	`boolean`	`false`
`showExpandColumn`	是否展示展开列。	`boolean`	`true`
`rowExpandable`	按行控制是否可展开。	`(record) => boolean`	`-`
`defaultExpandedRowKeys / expandedRowKeys`	默认展开 / 受控展开。	`key[]`	`-`

FAQ

数据驱动和静态结构怎么选？

需要排序、筛选、分页、选择、展开时优先使用columns + dataSource。只想快速输出结构化样式，或需要完全手写表格结构时，可以使用复合组件写法即可。

为什么筛选或排序后会回到第一页？

这是为了避免当前页在筛选后没有数据。如果你希望完全自行控制分页，把 pagination.current和onChange一起受控即可。

固定列和 pinCols 的关系是什么？

pinCols负责启用 daisyUI 的固定列视觉能力，具体哪一列固定则由列上的 fixedCol或fixed控制。静态结构写法中，通常把固定列单元格写成 TH会更自然。