mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
feat: Table summary support fixed columns (#23647)
* feat: Summary support fixed column * update snapshot * update demo
This commit is contained in:
二货机器人
GitHub
parent
8ae2b1f542
commit
2da7e29198
@ -1,7 +1,7 @@
|
||||
import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import omit from 'omit.js';
|
||||
import RcTable from 'rc-table';
|
||||
import RcTable, { Summary } from 'rc-table';
|
||||
import { TableProps as RcTableProps, INTERNAL_HOOKS } from 'rc-table/lib/Table';
|
||||
import { convertChildrenToColumns } from 'rc-table/lib/hooks/useColumns';
|
||||
import Spin, { SpinProps } from '../spin';
|
||||
@ -482,5 +482,6 @@ Table.SELECTION_ALL = SELECTION_ALL;
|
||||
Table.SELECTION_INVERT = SELECTION_INVERT;
|
||||
Table.Column = Column;
|
||||
Table.ColumnGroup = ColumnGroup;
|
||||
Table.Summary = Summary;
|
||||
|
||||
export default Table;
|
||||
|
||||
@ -14059,175 +14059,369 @@ exports[`renders ./components/table/demo/size.md correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`renders ./components/table/demo/summary.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-table-wrapper"
|
||||
>
|
||||
Array [
|
||||
<div
|
||||
class="ant-spin-nested-loading"
|
||||
class="ant-table-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-container"
|
||||
class="ant-spin-nested-loading"
|
||||
>
|
||||
<div
|
||||
class="ant-table ant-table-bordered"
|
||||
class="ant-spin-container"
|
||||
>
|
||||
<div
|
||||
class="ant-table-container"
|
||||
class="ant-table ant-table-bordered"
|
||||
>
|
||||
<div
|
||||
class="ant-table-content"
|
||||
class="ant-table-container"
|
||||
>
|
||||
<table
|
||||
style="table-layout:auto"
|
||||
<div
|
||||
class="ant-table-content"
|
||||
>
|
||||
<colgroup />
|
||||
<thead
|
||||
class="ant-table-thead"
|
||||
<table
|
||||
style="table-layout:auto"
|
||||
>
|
||||
<tr>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Name
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Borrow
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Repayment
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="ant-table-tbody"
|
||||
>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="1"
|
||||
<colgroup />
|
||||
<thead
|
||||
class="ant-table-thead"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
John Brown
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
10
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
33
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="2"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Jim Green
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
100
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
0
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="3"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Joe Black
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
10
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
10
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="4"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Jim Red
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
75
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
45
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>
|
||||
Total
|
||||
</th>
|
||||
<td>
|
||||
<span
|
||||
class="ant-typography ant-typography-danger"
|
||||
<tr>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
>
|
||||
195
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span
|
||||
class="ant-typography"
|
||||
Name
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
>
|
||||
88
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
Balance
|
||||
</th>
|
||||
<td
|
||||
colspan="2"
|
||||
Borrow
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Repayment
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="ant-table-tbody"
|
||||
>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="1"
|
||||
>
|
||||
<span
|
||||
class="ant-typography ant-typography-danger"
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
107
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
John Brown
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
10
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
33
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="2"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Jim Green
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
100
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
0
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="3"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Joe Black
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
10
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
10
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="4"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Jim Red
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
75
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
45
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot
|
||||
class="ant-table-summary"
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Total
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
<span
|
||||
class="ant-typography ant-typography-danger"
|
||||
>
|
||||
195
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
<span
|
||||
class="ant-typography"
|
||||
>
|
||||
88
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Balance
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
colspan="2"
|
||||
>
|
||||
<span
|
||||
class="ant-typography ant-typography-danger"
|
||||
>
|
||||
107
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-table-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-nested-loading"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-container"
|
||||
>
|
||||
<div
|
||||
class="ant-table ant-table-bordered 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:scroll;overflow-y:hidden"
|
||||
>
|
||||
<table
|
||||
style="width:2000px;min-width:100%;table-layout:fixed"
|
||||
>
|
||||
<colgroup>
|
||||
<col
|
||||
style="width:100px;min-width:100px"
|
||||
/>
|
||||
</colgroup>
|
||||
<thead
|
||||
class="ant-table-thead"
|
||||
>
|
||||
<tr>
|
||||
<th
|
||||
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position:sticky;left:0"
|
||||
>
|
||||
Name
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Description
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="ant-table-tbody"
|
||||
>
|
||||
<tr
|
||||
aria-hidden="true"
|
||||
class="ant-table-measure-row"
|
||||
style="height:0"
|
||||
>
|
||||
<td
|
||||
style="padding:0;border:0;height:0"
|
||||
/>
|
||||
<td
|
||||
style="padding:0;border:0;height:0"
|
||||
/>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="0"
|
||||
>
|
||||
<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="1"
|
||||
>
|
||||
<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="2"
|
||||
>
|
||||
<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="3"
|
||||
>
|
||||
<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="4"
|
||||
>
|
||||
<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="5"
|
||||
>
|
||||
<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>
|
||||
</tbody>
|
||||
<tfoot
|
||||
class="ant-table-summary"
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position:sticky;left:0"
|
||||
>
|
||||
Summary
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
This is a summary content
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/table/demo/virtual-list.md correctly 1`] = `
|
||||
|
||||
@ -7,11 +7,11 @@ title:
|
||||
|
||||
## zh-CN
|
||||
|
||||
通过 `summary` 设置总结栏。
|
||||
通过 `summary` 设置总结栏。使用 `Table.Summary.Cell` 同步 Column 的固定状态。
|
||||
|
||||
## en-US
|
||||
|
||||
Set summary content by `summary` prop.
|
||||
Set summary content by `summary` prop. Sync column fixed status with `Table.Summary.Cell`.
|
||||
|
||||
```jsx
|
||||
import { Table, Typography } from 'antd';
|
||||
@ -60,42 +60,82 @@ const data = [
|
||||
},
|
||||
];
|
||||
|
||||
const fixedColumns = [
|
||||
{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
fixed: true,
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: 'Description',
|
||||
dataIndex: 'description',
|
||||
},
|
||||
];
|
||||
|
||||
const fixedData = [];
|
||||
for (let i = 0; i < 6; i += 1) {
|
||||
fixedData.push({
|
||||
key: i,
|
||||
name: i % 2 ? 'Light' : 'Bamboo',
|
||||
description: 'Everything that has a beginning, has an end.',
|
||||
});
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
pagination={false}
|
||||
bordered
|
||||
summary={pageData => {
|
||||
let totalBorrow = 0;
|
||||
let totalRepayment = 0;
|
||||
<>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
pagination={false}
|
||||
bordered
|
||||
summary={pageData => {
|
||||
let totalBorrow = 0;
|
||||
let totalRepayment = 0;
|
||||
|
||||
pageData.forEach(({ borrow, repayment }) => {
|
||||
totalBorrow += borrow;
|
||||
totalRepayment += repayment;
|
||||
});
|
||||
pageData.forEach(({ borrow, repayment }) => {
|
||||
totalBorrow += borrow;
|
||||
totalRepayment += repayment;
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<tr>
|
||||
<th>Total</th>
|
||||
<td>
|
||||
<Text type="danger">{totalBorrow}</Text>
|
||||
</td>
|
||||
<td>
|
||||
<Text>{totalRepayment}</Text>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Balance</th>
|
||||
<td colSpan={2}>
|
||||
<Text type="danger">{totalBorrow - totalRepayment}</Text>
|
||||
</td>
|
||||
</tr>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
/>,
|
||||
return (
|
||||
<>
|
||||
<Table.Summary.Row>
|
||||
<Table.Summary.Cell>Total</Table.Summary.Cell>
|
||||
<Table.Summary.Cell>
|
||||
<Text type="danger">{totalBorrow}</Text>
|
||||
</Table.Summary.Cell>
|
||||
<Table.Summary.Cell>
|
||||
<Text>{totalRepayment}</Text>
|
||||
</Table.Summary.Cell>
|
||||
</Table.Summary.Row>
|
||||
<Table.Summary.Row>
|
||||
<Table.Summary.Cell>Balance</Table.Summary.Cell>
|
||||
<Table.Summary.Cell colSpan={2}>
|
||||
<Text type="danger">{totalBorrow - totalRepayment}</Text>
|
||||
</Table.Summary.Cell>
|
||||
</Table.Summary.Row>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
|
||||
<br />
|
||||
|
||||
<Table
|
||||
columns={fixedColumns}
|
||||
dataSource={fixedData}
|
||||
pagination={false}
|
||||
scroll={{ x: 2000 }}
|
||||
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>
|
||||
)}
|
||||
/>
|
||||
</>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
||||
@ -128,7 +128,7 @@
|
||||
"rc-slider": "~9.2.3",
|
||||
"rc-steps": "~3.5.0",
|
||||
"rc-switch": "~1.9.0",
|
||||
"rc-table": "~7.4.2",
|
||||
"rc-table": "~7.5.0",
|
||||
"rc-tabs": "~10.1.1",
|
||||
"rc-tooltip": "~4.0.2",
|
||||
"rc-tree": "~3.1.0",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user