Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Table): support virtual components.body #47098

Merged
merged 7 commits into from
Jan 26, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions components/table/demo/virtual-list.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
## zh-CN

通过 `virtual` 开启虚拟滚动,此时 `scroll.x` 与 `scroll.y` 必须设置且为 `number` 类型。开启后不能使用 `components.body` 属性。
通过 `virtual` 开启虚拟滚动,此时 `scroll.x` 与 `scroll.y` 必须设置且为 `number` 类型。

## en-US

Set `virtual` to enable virtual scroll, and `scroll.x` and `scroll.y` must be set at the same time with `number` type. `components.body` cannot be used when `virtual` is enabled.
Set `virtual` to enable virtual scroll, and `scroll.x` and `scroll.y` must be set at the same time with `number` type.
8 changes: 6 additions & 2 deletions components/table/index.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ Common props ref:[Common props](/docs/react/common-props)
| --- | --- | --- | --- | --- |
| bordered | Whether to show all table borders | boolean | false | |
| columns | Columns of table | [ColumnsType](#column)\[] | - | |
| components | Override default table elements. Not support `components.body` when in `virtual` | [TableComponents](https://github.com/react-component/table/blob/75ee0064e54a4b3215694505870c9d6c817e9e4a/src/interface.ts#L129) | - | |
| components | Override default table elements | [TableComponents](https://github.com/react-component/table/blob/75ee0064e54a4b3215694505870c9d6c817e9e4a/src/interface.ts#L129) | - | |
| dataSource | Data record array to be displayed | object\[] | - | |
| expandable | Config expandable content | [expandable](#expandable) | - | |
| footer | Table footer renderer | function(currentPageData) | - | |
Expand All @@ -141,7 +141,7 @@ Common props ref:[Common props](/docs/react/common-props)
| onChange | Callback executed when pagination, filters or sorter is changed | function(pagination, filters, sorter, extra: { currentDataSource: \[], action: `paginate` \| `sort` \| `filter` }) | - | |
| onHeaderRow | Set props on per header row | function(columns, index) | - | |
| onRow | Set props on per row | function(record, index) | - | |
| virtual | Support virtual list. Not support `components.body` when enabled | boolean | - | 5.9.0 |
| virtual | Support virtual list | boolean | - | 5.9.0 |

### Table ref

Expand Down Expand Up @@ -385,3 +385,7 @@ Fixed column use `z-index` to make it over other columns. You will find sometime
### How to custom render Table Checkbox(For example, adding Tooltip)?

Since `4.1.0`, You can use [`rowSelection.renderCell`](https://ant.design/components/table/#rowselection) to custom render Table Checkbox. If you want to add Tooltip, please refer to this [demo](https://codesandbox.io/s/table-row-tooltip-v79j2v).

### Why does components.body.wrapper report an error when virtual is enabled?

Because virtual table needs to get its ref to do some calculations, so you need to use `React.forwardRef` wrapper and pass the ref to the dom
8 changes: 6 additions & 2 deletions components/table/index.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ const columns = [
| --- | --- | --- | --- | --- |
| bordered | 是否展示外边框和列边框 | boolean | false | |
| columns | 表格列的配置描述,具体项见下表 | [ColumnsType](#column)\[] | - | |
| components | 覆盖默认的 table 元素,`virtual` 下不支持 `components.body` | [TableComponents](https://github.com/react-component/table/blob/75ee0064e54a4b3215694505870c9d6c817e9e4a/src/interface.ts#L129) | - | |
| components | 覆盖默认的 table 元素 | [TableComponents](https://github.com/react-component/table/blob/75ee0064e54a4b3215694505870c9d6c817e9e4a/src/interface.ts#L129) | - | |
| dataSource | 数据数组 | object\[] | - | |
| expandable | 配置展开属性 | [expandable](#expandable) | - | |
| footer | 表格尾部 | function(currentPageData) | - | |
Expand All @@ -142,7 +142,7 @@ const columns = [
| onChange | 分页、排序、筛选变化时触发 | function(pagination, filters, sorter, extra: { currentDataSource: \[], action: `paginate` \| `sort` \| `filter` }) | - | |
| onHeaderRow | 设置头部行属性 | function(columns, index) | - | |
| onRow | 设置行属性 | function(record, index) | - | |
| virtual | 支持虚拟列表,开启后不支持 `components.body` 自定义 | boolean | - | 5.9.0 |
| virtual | 支持虚拟列表 | boolean | - | 5.9.0 |

### Table ref

Expand Down Expand Up @@ -385,3 +385,7 @@ return <Table rowKey={(record) => record.uid} />;
### 如何自定义渲染可选列的勾选框(比如增加 Tooltip)?

自 `4.1.0` 起,可以通过 [rowSelection](https://ant.design/components/table-cn/#rowselection) 的 `renderCell` 属性控制,可以参考此处 [Demo](https://codesandbox.io/s/table-row-tooltip-v79j2v) 实现展示 Tooltip 需求或其他自定义的需求。

### 为什么 components.body.wrapper 在 virtual 开启时会报错?

因为虚拟表格需要获取其 ref 做一些计算,所以你需要使用 `React.forwardRef` 包裹并传递 ref 到 dom。
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@
"rc-slider": "~10.5.0",
"rc-steps": "~6.0.1",
"rc-switch": "~4.1.0",
"rc-table": "~7.37.0",
"rc-table": "~7.38.0",
yoyo837 marked this conversation as resolved.
Show resolved Hide resolved
"rc-tabs": "~14.0.0",
"rc-textarea": "~1.6.3",
"rc-tooltip": "~6.1.3",
Expand Down