GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

good looking table demo

pull/11767/head
afc163 6 years ago
parent
958e8ebc4b
commit
838be31543
3 changed files with 144 additions and 86 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 189
      components/table/__tests__/__snapshots__/demo.test.js.snap
  2. 20
      components/table/demo/basic.md
  3. 21
      components/table/demo/jsx.md

189
components/table/__tests__/__snapshots__/demo.test.js.snap
View File

@ -126,6 +126,7 @@ exports[`renders ./components/table/demo/basic.md correctly 1`] = `
<col />
<col />
<col />
<col />
</colgroup>
<thead
class="ant-table-thead"
@ -152,6 +153,13 @@ exports[`renders ./components/table/demo/basic.md correctly 1`] = `
Address
</span>
</th>
<th
class=""
>
<span>
Tags
</span>
</th>
<th
class=""
>
@ -195,30 +203,36 @@ exports[`renders ./components/table/demo/basic.md correctly 1`] = `
class=""
>
<span>
<a
href="javascript:;"
<div
class="ant-tag ant-tag-blue"
data-show="true"
>
Action 一 John Brown
</a>
nice
</div>
<div
class="ant-divider ant-divider-vertical"
/>
class="ant-tag ant-tag-blue"
data-show="true"
>
developer
</div>
</span>
</td>
<td
class=""
>
<span>
<a
href="javascript:;"
>
Delete
Invite John Brown
</a>
<div
class="ant-divider ant-divider-vertical"
/>
<a
class="ant-dropdown-link"
href="javascript:;"
>
More actions
<i
class="anticon anticon-down"
/>
Delete
</a>
</span>
</td>
@ -254,30 +268,30 @@ exports[`renders ./components/table/demo/basic.md correctly 1`] = `
class=""
>
<span>
<a
href="javascript:;"
>
Action 一 Jim Green
</a>
<div
class="ant-divider ant-divider-vertical"
/>
class="ant-tag ant-tag-blue"
data-show="true"
>
loser
</div>
</span>
</td>
<td
class=""
>
<span>
<a
href="javascript:;"
>
Delete
Invite Jim Green
</a>
<div
class="ant-divider ant-divider-vertical"
/>
<a
class="ant-dropdown-link"
href="javascript:;"
>
More actions
<i
class="anticon anticon-down"
/>
Delete
</a>
</span>
</td>
@ -313,30 +327,36 @@ exports[`renders ./components/table/demo/basic.md correctly 1`] = `
class=""
>
<span>
<a
href="javascript:;"
<div
class="ant-tag ant-tag-blue"
data-show="true"
>
Action 一 Joe Black
</a>
cool
</div>
<div
class="ant-divider ant-divider-vertical"
/>
class="ant-tag ant-tag-blue"
data-show="true"
>
teacher
</div>
</span>
</td>
<td
class=""
>
<span>
<a
href="javascript:;"
>
Delete
Invite Joe Black
</a>
<div
class="ant-divider ant-divider-vertical"
/>
<a
class="ant-dropdown-link"
href="javascript:;"
>
More actions
<i
class="anticon anticon-down"
/>
Delete
</a>
</span>
</td>
@ -8418,6 +8438,7 @@ exports[`renders ./components/table/demo/jsx.md correctly 1`] = `
<col />
<col />
<col />
<col />
</colgroup>
<thead
class="ant-table-thead"
@ -8447,6 +8468,14 @@ exports[`renders ./components/table/demo/jsx.md correctly 1`] = `
Address
</span>
</th>
<th
class=""
rowspan="2"
>
<span>
Tags
</span>
</th>
<th
class=""
rowspan="2"
@ -8508,30 +8537,36 @@ exports[`renders ./components/table/demo/jsx.md correctly 1`] = `
class=""
>
<span>
<a
href="javascript:;"
<div
class="ant-tag ant-tag-blue"
data-show="true"
>
Action 一
</a>
nice
</div>
<div
class="ant-divider ant-divider-vertical"
/>
class="ant-tag ant-tag-blue"
data-show="true"
>
developer
</div>
</span>
</td>
<td
class=""
>
<span>
<a
href="javascript:;"
>
Delete
Invite Brown
</a>
<div
class="ant-divider ant-divider-vertical"
/>
<a
class="ant-dropdown-link"
href="javascript:;"
>
More actions
<i
class="anticon anticon-down"
/>
Delete
</a>
</span>
</td>
@ -8568,30 +8603,30 @@ exports[`renders ./components/table/demo/jsx.md correctly 1`] = `
class=""
>
<span>
<a
href="javascript:;"
>
Action 一
</a>
<div
class="ant-divider ant-divider-vertical"
/>
class="ant-tag ant-tag-blue"
data-show="true"
>
loser
</div>
</span>
</td>
<td
class=""
>
<span>
<a
href="javascript:;"
>
Delete
Invite Green
</a>
<div
class="ant-divider ant-divider-vertical"
/>
<a
class="ant-dropdown-link"
href="javascript:;"
>
More actions
<i
class="anticon anticon-down"
/>
Delete
</a>
</span>
</td>
@ -8628,30 +8663,36 @@ exports[`renders ./components/table/demo/jsx.md correctly 1`] = `
class=""
>
<span>
<a
href="javascript:;"
<div
class="ant-tag ant-tag-blue"
data-show="true"
>
Action 一
</a>
cool
</div>
<div
class="ant-divider ant-divider-vertical"
/>
class="ant-tag ant-tag-blue"
data-show="true"
>
teacher
</div>
</span>
</td>
<td
class=""
>
<span>
<a
href="javascript:;"
>
Delete
Invite Black
</a>
<div
class="ant-divider ant-divider-vertical"
/>
<a
class="ant-dropdown-link"
href="javascript:;"
>
More actions
<i
class="anticon anticon-down"
/>
Delete
</a>
</span>
</td>

20
components/table/demo/basic.md
View File

@ -14,7 +14,7 @@ title:
Simple table with actions.
````jsx
import { Table, Icon, Divider } from 'antd';
import { Table, Divider, Tag } from 'antd';
const columns = [{
title: 'Name',
@ -29,18 +29,23 @@ const columns = [{
title: 'Address',
dataIndex: 'address',
key: 'address',
}, {
title: 'Tags',
key: 'tags',
dataIndex: 'tags',
render: tags => (
<span>
{tags.map(tag => <Tag color="blue" key={tag}>{tag}</Tag>)}
</span>
),
}, {
title: 'Action',
key: 'action',
render: (text, record) => (
<span>
<a href="javascript:;">Action 一 {record.name}</a>
<a href="javascript:;">Invite {record.name}</a>
<Divider type="vertical" />
<a href="javascript:;">Delete</a>
<Divider type="vertical" />
<a href="javascript:;" className="ant-dropdown-link">
More actions <Icon type="down" />
</a>
</span>
),
}];
@ -50,16 +55,19 @@ const data = [{
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
tags: ['nice', 'developer'],
}, {
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
tags: ['loser'],
}, {
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
tags: ['cool', 'teacher'],
}];
ReactDOM.render(<Table columns={columns} dataSource={data} />, mountNode);

21
components/table/demo/jsx.md
View File

@ -18,7 +18,7 @@ Using JSX style API (introduced in 2.5.0)