feature: [Table] Pagination on the top in addition to the bottom. fix… #9357
Conversation
Codecov Report
@@ Coverage Diff @@
## feature-3.3.0 #9357 +/- ##
=================================================
+ Coverage 85.91% 85.92% +<.01%
=================================================
Files 195 195
Lines 4630 4631 +1
Branches 1287 1289 +2
=================================================
+ Hits 3978 3979 +1
Misses 648 648
Partials 4 4
Continue to review full report at Codecov.
|
} | ||
} | ||
return table; | ||
}; |
yesmeck
Feb 15, 2018
Member
Could you refactor it to less if
s? Like:
{this.renderPagination('top')}
{table}
{this.renderPagination('bottom')}
Could you refactor it to less if
s? Like:
{this.renderPagination('top')}
{table}
{this.renderPagination('bottom')}
kanweiwei
Feb 15, 2018
Author
Contributor
good idea, thanks
good idea, thanks
@yesmeck why it failed, could you help me |
@@ -27,6 +27,7 @@ A long list can be divided into several pages by `Pagination`, and only one page | |||
| itemRender | to customize item innerHTML | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - | | |||
| pageSize | number of data items per page | number | - | | |||
| pageSizeOptions | specify the sizeChanger options | string\[] | ['10', '20', '30', '40'] | | |||
| position | specify the position of `Pagination` component when using `Table` component | 'top' \| 'bottom' \| 'both' | - | |
yesmeck
Feb 16, 2018
Member
Should add to Table
.
Should add to Table
.
yesmeck
Feb 16, 2018
Member
Like rowSelection
does.
Like rowSelection
does.
@@ -70,7 +70,7 @@ class Demo extends React.Component { | |||
state = { | |||
bordered: false, | |||
loading: false, | |||
pagination: true, | |||
pagination: { position: 'top' }, |
yesmeck
Feb 16, 2018
Member
Do not need to change this demo.
Do not need to change this demo.
Add a test case, please. |
@@ -65,7 +65,7 @@ const columns = [{ | |||
| indentSize | Indent size in pixels of tree data | number | 15 | | |||
| loading | Loading status of table | boolean\|[object](https://ant.design/components/spin-cn/#API) ([more](https://github.com/ant-design/ant-design/issues/4544#issuecomment-271533135)) | `false` | | |||
| locale | i18n text including filter, sort, empty text, etc | object | filterConfirm: 'Ok' <br> filterReset: 'Reset' <br> emptyText: 'No Data' <br> [Default](https://github.com/ant-design/ant-design/issues/575#issuecomment-159169511) | | |||
| pagination | Pagination [config](/components/pagination/), hide it by setting it to `false` | object | | | |||
| pagination | Pagination [config](#pagination) or [`Pagination`] (/components/pagination/), hide it by setting it to `false` | object | | |
yutingzhao1991
Feb 18, 2018
Contributor
I don't agree copy pagination api at here. link to /components/pagination-cn/#API
is ok.
I don't agree copy pagination api at here. link to /components/pagination-cn/#API
is ok.
yesmeck
Feb 28, 2018
Member
是这样 <Table pagination={{ position: 'both' }} />
是这样 <Table pagination={{ position: 'both' }} />
| itemRender | to customize item innerHTML | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - | | ||
| pageSize | number of data items per page | number | - | | ||
| pageSizeOptions | specify the sizeChanger options | string\[] | ['10', '20', '30', '40'] | | ||
| position | specify the position of `Pagination` | 'top' \| 'bottom' \| 'both' | 'bottom' | |
yesmeck
Feb 24, 2018
Member
Don't need copy all Pagination props to here. Just leave positon
here, and link others to /components/pagination-cn/#API
.
Don't need copy all Pagination props to here. Just leave positon
here, and link others to /components/pagination-cn/#API
.
kanweiwei
Feb 28, 2018
Author
Contributor
i have updated the api doc
i have updated the api doc
@@ -2503,7 +2503,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = ` | |||
/> | |||
<div | |||
class="ant-slider-track" | |||
style="visibility:visible;left:0%;width:0%" | |||
style="left:0%;width:0%" |
yesmeck
Feb 28, 2018
Member
不相关的 snapshot 不要提交
不相关的 snapshot 不要提交
yutingzhao1991
Feb 28, 2018
Contributor
但是这样会导致测试失败,这种情况一般怎么处理?我们来更新 snapshot ?
但是这样会导致测试失败,这种情况一般怎么处理?我们来更新 snapshot ?
yesmeck
Feb 28, 2018
Member
feature-3.3.0
上已经更新了, rebase 一下就可以。
feature-3.3.0
上已经更新了, rebase 一下就可以。
kanweiwei
Feb 28, 2018
Author
Contributor
OK
OK
@@ -16,6 +16,7 @@ export interface PaginationProps { | |||
hideOnSinglePage?: boolean; | |||
showSizeChanger?: boolean; | |||
pageSizeOptions?: string[]; | |||
position?: 'top' | 'bottom' | 'both'; |
yesmeck
Mar 1, 2018
Member
Should move to Table
Should move to Table
yesmeck
Mar 1, 2018
Member
可以在 Table 里新增一个 TablePaginationConfig
类型,继承 PaginationProps
。
可以在 Table 里新增一个 TablePaginationConfig
类型,继承 PaginationProps
。
Awesome :) |
Hello, could anybody know how to set the pagination position as 'top' with antd v2.x ? There are some reasons we couldn't just directly upgrade it from v2.x to v3.x... |
you can define table component with
|
You mean, I could use Pagination component individually with v3.x? And then mix use with antd table? |
@JeanZhao yes, mix use them in v2.x. You can have a try. In that case, you should notice that Antd |
Sorry, I'm not so clear...Pagination component in v2.x. doesn't accpet PaginationProps 'position' . How do it work when just write as what you suggest: |
额。。可以直接说中文,,我忘记了,antd 团队是国内的。。 |
...你用2.x版本的antd的table和pagination组件,自己封装一个组件。你给table的pagintion属性传null,让antd 的 table不要显示分页器。自己用pagintion组件,排到表格前面还是表格后面,具体看你的需求。 |
new feature related (#9346)
master
, feature for latest active branchfeature-x.x
.npm run lint
and fix those errors before submitting in order to keep consistent code style.Extra checklist:
isNewFeature :