Can I disable DataTable Row Highlighting? (but leave hovering intact)

[leemthai]

Hey Everyone,

I like the hover effect when the mouse moves over a DataTable. It's subtle and effectively shows the row the user is on. Exactly what I need.

To achieve this effect, I have turned on a 'row' cursor type in my DataTable sub-class:

    self.show_cursor: bool = True 
    self.cursor_type = "row" 

However this turns on row highlighting and selecting as well. I don't seem able to turn this off in code, or mitigate its effects at all in code or CSS.

So questions:

1. Is there anyway (code or CSS) to keep the hover effect in a DataTable, but disable the Row Highlighting and Selection?

2. I'm kinda generally confused about CSS, still. I often feel the desire to "turn something off via CSS" but only find ways to change the effect. So if a class has some default CSS, I would like to not have that effect, but also, I don't want to add a CSS effect of my own (example row highlighting and selection, I just don't want it doing anything). Am I barking up the wrong tree with thinking in terms of "turning off CSS"? I also find the various DataTable CSS targets confusing in general, but that's probably a me thing.

Overall, I don't actually need most of the effects that turning on the DataTable cursor provides. However, I do really need to find a way for users to see which row they are on, hence the desire to use the 'hover' aspect of the cursor to enable this.

Any thoughts welcomed :-)

[TomJGooding]

I'm not sure this is possible without overriding many internals in the DataTable.

Here's my first attempt using CSS with the .datatable--cursor component class¹. The problem is that if you click the table or navigate with the keyboard, the hover style will be replaced with the cursor style.

It sounds like you really want show_cursor=False but still apply the hover styling when moving the mouse over the table. The problem is that you would need to remove all the checks in the code that show_cursor is True before applying the hover.

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


class ExampleApp(App):
    CSS = """
    DataTable {
        .datatable--cursor {
            background: transparent;
            text-style: none;
        }
    }
    """

    def compose(self) -> ComposeResult:
        yield DataTable(
            cursor_type="row",
        )

    def on_mount(self) -> None:
        table = self.query_one(DataTable)
        table.add_columns(*(f"C{i}" for i in range(10)))
        for row in range(10):
            table.add_row(*(f"R{row}C{col}" for col in range(10)))


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

Footnotes

1. You might find it helpful to learn about component classes section in the docs: https://textual.textualize.io/guide/widgets/#component-classes ↩

[TomJGooding]

Here's my second attempt with a custom DataTable that disables the default bindings and the click handler.

There's still the problem that the first row is selected by default, so hovering that row has no effect. My hacky workaround was to add a "hidden" row to the table!

from textual import events
from textual.app import App, ComposeResult
from textual.widgets import DataTable


class MyDataTable(DataTable, inherit_bindings=False):
    DEFAULT_CSS = """
    MyDataTable {
        & > .datatable--cursor {
            background: transparent;
            text-style: none;
        }

        &:focus {
            & > .datatable--cursor {
                background: transparent;
                text-style: none;
            }
        }
    }
    """

    async def _on_click(self, event: events.Click) -> None:
        event.prevent_default()

    def on_mount(self) -> None:
        self.add_row(height=0)


class ExampleApp(App):
    def compose(self) -> ComposeResult:
        yield MyDataTable(
            cursor_type="row",
        )

    def on_mount(self) -> None:
        table = self.query_one(MyDataTable)
        table.add_columns(*(f"C{i}" for i in range(10)))
        for row in range(10):
            table.add_row(*(f"R{row}C{col}" for col in range(10)))


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

[willmcgugan]

Clever! @darrenburns

[leemthai]

It's working kinda perfectly :-)

I had to set this to preserve my rich text colours in the rows:
self.cursor_foreground_priority = "renderable"
And I did the invisible 0th row. Would have never considered that.

My only remaining question is about targetting hovered rows within the code...

Basically I have some non-data rows ( padding rows, plus some rows with 'controls' on).
So would love to fade out the CSS effect somewhat when the mouse is hovering on these rows, but I can't identify a 'hover' event to test which row we are currently we are on and adjust the CSS via component classes? (I'm probably thinking about this all wrong but doing my best, lol)

It's honestly fine as it is. Adjusting the CSS hover according to row status would definitely be icing on the cake.

Cheers!!