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

fix: Table flex pagination (#30065) 

* fix: Table flex pagination

* update style
pull/30071/head
二货机器人 4 years ago
committed by GitHub
parent
05127d564a
commit
33dbd3f4f1
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 604 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 546
      components/table/__tests__/__snapshots__/demo.test.js.snap
  2. 52
      components/table/demo/narrow.md
  3. 6
      components/table/style/index.less

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

@ -10613,6 +10613,552 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
</div> </div>
`; `;
exports[`renders ./components/table/demo/narrow.md correctly 1`] = `
<div
style="width:300px"
>
<div
class="ant-table-wrapper"
>
<div
class="ant-spin-nested-loading"
>
<div
class="ant-spin-container"
>
<div
class="ant-table ant-table-small"
>
<div
class="ant-table-container"
>
<div
class="ant-table-content"
>
<table
style="table-layout:auto"
>
<colgroup />
<thead
class="ant-table-thead"
>
<tr>
<th
class="ant-table-cell"
>
Name
</th>
<th
class="ant-table-cell"
>
Age
</th>
<th
class="ant-table-cell"
>
Address
</th>
</tr>
</thead>
<tbody
class="ant-table-tbody"
>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="120"
>
<td
class="ant-table-cell"
>
Sample Name
</td>
<td
class="ant-table-cell"
>
30
</td>
<td
class="ant-table-cell"
>
Sample Address 120
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="121"
>
<td
class="ant-table-cell"
>
Sample Name
</td>
<td
class="ant-table-cell"
>
31
</td>
<td
class="ant-table-cell"
>
Sample Address 121
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="122"
>
<td
class="ant-table-cell"
>
Sample Name
</td>
<td
class="ant-table-cell"
>
32
</td>
<td
class="ant-table-cell"
>
Sample Address 122
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="123"
>
<td
class="ant-table-cell"
>
Sample Name
</td>
<td
class="ant-table-cell"
>
33
</td>
<td
class="ant-table-cell"
>
Sample Address 123
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="124"
>
<td
class="ant-table-cell"
>
Sample Name
</td>
<td
class="ant-table-cell"
>
34
</td>
<td
class="ant-table-cell"
>
Sample Address 124
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="125"
>
<td
class="ant-table-cell"
>
Sample Name
</td>
<td
class="ant-table-cell"
>
30
</td>
<td
class="ant-table-cell"
>
Sample Address 125
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="126"
>
<td
class="ant-table-cell"
>
Sample Name
</td>
<td
class="ant-table-cell"
>
31
</td>
<td
class="ant-table-cell"
>
Sample Address 126
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="127"
>
<td
class="ant-table-cell"
>
Sample Name
</td>
<td
class="ant-table-cell"
>
32
</td>
<td
class="ant-table-cell"
>
Sample Address 127
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="128"
>
<td
class="ant-table-cell"
>
Sample Name
</td>
<td
class="ant-table-cell"
>
33
</td>
<td
class="ant-table-cell"
>
Sample Address 128
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="129"
>
<td
class="ant-table-cell"
>
Sample Name
</td>
<td
class="ant-table-cell"
>
34
</td>
<td
class="ant-table-cell"
>
Sample Address 129
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<ul
class="ant-pagination mini ant-table-pagination ant-table-pagination-right"
unselectable="unselectable"
>
<li
aria-disabled="false"
class="ant-pagination-prev"
tabindex="0"
title="Previous Page"
>
<button
class="ant-pagination-item-link"
tabindex="-1"
type="button"
>
<span
aria-label="left"
class="anticon anticon-left"
role="img"
>
<svg
aria-hidden="true"
data-icon="left"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
/>
</svg>
</span>
</button>
</li>
<li
class="ant-pagination-item ant-pagination-item-1"
tabindex="0"
title="1"
>
<a
rel="nofollow"
>
1
</a>
</li>
<li
class="ant-pagination-jump-prev ant-pagination-jump-prev-custom-icon"
tabindex="0"
title="Previous 5 Pages"
>
<a
class="ant-pagination-item-link"
>
<div
class="ant-pagination-item-container"
>
<span
aria-label="double-left"
class="anticon anticon-double-left ant-pagination-item-link-icon"
role="img"
>
<svg
aria-hidden="true"
data-icon="double-left"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M272.9 512l265.4-339.1c4.1-5.2.4-12.9-6.3-12.9h-77.3c-4.9 0-9.6 2.3-12.6 6.1L186.8 492.3a31.99 31.99 0 000 39.5l255.3 326.1c3 3.9 7.7 6.1 12.6 6.1H532c6.7 0 10.4-7.7 6.3-12.9L272.9 512zm304 0l265.4-339.1c4.1-5.2.4-12.9-6.3-12.9h-77.3c-4.9 0-9.6 2.3-12.6 6.1L490.8 492.3a31.99 31.99 0 000 39.5l255.3 326.1c3 3.9 7.7 6.1 12.6 6.1H836c6.7 0 10.4-7.7 6.3-12.9L576.9 512z"
/>
</svg>
</span>
<span
class="ant-pagination-item-ellipsis"
>
•••
</span>
</div>
</a>
</li>
<li
class="ant-pagination-item ant-pagination-item-11 ant-pagination-item-after-jump-prev"
tabindex="0"
title="11"
>
<a
rel="nofollow"
>
11
</a>
</li>
<li
class="ant-pagination-item ant-pagination-item-12"
tabindex="0"
title="12"
>
<a
rel="nofollow"
>
12
</a>
</li>
<li
class="ant-pagination-item ant-pagination-item-13 ant-pagination-item-active"
tabindex="0"
title="13"
>
<a
rel="nofollow"
>
13
</a>
</li>
<li
class="ant-pagination-item ant-pagination-item-14"
tabindex="0"
title="14"
>
<a
rel="nofollow"
>
14
</a>
</li>
<li
class="ant-pagination-item ant-pagination-item-15 ant-pagination-item-before-jump-next"
tabindex="0"
title="15"
>
<a
rel="nofollow"
>
15
</a>
</li>
<li
class="ant-pagination-jump-next ant-pagination-jump-next-custom-icon"
tabindex="0"
title="Next 5 Pages"
>
<a
class="ant-pagination-item-link"
>
<div
class="ant-pagination-item-container"
>
<span
aria-label="double-right"
class="anticon anticon-double-right ant-pagination-item-link-icon"
role="img"
>
<svg
aria-hidden="true"
data-icon="double-right"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1A7.98 7.98 0 00188 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5zm304 0L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1A7.98 7.98 0 00492 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
/>
</svg>
</span>
<span
class="ant-pagination-item-ellipsis"
>
•••
</span>
</div>
</a>
</li>
<li
class="ant-pagination-item ant-pagination-item-20"
tabindex="0"
title="20"
>
<a
rel="nofollow"
>
20
</a>
</li>
<li
aria-disabled="false"
class="ant-pagination-next"
tabindex="0"
title="Next Page"
>
<button
class="ant-pagination-item-link"
tabindex="-1"
type="button"
>
<span
aria-label="right"
class="anticon anticon-right"
role="img"
>
<svg
aria-hidden="true"
data-icon="right"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
/>
</svg>
</span>
</button>
</li>
<li
class="ant-pagination-options"
>
<div
class="ant-select ant-select-sm ant-pagination-options-size-changer ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
>
<input
aria-activedescendant="undefined_list_0"
aria-autocomplete="list"
aria-controls="undefined_list"
aria-haspopup="listbox"
aria-owns="undefined_list"
autocomplete="off"
class="ant-select-selection-search-input"
readonly=""
role="combobox"
style="opacity:0"
type="search"
unselectable="on"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="10 / page"
>
10 / page
</span>
</div>
<span
aria-hidden="true"
class="ant-select-arrow"
style="user-select:none;-webkit-user-select:none"
unselectable="on"
>
<span
aria-label="down"
class="anticon anticon-down ant-select-suffix"
role="img"
>
<svg
aria-hidden="true"
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>
</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
`;
exports[`renders ./components/table/demo/nest-table-border-debug.md correctly 1`] = ` exports[`renders ./components/table/demo/nest-table-border-debug.md correctly 1`] = `
Array [ Array [
<form <form

52
components/table/demo/narrow.md
View File

@ -0,0 +1,52 @@
---
order: 11.5
title:
en-US: size
zh-CN: 紧凑型
debug: true
---
## zh-CN
两种紧凑型的列表，小型列表只用于对话框内。
## en-US
There are two compacted table sizes: `middle` and `small`. The `small` size is used in Modals only.
```jsx
import { Table } from 'antd';
const columns = [
{
title: 'Name',
dataIndex: 'name',
},
{
title: 'Age',
dataIndex: 'age',
},
{
title: 'Address',
dataIndex: 'address',
},
];
const data = [];
for (let i = 0; i < 200; i += 1) {
data.push({
key: i,
name: 'Sample Name',
age: 30 + (i % 5),
address: `Sample Address ${i}`,
});
}
ReactDOM.render(
<div style={{ width: 300 }}>
<Table columns={columns} dataSource={data} size="small" pagination={{ defaultCurrent: 13 }} />
</div>,
mountNode,
);
```

6
components/table/style/index.less
View File

@ -162,6 +162,12 @@
&-pagination { &-pagination {
display: flex; display: flex;
flex-wrap: wrap;
row-gap: @padding-xs;
> * {
flex: none;
}
&-left { &-left {
justify-content: flex-start; justify-content: flex-start;

Write Preview
Loading…
Cancel
Save