Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit ff31b2f

Browse files
fix #144
implement loading overlay
2 parents dfc0e15 + 32b187f commit ff31b2f

File tree

14 files changed

+766
-5
lines changed

14 files changed

+766
-5
lines changed

‎.travis.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,4 @@ before_install:
1717
- curl -o- -L https://yarnpkg.com/install.sh | bash -s
1818
- export PATH="$HOME/.yarn/bin:$PATH"
1919

20-
install: yarn install --pure-lockfile --ignore-scripts
20+
install: yarn install

‎docs/README.md

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88
* [columns (**required**)](#columns)
99

1010
#### Optional
11+
* [remote](#remote)
12+
* [loading](#loading)
1113
* [caption](#caption)
1214
* [striped](#striped)
1315
* [bordered](#bordered)
@@ -20,6 +22,7 @@
2022
* [rowEvents](#rowEvents)
2123
* [defaultSorted](#defaultSorted)
2224
* [pagination](#pagination)
25+
* [onTableChange](#onTableChange)
2326

2427
### <a name='keyField'>keyField(**required**) - [String]</a>
2528
Tells `react-bootstrap-table2` which column is unique.
@@ -30,6 +33,47 @@ Provides data for your table. It accepts a single Array object.
3033
### <a name='columns'>columns(**required**) - [Object]</a>
3134
Accepts a single Array object, please see [columns definition](./columns.md) for more detail.
3235

36+
### <a name='remote'>remote - [Bool | Object]</a>
37+
Default is `false`, if enable`remote`, you are suppose to handle all the table change events, like: pagination, insert, filtering etc.
38+
This is a chance that you can connect to your remote server or database to manipulate your data.
39+
For flexibility reason, you can control what functionality should be handled on remote via a object return:
40+
41+
```js
42+
remote={ { pagination: true } }
43+
```
44+
45+
In above case, only pagination will be handled on remote.
46+
47+
> Note: when remote is enable, you are suppose to give [`onTableChange`](#onTableChange) prop on `BootstrapTable`
48+
> It's the only way to communicate to your remote server and update table states.
49+
50+
### <a name='loading'>loading - [Bool]</a>
51+
Telling if table is loading or not, for example: waiting data loading, filtering etc. It's **only** valid when [`remote`](#remote) is enabled.
52+
When `loading` is `true`, `react-bootstrap-table` will attend to render a overlay on table via [`overlay`](#overlay) prop, if [`overlay`](#overlay) prop is not given, `react-bootstrap-table` will ignore the overlay rendering.
53+
54+
### <a name='overlay'>overlay - [Function]</a>
55+
`overlay` accept a factory funtion which should returning a higher order component. By default, `react-bootstrap-table-overlay` can be a good option for you:
56+
57+
```sh
58+
$ npm install react-bootstrap-table-overlay
59+
```
60+
```js
61+
import overlayFactory from 'react-bootstrap-table-overlay';
62+
63+
<BootstrapTable
64+
data={ data }
65+
columns={ columns }
66+
loading={ true } //only loading is true, react-bootstrap-table will render overlay
67+
overlay={ overlayFactory() }
68+
/>
69+
```
70+
71+
Actually, `react-bootstrap-table-overlay` is depends on [`react-loading-overlay`](https://github.com/derrickpelletier/react-loading-overlay) and `overlayFactory` just a factory function and you can pass any props which available for `react-loading-overlay`:
72+
73+
```js
74+
overlay={ overlayFactory({ spinner: true, background: 'rgba(192,192,192,0.3)' }) }
75+
```
76+
3377
### <a name='caption'>caption - [String | Node]</a>
3478
Same as HTML [caption tag](https://www.w3schools.com/TAgs/tag_caption.asp), you can set it as String or a React JSX.
3579

@@ -148,3 +192,22 @@ paginator({
148192
hidePageListOnlyOnePage: true// hide pagination bar when only one page, default is false
149193
})
150194
```
195+
196+
### <a name='onTableChange'>onTableChange - [Function]</a>
197+
This callback function will be called when [`remote`](#remote) enabled only.
198+
199+
```js
200+
const onTableChange = (newState) => {
201+
// handle any data change here
202+
}
203+
<BootstrapTable data={ data } columns={ columns } onTableChange={ onTableChange } />
204+
```
205+
206+
There's only one argument will be passed to `onTableChange`, `newState`:
207+
208+
```js
209+
{
210+
page, // newest page
211+
sizePerPage //newest sizePerPage
212+
}
213+
```

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

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

33
const sourcePath = path.join(__dirname, '../../react-bootstrap-table2/src');
44
const paginationSourcePath = path.join(__dirname, '../../react-bootstrap-table2-paginator/src');
5+
const overlaySourcePath = path.join(__dirname, '../../react-bootstrap-table2-overlay/src');
56
const sourceStylePath = path.join(__dirname, '../../react-bootstrap-table2/style');
67
const paginationStylePath = path.join(__dirname, '../../react-bootstrap-table2-paginator/style');
78
const storyPath = path.join(__dirname, '../stories');
@@ -25,7 +26,7 @@ const loaders = [{
2526
test: /\.js?$/,
2627
use: ['babel-loader'],
2728
exclude: /node_modules/,
28-
include: [sourcePath, paginationSourcePath, storyPath],
29+
include: [sourcePath, paginationSourcePath, overlaySourcePath,storyPath],
2930
}, {
3031
test: /\.css$/,
3132
use: ['style-loader', 'css-loader'],
Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
/* eslint react/no-multi-comp: 0 */
2+
import React from 'react';
3+
import PropTypes from 'prop-types';
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 RemotePagination = ({ data, page, sizePerPage, onTableChange, totalSize }) => (
27+
<div>
28+
<BootstrapTable
29+
remote
30+
keyField="id"
31+
data={ data }
32+
columns={ columns }
33+
pagination={ paginator({ page, sizePerPage, totalSize }) }
34+
onTableChange={ onTableChange }
35+
/>
36+
<Code>{ sourceCode }</Code>
37+
</div>
38+
);
39+
40+
class Container extends React.Component {
41+
constructor(props) {
42+
super(props);
43+
this.state = {
44+
page: 1,
45+
data: products.slice(0, 10),
46+
sizePerPage: 10
47+
};
48+
}
49+
50+
handleTableChange = ({ page, sizePerPage }) => {
51+
const currentIndex = (page - 1) * sizePerPage;
52+
setTimeout(() => {
53+
this.setState(() => ({
54+
page,
55+
data: products.slice(currentIndex, currentIndex + sizePerPage),
56+
sizePerPage
57+
}));
58+
}, 2000);
59+
}
60+
61+
render() {
62+
const { data, sizePerPage, page } = this.state;
63+
return (
64+
<RemotePagination
65+
data={ data }
66+
page={ page }
67+
sizePerPage={ sizePerPage }
68+
totalSize={ products.length }
69+
onTableChange={ this.handleTableChange }
70+
/>
71+
);
72+
}
73+
}
74+
`;
75+
76+
const NoDataIndication = () => (
77+
<div className="spinner">
78+
<div className="rect1" />
79+
<div className="rect2" />
80+
<div className="rect3" />
81+
<div className="rect4" />
82+
<div className="rect5" />
83+
</div>
84+
);
85+
86+
const Table = ({ data, page, sizePerPage, onTableChange, totalSize }) => (
87+
<div>
88+
<BootstrapTable
89+
remote
90+
keyField="id"
91+
data={ data }
92+
columns={ columns }
93+
pagination={ paginator({ page, sizePerPage, totalSize }) }
94+
onTableChange={ onTableChange }
95+
noDataIndication={ () => <NoDataIndication /> }
96+
/>
97+
<Code>{ sourceCode }</Code>
98+
</div>
99+
);
100+
101+
Table.propTypes = {
102+
data: PropTypes.array.isRequired,
103+
page: PropTypes.number.isRequired,
104+
totalSize: PropTypes.number.isRequired,
105+
sizePerPage: PropTypes.number.isRequired,
106+
onTableChange: PropTypes.func.isRequired
107+
};
108+
109+
class EmptyTableOverlay extends React.Component {
110+
constructor(props) {
111+
super(props);
112+
this.state = {
113+
page: 1,
114+
data: products.slice(0, 10),
115+
sizePerPage: 10
116+
};
117+
}
118+
119+
handleTableChange = ({ page, sizePerPage }) => {
120+
const currentIndex = (page - 1) * sizePerPage;
121+
setTimeout(() => {
122+
this.setState(() => ({
123+
page,
124+
data: products.slice(currentIndex, currentIndex + sizePerPage),
125+
sizePerPage
126+
}));
127+
}, 3000);
128+
this.setState(() => ({ data: [] }));
129+
}
130+
131+
render() {
132+
const { data, sizePerPage, page } = this.state;
133+
return (
134+
<Table
135+
data={ data }
136+
page={ page }
137+
sizePerPage={ sizePerPage }
138+
totalSize={ products.length }
139+
onTableChange={ this.handleTableChange }
140+
/>
141+
);
142+
}
143+
}
144+
145+
export default EmptyTableOverlay;

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /