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

[kanweiwei]

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]

Codecov Report

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

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

[yesmeck]

Could you refactor it to less ifs? Like:

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

[kanweiwei]

good idea, thanks

[kanweiwei]

@yesmeck why it failed, could you help me

[yesmeck]

Should add to Table.

[yesmeck]

Like rowSelection does.

[yesmeck]

Do not need to change this demo.

[yesmeck]

Add a test case, please.

[yutingzhao1991]

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

[kanweiwei]

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

[yutingzhao1991]

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

[yesmeck]

是这样 <Table pagination={{ position: 'both' }} />

[yesmeck]

Don't need copy all Pagination props to here. Just leave positon here, and link others to /components/pagination-cn/#API.

[kanweiwei]

i have updated the api doc

[yesmeck]

不相关的 snapshot 不要提交

[yutingzhao1991]

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

[yesmeck]

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

[kanweiwei]

OK

[yesmeck]

Should move to Table

[kanweiwei]

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

[yesmeck]

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

[MrSaints]

Awesome :)

[JeanZhao]

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]

@yesmeck @dengfuping

[kanweiwei]

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]

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]

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

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

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

[kanweiwei]

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