Horizontally scroll through multiple containers on a single page like page control or with left/right arrows

[Arushi_Agarwal]

Summary

On the top of my streamlit page, I have an aggrid table. I need a method to add multiple aggrid tables in the same section but let the user choose which one to see. Is there a way to do that without having a radio button/drop-down selection? May be left/right arrows as shown in the image (Prevent the Component from Remounting on Prop Change :: Streamlit Components Tutorial)

[mathcatsand]

You could use st.columns([1,8,1]) to create three columns. Put a ‘previous’ button in the first column and a ‘next’ button in the last column. Then you can manually choose what to display in the middle by tracking an index (modulo the length of your list of objects). Alternatively, just put two columns below your full-width display of the selection.

You could also use st.tabs if you are rendering something that causes some delay on rerun. In this instance though, note that tabs are purely an organizational object and the backend doesn’t know which one is being viewed. Hence, you would have to include a button on each tab for the user to declare “Use this one” and proceed.

[Arushi_Agarwal]

Thanks a lot for the suggestion @mathcatsand !! The first idea that you have mentioned seems more reasonable to me. I had the same thought but wanted to check if there is a custom component or some other feature that I don’t know about. I will try this and see if it works.