@rc-component/table

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

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

English | 简体中文

## 特性 - 灵活的列、摘要、固定标题、粘性、可扩展行和虚拟表支持。 - TypeScript-first API 专为设计系统中的组合而设计。 - 被 Ant Design 使用 Table 等 React 数据展示体验。 ## 安装 ```bash npm install @rc-component/table ``` ## 使用 ```tsx 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 = [ { 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 () => ; ``` ## 示例运行本地 dumi 站点： ```bash 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](https://github.com/react-component/table/pull/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` 方法来滚动到特定位置： ```js 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\) => void | - | `Table.Summary.Row` 组件中的 `onClick` 属性可用于设置汇总行的单击事件处理程序。 | ## 本地开发 ```bash npm install npm start ``` dumi 站点默认运行在 `http://localhost:8000`。在发送拉取请求之前运行检查： ```bash npm run lint npm run tsc npm test npm run build ``` ## 发布 ```bash npm run prepublishOnly ``` 包构建完成后，发布流程由 `@rc-component/np` 通过 `rc-np` 命令处理。 ## Ecosystem 该包属于 React Component 组织，并与 Ant Design 一同维护。上方 Ant Design 标识仅用于说明生态归属；组件本身仍保持框架级、低样式耦合的定位。 ## 许可证 @rc-component/table 基于 [MIT](./LICENSE) 许可证发布。