A `height: auto` `DataTable` inside a `height: auto` container never seems to grow

davep commented 1 year ago

Initially raised on Discord, where someone was trying to get a short DataTable to grow large enough to show its content, and to also wrap it in a container that in turn would grow to perfectly wrap the DataTable. Consider this code:

from textual.app import App, ComposeResult
from textual.containers import Horizontal, Vertical
from textual.widgets import DataTable, Footer, Static

class ExpandingStatic(Static):

    def __init__(self) -> None:
        super().__init__()
        self._text = ""

    def add_row(self, row: str) -> None:
        self._text += f"{row}\n"
        self.update(self._text)

class AutoGrowTableApp(App[None]):

    CSS = """
    DataTable {
        border: panel red;
        height: auto;
    }

    ExpandingStatic {
        border: panel red;
        height: auto;
    }

    Vertical {
        border: panel cornflowerblue;
        height: auto;
    }
    """

    BINDINGS = [
        ("space", "add_row", "Add another row to both tables")
    ]

    def compose(self) -> ComposeResult:
        with Horizontal():
            yield DataTable()
            with Vertical() as v:
                v.border_title = "Vertical"
                yield DataTable()
            with Vertical() as v:
                v.border_title = "Vertical"
                yield ExpandingStatic()
        yield Footer()

    def on_mount(self) -> None:
        self.query_one(ExpandingStatic).border_title = "Static"
        for table in self.query(DataTable):
            table.border_title = "DataTable"
            table.add_columns("One", "Two", "Three")

    def action_add_row(self) -> None:
        self.query_one(ExpandingStatic).add_row("Another Static Line")
        for table in self.query(DataTable):
            table.add_row("Another", "Table", "Row!")

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

The display shows a DataTable on the screen, within a Vertical (that is height: auto) and also a Static inside a Vertical (that is also height: auto). When Space is pressed a row is added to each of the tables and a line is added to the Static. The expectation is that the two DataTables and the Static will grow in height, and so the two Verticals will also grow in height.

What actually happens is the DataTable on the Screen expands, and the Static expands, but the DataTable in the Vertical doesn't expand. At first glance I think it makes sense to expect the middle DataTable and its container to grow too.