Scrolling doesn't work properly if DataTable is inside TabPane.

[cristianprice]

Hello,
I have started making a small app. I have this TabbedContent. In one of the TabPane I have a datatable in which I add content dynamically. Problem is that if I add a lot of content the scroll doesn't work properly.

def add_active_alarms_view(tabs):
    alarms_table = DataTable(id='alarm_table')
    alarms_table.add_columns("Ip", "Alarm Id", "Sequence Number", "Text",
                             "User Text", "Severity", "Additional Info", "Date Time", "State")
    alarmsTab = TabPane('Active Alarms', alarms_table, id='aalarms')
    tabs.add_pane(alarmsTab) 

I have attached image.

Let me know, if you need more info. Not sure exactly what else should I add.
OS: Windows 10
Python 3.10
textual 0.30

Thanks,
C

[github-actions[bot]]

We found the following entries in the FAQ which you may find helpful:

• Why do some key combinations never make it to my app?
• Why doesn't the DataTable scroll programmatically?

Feel free to close this issue if you found an answer in the FAQ. Otherwise, please give us a little time to review.

This is an automated reply, generated by FAQtory

[cristianprice]

:)) Good bot. I will try the second suggestion tomorrow. Seems to be what I am looking for.

[cristianprice]

Ok, tried to add a css class with height:100%. Unfortunately the table stops showing. Am I doing something wrong ? I dont see any property on the Datatable class called height.

[davep]

Assuming you're using TabbedContent also, I would suspect that #2411 comes into play here too.

[cristianprice]

Tried the

TabbedContent ContentSwitcher {
    height: 1fr;
}

It doesnt fix the issue.

Hmm maybe I have not explained my issue correctly. My problem is that datatable is not auto focusing on selected entries when they are passed the visible area and also scroll is not following. I will attach a gif screenshot.

[davep]

Did you try the above while also applying the advice FAQtory gave too?

Here's a standalone example of what should work:

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

class DataTableInTabbedContentApp(App[None]):

    CSS = """
    TabbedContent ContentSwitcher, DataTable {
        height: 1fr
    }
    """

    def populate(self, table: DataTable) -> DataTable:
        table.add_columns( "Row", *[f"Column {n+1}" for n in range( 10 )])
        for row in range(1_000):
            table.add_row(*[str(row), *[ str(n) for n in range(10)]])
        return table

    def compose(self) -> ComposeResult:
        with TabbedContent():
            with TabPane("Some data"):
                yield self.populate(DataTable())

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

I'm finding this has the desired effect.

[cristianprice]

That did it. The complete css was also with TabbedContent ContentSwitcher, DataTable . I tried them initially but separately. Thanks for the answer. Have a nice week.

[davep]

Most welcome, glad you got it working. :-)