Skip to content

Commit 269ffb3

Browse files
chunming-cchunming-c
committed
resolve conflict
2 parents af095c0 + 47f86df commit 269ffb3

39 files changed

+2888
-293
lines changed

‎docs/README.md‎

Lines changed: 46 additions & 0 deletions
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.
@@ -102,3 +103,48 @@ const defaultSorted = [{
102103
order: 'desc' // desc or asc
103104
}];
104105
```
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+
```

‎enzyme-setup.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import Adapter from 'enzyme-adapter-react-16';
2+
import { configure } from 'enzyme';
3+
4+
const configureEnzyme = () => {
5+
configure({ adapter: new Adapter() });
6+
};
7+
8+
configureEnzyme();

‎package.json‎

Lines changed: 39 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -24,45 +24,46 @@
2424
},
2525
"homepage": "https://github.com/react-bootstrap-table/react-bootstrap-table2#readme",
2626
"devDependencies": {
27-
"babel-core": "^6.25.0",
28-
"babel-eslint": "^7.2.3",
29-
"babel-jest": "^20.0.3",
30-
"babel-loader": "^7.1.1",
31-
"babel-preset-es2015": "^6.24.1",
32-
"babel-preset-react": "^6.24.1",
33-
"babel-preset-stage-0": "^6.24.1",
34-
"babel-register": "^6.24.1",
35-
"css-loader": "^0.28.1",
36-
"enzyme": "^2.9.1",
37-
"eslint": "^4.5.0",
27+
"babel-core": "6.25.0",
28+
"babel-eslint": "7.2.3",
29+
"babel-jest": "20.0.3",
30+
"babel-loader": "7.1.1",
31+
"babel-preset-es2015": "6.24.1",
32+
"babel-preset-react": "6.24.1",
33+
"babel-preset-stage-0": "6.24.1",
34+
"babel-register": "6.24.1",
35+
"css-loader": "0.28.1",
36+
"enzyme": "3.1.1",
37+
"enzyme-adapter-react-16": "1.0.4",
38+
"eslint": "4.5.0",
3839
"eslint-config-airbnb": "15.1.0",
39-
"eslint-loader": "^1.9.0",
40-
"eslint-plugin-import": "^2.7.0",
40+
"eslint-loader": "1.9.0",
41+
"eslint-plugin-import": "2.7.0",
4142
"eslint-plugin-jsx-a11y": "5.1.1",
42-
"eslint-plugin-react": "^7.2.1",
43-
"html-webpack-plugin": "^2.30.1",
44-
"jest": "^20.0.4",
45-
"jsdom": "^11.2.0",
46-
"jsdom-global": "^3.0.2",
47-
"lerna": "^2.0.0",
48-
"node-sass": "^4.5.3",
49-
"react-test-renderer": "^15.6.1",
50-
"sass-loader": "^6.0.6",
51-
"sinon": "^3.2.1",
52-
"style-loader": "^0.17.0",
53-
"webpack": "^3.5.4",
54-
"webpack-dev-server": "^2.7.1"
43+
"eslint-plugin-react": "7.2.1",
44+
"html-webpack-plugin": "2.30.1",
45+
"jest": "20.0.4",
46+
"jsdom": "11.2.0",
47+
"jsdom-global": "3.0.2",
48+
"lerna": "2.0.0",
49+
"node-sass": "4.5.3",
50+
"react-test-renderer": "16.0.0",
51+
"sass-loader": "6.0.6",
52+
"sinon": "3.2.1",
53+
"style-loader": "0.17.0",
54+
"webpack": "3.5.4",
55+
"webpack-dev-server": "2.7.1"
5556
},
5657
"dependencies": {
57-
"classnames": "^2.2.5",
58-
"prop-types": "^15.5.10",
59-
"react": "^15.6.1",
60-
"react-dom": "^15.6.1"
58+
"classnames": "2.2.5",
59+
"prop-types": "15.5.10",
60+
"react": "16.0.0",
61+
"react-dom": "16.0.0"
6162
},
6263
"peerDependencies": {
6364
"prop-types": "^15.0.0",
64-
"react": "^15.0.0",
65-
"react-dom": "^15.0.0"
65+
"react": "^16.0.0",
66+
"react-dom": "^16.0.0"
6667
},
6768
"jest": {
6869
"collectCoverageFrom": [
@@ -71,6 +72,12 @@
7172
"roots": [
7273
"<rootDir>/packages"
7374
],
75+
"setupFiles": [
76+
"<rootDir>/enzyme-setup.js"
77+
],
78+
"modulePaths": [
79+
"<rootDir>/packages/react-bootstrap-table2"
80+
],
7481
"testEnvironment": "node",
7582
"testMatch": [
7683
"**/test/**/*.test.js"

‎packages/react-bootstrap-table2-example/.storybook/webpack.config.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
const path = require('path');
22

33
const sourcePath = path.join(__dirname, '../../react-bootstrap-table2/src');
4+
const paginationSourcePath = path.join(__dirname, '../../react-bootstrap-table2-paginator/src');
45
const sourceStylePath = path.join(__dirname, '../../react-bootstrap-table2/style');
6+
const paginationStylePath = path.join(__dirname, '../../react-bootstrap-table2-paginator/style');
57
const storyPath = path.join(__dirname, '../stories');
68
const examplesPath = path.join(__dirname, '../examples');
79
const srcPath = path.join(__dirname, '../src');
@@ -23,14 +25,14 @@ const loaders = [{
2325
test: /\.js?$/,
2426
use: ['babel-loader'],
2527
exclude: /node_modules/,
26-
include: [sourcePath, storyPath],
28+
include: [sourcePath, paginationSourcePath, storyPath],
2729
}, {
2830
test: /\.css$/,
2931
use: ['style-loader', 'css-loader'],
3032
}, {
3133
test: /\.scss$/,
3234
use: ['style-loader', 'css-loader', 'sass-loader'],
33-
include: [storyPath, sourceStylePath],
35+
include: [storyPath, sourceStylePath, paginationStylePath],
3436
}, {
3537
test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/,
3638
loader: 'url-loader?limit=100000',

‎packages/react-bootstrap-table2-example/examples/pagination/custom-pagination.js‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
/* eslint react/prefer-stateless-function: 0 */
2+
import React from 'react';
3+
4+
import BootstrapTable from 'react-bootstrap-table2';
5+
import paginator from 'react-bootstrap-table2-paginator';
6+
import Code from 'components/common/code-block';
7+
import { productsGenerator } from 'utils/common';
8+
9+
const products = productsGenerator(87);
10+
11+
const columns = [{
12+
dataField: 'id',
13+
text: 'Product ID'
14+
}, {
15+
dataField: 'name',
16+
text: 'Product Name'
17+
}, {
18+
dataField: 'price',
19+
text: 'Product Price'
20+
}];
21+
22+
const sourceCode = `\
23+
import BootstrapTable from 'react-bootstrap-table2';
24+
import paginator from 'react-bootstrap-table2-paginator';
25+
// ...
26+
27+
const options = {
28+
paginationSize: 4,
29+
pageStartIndex: 0,
30+
// alwaysShowAllBtns: true, // Always show next and previous button
31+
// withFirstAndLast: false, // Hide the going to First and Last page button
32+
// hideSizePerPage: true, // Hide the sizePerPage dropdown always
33+
// hidePageListOnlyOnePage: true, // Hide the pagination list when only one page
34+
firstPageText: 'First',
35+
prePageText: 'Back',
36+
nextPageText: 'Next',
37+
lastPageText: 'Last',
38+
nextPageTitle: 'First page',
39+
prePageTitle: 'Pre page',
40+
firstPageTitle: 'Next page',
41+
lastPageTitle: 'Last page',
42+
sizePerPageList: [{
43+
text: '5', value: 5
44+
}, {
45+
text: '10', value: 10
46+
}, {
47+
text: 'All', value: products.length
48+
}] // A numeric array is also available. the purpose of above example is custom the text
49+
};
50+
51+
<BootstrapTable keyField='id' data={ products } columns={ columns } pagination={ paginator(options) } />
52+
`;
53+
const options = {
54+
paginationSize: 4,
55+
pageStartIndex: 0,
56+
// alwaysShowAllBtns: true // Always show next and previous button
57+
// withFirstAndLast: false // Hide the going to First and Last page button
58+
// hideSizePerPage: true, // Hide the sizePerPage dropdown always
59+
// hidePageListOnlyOnePage: true, // Hide the pagination list when only one page
60+
firstPageText: 'First',
61+
prePageText: 'Back',
62+
nextPageText: 'Next',
63+
lastPageText: 'Last',
64+
nextPageTitle: 'First page',
65+
prePageTitle: 'Pre page',
66+
firstPageTitle: 'Next page',
67+
lastPageTitle: 'Last page',
68+
sizePerPageList: [{
69+
text: '5', value: 5
70+
}, {
71+
text: '10', value: 10
72+
}, {
73+
text: 'All', value: products.length
74+
}] // A numeric array is also available. the purpose of above example is custom the text
75+
};
76+
77+
export default () => (
78+
<div>
79+
<BootstrapTable keyField="id" data={ products } columns={ columns } pagination={ paginator(options) } />
80+
<Code>{ sourceCode }</Code>
81+
</div>
82+
);

‎packages/react-bootstrap-table2-example/examples/pagination/index.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
/* eslint react/prefer-stateless-function: 0 */
2+
import React from 'react';
3+
4+
import BootstrapTable from 'react-bootstrap-table2';
5+
import paginator from 'react-bootstrap-table2-paginator';
6+
import Code from 'components/common/code-block';
7+
import { productsGenerator } from 'utils/common';
8+
9+
const products = productsGenerator(87);
10+
11+
const columns = [{
12+
dataField: 'id',
13+
text: 'Product ID'
14+
}, {
15+
dataField: 'name',
16+
text: 'Product Name'
17+
}, {
18+
dataField: 'price',
19+
text: 'Product Price'
20+
}];
21+
22+
const sourceCode = `\
23+
import BootstrapTable from 'react-bootstrap-table2';
24+
import paginator from 'react-bootstrap-table2-paginator';
25+
// ...
26+
const columns = [{
27+
dataField: 'id',
28+
text: 'Product ID'
29+
}, {
30+
dataField: 'name',
31+
text: 'Product Name'
32+
}, {
33+
dataField: 'price',
34+
text: 'Product Price'
35+
}];
36+
37+
<BootstrapTable keyField='id' data={ products } columns={ columns } pagination={ paginator() } />
38+
`;
39+
40+
export default () => (
41+
<div>
42+
<BootstrapTable keyField="id" data={ products } columns={ columns } pagination={ paginator() } />
43+
<Code>{ sourceCode }</Code>
44+
</div>
45+
);

‎packages/react-bootstrap-table2-example/examples/pagination/pagination-hooks.js‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
/* eslint react/prefer-stateless-function: 0 */
2+
/* eslint no-console: 0 */
3+
import React from 'react';
4+
5+
import BootstrapTable from 'react-bootstrap-table2';
6+
import paginator from 'react-bootstrap-table2-paginator';
7+
import Code from 'components/common/code-block';
8+
import { productsGenerator } from 'utils/common';
9+
10+
const products = productsGenerator(87);
11+
12+
const columns = [{
13+
dataField: 'id',
14+
text: 'Product ID'
15+
}, {
16+
dataField: 'name',
17+
text: 'Product Name'
18+
}, {
19+
dataField: 'price',
20+
text: 'Product Price'
21+
}];
22+
23+
const sourceCode = `\
24+
import BootstrapTable from 'react-bootstrap-table2';
25+
import paginator from 'react-bootstrap-table2-paginator';
26+
// ...
27+
const columns = [{
28+
dataField: 'id',
29+
text: 'Product ID'
30+
}, {
31+
dataField: 'name',
32+
text: 'Product Name'
33+
}, {
34+
dataField: 'price',
35+
text: 'Product Price'
36+
}];
37+
38+
const options = {
39+
onSizePerPageChange: (sizePerPage, page) => {
40+
console.log('Size per page change!!!');
41+
console.log('Newest size per page:' + sizePerPage);
42+
console.log('Newest page:' + page);
43+
},
44+
onPageChange: (page, sizePerPage) => {
45+
console.log('Page change!!!');
46+
console.log('Newest size per page:' + sizePerPage);
47+
console.log('Newest page:' + page);
48+
}
49+
};
50+
51+
<BootstrapTable
52+
keyField="id"
53+
data={ products }
54+
columns={ columns }
55+
pagination={ paginator(options) }
56+
/>
57+
`;
58+
59+
const options = {
60+
onSizePerPageChange: (sizePerPage, page) => {
61+
console.log('Size per page change!!!');
62+
console.log(`Newest size per page: ${sizePerPage}`);
63+
console.log(`Newest page: ${page}`);
64+
},
65+
onPageChange: (page, sizePerPage) => {
66+
console.log('Page change!!!');
67+
console.log(`Newest size per page: ${sizePerPage}`);
68+
console.log(`Newest page: ${page}`);
69+
}
70+
};
71+
72+
export default () => (
73+
<div>
74+
<BootstrapTable
75+
keyField="id"
76+
data={ products }
77+
columns={ columns }
78+
pagination={ paginator(options) }
79+
/>
80+
<Code>{ sourceCode }</Code>
81+
</div>
82+
);

0 commit comments

Comments
 (0)