mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 13:09:40 +08:00
Code Issues Actions 50 Packages Projects Releases Wiki Activity

🎬 improve table demo

Browse Source
This commit is contained in:
afc163 2020-05-03 19:46:52 +08:00
parent 74645b7baf
commit 39456263b5
4 changed files with 178 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -296,32 +296,39 @@ exports[`renders ./components/table/demo/basic.md correctly 1`] = `
<td
class="ant-table-cell"
>
<span>
<span
class="ant-tag ant-tag-green"
>
NICE
</span>
<span
class="ant-tag ant-tag-geekblue"
>
DEVELOPER
</span>
<span
class="ant-tag ant-tag-green"
>
NICE
</span>
<span
class="ant-tag ant-tag-geekblue"
>
DEVELOPER
</span>
</td>
<td
class="ant-table-cell"
>
<span>
<a
<div
class="ant-space ant-space-horizontal ant-space-align-center"
>
<div
class="ant-space-item"
style="margin-right:16px"
>
Invite John Brown
</a>
<a>
Delete
</a>
</span>
<a>
Invite John Brown
</a>
</div>
<div
class="ant-space-item"
>
<a>
Delete
</a>
</div>
</div>
</td>
</tr>
<tr
@ -348,27 +355,34 @@ exports[`renders ./components/table/demo/basic.md correctly 1`] = `
<td
class="ant-table-cell"
>
<span>
<span
class="ant-tag ant-tag-volcano"
>
LOSER
</span>
<span
class="ant-tag ant-tag-volcano"
>
LOSER
</span>
</td>
<td
class="ant-table-cell"
>
<span>
<a
<div
class="ant-space ant-space-horizontal ant-space-align-center"
>
<div
class="ant-space-item"
style="margin-right:16px"
>
Invite Jim Green
</a>
<a>
Delete
</a>
</span>
<a>
Invite Jim Green
</a>
</div>
<div
class="ant-space-item"
>
<a>
Delete
</a>
</div>
</div>
</td>
</tr>
<tr
@ -395,32 +409,39 @@ exports[`renders ./components/table/demo/basic.md correctly 1`] = `
<td
class="ant-table-cell"
>
<span>
<span
class="ant-tag ant-tag-green"
>
COOL
</span>
<span
class="ant-tag ant-tag-geekblue"
>
TEACHER
</span>
<span
class="ant-tag ant-tag-green"
>
COOL
</span>
<span
class="ant-tag ant-tag-geekblue"
>
TEACHER
</span>
</td>
<td
class="ant-table-cell"
>
<span>
<a
<div
class="ant-space ant-space-horizontal ant-space-align-center"
>
<div
class="ant-space-item"
style="margin-right:16px"
>
Invite Joe Black
</a>
<a>
Delete
</a>
</span>
<a>
Invite Joe Black
</a>
</div>
<div
class="ant-space-item"
>
<a>
Delete
</a>
</div>
</div>
</td>
</tr>
</tbody>
@ -548,6 +569,7 @@ exports[`renders ./components/table/demo/bordered.md correctly 1`] = `
</th>
<th
class="ant-table-cell column-money"
style="text-align:right"
>
Cash Assets
</th>
@ -574,6 +596,7 @@ exports[`renders ./components/table/demo/bordered.md correctly 1`] = `
</td>
<td
class="ant-table-cell column-money"
style="text-align:right"
>
￥300,000.00
</td>
@ -596,6 +619,7 @@ exports[`renders ./components/table/demo/bordered.md correctly 1`] = `
</td>
<td
class="ant-table-cell column-money"
style="text-align:right"
>
￥1,256,000.00
</td>
@ -618,6 +642,7 @@ exports[`renders ./components/table/demo/bordered.md correctly 1`] = `
</td>
<td
class="ant-table-cell column-money"
style="text-align:right"
>
￥120,000.00
</td>
@ -2688,7 +2713,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
<a
class="ant-dropdown-link"
>
More actions
More actions
<span
aria-label="down"
class="anticon anticon-down"
@ -2772,7 +2797,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
<a
class="ant-dropdown-link"
>
More actions
More actions
<span
aria-label="down"
class="anticon anticon-down"
@ -2856,7 +2881,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
<a
class="ant-dropdown-link"
>
More actions
More actions
<span
aria-label="down"
class="anticon anticon-down"
@ -2940,7 +2965,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
<a
class="ant-dropdown-link"
>
More actions
More actions
<span
aria-label="down"
class="anticon anticon-down"
@ -3024,7 +3049,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
<a
class="ant-dropdown-link"
>
More actions
More actions
<span
aria-label="down"
class="anticon anticon-down"
@ -3108,7 +3133,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
<a
class="ant-dropdown-link"
>
More actions
More actions
<span
aria-label="down"
class="anticon anticon-down"
@ -3192,7 +3217,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
<a
class="ant-dropdown-link"
>
More actions
More actions
<span
aria-label="down"
class="anticon anticon-down"
@ -3276,7 +3301,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
<a
class="ant-dropdown-link"
>
More actions
More actions
<span
aria-label="down"
class="anticon anticon-down"
@ -3360,7 +3385,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
<a
class="ant-dropdown-link"
>
More actions
More actions
<span
aria-label="down"
class="anticon anticon-down"
@ -3444,7 +3469,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
<a
class="ant-dropdown-link"
>
More actions
More actions
<span
aria-label="down"
class="anticon anticon-down"
@ -9343,32 +9368,39 @@ exports[`renders ./components/table/demo/jsx.md correctly 1`] = `
<td
class="ant-table-cell"
>
<span>
<span
class="ant-tag ant-tag-blue"
>
nice
</span>
<span
class="ant-tag ant-tag-blue"
>
developer
</span>
<span
class="ant-tag ant-tag-blue"
>
nice
</span>
<span
class="ant-tag ant-tag-blue"
>
developer
</span>
</td>
<td
class="ant-table-cell"
>
<span>
<a
<div
class="ant-space ant-space-horizontal ant-space-align-center"
>
<div
class="ant-space-item"
style="margin-right:16px"
>
Invite Brown
</a>
<a>
Delete
</a>
</span>
<a>
Invite Brown
</a>
</div>
<div
class="ant-space-item"
>
<a>
Delete
</a>
</div>
</div>
</td>
</tr>
<tr
@ -9398,27 +9430,34 @@ exports[`renders ./components/table/demo/jsx.md correctly 1`] = `
<td
class="ant-table-cell"
>
<span>
<span
class="ant-tag ant-tag-blue"
>
loser
</span>
<span
class="ant-tag ant-tag-blue"
>
loser
</span>
</td>
<td
class="ant-table-cell"
>
<span>
<a
<div
class="ant-space ant-space-horizontal ant-space-align-center"
>
<div
class="ant-space-item"
style="margin-right:16px"
>
Invite Green
</a>
<a>
Delete
</a>
</span>
<a>
Invite Green
</a>
</div>
<div
class="ant-space-item"
>
<a>
Delete
</a>
</div>
</div>
</td>
</tr>
<tr
@ -9448,32 +9487,39 @@ exports[`renders ./components/table/demo/jsx.md correctly 1`] = `
<td
class="ant-table-cell"
>
<span>
<span
class="ant-tag ant-tag-blue"
>
cool
</span>
<span
class="ant-tag ant-tag-blue"
>
teacher
</span>
<span
class="ant-tag ant-tag-blue"
>
cool
</span>
<span
class="ant-tag ant-tag-blue"
>
teacher
</span>
</td>
<td
class="ant-table-cell"
>
<span>
<a
<div
class="ant-space ant-space-horizontal ant-space-align-center"
>
<div
class="ant-space-item"
style="margin-right:16px"
>
Invite Black
</a>
<a>
Delete
</a>
</span>
<a>
Invite Black
</a>
</div>
<div
class="ant-space-item"
>
<a>
Delete
</a>
</div>
</div>
</td>
</tr>
</tbody>
@ -13470,7 +13516,7 @@ exports[`renders ./components/table/demo/row-selection-custom-debug.md correctly
class="ant-table-cell ant-table-selection-column"
rowspan="2"
>
false:
false:
<label
class="ant-checkbox-wrapper"
>
@ -13511,7 +13557,7 @@ exports[`renders ./components/table/demo/row-selection-custom-debug.md correctly
class="ant-table-cell ant-table-selection-column"
rowspan="2"
>
false:
false:
<label
class="ant-checkbox-wrapper"
>
@ -13552,7 +13598,7 @@ exports[`renders ./components/table/demo/row-selection-custom-debug.md correctly
class="ant-table-cell ant-table-selection-column"
rowspan="2"
>
false:
false:
<label
class="ant-checkbox-wrapper"
>
@ -13593,7 +13639,7 @@ exports[`renders ./components/table/demo/row-selection-custom-debug.md correctly
class="ant-table-cell ant-table-selection-column"
rowspan="2"
>
false:
false:
<label
class="ant-checkbox-wrapper"
>
@ -13634,7 +13680,7 @@ exports[`renders ./components/table/demo/row-selection-custom-debug.md correctly
class="ant-table-cell ant-table-selection-column"
rowspan="2"
>
false:
false:
<label
class="ant-checkbox-wrapper"
>

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

@ -14,7 +14,7 @@ title:
Simple table with actions.
```jsx
import { Table, Tag } from 'antd';
import { Table, Tag, Space } from 'antd';
const columns = [
{
@ -38,7 +38,7 @@ const columns = [
key: 'tags',
dataIndex: 'tags',
render: tags => (
<span>
<>
{tags.map(tag => {
let color = tag.length > 5 ? 'geekblue' : 'green';
if (tag === 'loser') {
@ -50,17 +50,17 @@ const columns = [
</Tag>
);
})}
</span>
</>
),
},
{
title: 'Action',
key: 'action',
render: (text, record) => (
<span>
<a style={{ marginRight: 16 }}>Invite {record.name}</a>
<Space size="middle">
<a>Invite {record.name}</a>
<a>Delete</a>
</span>
</Space>
),
},
];

8
components/table/demo/bordered.md
View File

@ -26,6 +26,7 @@ const columns = [
title: 'Cash Assets',
className: 'column-money',
dataIndex: 'money',
align: 'right',
},
{
title: 'Address',
@ -65,10 +66,3 @@ ReactDOM.render(
mountNode,
);
```
```css
th.column-money,
td.column-money {
text-align: right !important;
}
```

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

@ -18,7 +18,7 @@ Using JSX style API (introduced in 2.5.0)
> Since this is just a syntax sugar for the prop `columns`, you can't compose `Column` and `ColumnGroup` with other Components.
```jsx
import { Table, Tag } from 'antd';
import { Table, Tag, Space } from 'antd';
const { Column, ColumnGroup } = Table;
@ -62,23 +62,23 @@ ReactDOM.render(
dataIndex="tags"
key="tags"
render={tags => (
<span>
<>
{tags.map(tag => (
<Tag color="blue" key={tag}>
{tag}
</Tag>
))}
</span>
</>
)}
/>
<Column
title="Action"
key="action"
render={(text, record) => (
<span>
<a style={{ marginRight: 16 }}>Invite {record.lastName}</a>
<Space size="middle">
<a>Invite {record.lastName}</a>
<a>Delete</a>
</span>
</Space>
)}
/>
</Table>,