Could someone help adjust the size of the first datatable in my App so that it can VerticalScroll?

[zhajio1988]

I have uploaded my code and database to the following github repository, and run the app directly using python3 YASA_tui.py.
https://github.com/zhajio1988/YASA_tui
YASA_tui.png shows the appearance of the app, I want the "regr cmd history" datatable to be able to VerticalScroll, preferably only 50% of the screen

[davep]

If I'm reading your request correctly, I think you'll get what you're after with the addition of this to your CSS:

Static {
    height: 1fr;
}

DataTable {
    height: 50%;
}

However, what I would also point out is that you seem to be using Static as a container for your DataTable. Generally that's not what Static is intended for; you'll likely find it easier in the long run to use one of the containers.

Possibly related to any issues you may run in to, given you're using TabbedContent, is #2411 -- keep that in mind if you run into any layout issues here.

Also, the FAQ about scrolling a DataTable might be worth keeping in mind when you're doing your application layout; again if you run into an issue.

[zhajio1988]

Thanks for your help.
If I use ScrollableContainer instead of Static, the display will have other problems, I think my logic is fine, it is necessary to change the css, but this is too difficult to change, I am not very good at it.

[davep]

Here's a small standalone example that applies what I mention above and I think is the layout you're looking for. Could you confirm either way if this is what you're after?

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

class TwoTablesExampleApp( App[ None ] ):

    CSS = """
    TabbedContent ContentSwitcher {
        height: 1fr;
    }

    DataTable {
        height: 50%;
    }
    """

    def compose( self ) -> ComposeResult:
        yield Header()
        with TabbedContent():
            with TabPane( "Table 1" ):
                with VerticalScroll():
                    yield self.add_test_data( DataTable(), 10 )
            with TabPane( "Table 2" ):
                with VerticalScroll():
                    yield self.add_test_data( DataTable(), 100 )
        yield Footer()

    def add_test_data( self, table: DataTable, multiplier: int ) -> DataTable:
        table.add_columns( *[ f"Column {n}" for n in range( 5 ) ] )
        for _ in range( 200 ):
            table.add_row( *[ str( n * multiplier) for n in range( 5 ) ] )
        return table

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

Note the use of the workaround for #2411 that I mention above.

With this I get two tables, both in tabs, both taking up the top 50% of the tabbed pane, and both scrolling within the table itself:

[zhajio1988]

Thanks for your example. Could you see snapshot in my YASA_tui ?
The App has two datatables, one is the 'regr cmd history' table and the other is the 'regr cases status' table. When the app is started, the first table is the 'regr cmd history' table, and when the cell cursor is pressed in the 'regr cmd history' table and the enter key, the 'regr cases status' table will be displayed below. As different cells are selected, different 'regr cases status' tables will be displayed. I now want to control the size of 'regr cmd history' table

[zhajio1988]

Maybe you can clone it and run the app to see the result

[davep]

I did look at the repo when I replied before, but normally it's easier to understand the layout someone is wanting than to try and make their existing code work in a specific way -- working with simple examples makes it far easier to show the core ideas that should be applied (and makes it more helpful to others who may land on this discussion).

So if I'm understanding the image above you want 2 tables on the first tab, each sharing 1/2 the space, and both capable of scrolling themselves. If so my example code would become more like this:

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

class TwoTablesExampleApp( App[ None ] ):

    CSS = """
    TabbedContent ContentSwitcher {
        height: 1fr;
    }

    DataTable {
        height: 1fr;
    }
    """

    def compose( self ) -> ComposeResult:
        yield Header()
        with TabbedContent():
            with TabPane( "Two tables in one tab" ):
                with VerticalScroll():
                    yield self.add_test_data( DataTable(), 10 )
                with VerticalScroll():
                    yield self.add_test_data( DataTable(), 20 )
            with TabPane( "One table alone" ):
                with VerticalScroll():
                    yield self.add_test_data( DataTable(), 100 )
        yield Footer()

    def add_test_data( self, table: DataTable, multiplier: int ) -> DataTable:
        table.add_columns( *[ f"Column {n}" for n in range( 5 ) ] )
        for _ in range( 200 ):
            table.add_row( *[ str( n * multiplier) for n in range( 5 ) ] )
        return table

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

Again, note the workaround for the TabbedContent issue from #2411, but more importantly note the use of a VerticalScroll to individually wrap the datatables.

However, one caveat I'd add here is that VerticalScroll can receive focus by default; this is fine and helpful when it's wrapping something that itself can't receive focus. However a DataTable can receive focus so the focusing gets a bit strange. As such I'd personally do something more like:

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

class TableScroll( VerticalScroll, can_focus=False ):
    pass

class TwoTablesExampleApp( App[ None ] ):

    CSS = """
    TabbedContent ContentSwitcher {
        height: 1fr;
    }

    TableScroll {
        border: solid cornflowerblue 50%;
    }

    TableScroll:focus-within {
        border: solid cornflowerblue;
    }

    DataTable {
        height: 1fr;
    }
    """

    def compose( self ) -> ComposeResult:
        yield Header()
        with TabbedContent():
            with TabPane( "Two tables in one tab" ):
                with TableScroll():
                    yield self.add_test_data( DataTable(), 10 )
                with TableScroll():
                    yield self.add_test_data( DataTable(), 20 )
            with TabPane( "One table alone" ):
                with TableScroll():
                    yield self.add_test_data( DataTable(), 100 )
        yield Footer()

    def add_test_data( self, table: DataTable, multiplier: int ) -> DataTable:
        table.add_columns( *[ f"Column {n}" for n in range( 5 ) ] )
        for _ in range( 200 ):
            table.add_row( *[ str( n * multiplier) for n in range( 5 ) ] )
        return table

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

Note the addition of some styling too to help make it clear where focus is when a DataTable has focus.

This seems to be the basic layout you're after?

Screen.Recording.2023-05-12.at.12.19.13.mov

[zhajio1988]

Thanks for your detail info and help.
I spent 2 hours trying to use your example, but it was still unsuccessful. Maybe I didn’t express it clearly enough. I still want you to run down my example to see how it looks and works.

[davep]

As I said earlier, I did look at your example, back when I wrote my first first reply:

The problem is, it's often hard to offer help with people's applications as there's generally a lot of code that isn't involved in the problem.

If I've misunderstood the layout you're going for, perhaps you could try and explain it again in a slightly different way? Or perhaps write a very minimal stand-alone example (like I did above) that shows the layout you're after and struggling to get?

[zhajio1988]

I‘m so sorry, I may not be able to express clearly, I will record the screen directly.

WeChat_20230513222141.mp4

[zhajio1988]

I use PyQt5 rewrite the app, so far so good.