Horizontal scrolling

[samuelcolvin]

(hope you don't mind me opening an issue to ask a question, I've tried hard to get to the bottom of this myself)

I'm trying to get horizontal scrolling working with textual and a rich table, but no luck

Below is what I have so far.

It seems like the table is refusing to exceed the width of the terminal, thus the horizontal scroll bar of ScrollView is not coming into play.

Vertical scrolling is working great.

What am I doing wrong?

(ref: https://twitter.com/samuel_colvin/status/1426289617632960515)

from rich.table import Table

from textual import events
from textual.app import App
from textual.widgets import Header, Footer, ScrollView


class MyApp(App):
    """An example of a very simple Textual App"""

    async def on_load(self, event: events.Load) -> None:
        await self.bind("q", "quit", "Quit")

    async def on_mount(self, event: events.Mount) -> None:

        self.body = body = ScrollView()
        body.virtual_size.width = 300

        await self.view.dock(body)

        async def add_content():
            table = Table(title="Demo", width=300, min_width=300)

            for i in range(40):
                table.add_column(f'Col {i + 1}', style='magenta')

            for i in range(40):
                table.add_row(*[f'cell {i},{j}' for j in range(40)])

            await body.update(table)

        await self.call_later(add_content)


MyApp.run(title="Simple App", log="textual.log")

Versions:

python 3.9.5
textual==0.1.10
rich==10.7.0
OS: Ubuntu 21.04 with standard terminal

[willmcgugan]

Hi Samuel,

Thanks for the bug report. The horizontal scroll bar should show automatically if he renderable is wider than the widget size, but I can see from a quick test that it isn't. Will fix that in the next update.

[samuelcolvin]

Thanks so much, not sure if it's part of the same problem, but horizontal scrolling didn't seem to be working at all - e.g. if I used the left and right arrows, no scrolling occurred.

[willmcgugan]

Yeah, they aren't showing anywhere. It was working at one point. But they haven't been as well tested as vertical scrollbars.

[willmcgugan]

Hi @samuelcolvin Horizontal scrolling should be fixed in v0.1.11 (just released)

[samuelcolvin]

thanks so much. I'll test now.

[samuelcolvin]

Thanks so much, works brilliantly.

The only small problem I found was that by default I could scroll vertically with the arrow keys, but not horizontally.

I fixed that fairly easily as follows:

from rich.table import Table

from textual import events
from textual.app import App
from textual.widgets import ScrollView


class CustomScrollView(ScrollView):
    def move_left(self) -> None:
        self.target_x -= 2
        self.animate("x", self.target_x, speed=80, easing="out_cubic")

    def move_right(self) -> None:
        self.target_x += 2
        self.animate("x", self.target_x, speed=80, easing="out_cubic")


class MyApp(App):
    """An example of a very simple Textual App"""

    async def on_load(self, event: events.Load) -> None:
        await self.bind("q", "quit", "Quit")

    def on_key(self, event: events.Key):
        if event.key == 'left':
            self.body.move_left()
        elif event.key == 'right':
            self.body.move_right()

    async def on_mount(self, event: events.Mount) -> None:

        self.body = body = CustomScrollView(auto_width=True)

        await self.view.dock(body)

        async def add_content():
            table = Table(title="Demo")

            for i in range(40):
                table.add_column(f"Col {i + 1}", style="magenta")
            for i in range(200):
                table.add_row(*[f"cell {i},{j}" for j in range(40)])

            await body.update(table)

        await self.call_later(add_content)
        self.log('HELLO')


MyApp.run(title="Simple App", log="textual.log")

Happy to add that to the example if you don't think it should work out of the box?

[samuelcolvin]

the other thing I noticed is that rendering the table is relatively slow, even for this modest table. Any idea what's causing that slow down and if it can be solved?

I'm thinking of a tool that can easily show a table thousands of rows a hundred columns, if I extrapolated the current performance to that it would get very slow to load.

[willmcgugan]

The scroll view widget should probably handle the left/right keys. I'll add that in the next update.

Large tables will be slow to render in a ScrollView, since it renders everything up front. There will eventually be a datatable widget that is optimized to only render the visible area.

[github-actions]

Did I solve your problem?

Consider sponsoring my work on Textual with a monthly donation.

Or buy me a coffee to say thanks.

– Will McGugan