mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-01 03:29:39 +08:00
docs: add nested Table demo (#4887)
* Remove Table pagination demo * Add nested table
This commit is contained in:
Wei Zhu
Benjy Cui
parent
7471780ffe
commit
2258f41f6b
@ -6555,9 +6555,9 @@ exports[`test renders ./components/table/demo/jsx.md correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`test renders ./components/table/demo/paging.md correctly 1`] = `
|
||||
exports[`test renders ./components/table/demo/nested-table.md correctly 1`] = `
|
||||
<div
|
||||
class=" clearfix">
|
||||
class="components-table-demo-nested clearfix">
|
||||
<div
|
||||
class="ant-spin-nested-loading">
|
||||
<div
|
||||
@ -6574,6 +6574,12 @@ exports[`test renders ./components/table/demo/paging.md correctly 1`] = `
|
||||
<table
|
||||
class="">
|
||||
<colgroup>
|
||||
<col
|
||||
class="ant-table-expand-icon-col" />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
@ -6581,6 +6587,10 @@ exports[`test renders ./components/table/demo/paging.md correctly 1`] = `
|
||||
<thead
|
||||
class="ant-table-thead">
|
||||
<tr>
|
||||
<th
|
||||
class="ant-table-expand-icon-th"
|
||||
rowspan="1"
|
||||
title="" />
|
||||
<th
|
||||
class="">
|
||||
<span>
|
||||
@ -6590,13 +6600,37 @@ exports[`test renders ./components/table/demo/paging.md correctly 1`] = `
|
||||
<th
|
||||
class="">
|
||||
<span>
|
||||
Age
|
||||
Platform
|
||||
</span>
|
||||
</th>
|
||||
<th
|
||||
class="">
|
||||
<span>
|
||||
Address
|
||||
Version
|
||||
</span>
|
||||
</th>
|
||||
<th
|
||||
class="">
|
||||
<span>
|
||||
Upgraded
|
||||
</span>
|
||||
</th>
|
||||
<th
|
||||
class="">
|
||||
<span>
|
||||
Creator
|
||||
</span>
|
||||
</th>
|
||||
<th
|
||||
class="">
|
||||
<span>
|
||||
Date
|
||||
</span>
|
||||
</th>
|
||||
<th
|
||||
class="">
|
||||
<span>
|
||||
Action
|
||||
</span>
|
||||
</th>
|
||||
</tr>
|
||||
@ -6606,212 +6640,119 @@ exports[`test renders ./components/table/demo/paging.md correctly 1`] = `
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0">
|
||||
<td
|
||||
class="">
|
||||
class="ant-table-row-expand-icon-cell">
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px;" />
|
||||
class="ant-table-row-expand-icon ant-table-row-collapsed" />
|
||||
</td>
|
||||
<td
|
||||
class="">
|
||||
Screem
|
||||
</td>
|
||||
<td
|
||||
class="">
|
||||
iOS
|
||||
</td>
|
||||
<td
|
||||
class="">
|
||||
10.3.4.5654
|
||||
</td>
|
||||
<td
|
||||
class="">
|
||||
500
|
||||
</td>
|
||||
<td
|
||||
class="">
|
||||
Jack
|
||||
</td>
|
||||
<td
|
||||
class="">
|
||||
2014-12-24 23:12:00
|
||||
</td>
|
||||
<td
|
||||
class="">
|
||||
<a
|
||||
href="#">
|
||||
Edward King 0
|
||||
Publish
|
||||
</a>
|
||||
</td>
|
||||
<td
|
||||
class="">
|
||||
32
|
||||
</td>
|
||||
<td
|
||||
class="">
|
||||
London, Park Lane no. 0
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0">
|
||||
<td
|
||||
class="">
|
||||
class="ant-table-row-expand-icon-cell">
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px;" />
|
||||
class="ant-table-row-expand-icon ant-table-row-collapsed" />
|
||||
</td>
|
||||
<td
|
||||
class="">
|
||||
Screem
|
||||
</td>
|
||||
<td
|
||||
class="">
|
||||
iOS
|
||||
</td>
|
||||
<td
|
||||
class="">
|
||||
10.3.4.5654
|
||||
</td>
|
||||
<td
|
||||
class="">
|
||||
500
|
||||
</td>
|
||||
<td
|
||||
class="">
|
||||
Jack
|
||||
</td>
|
||||
<td
|
||||
class="">
|
||||
2014-12-24 23:12:00
|
||||
</td>
|
||||
<td
|
||||
class="">
|
||||
<a
|
||||
href="#">
|
||||
Edward King 1
|
||||
Publish
|
||||
</a>
|
||||
</td>
|
||||
<td
|
||||
class="">
|
||||
32
|
||||
</td>
|
||||
<td
|
||||
class="">
|
||||
London, Park Lane no. 1
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0">
|
||||
<td
|
||||
class="">
|
||||
class="ant-table-row-expand-icon-cell">
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px;" />
|
||||
class="ant-table-row-expand-icon ant-table-row-collapsed" />
|
||||
</td>
|
||||
<td
|
||||
class="">
|
||||
Screem
|
||||
</td>
|
||||
<td
|
||||
class="">
|
||||
iOS
|
||||
</td>
|
||||
<td
|
||||
class="">
|
||||
10.3.4.5654
|
||||
</td>
|
||||
<td
|
||||
class="">
|
||||
500
|
||||
</td>
|
||||
<td
|
||||
class="">
|
||||
Jack
|
||||
</td>
|
||||
<td
|
||||
class="">
|
||||
2014-12-24 23:12:00
|
||||
</td>
|
||||
<td
|
||||
class="">
|
||||
<a
|
||||
href="#">
|
||||
Edward King 2
|
||||
Publish
|
||||
</a>
|
||||
</td>
|
||||
<td
|
||||
class="">
|
||||
32
|
||||
</td>
|
||||
<td
|
||||
class="">
|
||||
London, Park Lane no. 2
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0">
|
||||
<td
|
||||
class="">
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px;" />
|
||||
<a
|
||||
href="#">
|
||||
Edward King 3
|
||||
</a>
|
||||
</td>
|
||||
<td
|
||||
class="">
|
||||
32
|
||||
</td>
|
||||
<td
|
||||
class="">
|
||||
London, Park Lane no. 3
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0">
|
||||
<td
|
||||
class="">
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px;" />
|
||||
<a
|
||||
href="#">
|
||||
Edward King 4
|
||||
</a>
|
||||
</td>
|
||||
<td
|
||||
class="">
|
||||
32
|
||||
</td>
|
||||
<td
|
||||
class="">
|
||||
London, Park Lane no. 4
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0">
|
||||
<td
|
||||
class="">
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px;" />
|
||||
<a
|
||||
href="#">
|
||||
Edward King 5
|
||||
</a>
|
||||
</td>
|
||||
<td
|
||||
class="">
|
||||
32
|
||||
</td>
|
||||
<td
|
||||
class="">
|
||||
London, Park Lane no. 5
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0">
|
||||
<td
|
||||
class="">
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px;" />
|
||||
<a
|
||||
href="#">
|
||||
Edward King 6
|
||||
</a>
|
||||
</td>
|
||||
<td
|
||||
class="">
|
||||
32
|
||||
</td>
|
||||
<td
|
||||
class="">
|
||||
London, Park Lane no. 6
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0">
|
||||
<td
|
||||
class="">
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px;" />
|
||||
<a
|
||||
href="#">
|
||||
Edward King 7
|
||||
</a>
|
||||
</td>
|
||||
<td
|
||||
class="">
|
||||
32
|
||||
</td>
|
||||
<td
|
||||
class="">
|
||||
London, Park Lane no. 7
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0">
|
||||
<td
|
||||
class="">
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px;" />
|
||||
<a
|
||||
href="#">
|
||||
Edward King 8
|
||||
</a>
|
||||
</td>
|
||||
<td
|
||||
class="">
|
||||
32
|
||||
</td>
|
||||
<td
|
||||
class="">
|
||||
London, Park Lane no. 8
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0">
|
||||
<td
|
||||
class="">
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px;" />
|
||||
<a
|
||||
href="#">
|
||||
Edward King 9
|
||||
</a>
|
||||
</td>
|
||||
<td
|
||||
class="">
|
||||
32
|
||||
</td>
|
||||
<td
|
||||
class="">
|
||||
London, Park Lane no. 9
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -6836,68 +6777,10 @@ exports[`test renders ./components/table/demo/paging.md correctly 1`] = `
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class="ant-pagination-item ant-pagination-item-2"
|
||||
title="2">
|
||||
<a>
|
||||
2
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class="ant-pagination-item ant-pagination-item-3"
|
||||
title="3">
|
||||
<a>
|
||||
3
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class="ant-pagination-item ant-pagination-item-4"
|
||||
title="4">
|
||||
<a>
|
||||
4
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class="ant-pagination-item ant-pagination-item-5"
|
||||
title="5">
|
||||
<a>
|
||||
5
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class=" ant-pagination-next"
|
||||
class="ant-pagination-disabled ant-pagination-next"
|
||||
title="下一页">
|
||||
<a />
|
||||
</li>
|
||||
<div
|
||||
class="ant-pagination-options">
|
||||
<div
|
||||
class="ant-pagination-options-size-changer ant-select ant-select-enabled">
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
tabindex="0">
|
||||
<div
|
||||
class="ant-select-selection__rendered">
|
||||
<div
|
||||
class="ant-select-selection-selected-value"
|
||||
style="display:block;opacity:1;"
|
||||
title="10 条/页">
|
||||
10 条/页
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none;"
|
||||
unselectable="unselectable">
|
||||
<b />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 24
|
||||
order: 25
|
||||
title:
|
||||
en-US: Dynamic Settings
|
||||
zh-CN: 动态控制表格属性
|
||||
|
||||
138
components/table/demo/nested-table.md
Normal file
138
components/table/demo/nested-table.md
Normal file
@ -0,0 +1,138 @@
|
||||
---
|
||||
order: 24
|
||||
title:
|
||||
en-US: Nested tables
|
||||
zh-CN: 嵌套子表格
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
展示每行数据更详细的信息。
|
||||
|
||||
## en-US
|
||||
|
||||
Showing more detailed info of every row.
|
||||
|
||||
````jsx
|
||||
|
||||
import { Table, Badge, Menu, Dropdown, Icon } from 'antd';
|
||||
|
||||
const menu = (
|
||||
<Menu>
|
||||
<Menu.Item>
|
||||
Action 1
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
Action 2
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
|
||||
function NestedTable() {
|
||||
const expandedRowRender = () => {
|
||||
const columns = [
|
||||
{ title: 'Date', dataIndex: 'date', key: 'date' },
|
||||
{ title: 'Name', dataIndex: 'name', key: 'name' },
|
||||
{ title: 'Status', key: 'state', render: () => <span><Badge status="success" />Finished</span> },
|
||||
{ title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
|
||||
{
|
||||
title: 'Action',
|
||||
dataIndex: 'operation',
|
||||
key: 'operation',
|
||||
render: () => (
|
||||
<span className={'table-operation'}>
|
||||
<a href="#">Pause</a>
|
||||
<a href="#">Stop</a>
|
||||
<Dropdown overlay={menu}>
|
||||
<a href="#">
|
||||
More <Icon type="down" />
|
||||
</a>
|
||||
</Dropdown>
|
||||
</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const data = [];
|
||||
for (let i = 0; i < 3; ++i) {
|
||||
data.push({
|
||||
key: i,
|
||||
date: '2014-12-24 23:12:00',
|
||||
name: 'This is production name',
|
||||
upgradeNum: 'Upgraded: 56',
|
||||
});
|
||||
}
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
pagination={false}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{ title: 'Name', dataIndex: 'name', key: 'name' },
|
||||
{ title: 'Platform', dataIndex: 'platform', key: 'platform' },
|
||||
{ title: 'Version', dataIndex: 'version', key: 'version' },
|
||||
{ title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },
|
||||
{ title: 'Creator', dataIndex: 'creator', key: 'creator' },
|
||||
{ title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
|
||||
{ title: 'Action', key: 'operation', render: () => <a href="#">Publish</a> },
|
||||
];
|
||||
|
||||
const data = [];
|
||||
for (let i = 0; i < 3; ++i) {
|
||||
data.push({
|
||||
key: i,
|
||||
name: 'Screem',
|
||||
platform: 'iOS',
|
||||
version: '10.3.4.5654',
|
||||
upgradeNum: 500,
|
||||
creator: 'Jack',
|
||||
createdAt: '2014-12-24 23:12:00',
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<Table
|
||||
className="components-table-demo-nested"
|
||||
columns={columns}
|
||||
expandedRowRender={expandedRowRender}
|
||||
dataSource={data}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
ReactDOM.render(<NestedTable />, mountNode);
|
||||
````
|
||||
|
||||
````css
|
||||
.components-table-demo-nested .ant-table-expanded-row > td:last-child {
|
||||
padding: 0 48px 0 8px;
|
||||
}
|
||||
|
||||
.components-table-demo-nested .ant-table-expanded-row > td:last-child .ant-table-thead th {
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
}
|
||||
|
||||
.components-table-demo-nested .ant-table-expanded-row > td:last-child .ant-table-thead th:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.components-table-demo-nested .ant-table-expanded-row > td:last-child .ant-table-row td:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.components-table-demo-nested .ant-table-expanded-row .ant-table-row:last-child td {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.components-table-demo-nested .ant-table-expanded-row .ant-table-thead > tr > th {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.components-table-demo-nested .table-operation a:not(:last-child) {
|
||||
margin-right: 24px;
|
||||
}
|
||||
````
|
||||
@ -1,55 +0,0 @@
|
||||
---
|
||||
order: 6
|
||||
title:
|
||||
en-US: Pagination
|
||||
zh-CN: 分页
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
表格中的分页器可以通过一个配置对象来配置，当 `pagination={false}` 时，会隐藏分页器。
|
||||
|
||||
## en-US
|
||||
|
||||
The pagination in table could be configured with an object, and you can use `pagination={false}` to turn off pagination.
|
||||
|
||||
````jsx
|
||||
import { Table } from 'antd';
|
||||
|
||||
const columns = [{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
render: text => <a href="#">{text}</a>,
|
||||
}, {
|
||||
title: 'Age',
|
||||
dataIndex: 'age',
|
||||
}, {
|
||||
title: 'Address',
|
||||
dataIndex: 'address',
|
||||
}];
|
||||
|
||||
const data = [];
|
||||
for (let i = 0; i < 46; i++) {
|
||||
data.push({
|
||||
key: i,
|
||||
name: `Edward King ${i}`,
|
||||
age: 32,
|
||||
address: `London, Park Lane no. ${i}`,
|
||||
});
|
||||
}
|
||||
|
||||
const pagination = {
|
||||
total: data.length,
|
||||
showSizeChanger: true,
|
||||
onShowSizeChange: (current, pageSize) => {
|
||||
console.log('Current: ', current, '; PageSize: ', pageSize);
|
||||
},
|
||||
onChange: (current) => {
|
||||
console.log('Current: ', current);
|
||||
},
|
||||
};
|
||||
|
||||
ReactDOM.render(
|
||||
<Table columns={columns} dataSource={data} pagination={pagination} />
|
||||
, mountNode);
|
||||
````
|
||||
Loading…
Reference in New Issue
Block a user