react-bootstrap-table - own number of pagination items

Question

I am using BootstrapTable from react-bootstrap-table and taking data from external API. Each time I get an object of 30 items. Therefore the pageSize is 30 but I get the totalPages variable from API which is let's say 6. Unfortunately, the table data is each time 30 so there is just one page

I would like to tell the table how many pages I want to have - 6 - and each time onClick in the pagination item I will call another API link. How can I achieve this?

  onPageChange = page => {
    alert(`Let's go to page: ${page}`);
  };

  render() {
    const options = {
      onPageChange: this.onPageChange,
      hideSizePerPage: true,
      page: 1,
      sizePerPage: this.props.pageSize,
      paginationSize: 6,
    };
    return (
      <Card>
        <CardHeader>
          <h1> Sales report</h1>
        </CardHeader>
        <CardBody>
          <BootstrapTable
            data={this.props.sales}
            version="4"
            striped
            hover
            pagination
            options={options}
            keyField="Type"
          >
            {tableHeaders.map((header, index) => (
              <TableHeaderColumn key={index} dataField={header}>
                {header}
              </TableHeaderColumn>
            ))}
          </BootstrapTable>
        </CardBody>
      </Card>
    );
  }

Answer 1

You have to pass options object and specify exact number of items and callback by clicking on each page.

For example:

class PaginationHookTable extends React.Component {
  constructor(props) {
    super(props);

    this.options = {
      onPageChange: this.onPageChange,
      sizePerPage: 6,
    };

    this.state = {
        data: [],
    }
  }

  onPageChange = (page, sizePerPage) => {
    alert(`page: ${page}, sizePerPage: ${sizePerPage}`);

    // make another url
    const url = `http://someurl.com/api/endpoint?page=${page}`;

    // make request and update state with new data
    // axios just for example
    axios.get(url).then(resp => this.setState({ data: resp });
  }

  render() {
    return (
      <div>
        <BootstrapTable
          data={this.state.data}
          options={this.options}
          remote={true}

          // you need to use your number of total from backend
          // instead of 100 ofc
          fetchInfo={{ dataTotalSize: 100 }}
          pagination>
          <TableHeaderColumn dataField='id'>Product ID</TableHeaderColumn>
          <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
          <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
        </BootstrapTable>
      </div>
    );
  }
}

UPDATE: You have to pass additional props: remote={true} and fetchInfo: { dataTotalSize: 100 } to specify total number of items.

See more here.