how to load data in react-bootstrap-table partially by using pagination

Question

I am getting data partially from backend (let's say 10 rows per api call) and I want to call the api on page change but I am unable to find any relevant option in react-bootstrap-table pagination. Is there any solution to this problem?

Ryan Zeelie · Accepted Answer · 2022-07-15 13:10:00Z

1

"react-bootstrap-table2-paginator" takes a prop of onPageChange where you can do what you want with the page number https://codesandbox.io/s/react-bootstrap-table-paging-example-forked-rqhyd5

  <BootstrapTable
        bootstrap4
        keyField="id"
        data={products}
        columns={columns}
        pagination={paginationFactory({ sizePerPage: 5, onPageChange:(page)=>console.log("DB CALL with page" + page) })}
      
      />

answered Jul 15, 2022 at 13:10

Ryan Zeelie

1,5307 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ryan Zeelie Over a year ago

ps: Check the console on codesandbox link

Uğur Okur · Accepted Answer · 2023-07-10 10:56:06Z

0

if you dont want to see pagination selectbox , you can add sizePerPageList property in paginationFactory settings,

form example;

 <BootstrapTable
    bootstrap4
    keyField="id"
    data={products}
    columns={columns}
    pagination={paginationFactory({
      sizePerPageList: [
        {
          text: "5",
          value: 5
        }
      ],
      onPageChange: (page) => console.log("DB CALL with page" + page)
    })}
  />

answered Jul 10, 2023 at 10:56

Uğur Okur

112 bronze badges

Collectives™ on Stack Overflow

how to load data in react-bootstrap-table partially by using pagination

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related