Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
An example of a react bootstrap table that fetches the data asynchronously when navigating between pages and when changing the page size
import React, {Component} from 'react';
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
import _ from 'lodash';
const dataTable = _.range(1, 60).map(x => ({id: x, name: `Name ${x}`, surname: `Surname ${x}`}));
// Simulates the call to the server to get the data
const fakeDataFetcher = {
fetch(page, size) {
return new Promise((resolve, reject) => {
resolve({items: _.slice(dataTable, (page-1)*size, ((page-1)*size) + size), total: dataTable.length});
});
}
};
class DataGrid extends Component {
constructor(props) {
super(props);
this.state = {
items: [],
totalSize: 0,
page: 1,
sizePerPage: 10,
};
this.fetchData = this.fetchData.bind(this);
this.handlePageChange = this.handlePageChange.bind(this);
this.handleSizePerPageChange = this.handleSizePerPageChange.bind(this);
}
componentDidMount() {
this.fetchData();
}
fetchData(page = this.state.page, sizePerPage = this.state.sizePerPage) {
fakeDataFetcher.fetch(page, sizePerPage)
.then(data => {
this.setState({items: data.items, totalSize: data.total, page, sizePerPage});
});
}
handlePageChange(page, sizePerPage) {
this.fetchData(page, sizePerPage);
}
handleSizePerPageChange(sizePerPage) {
// When changing the size per page always navigating to the first page
this.fetchData(1, sizePerPage);
}
render() {
const options = {
onPageChange: this.handlePageChange,
onSizePerPageList: this.handleSizePerPageChange,
page: this.state.page,
sizePerPage: this.state.sizePerPage,
};
return (
<BootstrapTable
data={this.state.items}
options={options}
fetchInfo={{dataTotalSize: this.state.totalSize}}
remote
pagination
striped
hover
condensed
>
<TableHeaderColumn dataField="id" isKey dataAlign="center">Id</TableHeaderColumn>
<TableHeaderColumn dataField="name" dataAlign="center">Name</TableHeaderColumn>
<TableHeaderColumn dataField="surname" dataAlign="center">Surname</TableHeaderColumn>
</BootstrapTable>
);
}
}
export default DataGrid;
@khuznain

This comment has been minimized.

Copy link

@khuznain khuznain commented Jul 27, 2018

Wouldn't be it cool if you can add also sorting and searching to your example !

@nani2say

This comment has been minimized.

Copy link

@nani2say nani2say commented Oct 15, 2018

@xabikos
looks like 'onSizePerPageList' event also generates onPageChange event.
If we load data on both the handler methods, this might be a problem.
Any comments?

@nani2say

This comment has been minimized.

Copy link

@nani2say nani2say commented Oct 15, 2018

Never mind. It is an issue reported here
AllenFang/react-bootstrap-table#1587

@fujisanto

This comment has been minimized.

Copy link

@fujisanto fujisanto commented Nov 14, 2018

pagination works but the search function doesn't work. is there a solution to keep the search working?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment