mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 22:36:31 +08:00
docs: Add Table.Summary desc (#30673)
* docs: Add summary desc * test: Update snapshot
This commit is contained in:
二货机器人
GitHub
parent
89b9172830
commit
17e863fc94
@ -17091,23 +17091,19 @@ Array [
|
||||
class="ant-spin-container"
|
||||
>
|
||||
<div
|
||||
class="ant-table ant-table-bordered ant-table-fixed-column ant-table-scroll-horizontal ant-table-has-fix-left"
|
||||
class="ant-table ant-table-bordered ant-table-fixed-header ant-table-fixed-column ant-table-scroll-horizontal ant-table-has-fix-left"
|
||||
>
|
||||
<div
|
||||
class="ant-table-container"
|
||||
>
|
||||
<div
|
||||
class="ant-table-content"
|
||||
style="overflow-x:auto;overflow-y:hidden"
|
||||
class="ant-table-header"
|
||||
style="overflow:hidden"
|
||||
>
|
||||
<table
|
||||
style="width:2000px;min-width:100%;table-layout:fixed"
|
||||
style="table-layout:fixed;visibility:hidden"
|
||||
>
|
||||
<colgroup>
|
||||
<col
|
||||
style="width:100px;min-width:100px"
|
||||
/>
|
||||
</colgroup>
|
||||
<colgroup />
|
||||
<thead
|
||||
class="ant-table-thead"
|
||||
>
|
||||
@ -17125,6 +17121,20 @@ Array [
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
<div
|
||||
class="ant-table-body"
|
||||
style="overflow-x:auto;overflow-y:scroll;max-height:500px"
|
||||
>
|
||||
<table
|
||||
style="width:2000px;min-width:100%;table-layout:fixed"
|
||||
>
|
||||
<colgroup>
|
||||
<col
|
||||
style="width:100px;min-width:100px"
|
||||
/>
|
||||
</colgroup>
|
||||
<tbody
|
||||
class="ant-table-tbody"
|
||||
>
|
||||
@ -17160,7 +17170,7 @@ Array [
|
||||
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position:sticky;left:0"
|
||||
>
|
||||
Bamboo
|
||||
Light
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
@ -17176,7 +17186,7 @@ Array [
|
||||
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position:sticky;left:0"
|
||||
>
|
||||
Light
|
||||
Bamboo
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
@ -17192,7 +17202,7 @@ Array [
|
||||
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position:sticky;left:0"
|
||||
>
|
||||
Bamboo
|
||||
Little
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
@ -17235,6 +17245,22 @@ Array [
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="5"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position:sticky;left:0"
|
||||
>
|
||||
Little
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Everything that has a beginning, has an end.
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="6"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
@ -17248,7 +17274,225 @@ Array [
|
||||
Everything that has a beginning, has an end.
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="7"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position:sticky;left:0"
|
||||
>
|
||||
Bamboo
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Everything that has a beginning, has an end.
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="8"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position:sticky;left:0"
|
||||
>
|
||||
Little
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Everything that has a beginning, has an end.
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="9"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position:sticky;left:0"
|
||||
>
|
||||
Light
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Everything that has a beginning, has an end.
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="10"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position:sticky;left:0"
|
||||
>
|
||||
Bamboo
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Everything that has a beginning, has an end.
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="11"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position:sticky;left:0"
|
||||
>
|
||||
Little
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Everything that has a beginning, has an end.
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="12"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position:sticky;left:0"
|
||||
>
|
||||
Light
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Everything that has a beginning, has an end.
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="13"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position:sticky;left:0"
|
||||
>
|
||||
Bamboo
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Everything that has a beginning, has an end.
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="14"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position:sticky;left:0"
|
||||
>
|
||||
Little
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Everything that has a beginning, has an end.
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="15"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position:sticky;left:0"
|
||||
>
|
||||
Light
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Everything that has a beginning, has an end.
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="16"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position:sticky;left:0"
|
||||
>
|
||||
Bamboo
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Everything that has a beginning, has an end.
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="17"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position:sticky;left:0"
|
||||
>
|
||||
Little
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Everything that has a beginning, has an end.
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="18"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position:sticky;left:0"
|
||||
>
|
||||
Light
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Everything that has a beginning, has an end.
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="19"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position:sticky;left:0"
|
||||
>
|
||||
Bamboo
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Everything that has a beginning, has an end.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div
|
||||
class="ant-table-summary"
|
||||
style="overflow:hidden"
|
||||
>
|
||||
<table
|
||||
style="table-layout:fixed;visibility:hidden"
|
||||
>
|
||||
<colgroup />
|
||||
<tfoot
|
||||
class="ant-table-summary"
|
||||
>
|
||||
|
||||
@ -7,11 +7,11 @@ title:
|
||||
|
||||
## zh-CN
|
||||
|
||||
通过 `summary` 设置总结栏。使用 `Table.Summary.Cell` 同步 Column 的固定状态。
|
||||
通过 `summary` 设置总结栏。使用 `Table.Summary.Cell` 同步 Column 的固定状态。你可以通过配置 `Table.Summary` 的 `fixed` 属性使其固定(`4.16.0` 支持)。
|
||||
|
||||
## en-US
|
||||
|
||||
Set summary content by `summary` prop. Sync column fixed status with `Table.Summary.Cell`.
|
||||
Set summary content by `summary` prop. Sync column fixed status with `Table.Summary.Cell`. You can fixed it by set `Table.Summary` `fixed` prop(since `4.16.0`).
|
||||
|
||||
```jsx
|
||||
import { Table, Typography } from 'antd';
|
||||
@ -74,10 +74,10 @@ const fixedColumns = [
|
||||
];
|
||||
|
||||
const fixedData = [];
|
||||
for (let i = 0; i < 6; i += 1) {
|
||||
for (let i = 0; i < 20; i += 1) {
|
||||
fixedData.push({
|
||||
key: i,
|
||||
name: i % 2 ? 'Light' : 'Bamboo',
|
||||
name: ['Light', 'Bamboo', 'Little'][i % 3],
|
||||
description: 'Everything that has a beginning, has an end.',
|
||||
});
|
||||
}
|
||||
@ -126,13 +126,15 @@ ReactDOM.render(
|
||||
columns={fixedColumns}
|
||||
dataSource={fixedData}
|
||||
pagination={false}
|
||||
scroll={{ x: 2000 }}
|
||||
scroll={{ x: 2000, y: 500 }}
|
||||
bordered
|
||||
summary={() => (
|
||||
<Table.Summary.Row>
|
||||
<Table.Summary.Cell index={0}>Summary</Table.Summary.Cell>
|
||||
<Table.Summary.Cell index={1}>This is a summary content</Table.Summary.Cell>
|
||||
</Table.Summary.Row>
|
||||
<Table.Summary fixed>
|
||||
<Table.Summary.Row>
|
||||
<Table.Summary.Cell index={0}>Summary</Table.Summary.Cell>
|
||||
<Table.Summary.Cell index={1}>This is a summary content</Table.Summary.Cell>
|
||||
</Table.Summary.Row>
|
||||
</Table.Summary>
|
||||
)}
|
||||
/>
|
||||
</>,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user