README.zh-CN.md

@rc-component/table

_{Ant Design 生态的一部分。}

📋 React 底层表格基础组件，服务于复杂数据展示。

English | 简体中文

特性

• 灵活的列、摘要、固定标题、粘性、可扩展行和虚拟表支持。
• TypeScript-first API 专为设计系统中的组合而设计。
• 被 Ant Design 使用 Table 等 React 数据展示体验。

安装

npm install @rc-component/table

使用

import Table from '@rc-component/table';
import type { ColumnsType } from '@rc-component/table';

interface User {
  key: string;
  name: string;
  age: number;
  address: string;
}

const columns: ColumnsType<User> = [
  { title: 'Name', dataIndex: 'name', key: 'name', width: 120 },
  { title: 'Age', dataIndex: 'age', key: 'age', width: 80 },
  { title: 'Address', dataIndex: 'address', key: 'address' },
];

const data: User[] = [
  { key: '1', name: 'Jack', age: 28, address: 'Somewhere' },
  { key: '2', name: 'Rose', age: 36, address: 'Somewhere else' },
];

export default () => <Table columns={columns} data={data} />;

示例

运行本地 dumi 站点：

npm install
npm start

然后打开 http://localhost:8000。

API

Properties

名称	类型	默认值	说明
tableLayout	auto | fixed	auto | 任何列的 fixed 都是固定的，或者省略号或标题是固定的	https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
prefixCls	String	rc-table
className	String		附加 className
id	String		容器div的标识符
useFixedHeader	Boolean	false	是否对标题使用分隔符表。更好地设置列宽度
scroll	Object	{x: false, y: false}	表格是否可以在x/y方向滚动，x或y可以是一个数字，表示表格主体的宽度和高度
expandable	Object		配置展开道具
expandable.defaultExpandAllRows	Boolean	false	初始展开所有行
expandable.defaultExpandedRowKeys	String[]	[]	初始扩展行键
expandable.expandedRowKeys	String[]		当前扩展行键
expandable.expandedRowRender	Function(recode, index, indent, expanded):ReactNode		内容渲染到扩展行
expandable.expandedRowClassName	string | (recode, index, indent) => string		获取扩展行的 className
expandable.expandRowByClick	boolean		支持点击行展开
expandable.expandIconColumnIndex	Number	0	ExpandIconAsCell 为 false 时将插入哪一列的 ExpandIcon 索引
expandable.expandIcon	props => ReactNode		自定义展开图标
expandable.indentSize	Number	15	每一级 data[i].children 的缩进尺寸，建议配合指定的 column.width 使用
expandable.rowExpandable	(record) => boolean		配置行支持可扩展
expandable.onExpand	Function(expanded, record)		单击展开图标时调用的函数
expandable.onExpandedRowsChange	Function(expandedRows)		扩展行更改时调用的函数
expandable.fixed	String | Boolean	-	当表格水平滚动时，此展开图标将被修复： true 或 left 或 right 和 expandIconColumnIndex 需要保留在第一个或最后一个
rowKey	string or Function(record, index):string	'key'	如果 rowKey 是字符串，则 record[rowKey] 将用作键。如果 rowKey 是函数，则 rowKey(record, index) 的返回值将用作 key。
rowClassName	string or Function(record, index, indent):string		获取行的 className
rowRef	Function(record, index, indent):string		获取行 ref key
data	Object[]		要呈现的数据记录数组
onRow	Function(record, index)		每行设置自定义道具。
onHeaderRow	Function(record, index)		为每个标题行设置自定义道具。
showHeader	Boolean	true	是否显示表头
hidden	Boolean	false	隐藏列。
title	Function(currentData)		表格标题渲染函数
footer	Function(currentData)		表页脚渲染函数
emptyText	React.Node or Function	No Data	数据为空时显示文本
columns	Object[]		表的列配置见下表
components	Object		覆盖表元素，请参阅 #171 了解更多详细信息
sticky	boolean | {offsetHeader?: number, offsetScroll?: number, getContainer?: () => Window | HTMLElement }	false	粘贴标题和滚动条
summary	(data: readonly RecordType[]) => React.ReactNode	-	table 组件中的 summary 属性用于定义汇总行。
rowHoverable	boolean	true	表格 hover 交互

方法

scrollTo

Table 组件公开 scrollTo 方法来滚动到特定位置：

const tblRef = useRef();
tblRef.current?.scrollTo({ key: 'rowKey', align: 'start' });

名称	类型	默认值	说明
index	number	-	要滚动到的行索引
top	number	-	滚动到特定顶部位置（以像素为单位）
key	string	-	按行键滚动至行
offset	number	-	与目标位置的额外偏移
align	start | center | end | nearest	nearest	滚动容器内目标元素的对齐方式。 start 对齐到顶部，center 对齐到中间，end 对齐到底部，nearest 自动选择最接近的对齐方式。注意：虚拟表不支持 center。

Column 属性

名称	类型	默认值	说明
key	String		本栏目关键
className	String		该列的 className
colSpan	Number		该列的 head colSpan
title	React节点		本栏目标题
dataIndex	String		数据记录的显示字段
宽度	String | Number		宽度具体比例根据柱子的宽度计算
minWidth	Number		列的最小宽度，仅当 tableLayout 为 auto 时有效
fixed	String | Boolean		当表格水平滚动时此列将被固定： true 或 'left' 或 'right'
align	String		指定单元格内容的对齐方式
ellipsis	Boolean		指定单元格内容是否省略
rowScope	'row' | 'rowgroup'		设置此列中所有单元格的范围属性
onCell	Function(record, index)		为每个单元格设置自定义道具。
onHeaderCell	Function(record)		为每个标题单元格设置自定义属性。
使成为	函数（值、行、索引）		单元格渲染函数，参数为单元格文本、当前行记录和行索引。可返回 { children: value, props: { colSpan: 1, rowSpan: 1 } }，其中 children 是单元格文本，props 是单元格设置，例如 colSpan 设置 td colspan，rowSpan 设置 td rowspan

Summary Props

Table.Summary

名称	类型	默认值	说明
key	String		本摘要的关键
fixed	boolean | 'top' | 'bottom'	-	true 修复了表格底部的汇总行。 top 将汇总行固定在表格顶部，而 bottom 将其固定在底部。 undefined 或 false 使摘要行可随表格一起滚动。

Table.Summary.Row

名称	类型	默认值	说明
key	String		本摘要的关键
className	String	-	此摘要行的 className
风格	React.CSSProperties	-	此摘要行的样式
onClick	(e?: React.MouseEvent<HTMLElement>) => void	-	Table.Summary.Row 组件中的 onClick 属性可用于设置汇总行的单击事件处理程序。

本地开发

npm install
npm start

dumi 站点默认运行在 http://localhost:8000。

在发送拉取请求之前运行检查：

npm run lint
npm run tsc
npm test
npm run build

发布

npm run prepublishOnly

包构建完成后，发布流程由 @rc-component/np 通过 rc-np 命令处理。

Ecosystem

该包属于 React Component 组织，并与 Ant Design 一同维护。 上方 Ant Design 标识仅用于说明生态归属；组件本身仍保持框架级、低样式耦合的定位。

许可证

@rc-component/table 基于 MIT 许可证发布。