Skip to content

Commit 47f86df

Browse files
authored
patch docs for pagination (#139)
1 parent 3c88364 commit 47f86df

File tree

1 file changed

+47
-1
lines changed

1 file changed

+47
-1
lines changed

docs/README.md

Lines changed: 47 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
* [rowClasses](#rowClasses)
2020
* [rowEvents](#rowEvents)
2121
* [defaultSorted](#defaultSorted)
22+
* [pagination](#pagination)
2223

2324
### <a name='keyField'>keyField(**required**) - [String]</a>
2425
Tells `react-bootstrap-table2` which column is unique.
@@ -101,4 +102,49 @@ const defaultSorted = [{
101102
dataField: 'name', // if dataField is not match to any column you defined, it will be ignored.
102103
order: 'desc' // desc or asc
103104
}];
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

Comments
 (0)