Skip to content

Commit e14c596

Browse files
AllenFangAllenFang
committed
refine remote examples
1 parent 5cbeae7 commit e14c596

File tree

4 files changed

+319
-4
lines changed

4 files changed

+319
-4
lines changed

‎packages/react-bootstrap-table2-example/examples/remote/remote-all.js‎

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
/* eslint guard-for-in: 0 */
2+
/* eslint no-restricted-syntax: 0 */
3+
import React from 'react';
4+
import PropTypes from 'prop-types';
5+
import BootstrapTable from 'react-bootstrap-table2';
6+
import paginator from 'react-bootstrap-table2-paginator';
7+
import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter';
8+
import Code from 'components/common/code-block';
9+
import { productsGenerator } from 'utils/common';
10+
11+
const products = productsGenerator(87);
12+
13+
const columns = [{
14+
dataField: 'id',
15+
text: 'Product ID'
16+
}, {
17+
dataField: 'name',
18+
text: 'Product Name',
19+
filter: textFilter()
20+
}, {
21+
dataField: 'price',
22+
text: 'Product Price',
23+
filter: textFilter()
24+
}];
25+
26+
const sourceCode = `\
27+
import BootstrapTable from 'react-bootstrap-table2';
28+
import paginator from 'react-bootstrap-table2-paginator';
29+
import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter';
30+
// ...
31+
32+
const columns = [{
33+
dataField: 'id',
34+
text: 'Product ID'
35+
}, {
36+
dataField: 'name',
37+
text: 'Product Name',
38+
filter: textFilter()
39+
}, {
40+
dataField: 'price',
41+
text: 'Product Price',
42+
filter: textFilter()
43+
}];
44+
45+
const RemoteAll = ({ data, page, sizePerPage, onTableChange, totalSize }) => (
46+
<div>
47+
<BootstrapTable
48+
remote={ { pagination: true } }
49+
keyField="id"
50+
data={ data }
51+
columns={ columns }
52+
filter={ filterFactory() }
53+
pagination={ paginator({ page, sizePerPage, totalSize }) }
54+
onTableChange={ onTableChange }
55+
/>
56+
<Code>{ sourceCode }</Code>
57+
</div>
58+
);
59+
60+
RemoteAll.propTypes = {
61+
data: PropTypes.array.isRequired,
62+
page: PropTypes.number.isRequired,
63+
totalSize: PropTypes.number.isRequired,
64+
sizePerPage: PropTypes.number.isRequired,
65+
onTableChange: PropTypes.func.isRequired
66+
};
67+
68+
class Container extends React.Component {
69+
constructor(props) {
70+
super(props);
71+
this.state = {
72+
page: 1,
73+
data: products.slice(0, 10),
74+
totalSize: products.length,
75+
sizePerPage: 10
76+
};
77+
this.handleTableChange = this.handleTableChange.bind(this);
78+
}
79+
80+
handleTableChange = (type, { page, sizePerPage, filters }) => {
81+
const currentIndex = (page - 1) * sizePerPage;
82+
setTimeout(() => {
83+
const result = products.filter((row) => {
84+
let valid = true;
85+
for (const dataField in filters) {
86+
const { filterVal, filterType, comparator } = filters[dataField];
87+
88+
if (filterType === 'TEXT') {
89+
if (comparator === Comparator.LIKE) {
90+
valid = row[dataField].toString().indexOf(filterVal) > -1;
91+
} else {
92+
valid = row[dataField] === filterVal;
93+
}
94+
}
95+
if (!valid) break;
96+
}
97+
return valid;
98+
});
99+
this.setState(() => ({
100+
page,
101+
data: result.slice(currentIndex, currentIndex + sizePerPage),
102+
totalSize: result.length,
103+
sizePerPage
104+
}));
105+
}, 2000);
106+
}
107+
108+
render() {
109+
const { data, sizePerPage, page } = this.state;
110+
return (
111+
<RemoteAll
112+
data={ data }
113+
page={ page }
114+
sizePerPage={ sizePerPage }
115+
totalSize={ this.state.totalSize }
116+
onTableChange={ this.handleTableChange }
117+
/>
118+
);
119+
}
120+
}
121+
`;
122+
123+
const RemoteAll = ({ data, page, sizePerPage, onTableChange, totalSize }) => (
124+
<div>
125+
<h3>When <code>remote.pagination</code> is enabled, the filtering,
126+
sorting and searching will also change to remote mode automatically</h3>
127+
<BootstrapTable
128+
remote={ { pagination: true } }
129+
keyField="id"
130+
data={ data }
131+
columns={ columns }
132+
filter={ filterFactory() }
133+
pagination={ paginator({ page, sizePerPage, totalSize }) }
134+
onTableChange={ onTableChange }
135+
/>
136+
<Code>{ sourceCode }</Code>
137+
</div>
138+
);
139+
140+
RemoteAll.propTypes = {
141+
data: PropTypes.array.isRequired,
142+
page: PropTypes.number.isRequired,
143+
totalSize: PropTypes.number.isRequired,
144+
sizePerPage: PropTypes.number.isRequired,
145+
onTableChange: PropTypes.func.isRequired
146+
};
147+
148+
class Container extends React.Component {
149+
constructor(props) {
150+
super(props);
151+
this.state = {
152+
page: 1,
153+
data: products.slice(0, 10),
154+
totalSize: products.length,
155+
sizePerPage: 10
156+
};
157+
this.handleTableChange = this.handleTableChange.bind(this);
158+
}
159+
160+
handleTableChange = (type, { page, sizePerPage, filters }) => {
161+
const currentIndex = (page - 1) * sizePerPage;
162+
setTimeout(() => {
163+
const result = products.filter((row) => {
164+
let valid = true;
165+
for (const dataField in filters) {
166+
const { filterVal, filterType, comparator } = filters[dataField];
167+
168+
if (filterType === 'TEXT') {
169+
if (comparator === Comparator.LIKE) {
170+
valid = row[dataField].toString().indexOf(filterVal) > -1;
171+
} else {
172+
valid = row[dataField] === filterVal;
173+
}
174+
}
175+
if (!valid) break;
176+
}
177+
return valid;
178+
});
179+
this.setState(() => ({
180+
page,
181+
data: result.slice(currentIndex, currentIndex + sizePerPage),
182+
totalSize: result.length,
183+
sizePerPage
184+
}));
185+
}, 2000);
186+
}
187+
188+
render() {
189+
const { data, sizePerPage, page } = this.state;
190+
return (
191+
<RemoteAll
192+
data={ data }
193+
page={ page }
194+
sizePerPage={ sizePerPage }
195+
totalSize={ this.state.totalSize }
196+
onTableChange={ this.handleTableChange }
197+
/>
198+
);
199+
}
200+
}
201+
202+
export default Container;

