0

I am using react-bootstrap-table2 pagination in my react application.I am using a state to update the sizePerPage dynamically.But it is not working. When I console the state, I am able to see the change, but it is not updating the pagination.

Here is my code:
const [sizePerPage,setSizePerPage] = useState(10);
const pagination = paginationFactory({
page:1,
sizePerPage:sizePerPage,
.......
onPageChange:function(page,sizePerPage),
onSizePerPageChange:function(page,sizePerPage)
});

Here I am changing the state:

<select onChange={e=>setSizePerPage(e.target.value)}>
<option value={10}>10</option>
<option value={25}>25</option>
<option value={50}>50</option>
</select>

Rest of the things are working fine.

ajo
  • 15
  • 1
  • 1
  • 7

1 Answers1

0

I think you have a typo in your code.

onSizePerPageChange:function(page,sizePerpage)

Should be:

onSizePerPageChange:function(page,sizePerPage)

If there is no reason you need a custom dropdown list you can use the built-in feature by doing this:

 const pagination = paginationFactory({

    sizePerPageList: [{
      text: '10', value: 10
    }, {
      text: '25', value: 25
    }, {
      text: '50', value: 50
    }],
  });
God is Love
  • 66
  • 6