Stacking DataTables?

[meshula]

Hi, I have a few tables, that I wish to stack one above the other, you can see my compose() below.
I've specified in the css how much vertical space I'm hoping the table will take up (see css below).
That much works fine, but the thing I can't figure out, is how to make the table use up all the space it's got?
Each table shows a some number of rows, and a scroll bar appears.

That's all fine, but, I would like the DataTable to use as much of it's space as possible, before using scrollbars. What I am getting is many empty lines of empty space that the Container has given the DataTables, but the DataTable don't use it. One of my tables is set to height 30%, and has one row, and scrollbars appear, for the one item, and there's plenty of surrounding blank space.

Is there some other attribute I'm supposed to set to make the DataTable use the space it has been given?

    def compose(self) -> ComposeResult:
        yield Container(
            Header(),
            Container(
                CustomATable(),
                CustomBTable(),
                CustomCTable(),
            ),
            Footer(),
        )

each of the custom tables looks like the following. I've tried modifying all of the fields shown there, and all the combinations I can think of not specifying those options, I've listed all of them to give a sense of some of the things I tried.

class CustomATable(Container):
    def compose(self) -> ComposeResult:
        yield Label("OPEN ISSUES")
        yield Container(DataTable())

    def on_mount(self) -> None:
        table = self.query_one(DataTable)

        table.box = None
        table.expand = True
        table.show_header = True
        table.show_edge = False
        table.padding = (0, 1, 0, 0)

        table.zebra_stripes = True
        table.cursor_type = "row"
        table.fixed_columns = 1
        table.add_column("id", width=10)
        table.add_column("status", width=10)
        table.add_column("description")
        for issue in issues:
            table.add_row(issue.review_id, issue.status, issue.review_name)

and I've created some css for each

CustomATable {
    height: 30%
}

[davep]

It's always a little tricky to offer advice when you can't see all of the code and styling; here I've quickly mocked up what it is you seem to be wanting to achieve.

from textual.app        import App, ComposeResult
from textual.containers import Vertical
from textual.widgets    import Header, Footer, DataTable, Label

class CustomTable( Vertical ):

    def __init__( self, title: str ) -> None:
        super().__init__()
        self._title = title

    def _test_dt( self ) -> DataTable:
        dt = DataTable()
        dt.zebra_stripes = True
        dt.cursor_type   = "row"
        dt.fixed_columns = 1
        dt.add_column( "id", width=10 )
        dt.add_column( "status", width=10 )
        dt.add_column( "description" )
        for n in range( 42 ):
            dt.add_row( n, f"Status {n}", f"This is description {n}" )
        return dt

    def compose( self ) -> ComposeResult:
        yield Label( self._title )
        yield self._test_dt()

class ThreeTablesApp( App[ None ] ):

    CSS = """
    CustomTable {
        height: 1fr;
    }

    DataTable {
        height: 1fr;
    }
    """

    def compose( self ) -> ComposeResult:
        yield Header()
        with Vertical():
            yield CustomTable( "Table 1" )
            yield CustomTable( "Table 2" )
            yield CustomTable( "Table 3" )
        yield Footer()

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

Note that the key thing here is that I've got a single outer wrapping Vertical to vertically stack the other elements, then each CustomTable is derived from a Vertical, and composes a Label to show some sort of title, and then the DataTable itself. I have each CustomTable be one fraction in height (1fr) and between them they'll equally share the space of their container; giving the three stacked.

Is that what you're after?

[willmcgugan]

Night be easier to diagnose with a fully working example, or a screenshot.

Are you setting the DataTable height? Try setting it to 1fr to make it fill it’s container.

[meshula]

Thanks, this is perfect! I'm back on track. I misunderstood the use of height. I had thought that I was controlling the container size, not the occupancy of the container; hence the 30% in my css example. Now that I see your example I understand what I was doing wrong.

I do have a further question if you don't mind. If I want the top table to occupy 30% of the space, and the bottom exactly four lines, and the middle to "rubber band" to fit between them, is that possible? Or are the containers always an equal size within the with Vertical(): block?

[willmcgugan]

You can set the top to 30%, the middle to 1fr and the bottom to 4.

from textual.app import App, ComposeResult
from textual.containers import Vertical
from textual.widgets import Header, Footer, DataTable, Label


class CustomTable(Vertical):
    def __init__(self, title: str, id: str | None = None) -> None:
        super().__init__(id=id)
        self._title = title

    def _test_dt(self) -> DataTable:
        dt = DataTable()
        dt.zebra_stripes = True
        dt.cursor_type = "row"
        dt.fixed_columns = 1
        dt.add_column("id", width=10)
        dt.add_column("status", width=10)
        dt.add_column("description")
        for n in range(42):
            dt.add_row(n, f"Status {n}", f"This is description {n}")
        return dt

    def compose(self) -> ComposeResult:
        yield Label(self._title)
        yield self._test_dt()


class ThreeTablesApp(App[None]):
    CSS = """
    #top {
        height: 30%
    }
    #middle {
        height: 1fr;
    }
    #bottom {
        height: 4;
    }
    """

    def compose(self) -> ComposeResult:
        yield Header()
        with Vertical():
            yield CustomTable("Table 1", id="top")
            yield CustomTable("Table 2", id="middle")
            yield CustomTable("Table 3", id="bottom")
        yield Footer()


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

[jjloesch]

Did you notice this example doesn't show all the rows when the visible section is smaller than the nb of rows? The Vertical scrollbar is there and you can scroll down but it doesn't display 42 rows... Or is it just me?

[meshula]

I ended up modifying my app to structure views so that scrolling was never required, so I can't confirm that behavior in my own app.

[meshula]

Thanks! I've got all the information I need now.