‎packages/react-bootstrap-table2-example/examples/remote/remote-filter.js‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
/* eslint guard-for-in: 0 */
2+
/* eslint no-restricted-syntax: 0 */
3+
import React from 'react';
4+
import PropTypes from 'prop-types';
5+
import BootstrapTable from 'react-bootstrap-table2';
6+
import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter';
7+
import Code from 'components/common/code-block';
8+
import { productsGenerator } from 'utils/common';
9+
10+
const products = productsGenerator(17);
11+
12+
const columns = [{
13+
dataField: 'id',
14+
text: 'Product ID'
15+
}, {
16+
dataField: 'name',
17+
text: 'Product Name',
18+
filter: textFilter()
19+
}, {
20+
dataField: 'price',
21+
text: 'Product Price',
22+
filter: textFilter()
23+
}];
24+
25+
const sourceCode = `\
26+
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
27+
28+
const columns = [{
29+
dataField: 'id',
30+
text: 'Product ID',
31+
}, {
32+
dataField: 'name',
33+
text: 'Product Name',
34+
filter: textFilter()
35+
}, {
36+
dataField: 'price',
37+
text: 'Product Price',
38+
filter: textFilter()
39+
}];
40+
41+
<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
42+
`;
43+
44+
const RemoteFilter = props => (
45+
<div>
46+
<BootstrapTable
47+
remote={ { filter: true } }
48+
keyField="id"
49+
data={ props.data }
50+
columns={ columns }
51+
filter={ filterFactory() }
52+
onTableChange={ props.onTableChange }
53+
/>
54+
<Code>{ sourceCode }</Code>
55+
</div>
56+
);
57+
58+
RemoteFilter.propTypes = {
59+
data: PropTypes.array.isRequired,
60+
onTableChange: PropTypes.func.isRequired
61+
};
62+
63+
class Container extends React.Component {
64+
constructor(props) {
65+
super(props);
66+
this.state = {
67+
data: products
68+
};
69+
}
70+
71+
handleTableChange = (type, { filters }) => {
72+
setTimeout(() => {
73+
const result = products.filter((row) => {
74+
let valid = true;
75+
for (const dataField in filters) {
76+
const { filterVal, filterType, comparator } = filters[dataField];
77+
78+
if (filterType === 'TEXT') {
79+
if (comparator === Comparator.LIKE) {
80+
valid = row[dataField].toString().indexOf(filterVal) > -1;
81+
} else {
82+
valid = row[dataField] === filterVal;
83+
}
84+
}
85+
if (!valid) break;
86+
}
87+
return valid;
88+
});
89+
this.setState(() => ({
90+
data: result
91+
}));
92+
}, 2000);
93+
}
94+
95+
render() {
96+
return (
97+
<RemoteFilter
98+
data={ this.state.data }
99+
onTableChange={ this.handleTableChange }
100+
/>
101+
);
102+
}
103+
}
104+
105+
export default Container;

