Add pagination to your app

Custom Components
1

This component is similar to mohamed-512’s ’ StepperBar’. Add pages to your app to filter through data or to chunk it up and only display segments in a static ‘Nav Page’.

The repository is here, the pypi page is here

A demo is here

pagination
pagination477×685 25.6 KB

I have tried to apply the st.experimental_get_query_params and st.experimental_set_query_params to try to apply page choice to the url but when I applied it to the component, it keep remounting and going back to the first page value, the same issue as was stated here though it seems the issue in this link has been fixed. I used this implementation. If anyone has any ideas on its implementation would be grateful if you shared how to implement it.

2 Likes
2

Thanks for sharing this component. I have a question regarding resetting the key value. How to reset the value of the key foo to any value I want.

3

Hey @Mohammad_Kalim_Akram glad you like it. I am a bit confused at your question:

  • Do you want to change the value ‘foo’ to something else or the value from ‘foo’?
  • ‘foo’ is just a random word I used to create the key for the component. You can change it to anything you desire and it will be stored in session_state.
  • If you are talking about changing the value of the key ‘foo’, this is determined by the value of the component. So when you click on the page number, the value of the key ‘foo’ changes.
4

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.