Skip to content
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

Merged
merged 7 commits into from Mar 2, 2018
Merged

feature: [Table] Pagination on the top in addition to the bottom. fix… #9357

merged 7 commits into from Mar 2, 2018

Conversation

kanweiwei
Copy link
Contributor

@kanweiwei kanweiwei commented Feb 14, 2018

new feature related (#9346)

  • Make sure that you propose PR to right branch: bugfix for master, feature for latest active branch feature-x.x.
  • Make sure that you follow antd's code convention.
  • Run npm run lint and fix those errors before submitting in order to keep consistent code style.
  • Rebase before creating a PR to keep commit history clear.
  • Add some descriptions and refer relative issues for you PR.

Extra checklist:
isNewFeature :

  • Update API docs for the component.
  • Update TypeScript definition for the component.
  • Add unit tests for the feature.

@codecov
Copy link

codecov bot commented Feb 14, 2018

Codecov Report

Merging #9357 into feature-3.3.0 will increase coverage by <.01%.
The diff coverage is 100%.

Impacted file tree graph

@@                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
Impacted Files Coverage Δ
components/table/Table.tsx 93.21% <100%> (+0.01%) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update bea95bf...ee95e25. Read the comment docs.

}
}
return table;
};
Copy link
Member

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 ifs? Like:

{this.renderPagination('top')}
{table}
{this.renderPagination('bottom')}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good idea, thanks

@kanweiwei
Copy link
Contributor Author

kanweiwei commented Feb 16, 2018

@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' | - |
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should add to Table.

Copy link
Member

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' },
Copy link
Member

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.

@yesmeck
Copy link
Member

yesmeck commented Feb 16, 2018

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 | |
Copy link
Contributor

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.

Copy link
Contributor Author

@kanweiwei kanweiwei Feb 18, 2018

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess @yesmeck means add a new props to Table, not add position to pagination. ping @yesmeck .

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

是这样 <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' |
Copy link
Member

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.

Copy link
Contributor Author

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%"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

不相关的 snapshot 不要提交

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

但是这样会导致测试失败,这种情况一般怎么处理?我们来更新 snapshot ?

Copy link
Member

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 一下就可以。

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK

@@ -16,6 +16,7 @@ export interface PaginationProps {
hideOnSinglePage?: boolean;
showSizeChanger?: boolean;
pageSizeOptions?: string[];
position?: 'top' | 'bottom' | 'both';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should move to Table

Copy link
Contributor Author

@kanweiwei kanweiwei Mar 1, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Table初始化的时候,this.state.pagination 指定为Pagination的prop类型,所以我在Pagination的prop类型声明里加了这个属性
image

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

可以在 Table 里新增一个 TablePaginationConfig 类型,继承 PaginationProps

@yesmeck yesmeck merged commit ae2990e into ant-design:feature-3.3.0 Mar 2, 2018
@MrSaints
Copy link

MrSaints commented Mar 5, 2018

Awesome :)

@JeanZhao
Copy link

JeanZhao commented Nov 5, 2019

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...

@JeanZhao
Copy link

JeanZhao commented Nov 5, 2019

@yesmeck @dengfuping

@kanweiwei
Copy link
Contributor Author

kanweiwei commented Nov 5, 2019

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 Table and Pagination by yourself, like this:

<CustomTable pagination={pagination} table={tableProperties} />;

function CustomTable(props: any) {
  return (
    <div>
      <div className="header">
        <Pagination {...props.pagination} />
      </div>
      <Table {...props.table} />
    </div>
  );
}

@JeanZhao
Copy link

JeanZhao commented Nov 5, 2019

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 Table and Pagination by yourself, like this:

<CustomTable pagination={pagination} table={tableProperties} />;

function CustomTable(props: any) {
  return (
    <div>
      <div className="header">
        <Pagination {...props.pagination} />
      </div>
      <Table {...props.table} />
    </div>
  );
}

You mean, I could use Pagination component individually with v3.x? And then mix use with antd table?

@kanweiwei
Copy link
Contributor Author

@JeanZhao yes, mix use them in v2.x. You can have a try. In that case, you should notice that Antd Table accepts pagination property with null, then you control the pagination.

@JeanZhao
Copy link

JeanZhao commented Nov 5, 2019

@JeanZhao yes, mix use them in v2.x. You can have a try. In that case, you should notice that Antd Table accepts pagination property with null, then you control the pagination.

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:

@JeanZhao
Copy link

JeanZhao commented Nov 5, 2019

额。。可以直接说中文,,我忘记了,antd 团队是国内的。。

@kanweiwei
Copy link
Contributor Author

...你用2.x版本的antd的table和pagination组件,自己封装一个组件。你给table的pagintion属性传null,让antd 的 table不要显示分页器。自己用pagintion组件,排到表格前面还是表格后面,具体看你的需求。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants