Another tabs component, only this time... its DYNAMIC!

🧩 Custom Components
1

Lots of tab components out there and we now have the streamlit official tabs component. Great! If however you are like me and in need of a dynamic tabs component, one that you can create and close like you would browser tabs, then here you go.

Repository is located here

Part 1
General demonstration pt1

Part 2
General demonstration pt2

You can create a function that saves the tab titles and data users attach to them in some database and load them up when they visit the page:
Already have tabs saved

Also, mobile support which has a more compact feel and a bouncy add tab button
Mobile support

Possibilities:

  • Can add saved tab titles to be loaded up for users to view their previously saved tabs
  • Change the add button via material icons (google)
  • Can limit the number of tabs a user can create
  • Can change the design of the tabs
  • When there is only one tab, the close button does not appear. This is because upon creating a new tab, the tab is active but value is not passed onto streamlit. So create some code to direct users to click on the tab to view content. Wanted to limited the use of Streamlit’s api to send values to the python as it creates buggy behaviour in the component.
6 Likes
2

Woot woot :partying_face: need to try this!

Feel free to add it in the Streamlit Components - Community Tracker so we don’t lose track of it :slight_smile:

Have a nice day!
Fanilo

1 Like
3

Great component @Rushmore! Thanks for sharing it here! :balloon: :raised_hands:

Out of interest, is there a demo deployed anywhere?

Best,
Charly

1 Like
4

@andfanilo Glad you like it and its been put up.

@Charly_Wargnier Glad you like it. I have just deployed it (demo-app)

1 Like
5

Very nice! Thanks for sharing! :raised_hands:

1 Like
6

That’s another great component from @Rushmore.

I have a rookie question: If the end-user can create tabs at runtime, how can the application post matter/ data / some text within these on-the-fly created tab containers?

Cheers

2 Likes
7

Hello again ahaha thanks.

I will cook something up and post it later in the day.

Thanks

8

I have updated the package to be able to do this. Ver 0.0.3 also sends the deletedtab object so that you can remove it from your database. View the demo which has been updated.

Note that github is not updating the data.json file but in an environment where this is capable, like in your local environment, it should work properly.

9

Thanks @Rushmore, will check this out and give you a feedback as soon as I can.

God Bless :slight_smile:

1 Like
10

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