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

components/table/Table.tsx Outdated
}
}
return table;
};

This comment has been minimized.

@yesmeck

yesmeck Feb 15, 2018
Member

Could you refactor it to less ifs? Like:

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

This comment has been minimized.

@kanweiwei

kanweiwei Feb 15, 2018
Author Contributor

good idea, thanks

@kanweiwei
Copy link
Contributor Author

@kanweiwei kanweiwei commented Feb 16, 2018

@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' | - |

This comment has been minimized.

@yesmeck

yesmeck Feb 16, 2018
Member

Should add to Table.

This comment has been minimized.

@yesmeck

yesmeck Feb 16, 2018
Member

Like rowSelection does.

components/table/demo/dynamic-settings.md Outdated
@@ -70,7 +70,7 @@ class Demo extends React.Component {
state = {
bordered: false,
loading: false,
pagination: true,
pagination: { position: 'top' },

This comment has been minimized.

@yesmeck

yesmeck Feb 16, 2018
Member

Do not need to change this demo.

@yesmeck
Copy link
Member

@yesmeck 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 | |

This comment has been minimized.

@yutingzhao1991

yutingzhao1991 Feb 18, 2018
Contributor

I don't agree copy pagination api at here. link to /components/pagination-cn/#API is ok.

This comment has been minimized.

@kanweiwei

kanweiwei Feb 18, 2018
Author Contributor

but @yesmeck suggest me to add the new feature to Table, I'm confused

This comment has been minimized.

@yutingzhao1991

yutingzhao1991 Feb 28, 2018
Contributor

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

This comment has been minimized.

@yesmeck

yesmeck Feb 28, 2018
Member

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

This comment has been minimized.

@yesmeck

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.

This comment has been minimized.

@kanweiwei

kanweiwei Feb 28, 2018
Author Contributor

i have updated the api doc

components/form/__tests__/__snapshots__/demo.test.js.snap Outdated
@@ -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%"

This comment has been minimized.

@yesmeck

yesmeck Feb 28, 2018
Member

不相关的 snapshot 不要提交

This comment has been minimized.

@yutingzhao1991

yutingzhao1991 Feb 28, 2018
Contributor

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

This comment has been minimized.

@yesmeck

yesmeck Feb 28, 2018
Member

feature-3.3.0 上已经更新了, rebase 一下就可以。

This comment has been minimized.

@kanweiwei

kanweiwei Feb 28, 2018
Author Contributor

OK

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

This comment has been minimized.

@yesmeck

yesmeck Mar 1, 2018
Member

Should move to Table

This comment has been minimized.

@kanweiwei

kanweiwei Mar 1, 2018
Author Contributor

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

This comment has been minimized.

@yesmeck

yesmeck Mar 1, 2018
Member

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

@yesmeck
yesmeck approved these changes Mar 1, 2018
@yesmeck yesmeck merged commit ae2990e into ant-design:feature-3.3.0 Mar 2, 2018
4 checks passed
4 checks passed
codecov/patch 100% of diff hit (target 85.91%)
Details
codecov/project 85.92% (+<.01%) compared to bea95bf
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
security/snyk No dependency changes
Details
@MrSaints
Copy link

@MrSaints MrSaints commented Mar 5, 2018

Awesome :)

@JeanZhao
Copy link

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

@kanweiwei
Copy link
Contributor Author

@kanweiwei 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 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

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

@JeanZhao
Copy link

@JeanZhao 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 JeanZhao commented Nov 5, 2019

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

@kanweiwei
Copy link
Contributor Author

@kanweiwei kanweiwei commented Nov 6, 2019

...你用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
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

5 participants