Implement Pagination #138
Implement Pagination #138
Conversation
package.json Outdated
| "prop-types": "^15.5.10", | ||
| "react": "^15.6.1", | ||
| "react-dom": "^15.6.1" | ||
| "react": "^16.0.0", |
There was a problem hiding this comment.
package.json Outdated
| "react": "^15.0.0", | ||
| "react-dom": "^15.0.0" | ||
| "react": "^15.0.0 || ^16", | ||
| "react-dom": "^15.0.0 || ^16" |
There was a problem hiding this comment.
I'll consider to make ^16 only as peer when we release, but I need some test
| text: 'Product Price' | ||
| }]; | ||
| <BootstrapTable keyField='id' data={ products } columns={ columns } /> |
| text: 'Product Price' | ||
| }]; | ||
| <BootstrapTable keyField='id' data={ products } columns={ columns } /> |
| @@ -0,0 +1,134 @@ | |||
| /* eslint no-mixed-operators: 0 */ | |||
There was a problem hiding this comment.
this class is main class for calculate page information by props
| componentWillReceiveProps(nextProps) { | ||
| const { dataSize, currSizePerPage } = nextProps; | ||
| | ||
| if (currSizePerPage !== this.props.currSizePerPage || dataSize !== this.props.dataSize) { |
There was a problem hiding this comment.
currSizePerPage and dataSize will effect on totalPages and lastPage
| data: store.getByCurrPage(currPage, currSizePerPage) | ||
| }); | ||
| | ||
| return [ |
There was a problem hiding this comment.
there's a kind of different than previous wrapper,
-
In this class, I export a factory function instead of HoC(this factory function will create a HoC)
-
This factory function will have two args:
baseElementandConstwhich are passed fromreact-bootstrap-table2(table-factory) -
This HOC component is not render next element, instead, I render
baseelement and Pagination component together
| const base = baseElement({ | ||
| ...this.props, | ||
| key: 'table', | ||
| data: store.getByCurrPage(currPage, currSizePerPage) |
There was a problem hiding this comment.
slice data by page here
| } else if (this.props.columns.filter(col => col.sort).length > 0) { | ||
| return wrapWithSort(baseProps); | ||
| } else if (this.props.pagination) { | ||
| return wrapWithPagination(baseProps); |
| if (props.pagination) { | ||
| const { wrapper } = props.pagination; | ||
| const PaginationBase = wrapper(pureTable, Const); | ||
| return React.createElement(PaginationBase, { ...props }); |
There was a problem hiding this comment.
- get pagination
wrapperfrom props - call the wrapper function (
wrapperis a factory function)
AllenFang force-pushed the feat/pagination branch from 7c1964c to e2313d8 Compare AllenFang force-pushed the feat/pagination branch from e2313d8 to f0ff30d Compare 
| <BootstrapTable keyField='id' data={ products } columns={ columns } pagination={ paginator } /> | ||
| `; | ||
| | ||
| class BasicPaginationTable extends React.PureComponent { |
There was a problem hiding this comment.
I just wondered what kind of difficulties you faced and you selected PureComponent here :)?
There was a problem hiding this comment.
Nothing there, I just test some state change manually but forgot to remove it, thanks this reminder
| umm.... huge PR, review by commit will be little better lol. |
AllenFang force-pushed the feat/pagination branch 4 times, most recently from d5d2da5 to 3ece5ff Compare AllenFang force-pushed the feat/pagination branch from 3ece5ff to ec5e78a Compare | @Chun-MingChen after merged, you are suppose to run |
#135