mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-03 04:30:06 +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>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`test renders ./components/table/demo/paging.md correctly 1`] = `
|
exports[`test renders ./components/table/demo/nested-table.md correctly 1`] = `
|
||||||
<div
|
<div
|
||||||
class=" clearfix">
|
class="components-table-demo-nested clearfix">
|
||||||
<div
|
<div
|
||||||
class="ant-spin-nested-loading">
|
class="ant-spin-nested-loading">
|
||||||
<div
|
<div
|
||||||
@ -6574,6 +6574,12 @@ exports[`test renders ./components/table/demo/paging.md correctly 1`] = `
|
|||||||
<table
|
<table
|
||||||
class="">
|
class="">
|
||||||
<colgroup>
|
<colgroup>
|
||||||
|
<col
|
||||||
|
class="ant-table-expand-icon-col" />
|
||||||
|
<col />
|
||||||
|
<col />
|
||||||
|
<col />
|
||||||
|
<col />
|
||||||
<col />
|
<col />
|
||||||
<col />
|
<col />
|
||||||
<col />
|
<col />
|
||||||
@ -6581,6 +6587,10 @@ exports[`test renders ./components/table/demo/paging.md correctly 1`] = `
|
|||||||
<thead
|
<thead
|
||||||
class="ant-table-thead">
|
class="ant-table-thead">
|
||||||
<tr>
|
<tr>
|
||||||
|
<th
|
||||||
|
class="ant-table-expand-icon-th"
|
||||||
|
rowspan="1"
|
||||||
|
title="" />
|
||||||
<th
|
<th
|
||||||
class="">
|
class="">
|
||||||
<span>
|
<span>
|
||||||
@ -6590,13 +6600,37 @@ exports[`test renders ./components/table/demo/paging.md correctly 1`] = `
|
|||||||
<th
|
<th
|
||||||
class="">
|
class="">
|
||||||
<span>
|
<span>
|
||||||
Age
|
Platform
|
||||||
</span>
|
</span>
|
||||||
</th>
|
</th>
|
||||||
<th
|
<th
|
||||||
class="">
|
class="">
|
||||||
<span>
|
<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>
|
</span>
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
@ -6606,212 +6640,119 @@ exports[`test renders ./components/table/demo/paging.md correctly 1`] = `
|
|||||||
<tr
|
<tr
|
||||||
class="ant-table-row ant-table-row-level-0">
|
class="ant-table-row ant-table-row-level-0">
|
||||||
<td
|
<td
|
||||||
class="">
|
class="ant-table-row-expand-icon-cell">
|
||||||
<span
|
<span
|
||||||
class="ant-table-row-indent indent-level-0"
|
class="ant-table-row-expand-icon ant-table-row-collapsed" />
|
||||||
style="padding-left:0px;" />
|
</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
|
<a
|
||||||
href="#">
|
href="#">
|
||||||
Edward King 0
|
Publish
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
<td
|
|
||||||
class="">
|
|
||||||
32
|
|
||||||
</td>
|
|
||||||
<td
|
|
||||||
class="">
|
|
||||||
London, Park Lane no. 0
|
|
||||||
</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
<tr
|
<tr
|
||||||
class="ant-table-row ant-table-row-level-0">
|
class="ant-table-row ant-table-row-level-0">
|
||||||
<td
|
<td
|
||||||
class="">
|
class="ant-table-row-expand-icon-cell">
|
||||||
<span
|
<span
|
||||||
class="ant-table-row-indent indent-level-0"
|
class="ant-table-row-expand-icon ant-table-row-collapsed" />
|
||||||
style="padding-left:0px;" />
|
</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
|
<a
|
||||||
href="#">
|
href="#">
|
||||||
Edward King 1
|
Publish
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
<td
|
|
||||||
class="">
|
|
||||||
32
|
|
||||||
</td>
|
|
||||||
<td
|
|
||||||
class="">
|
|
||||||
London, Park Lane no. 1
|
|
||||||
</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
<tr
|
<tr
|
||||||
class="ant-table-row ant-table-row-level-0">
|
class="ant-table-row ant-table-row-level-0">
|
||||||
<td
|
<td
|
||||||
class="">
|
class="ant-table-row-expand-icon-cell">
|
||||||
<span
|
<span
|
||||||
class="ant-table-row-indent indent-level-0"
|
class="ant-table-row-expand-icon ant-table-row-collapsed" />
|
||||||
style="padding-left:0px;" />
|
</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
|
<a
|
||||||
href="#">
|
href="#">
|
||||||
Edward King 2
|
Publish
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</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>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
@ -6836,68 +6777,10 @@ exports[`test renders ./components/table/demo/paging.md correctly 1`] = `
|
|||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li
|
<li
|
||||||
class="ant-pagination-item ant-pagination-item-2"
|
class="ant-pagination-disabled ant-pagination-next"
|
||||||
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"
|
|
||||||
title="下一页">
|
title="下一页">
|
||||||
<a />
|
<a />
|
||||||
</li>
|
</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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
---
|
---
|
||||||
order: 24
|
order: 25
|
||||||
title:
|
title:
|
||||||
en-US: Dynamic Settings
|
en-US: Dynamic Settings
|
||||||
zh-CN: 动态控制表格属性
|
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