From 2258f41f6bdcffcf43f7a993715826a0f92998d5 Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Thu, 16 Feb 2017 10:04:55 +0800 Subject: [PATCH] docs: add nested Table demo (#4887) * Remove Table pagination demo * Add nested table --- .../__tests__/__snapshots__/demo.test.js.snap | 375 ++++++------------ components/table/demo/dynamic-settings.md | 2 +- components/table/demo/nested-table.md | 138 +++++++ components/table/demo/paging.md | 55 --- 4 files changed, 268 insertions(+), 302 deletions(-) create mode 100644 components/table/demo/nested-table.md delete mode 100644 components/table/demo/paging.md diff --git a/components/table/__tests__/__snapshots__/demo.test.js.snap b/components/table/__tests__/__snapshots__/demo.test.js.snap index 4df9bb4c1f..ada84dffac 100644 --- a/components/table/__tests__/__snapshots__/demo.test.js.snap +++ b/components/table/__tests__/__snapshots__/demo.test.js.snap @@ -6555,9 +6555,9 @@ exports[`test renders ./components/table/demo/jsx.md correctly 1`] = ` `; -exports[`test renders ./components/table/demo/paging.md correctly 1`] = ` +exports[`test renders ./components/table/demo/nested-table.md correctly 1`] = `
+ class="components-table-demo-nested clearfix">
+ + + + + @@ -6581,6 +6587,10 @@ exports[`test renders ./components/table/demo/paging.md correctly 1`] = ` + @@ -6590,13 +6600,37 @@ exports[`test renders ./components/table/demo/paging.md correctly 1`] = ` - Age + Platform - Address + Version + + + + + Upgraded + + + + + Creator + + + + + Date + + + + + Action @@ -6606,212 +6640,119 @@ exports[`test renders ./components/table/demo/paging.md correctly 1`] = ` + class="ant-table-row-expand-icon-cell"> + class="ant-table-row-expand-icon ant-table-row-collapsed" /> + + + Screem + + + iOS + + + 10.3.4.5654 + + + 500 + + + Jack + + + 2014-12-24 23:12:00 + + - Edward King 0 + Publish - - 32 - - - London, Park Lane no. 0 - + class="ant-table-row-expand-icon-cell"> + class="ant-table-row-expand-icon ant-table-row-collapsed" /> + + + Screem + + + iOS + + + 10.3.4.5654 + + + 500 + + + Jack + + + 2014-12-24 23:12:00 + + - Edward King 1 + Publish - - 32 - - - London, Park Lane no. 1 - + class="ant-table-row-expand-icon-cell"> + class="ant-table-row-expand-icon ant-table-row-collapsed" /> + + + Screem + + + iOS + + + 10.3.4.5654 + + + 500 + + + Jack + + + 2014-12-24 23:12:00 + + - Edward King 2 + Publish - - 32 - - - London, Park Lane no. 2 - - - - - - - Edward King 3 - - - - 32 - - - London, Park Lane no. 3 - - - - - - - Edward King 4 - - - - 32 - - - London, Park Lane no. 4 - - - - - - - Edward King 5 - - - - 32 - - - London, Park Lane no. 5 - - - - - - - Edward King 6 - - - - 32 - - - London, Park Lane no. 6 - - - - - - - Edward King 7 - - - - 32 - - - London, Park Lane no. 7 - - - - - - - Edward King 8 - - - - 32 - - - London, Park Lane no. 8 - - - - - - - Edward King 9 - - - - 32 - - - London, Park Lane no. 9 - @@ -6836,68 +6777,10 @@ exports[`test renders ./components/table/demo/paging.md correctly 1`] = `
  • - - 2 - -
    • -
  • - - 3 - -
    • -
  • - - 4 - -
    • -
  • - - 5 - -
    • -
    • -
    -
    - -
    -
    diff --git a/components/table/demo/dynamic-settings.md b/components/table/demo/dynamic-settings.md index e2e2ac2d03..e479b6d853 100644 --- a/components/table/demo/dynamic-settings.md +++ b/components/table/demo/dynamic-settings.md @@ -1,5 +1,5 @@ --- -order: 24 +order: 25 title: en-US: Dynamic Settings zh-CN: 动态控制表格属性 diff --git a/components/table/demo/nested-table.md b/components/table/demo/nested-table.md new file mode 100644 index 0000000000..db39b73fc0 --- /dev/null +++ b/components/table/demo/nested-table.md @@ -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 = ( + + + Action 1 + + + Action 2 + + +); + +function NestedTable() { + const expandedRowRender = () => { + const columns = [ + { title: 'Date', dataIndex: 'date', key: 'date' }, + { title: 'Name', dataIndex: 'name', key: 'name' }, + { title: 'Status', key: 'state', render: () => Finished }, + { title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' }, + { + title: 'Action', + dataIndex: 'operation', + key: 'operation', + render: () => ( + + Pause + Stop + + + More + + + + ), + }, + ]; + + 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 ( + + ); + }; + + 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: () => Publish }, + ]; + + 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 ( +
    + ); +} + +ReactDOM.render(, 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; +} +```` diff --git a/components/table/demo/paging.md b/components/table/demo/paging.md deleted file mode 100644 index 1d25d68df4..0000000000 --- a/components/table/demo/paging.md +++ /dev/null @@ -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 => {text}, -}, { - 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( -
    -, mountNode); -````