Scrolling cursor into view on DataTable fails, even though it was fixed

[href]

With #2459 the selected row of a DataTable should scroll into view when changing the coordinates, but I am unable to get this to work.

In the following example, I move the cursor using j and k, given a sufficiently small viewport (you should see the scrollbar on the right). As you can see, the cursor vanishes at the bottom.

The code I use is the following:

from textual.app import App
from textual.app import ComposeResult
from textual.coordinate import Coordinate
from textual.widgets import DataTable
from textual.widgets import Footer


ROWS = [
    ("lane", "swimmer", "country", "time"),
    (4, "Joseph Schooling", "Singapore", 50.39),
    (2, "Michael Phelps", "United States", 51.14),
    (5, "Chad le Clos", "South Africa", 51.14),
    (6, "László Cseh", "Hungary", 51.14),
    (3, "Li Zhuhao", "China", 51.26),
    (8, "Mehdy Metella", "France", 51.58),
    (7, "Tom Shields", "United States", 51.73),
    (1, "Aleksandr Sadovnikov", "Russia", 51.84),
    (10, "Darren Burns", "Scotland", 51.84),
    (4, "Joseph Schooling", "Singapore", 50.39),
    (2, "Michael Phelps", "United States", 51.14),
    (5, "Chad le Clos", "South Africa", 51.14),
    (6, "László Cseh", "Hungary", 51.14),
    (3, "Li Zhuhao", "China", 51.26),
    (8, "Mehdy Metella", "France", 51.58),
    (7, "Tom Shields", "United States", 51.73),
    (1, "Aleksandr Sadovnikov", "Russia", 51.84),
    (10, "Darren Burns", "Scotland", 51.84),
    (4, "Joseph Schooling", "Singapore", 50.39),
    (2, "Michael Phelps", "United States", 51.14),
    (5, "Chad le Clos", "South Africa", 51.14),
    (6, "László Cseh", "Hungary", 51.14),
    (3, "Li Zhuhao", "China", 51.26),
    (8, "Mehdy Metella", "France", 51.58),
    (7, "Tom Shields", "United States", 51.73),
    (1, "Aleksandr Sadovnikov", "Russia", 51.84),
    (10, "Darren Burns", "Scotland", 51.84),
]


class TimerApp(App[None]):

    BINDINGS = [
        ('j', 'move("down")', 'Down'),
        ('k', 'move("up")', 'Up'),
    ]

    def compose(self) -> ComposeResult:
        yield DataTable()
        yield Footer()

    def on_mount(self) -> None:
        table = self.query_one(DataTable)
        table.add_columns(*ROWS[0])
        table.add_rows(ROWS[1:])
        table.cursor_type = 'row'

    def action_move(self, direction: str) -> None:
        table = self.query_one(DataTable)

        if direction == 'down':
            row = table.cursor_coordinate.row + 1
        else:
            row = table.cursor_coordinate.row - 1

        if table.is_valid_row_index(row):
            table.cursor_coordinate = Coordinate(row, 0)


if __name__ == "__main__":
    app = TimerApp()
    app.run()

I am a beginner, so maybe I'm doing something wrong 😅

Textual Diagnostics

Versions

Name	Value
Textual	0.24.1
Rich	13.3.5

Python

Name	Value
Version	3.10.4
Implementation	CPython
Compiler	Clang 14.0.3
Executable	/Users/denis/.projects/time-tracker/venv/bin/python

Operating System

Name	Value
System	Darwin
Release	22.4.0
Version	Darwin Kernel Version 22.4.0: Mon Mar 6 20:59:28 PST 2023; root:xnu-8796.101.5~3/RELEASE_ARM64_T6000

Terminal

Name	Value
Terminal Application	tmux (3.3a)
TERM	screen-256color
COLORTERM	truecolor
FORCE_COLOR	Not set
NO_COLOR	Not set

Rich Console options

Name	Value
size	width=90, height=17
legacy_windows	False
min_width	1
max_width	90
is_terminal	False
encoding	utf-8
max_height	17
justify	None
overflow	None
no_wrap	False
highlight	None
markup	None
height	None

[github-actions]

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

• 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

[href]

Ah setting the height as follows helped: table.styles.height = '100%'. Thanks 🤖!

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.

[darrenburns]

@href Glad you solved it. The scrollbar you were seeing wasn't the scrollbar of the DataTable itself, it was the scrollbar of the widget containing the DataTable. Both configurations look the exact same, so it's difficult to spot.

[TomJGooding]

Just as an aside, you could also create a custom datatable to save handling the keys bindngs within the app itself. I've done this with many of my personal Textual projects.

class ViLikeDataTable(DataTable):
    BINDINGS = [
        ("j", "cursor_down", "Down"),
        ("k", "cursor_up", "Up"),
    ]

    def __init__(self, *args: Any, **kwargs: Any) -> None:
        super().__init__(*args, **kwargs)

[href]

Thanks everyone, this is super helpful and a great onboarding experience!

[davep]

@TomJGooding An aside to your aside; you could simplify that by dropping the __init__.