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

docs: update table demo action (#26010)

pull/26014/head
xrkffgg 4 years ago
committed by GitHub
parent
a33dc19ec8
commit
b0536c2a43
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 430 additions and 313 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. 705
      components/table/__tests__/__snapshots__/demo.test.js.snap
  2. 8
      components/table/demo/dynamic-settings.md
  3. 6
      components/table/demo/nest-table-border-debug.md
  4. 6
      components/table/demo/nested-table.md
  5. 18
      components/table/demo/pagination.md

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

@ -2919,38 +2919,47 @@ Array [
<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"
>
Delete
</a>
<a
class="ant-dropdown-link"
<a>
Delete
</a>
</div>
<div
class="ant-space-item"
>
More actions
<span
aria-label="down"
class="anticon anticon-down"
role="img"
<a
class="ant-dropdown-link"
>
<svg
aria-hidden="true"
class=""
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
More actions
<span
aria-label="down"
class="anticon anticon-down"
role="img"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</a>
</span>
<svg
aria-hidden="true"
class=""
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</a>
</div>
</div>
</td>
</tr>
<tr
@ -3003,38 +3012,47 @@ Array [
<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"
>
Delete
</a>
<a
class="ant-dropdown-link"
<a>
Delete
</a>
</div>
<div
class="ant-space-item"
>
More actions
<span
aria-label="down"
class="anticon anticon-down"
role="img"
<a
class="ant-dropdown-link"
>
<svg
aria-hidden="true"
class=""
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
More actions
<span
aria-label="down"
class="anticon anticon-down"
role="img"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</a>
</span>
<svg
aria-hidden="true"
class=""
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</a>
</div>
</div>
</td>
</tr>
<tr
@ -3087,38 +3105,47 @@ Array [
<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"
>
Delete
</a>
<a
class="ant-dropdown-link"
<a>
Delete
</a>
</div>
<div
class="ant-space-item"
>
More actions
<span
aria-label="down"
class="anticon anticon-down"
role="img"
<a
class="ant-dropdown-link"
>
<svg
aria-hidden="true"
class=""
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
More actions
<span
aria-label="down"
class="anticon anticon-down"
role="img"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</a>
</span>
<svg
aria-hidden="true"
class=""
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</a>
</div>
</div>
</td>
</tr>
<tr
@ -3171,38 +3198,47 @@ Array [
<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"
>
Delete
</a>
<a
class="ant-dropdown-link"
<a>
Delete
</a>
</div>
<div
class="ant-space-item"
>
More actions
<span
aria-label="down"
class="anticon anticon-down"
role="img"
<a
class="ant-dropdown-link"
>
<svg
aria-hidden="true"
class=""
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
More actions
<span
aria-label="down"
class="anticon anticon-down"
role="img"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</a>
</span>
<svg
aria-hidden="true"
class=""
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</a>
</div>
</div>
</td>
</tr>
<tr
@ -3255,38 +3291,47 @@ Array [
<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"
>
Delete
</a>
<a
class="ant-dropdown-link"
<a>
Delete
</a>
</div>
<div
class="ant-space-item"
>
More actions
<span
aria-label="down"
class="anticon anticon-down"
role="img"
<a
class="ant-dropdown-link"
>
<svg
aria-hidden="true"
class=""
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
More actions
<span
aria-label="down"
class="anticon anticon-down"
role="img"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</a>
</span>
<svg
aria-hidden="true"
class=""
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</a>
</div>
</div>
</td>
</tr>
<tr
@ -3339,38 +3384,47 @@ Array [
<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"
>
Delete
</a>
<a
class="ant-dropdown-link"
<a>
Delete
</a>
</div>
<div
class="ant-space-item"
>
More actions
<span
aria-label="down"
class="anticon anticon-down"
role="img"
<a
class="ant-dropdown-link"
>
<svg
aria-hidden="true"
class=""
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
More actions
<span
aria-label="down"
class="anticon anticon-down"
role="img"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</a>
</span>
<svg
aria-hidden="true"
class=""
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</a>
</div>
</div>
</td>
</tr>
<tr
@ -3423,38 +3477,47 @@ Array [
<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"
>
Delete
</a>
<a
class="ant-dropdown-link"
<a>
Delete
</a>
</div>
<div
class="ant-space-item"
>
More actions
<span
aria-label="down"
class="anticon anticon-down"
role="img"
<a
class="ant-dropdown-link"
>
<svg
aria-hidden="true"
class=""
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
More actions
<span
aria-label="down"
class="anticon anticon-down"
role="img"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</a>
</span>
<svg
aria-hidden="true"
class=""
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</a>
</div>
</div>
</td>
</tr>
<tr
@ -3507,38 +3570,47 @@ Array [
<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"
>
Delete
</a>
<a
class="ant-dropdown-link"
<a>
Delete
</a>
</div>
<div
class="ant-space-item"
>
More actions
<span
aria-label="down"
class="anticon anticon-down"
role="img"
<a
class="ant-dropdown-link"
>
<svg
aria-hidden="true"
class=""
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
More actions
<span
aria-label="down"
class="anticon anticon-down"
role="img"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</a>
</span>
<svg
aria-hidden="true"
class=""
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</a>
</div>
</div>
</td>
</tr>
<tr
@ -3591,38 +3663,47 @@ Array [
<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"
>
Delete
</a>
<a
class="ant-dropdown-link"
<a>
Delete
</a>
</div>
<div
class="ant-space-item"
>
More actions
<span
aria-label="down"
class="anticon anticon-down"
role="img"
<a
class="ant-dropdown-link"
>
<svg
aria-hidden="true"
class=""
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
More actions
<span
aria-label="down"
class="anticon anticon-down"
role="img"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</a>
</span>
<svg
aria-hidden="true"
class=""
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</a>
</div>
</div>
</td>
</tr>
<tr
@ -3675,38 +3756,47 @@ Array [
<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"
>
Delete
</a>
<a
class="ant-dropdown-link"
<a>
Delete
</a>
</div>
<div
class="ant-space-item"
>
More actions
<span
aria-label="down"
class="anticon anticon-down"
role="img"
<a
class="ant-dropdown-link"
>
<svg
aria-hidden="true"
class=""
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
More actions
<span
aria-label="down"
class="anticon anticon-down"
role="img"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</a>
</span>
<svg
aria-hidden="true"
class=""
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</a>
</div>
</div>
</td>
</tr>
</tbody>
@ -11463,16 +11553,25 @@ exports[`renders ./components/table/demo/pagination.md correctly 1`] = `
<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
@ -11510,16 +11609,25 @@ exports[`renders ./components/table/demo/pagination.md correctly 1`] = `
<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
@ -11562,16 +11670,25 @@ exports[`renders ./components/table/demo/pagination.md correctly 1`] = `
<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>

8
components/table/demo/dynamic-settings.md
View File

@ -14,7 +14,7 @@ title:
Select different settings to see the result.
```jsx
import { Table, Switch, Radio, Form } from 'antd';
import { Table, Switch, Radio, Form, Space } from 'antd';
import { DownOutlined } from '@ant-design/icons';
const columns = [
@ -47,12 +47,12 @@ const columns = [
key: 'action',
sorter: true,
render: () => (
<span>
<a style={{ marginRight: 16 }}>Delete</a>
<Space size="middle">
<a>Delete</a>
<a className="ant-dropdown-link">
More actions <DownOutlined />
</a>
</span>
</Space>
),
},
];

6
components/table/demo/nest-table-border-debug.md
View File

@ -15,7 +15,7 @@ debug: true
To see if bordered style applied to other tables.
```jsx
import { Table, Badge, Menu, Dropdown, Switch, Form } from 'antd';
import { Table, Badge, Menu, Dropdown, Switch, Form, Space } from 'antd';
import { DownOutlined } from '@ant-design/icons';
const menu = (
@ -47,7 +47,7 @@ function NestedTable() {
dataIndex: 'operation',
key: 'operation',
render: () => (
<span className="table-operation">
<Space size="middle">
<a>Pause</a>
<a>Stop</a>
<Dropdown overlay={menu}>
@ -55,7 +55,7 @@ function NestedTable() {
More <DownOutlined />
</a>
</Dropdown>
</span>
</Space>
),
},
];

6
components/table/demo/nested-table.md
View File

@ -14,7 +14,7 @@ title:
Showing more detailed info of every row.
```jsx
import { Table, Badge, Menu, Dropdown } from 'antd';
import { Table, Badge, Menu, Dropdown, Space } from 'antd';
import { DownOutlined } from '@ant-design/icons';
const menu = (
@ -45,7 +45,7 @@ function NestedTable() {
dataIndex: 'operation',
key: 'operation',
render: () => (
<span className="table-operation">
<Space size="middle">
<a>Pause</a>
<a>Stop</a>
<Dropdown overlay={menu}>
@ -53,7 +53,7 @@ function NestedTable() {
More <DownOutlined />
</a>
</Dropdown>
</span>
</Space>
),
},
];

18
components/table/demo/pagination.md
View File

@ -14,7 +14,7 @@ title:
Table pagination settings.
```jsx
import { Table, Tag, Radio } from 'antd';
import { Table, Tag, Radio, Space } from 'antd';
const topOptions = [
{ label: 'topLeft', value: 'topLeft' },
@ -35,7 +35,7 @@ const columns = [
title: 'Name',
dataIndex: 'name',
key: 'name',
render: (text) => <a>{text}</a>,
render: text => <a>{text}</a>,
},
{
title: 'Age',
@ -51,9 +51,9 @@ const columns = [
title: 'Tags',
key: 'tags',
dataIndex: 'tags',
render: (tags) => (
render: tags => (
<span>
{tags.map((tag) => {
{tags.map(tag => {
let color = tag.length > 5 ? 'geekblue' : 'green';
if (tag === 'loser') {
color = 'volcano';
@ -71,10 +71,10 @@ const columns = [
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>
),
},
];
@ -117,7 +117,7 @@ class Demo extends React.Component {
style={{ marginBottom: 10 }}
options={topOptions}
value={this.state.top}
onChange={(e) => {
onChange={e => {
this.setState({ top: e.target.value });
}}
/>
@ -126,7 +126,7 @@ class Demo extends React.Component {
style={{ marginBottom: 10 }}
options={bottomOptions}
value={this.state.bottom}
onChange={(e) => {
onChange={e => {
this.setState({ bottom: e.target.value });
}}
/>

Write Preview
Loading…
Cancel
Save