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

kanweiwei · 2018-02-14T06:39:47Z

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 · 2018-02-14T07:09:12Z

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 · 2018-02-15T05:48:01Z

components/table/Table.tsx

+        }
+      }
+      return table;
+    };


Could you refactor it to less ifs? Like:

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

good idea, thanks

kanweiwei · 2018-02-16T02:46:18Z

@yesmeck why it failed, could you help me

yesmeck · 2018-02-16T06:25:59Z

components/pagination/index.en-US.md

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


Should add to Table.

Like rowSelection does.

yesmeck · 2018-02-16T06:27:47Z

components/table/demo/dynamic-settings.md

@@ -70,7 +70,7 @@ class Demo extends React.Component {
  state = {
    bordered: false,
    loading: false,
-    pagination: true,
+    pagination: { position: 'top' },


Do not need to change this demo.

yesmeck · 2018-02-16T06:58:43Z

Add a test case, please.

yutingzhao1991 · 2018-02-18T02:27:48Z

components/table/index.en-US.md

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


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

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

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

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

yesmeck · 2018-02-24T07:27:57Z

components/table/index.en-US.md

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


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

i have updated the api doc

yesmeck · 2018-02-28T03:26:36Z

components/form/__tests__/__snapshots__/demo.test.js.snap

@@ -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%"


不相关的 snapshot 不要提交

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

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

…#9346)

yesmeck · 2018-03-01T04:32:24Z

components/pagination/Pagination.tsx

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


Should move to Table

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

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

MrSaints · 2018-03-05T10:54:05Z

Awesome :)

JeanZhao · 2019-11-05T05:52:13Z

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 · 2019-11-05T05:53:50Z

@yesmeck @dengfuping

kanweiwei · 2019-11-05T06:08:15Z

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 · 2019-11-05T06:28:22Z

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 · 2019-11-05T06:40:38Z

@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 · 2019-11-05T13:35:19Z

@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 · 2019-11-05T13:38:37Z

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

kanweiwei · 2019-11-06T08:34:44Z

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

yesmeck reviewed Feb 15, 2018

View reviewed changes

yesmeck reviewed Feb 16, 2018

View reviewed changes

yutingzhao1991 reviewed Feb 18, 2018

View reviewed changes

yesmeck requested changes Feb 24, 2018

View reviewed changes

yesmeck reviewed Feb 28, 2018

View reviewed changes

kanweiwei added 6 commits February 28, 2018 12:22

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

e289428

…#9346)

refactor pagination of table (#9357)

e5f2360

specify the position of pagination when using table - add test

7f111fd

specify the position of pagination when using table - update API docs

ddb4c77

update api docs

0466309

fix error

f6b4baa

yesmeck reviewed Mar 1, 2018

View reviewed changes

add TablePaginationConfig extends PaginationProps

ee95e25

yesmeck approved these changes Mar 1, 2018

View reviewed changes

yesmeck merged commit ae2990e into ant-design:feature-3.3.0 Mar 2, 2018

This was referenced Mar 20, 2018

Bump antd from 3.1.3 to 3.3.1 limaofeng/react-demo#218

Closed

Bump antd from 3.1.6 to 3.3.1 kamthamc/resume#55

Closed

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

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

kanweiwei commented Feb 14, 2018 •

edited

codecov bot commented Feb 14, 2018 •

edited

yesmeck Feb 15, 2018

kanweiwei Feb 15, 2018

kanweiwei commented Feb 16, 2018 •

edited

yesmeck Feb 16, 2018

yesmeck Feb 16, 2018

yesmeck Feb 16, 2018

yesmeck commented Feb 16, 2018

yutingzhao1991 Feb 18, 2018

kanweiwei Feb 18, 2018 •

edited

yutingzhao1991 Feb 28, 2018

yesmeck Feb 28, 2018

yesmeck Feb 24, 2018

kanweiwei Feb 28, 2018

yesmeck Feb 28, 2018

yutingzhao1991 Feb 28, 2018

yesmeck Feb 28, 2018

kanweiwei Feb 28, 2018

yesmeck Mar 1, 2018

kanweiwei Mar 1, 2018 •

edited

yesmeck Mar 1, 2018

MrSaints commented Mar 5, 2018

JeanZhao commented Nov 5, 2019

JeanZhao commented Nov 5, 2019

kanweiwei commented Nov 5, 2019 •

edited

JeanZhao commented Nov 5, 2019

kanweiwei commented Nov 5, 2019

JeanZhao commented Nov 5, 2019 •

edited

JeanZhao commented Nov 5, 2019

kanweiwei commented Nov 6, 2019

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

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

Conversation

kanweiwei commented Feb 14, 2018 • edited

codecov bot commented Feb 14, 2018 • edited

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kanweiwei commented Feb 16, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yesmeck commented Feb 16, 2018

Choose a reason for hiding this comment

kanweiwei Feb 18, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kanweiwei Mar 1, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MrSaints commented Mar 5, 2018

JeanZhao commented Nov 5, 2019

JeanZhao commented Nov 5, 2019

kanweiwei commented Nov 5, 2019 • edited

JeanZhao commented Nov 5, 2019

kanweiwei commented Nov 5, 2019

JeanZhao commented Nov 5, 2019 • edited

JeanZhao commented Nov 5, 2019

kanweiwei commented Nov 6, 2019

kanweiwei commented Feb 14, 2018 •

edited

codecov bot commented Feb 14, 2018 •

edited

kanweiwei commented Feb 16, 2018 •

edited

kanweiwei Feb 18, 2018 •

edited

kanweiwei Mar 1, 2018 •

edited

kanweiwei commented Nov 5, 2019 •

edited

JeanZhao commented Nov 5, 2019 •

edited