‎packages/react-bootstrap-table2-example/examples/pagination/remote-pagination.js‎ renamed to ‎packages/react-bootstrap-table2-example/examples/remote/remote-pagination.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ class Container extends React.Component {
105105
};
106106
}
107107

108-
handleTableChange = ({ page, sizePerPage }) => {
108+
handleTableChange = (type, { page, sizePerPage }) => {
109109
const currentIndex = (page - 1) * sizePerPage;
110110
setTimeout(() => {
111111
this.setState(() => ({

‎packages/react-bootstrap-table2-example/stories/index.js‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -82,12 +82,16 @@ import HideSelectionColumnTable from 'examples/row-selection/hide-selection-colu
8282
import PaginationTable from 'examples/pagination';
8383
import PaginationHooksTable from 'examples/pagination/pagination-hooks';
8484
import CustomPaginationTable from 'examples/pagination/custom-pagination';
85-
import RemotePaginationTable from 'examples/pagination/remote-pagination';
8685

8786
// loading overlay
8887
import EmptyTableOverlay from 'examples/loading-overlay/empty-table-overlay';
8988
import TableOverlay from 'examples/loading-overlay/table-overlay';
9089

90+
// remote
91+
import RemoteFilter from 'examples/remote/remote-filter';
92+
import RemotePaginationTable from 'examples/remote/remote-pagination';
93+
import RemoteAll from 'examples/remote/remote-all';
94+
9195
// css style
9296
import 'bootstrap/dist/css/bootstrap.min.css';
9397
import 'stories/stylesheet/tomorrow.min.css';
@@ -179,9 +183,13 @@ storiesOf('Row Selection', module)
179183
storiesOf('Pagination', module)
180184
.add('Basic Pagination Table', () => <PaginationTable />)
181185
.add('Pagination Hooks', () => <PaginationHooksTable />)
182-
.add('Custom Pagination', () => <CustomPaginationTable />)
183-
.add('Remote Pagination', () => <RemotePaginationTable />);
186+
.add('Custom Pagination', () => <CustomPaginationTable />);
184187

185188
storiesOf('EmptyTableOverlay', module)
186189
.add('Empty Table Overlay', () => <EmptyTableOverlay />)
187190
.add('Table Overlay', () => <TableOverlay />);
191+
192+
storiesOf('Remote', module)
193+
.add('Remote Filter', () => <RemoteFilter />)
194+
.add('Remote Pagination', () => <RemotePaginationTable />)
195+
.add('Remote All', () => <RemoteAll />);

0 commit comments

Comments
 (0)