|
19 | 19 | * [rowClasses](#rowClasses) |
20 | 20 | * [rowEvents](#rowEvents) |
21 | 21 | * [defaultSorted](#defaultSorted) |
| 22 | +* [pagination](#pagination) |
22 | 23 |
|
23 | 24 | ### <a name='keyField'>keyField(**required**) - [String]</a> |
24 | 25 | Tells `react-bootstrap-table2` which column is unique. |
@@ -101,4 +102,49 @@ const defaultSorted = [{ |
101 | 102 | dataField: 'name', // if dataField is not match to any column you defined, it will be ignored. |
102 | 103 | order: 'desc' // desc or asc |
103 | 104 | }]; |
104 | | -``` |
| 105 | +``` |
| 106 | + |
| 107 | +### <a name='pagination'>pagination - [Object]</a> |
| 108 | +`pagination` allow user to render a pagination panel on the bottom of table. But pagination funcitonality is separated from core of `react-bootstrap-table2` so that you are suppose to install `react-bootstrap-table2-paginator` additionaly. |
| 109 | + |
| 110 | +```sh |
| 111 | +$ npm install react-bootstrap-table2-paginator --save |
| 112 | +``` |
| 113 | + |
| 114 | +After installation of `react-bootstrap-table2-paginator`, you can enable pagination on `react-bootstrap-table2` easily: |
| 115 | + |
| 116 | +```js |
| 117 | +import paginator from 'react-bootstrap-table2-paginator'; |
| 118 | + |
| 119 | +// omit... |
| 120 | + |
| 121 | +<BootstrapTable data={ data } columns={ columns } pagination={ paginator() } /> |
| 122 | +``` |
| 123 | + |
| 124 | +`paginator` is a function actually and allow to pass some pagination options, following we list all the available options: |
| 125 | + |
| 126 | +```js |
| 127 | +paginator({ |
| 128 | + pageStartIndex: 0, // first page will be 0, default is 1 |
| 129 | + paginationSize: 3, // the pagination bar size, default is 5 |
| 130 | + sizePerPageList: [ { |
| 131 | + text: '5', value: 5 |
| 132 | + }, { |
| 133 | + text: '10', value: 10 |
| 134 | + }, { |
| 135 | + text: 'All', value: products.length |
| 136 | + } ], // A numeric array is also available: [5, 10]. the purpose of above example is custom the text |
| 137 | + withFirstAndLast: false, // hide the going to first and last page button |
| 138 | + alwaysShowAllBtns: true, // always show the next and previous page button |
| 139 | + firstPageText: 'First', // the text of first page button |
| 140 | + prePageText: 'Prev', // the text of previous page button |
| 141 | + nextPageText: 'Next', // the text of next page button |
| 142 | + lastPageText: 'Last', // the text of last page button |
| 143 | + nextPageTitle: 'Go to next', // the title of next page button |
| 144 | + prePageTitle: 'Go to previous', // the title of previous page button |
| 145 | + firstPageTitle: 'Go to first', // the title of first page button |
| 146 | + lastPageTitle: 'Go to last', // the title of last page button |
| 147 | + hideSizePerPage: true, // hide the size per page dorpdown |
| 148 | + hidePageListOnlyOnePage: true// hide pagination bar when only one page, default is false |
| 149 | +}) |
| 150 | +``` |
0 commit comments