Add option to dynamically add and remove TabPanes to TabbedContent widget

[Jayy001]

Hi there, I think it'd be super useful to (as the title suggests) be able to add and remove TabPanes during runtime.

The only resource that I could find was this GitHub discussion which provided some code with absolutely no instructions on how to use it and needed some tweaking to get working. Here's a current working implementation of adding tabs.

class DynamicTabbedContent(TabbedContent):
   def __init__(self, *titles: TextType):
       super().__init__(*titles)
       self.tabs: Optional[Tabs] = None
       self.content_switcher: Optional[ContentSwitcher] = None

   @classmethod
   def _set_id(cls, content: TabPane, new_id: str) -> TabPane:
       """Set an id on the content, if not already present.

       Args:
           content: a TabPane.
           new_id: New `is` attribute, if it is not already set.

       Returns:
           The same TabPane.
       """
       if content.id is None:
           content.id = new_id
       return content

   async def append(self, content: TabPane):
       """Add TabPane"""
       self.titles.append(content._title)
       self._tab_content.append(content)
       tab_pane_with_id = self._set_id(content, f"tab-{len(self.content_switcher.children) + 1}")
       content_tab = ContentTab(tab_pane_with_id._title, tab_pane_with_id.id or "")
       await self.content_switcher.mount(tab_pane_with_id)
       self.content_switcher._initial = self.active
       #self.content_switcher.on_mount()
       self.tabs.add_tab(content_tab)

   def compose(self) -> ComposeResult:
       """Compose the tabbed content."""

       # Wrap content in a `TabPane` if required.
       pane_content = [
           (
               self._set_id(content, f"tab-{index}")
               if isinstance(content, TabPane)
               else TabPane(
                   title or self.render_str(f"Tab {index}"), content, id=f"tab-{index}"
               )
           )
           for index, (title, content) in enumerate(
               zip_longest(self.titles, self._tab_content), 1
           )
       ]
       # Get a tab for each pane
       tabs = [
           ContentTab(content._title, content.id or "") for content in pane_content
       ]
       # Yield the tabs
       self.tabs = Tabs(*tabs, active=self._initial or None)
       yield self.tabs
       # Yield the content switcher and panes
       self.content_switcher = ContentSwitcher(initial=self._initial or None)
       with self.content_switcher:
           yield from pane_content

It complains a lot if you put it in your main program, so what I did was append it to the end of ~/.local/lib/python3.10/site-packages/textual/widgets/_tabbed_content.py and then do from textual.widgets._tabbed_content import DynamicTabbedContent which I'm sure isn't the intended way to do, but hey - it worked.

I had some issues figuring out how to use it with the context managers, but in the end, I came up with

# in compose
self.Dynamic = DynamicTabbedContent()
		with self.Dynamic:
			with TabPane("Search", id="search"):  # First tab
				yield DataTable()  # Tab content
				yield Input(
					placeholder="Enter a query...",
				)
# in event				
async def on_data_table_row_selected(self,  event):
		table = self.query_one(DataTable)
		roomData = Room(table.get_row_at(event.cursor_row)[-1])
		
		x = TabPane('Hello', Markdown(roomData.md), id=roomData.code) # Widgets in between them

		await self.Dynamic.append(x)

Which worked like a charm. Anyway, would be super cool to see this being officially supported! ❤️

[TomJGooding]

I think this is coming in the next Textual release - see #2751!

[Jayy001]

Your right, awesome - should have looked at the PRs first 😆