New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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.
|
components/table/Table.tsx
Outdated
} | ||
} | ||
return table; | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could you refactor it to less if
s? Like:
{this.renderPagination('top')}
{table}
{this.renderPagination('bottom')}
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
good idea, thanks
@yesmeck why it failed, could you help me |
components/pagination/index.en-US.md
Outdated
@@ -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' | - | |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should add to Table
.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Like rowSelection
does.
@@ -70,7 +70,7 @@ class Demo extends React.Component { | |||
state = { | |||
bordered: false, | |||
loading: false, | |||
pagination: true, | |||
pagination: { position: 'top' }, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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 | | |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't agree copy pagination api at here. link to /components/pagination-cn/#API
is ok.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
but @yesmeck suggest me to add the new feature to Table
, I'm confused
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
是这样 <Table pagination={{ position: 'both' }} />
components/table/index.en-US.md
Outdated
| 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' | |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Don't need copy all Pagination props to here. Just leave positon
here, and link others to /components/pagination-cn/#API
.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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%" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
不相关的 snapshot 不要提交
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
但是这样会导致测试失败,这种情况一般怎么处理?我们来更新 snapshot ?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
feature-3.3.0
上已经更新了, rebase 一下就可以。
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
OK
components/pagination/Pagination.tsx
Outdated
@@ -16,6 +16,7 @@ export interface PaginationProps { | |||
hideOnSinglePage?: boolean; | |||
showSizeChanger?: boolean; | |||
pageSizeOptions?: string[]; | |||
position?: 'top' | 'bottom' | 'both'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should move to Table
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
可以在 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 :