Default styling of TabbedContent widget incompatible with DataTable

[scapeg0at]

I've been trying to write an app with the new TabbedContent widget however, I cannot seem to get a DataTable to display anything. Here is the setup code:

def compose(self) -> ComposeResult:
  with TabbedContent():
    with TabPane("Data", id='data'):
      yield DataTale(id = 'table')
    with TabPane("stat", id='stat')
      yield Static('test', id='test')

def on_mount(self):
  table = self.query_one(DataTable)
  rows = iter(ROWS)
  table.add_columns(*next(rows))
  table.add_rows(rows)

where ROWS is from the DataTable example page.

When I run the app the Static page displays properly, showing "test", but the DataTable will not render in the corresponding tabs container. I've tried to activate the tab via clicking and via an action. The tab become active, but no datatable is displayed.

I've also looked into the console and the rows/columns seem to be added to the DataTable widget, the widget will just not render.

[davep]

Given the use of DataTale rather than DataTable in the above, I take it this isn't from running code? Just for future reference it's generally a good idea to try and recreate the issue in a small stand-alone example, so everyone can be working with the same problem.

I think the following should serve the purpose here:

from textual.app     import App, ComposeResult
from textual.widgets import DataTable, Header, Footer, TabbedContent, TabPane

class TabsAndDataTable( App[ None ] ):

    CSS = """
    TabbedContent {
        border: round red;
    }

    TabPane {
        border: round green;
    }

    ContentSwitcher {
        border: round blue;
    }

    DataTable {
        border: round yellow;
    }
    """

    def compose( self ) -> ComposeResult:
        yield Header()
        with TabbedContent():
            with TabPane("DataTable"):
                yield DataTable()
        yield Footer()

    def on_mount( self ) -> None:
        dt = self.query_one(DataTable)
        dt.add_columns( "N", "N*10", "N*100", "N*1000" )
        for n in range( 20 ):
            dt.add_row( str( n ), str( n * 10 ), str( n * 100 ), str( n * 1000 ) )

if __name__ == "__main__":
    TabsAndDataTable().run()

Note that to help really see what could be going on, I've added borders to everything involved (under the hood ContentSwitcher also gets used so I've included that too):

If I get a bit heavy-handed and throw some hight styling at everything, it all pops out:

from textual.app     import App, ComposeResult
from textual.widgets import DataTable, Header, Footer, TabbedContent, TabPane

class TabsAndDataTable( App[ None ] ):

    CSS = """
    TabbedContent {
        border: round red;
        height: 1fr;
    }

    TabPane {
        border: round green;
        height: 1fr;
    }

    ContentSwitcher {
        border: round blue;
        height: 1fr;
    }

    DataTable {
        border: round yellow;
        height: 1fr;
    }
    """

    def compose( self ) -> ComposeResult:
        yield Header()
        with TabbedContent():
            with TabPane("DataTable"):
                yield DataTable()
        yield Footer()

    def on_mount( self ) -> None:
        dt = self.query_one(DataTable)
        dt.add_columns( "N", "N*10", "N*100", "N*1000" )
        for n in range( 20 ):
            dt.add_row( str( n ), str( n * 10 ), str( n * 100 ), str( n * 1000 ) )

if __name__ == "__main__":
    TabsAndDataTable().run()

I've not dived into it deeply, but I would suspect some unfortunate combination of default styles somewhere between DataTable, ContentSwitcher, TabPage and TabbedContent. Meanwhile you should be able to get your table to show with some styling along the lines of the above.

[scapeg0at]

I tried out the styling you recommended and it worked, tank you! I generally set up styling after the app is completed so I didn't even think to check if that was the issue.

Next time I encounter an issue I'll be sure to include a stand alone example.

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.