An example of a react bootstrap table that fetches the data asynchronously when navigating between pages and when changing the page size

remote react bootstrap table example

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;

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

@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?

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

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

In react , we know use the className instead of class. but , In bootstrap site code has class so in react error will occure. so we need to change lot of thing in code. so we have option for use bootstrap in react js without change code. it has already changed code for react developer.
https://debuggingsolution.blogspot.com/2021/04/use-bootstrap-in-reactjs.html