66
77<p align =" center " ><a href =" ./README.md " >English</a > | 简体中文</p >
88
9-
109<div align =" center " >
1110
1211[ ![ NPM version] [ npm-image ]] [ npm-url ] [ ![ npm download] [ download-image ]] [ download-url ] [ ![ build status] [ github-actions-image ]] [ github-actions-url ] [ ![ Codecov] [ codecov-image ]] [ codecov-url ] [ ![ bundle size] [ bundlephobia-image ]] [ bundlephobia-url ] [ ![ dumi] [ dumi-image ]] [ dumi-url ]
@@ -69,17 +68,17 @@ npm start
6968
7069| 名称 | 类型 | 默认值 | 说明 |
7170| --- | --- | --- | --- |
72- | tableLayout | ` auto ` \| ` fixed ` | ` auto ` \| 任何列的 ` fixed ` 都是固定的,或者省略号或标题是固定的 | https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout |
71+ | tableLayout | ` auto ` \| ` fixed ` | ` auto ` \| 任何列的 ` fixed ` 都是固定的,或者省略号或标题是固定的 | https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout |
7372| prefixCls | String | ` rc-table ` | |
7473| className | String | | additional className |
7574| id | String | | 容器div的标识符 |
7675| useFixedHeader | Boolean | false | 是否对标题使用分隔符表。更好地设置列宽度 |
77- | 滚动 | Object | {x: false, y: false} | 表格是否可以在x/y方向滚动,` x ` 或` y ` 可以是一个数字,表示表格主体的宽度和高度 |
76+ | scroll | Object | {x: false, y: false} | 表格是否可以在x/y方向滚动,` x ` 或` y ` 可以是一个数字,表示表格主体的宽度和高度 |
7877| expandable | Object | | 配置展开道具 |
7978| expandable.defaultExpandAllRows | Boolean | false | Expand All Rows initially |
8079| expandable.defaultExpandedRowKeys | String[ ] | [ ] | 初始扩展行键 |
8180| expandable.expandedRowKeys | String[ ] | | 当前扩展行键 |
82- | expandable.expandedRowRender | 功能(重新编码、索引、缩进、扩展): ReactNode | | 内容渲染到扩展行 |
81+ | expandable.expandedRowRender | Function(recode, index, indent, expanded) : ReactNode | | 内容渲染到扩展行 |
8382| expandable.expandedRowClassName | ` string ` \| ` (recode, index, indent) => string ` | | 获取扩展行的className |
8483| expandable.expandRowByClick | boolean | | 支持点击行展开 |
8584| expandable.expandIconColumnIndex | Number | 0 | ExpandIconAsCell 为 false 时将插入哪一列的 ExpandIcon 索引 |
@@ -89,21 +88,21 @@ npm start
8988| expandable.onExpand | Function(expanded, record) | | 单击展开图标时调用的函数 |
9089| expandable.onExpandedRowsChange | Function(expandedRows) | | 扩展行更改时调用的函数 |
9190| expandable.fixed | String \| Boolean | - | 当表格水平滚动时,此展开图标将被修复: true 或 ` left ` 或 ` right ` 和 ` expandIconColumnIndex ` 需要保留在第一个或最后一个 |
92- | rowKey | 字符串或函数(记录,索引):字符串 | 'key' | 如果 rowKey 是字符串,则 ` record[rowKey] ` 将用作键。如果 rowKey 是函数,则 ` rowKey(record, index) ` 的返回值将用作 key。 |
93- | rowClassName | 字符串或函数(记录、索引、缩进):字符串 | | 获取行的className |
94- | rowRef | 函数(记录、索引、缩进):字符串 | | get row's ref key |
95- | 数据 | Object[ ] | | 要呈现的数据记录数组 |
91+ | rowKey | string or Function(record, index) : string | 'key' | 如果 rowKey 是字符串,则 ` record[rowKey] ` 将用作键。如果 rowKey 是函数,则 ` rowKey(record, index) ` 的返回值将用作 key。 |
92+ | rowClassName | string or Function(record, index, indent) : string | | 获取行的className |
93+ | rowRef | Function(record, index, indent) : string | | get row's ref key |
94+ | data | Object[ ] | | 要呈现的数据记录数组 |
9695| onRow | Function(record, index) | | 每行设置自定义道具。 |
9796| onHeaderRow | Function(record, index) | | 为每个标题行设置自定义道具。 |
9897| showHeader | Boolean | true | 是否显示表头 |
9998| hidden | Boolean | ` false ` | Hidden column. |
10099| title | Function(currentData) | | 表格标题渲染函数 |
101100| footer | Function(currentData) | | 表页脚渲染函数 |
102- | emptyText | React.Node 或函数 | ` No Data ` | 数据为空时显示文本 |
101+ | emptyText | React.Node or Function | ` No Data ` | 数据为空时显示文本 |
103102| columns | Object[ ] | | 表的列配置见下表 |
104103| components | Object | | 覆盖表元素,请参阅 [ #171 ] ( https://github.com/react-component/table/pull/171 ) 了解更多详细信息 |
105- | sticky | 布尔值 \| {offsetHeader?: 数字 , offsetScroll?: 数字 , getContainer?: () => 窗口 \| HTML 元素 } | false | 粘贴标题和滚动条 |
106- | summary | (数据:只读 RecordType[ ] ) => React.ReactNode | - | ` table ` 组件中的 ` summary ` 属性用于定义汇总行。 |
104+ | sticky | boolean \| {offsetHeader?: number , offsetScroll?: number , getContainer?: () => Window \| HTMLElement } | false | 粘贴标题和滚动条 |
105+ | summary | (data: readonly RecordType[ ] ) => React.ReactNode | - | ` table ` 组件中的 ` summary ` 属性用于定义汇总行。 |
107106| rowHoverable | boolean | true | 表格 hover 交互 |
108107
109108### 方法
@@ -123,7 +122,7 @@ tblRef.current?.scrollTo({ key: 'rowKey', align: 'start' });
123122| top | number | - | 滚动到特定顶部位置(以像素为单位) |
124123| key | string | - | 按行键滚动至行 |
125124| offset | number | - | 与目标位置的额外偏移 |
126- | align | ` start` \| ` center` \| ` end` \| ` nearest` | ` nearest` | 滚动容器内目标元素的对齐方式。 ` start` 对齐到顶部,` center` 对齐到中间,` end` 对齐到底部,` nearest` 自动选择最接近的对齐方式。注意:虚拟表不支持 ` center` 。 |
125+ | align | ` start` \| ` center` \| ` end` \| ` nearest` | ` nearest` | 滚动容器内目标元素的对齐方式。 ` start` 对齐到顶部,` center` 对齐到中间,` end` 对齐到底部,` nearest` 自动选择最接近的对齐方式。注意:虚拟表不支持 ` center` 。 |
127126
128127## Column Props
129128
@@ -151,7 +150,7 @@ tblRef.current?.scrollTo({ key: 'rowKey', align: 'start' });
151150| 名称 | 类型 | 默认值 | 说明 |
152151| --- | --- | --- | --- |
153152| key | String | | 本摘要的关键 |
154- | fixed | boolean \| 'top' \| 'bottom' | - | ` true ` 修复了表格底部的汇总行。 ` top` 将汇总行固定在表格顶部,而 ` bottom` 将其固定在底部。 ` undefined ` 或 ` false ` 使摘要行可随表格一起滚动。 |
153+ | fixed | boolean \| 'top' \| 'bottom' | - | ` true ` 修复了表格底部的汇总行。 ` top` 将汇总行固定在表格顶部,而 ` bottom` 将其固定在底部。 ` undefined ` 或 ` false ` 使摘要行可随表格一起滚动。 |
155154
156155### Table.Summary.Row
157156
@@ -185,6 +184,7 @@ npm run prepublishOnly
185184` ` `
186185
187186包构建完成后,发布流程由 ` @rc- component/ np` 通过 ` rc- np` 命令处理。
187+
188188## Ecosystem
189189
190190该包属于 React Component 组织,并与 Ant Design 一同维护。 上方 Ant Design 标识仅用于说明生态归属;组件本身仍保持框架级、低样式耦合的定位。
0 commit comments