react-bootstrap-table2-paginator: How to save `currSizePerPage` during page navigation

[GSerjo]

Thank you! Really nice control 👍

Is it possible to save the selected size per page during page navigation? Looks like there's a property currSizePerPage, but I was not able to make it workable.

The issue is the selected page size is always sets to the default value during navigation.

Pagination.propTypes = {
  dataSize: PropTypes.number.isRequired,
  sizePerPageList: PropTypes.array.isRequired,
  currPage: PropTypes.number.isRequired,
  currSizePerPage: PropTypes.number.isRequired,
  onPageChange: PropTypes.func.isRequired,
  onSizePerPageChange: PropTypes.func.isRequired,
  pageStartIndex: PropTypes.number,
  paginationSize: PropTypes.number,
  showTotal: PropTypes.bool,
  paginationTotalRenderer: PropTypes.func,
  firstPageText: PropTypes.string,
  prePageText: PropTypes.string,
  nextPageText: PropTypes.string,
  lastPageText: PropTypes.string,
  nextPageTitle: PropTypes.string,
  prePageTitle: PropTypes.string,
  firstPageTitle: PropTypes.string,
  lastPageTitle: PropTypes.string,
  withFirstAndLast: PropTypes.bool,
  alwaysShowAllBtns: PropTypes.bool,
  hideSizePerPage: PropTypes.bool,
  hidePageListOnlyOnePage: PropTypes.bool
};

[kmb266]

I would just have a config file that has the user's preferences saved in it like so Ex. userConfig.js:

window.config = {
  userSizePerPage: 10,
} 

per https://www.w3schools.com/js/js_best_practices.asp you shouldn't use global variables to save the users preferences, but this config is helpful nonetheless. Then just import this file in where you want to set currSizePerPage and on update of page size update your userConfig.js file to reflect the user's preferences.

[GSerjo]

Hi kmb266,

Thank you for the replay, there's a bit different issue, let me describe it step by step.

For instance, we have to pages: Page1 and Page2. On the Page1 we have a table with paginations with values (10, 25, 50 and the default value is 10), so.

1. Open Page1 the pagination value = 10
2. User changes the value on 25 and goes to the Page2
3. Return to the Page1 and will see 10 instead of 25.

I know how to save the pagination value between going from Page1 to Page2 and back. but I don't know how to initialise/update react-bootstrap-table2-paginator, i.e to set pagination value.

[AllenFang]

@GSerjo I still not clear your issue...

You mean you want to change the size per page from 25 to 10 when user switch to first page?

[GSerjo]

@AllenFang yes. How to set size per page programmatically

[AllenFang]

@GSerjo check this:

https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationsizeperpage-number

Please tag me if it's not helpful to you, thanks