Is it possible to react to both single and double clicks on DataTable rows while keeping header non-interactive?

[nannerpusser]

I have a MVE, but I feel like this must be a quick yes or no based on the parts of DataTable that are/aren't exposed public. I am new to both python and textual. Over a couple days I have come at this from numerous approaches, mainly centered around event.chain detection and trying to do one thing with a single click and custom thing when ==2. What I want to accomplish:

Differentiating between a single and double click in order to keep the built-in on_data_table_row_selected handler for the ability to perform an action (add row to a list for example), but have double-click handle a `push_screen_wait' to a ModalScreen (launches subprocess).

Also a DataTable with "reactive header row", which I have working with some jank and running a refresh() on it in on_mount:

	def on_resize(self, event: events.Resize):

		real_width = self.app.screen.size.width
		column_w = int(real_width / 3)
		for column in self.table.columns.values():
			column.auto_width = False
			column.width = column_w
		self.table.refresh()

But that's secondary to:

Making header row either ignore double-click or completely non-interactive while maintaining that functionality on the rest of the table rows (index > -1). Right now, I am throwing the kitchen sink at making the header not crash everything when it gets double-clicked. Single-click on header is fine and does nothing, as expected. Overriding my subclassed DataTable on_click with a check to to see if the mouse/cursor/coordinate was actually on a row and not header is hitting this Traceback every time:

│   2621 │   │   is_row_label_click = self.show_row_labels and column_index == -1                                                                      │
│   2622 │   │   if is_header_click:                                                                                                                   │
│   2623 │   │   │   # Header clicks work even if cursor is off, and doesn't move the cursor.                                                          │
│ ❱ 2624 │   │   │   column = self.ordered_columns[column_index]                                                                                       │
│   2625 │   │   │   message = DataTable.HeaderSelected(                                                                                               │
│   2626 │   │   │   │   self, column.key, column_index, label=column.label                                                                            │
│   2627 │   │   │   )                                                                                                                                 │
│                            

There must be something silly I'm not considering here. My locals from Textual console looks like:

│ │       column_index = 0                                                                                                          │                  │
│ │              event = Click(                                                                                                     │                  │
│ │                      │   DataTable(id='results_table'),                                                                         │                  │
│ │                      │   x=16,                                                                                                  │                  │
│ │                      │   y=1,                                                                                                   │                  │
│ │                      │   pointer_x=16,                                                                                          │                  │
│ │                      │   pointer_y=1,                                                                                           │                  │
│ │                      │   screen_x=17,                                                                                           │                  │
│ │                      │   screen_y=18,                                                                                           │                  │
│ │                      │   button=1,                                                                                              │                  │
│ │                      │   style=Style(                                                                                           │                  │
│ │                      │   │   color=Color('#b0d5df', ColorType.TRUECOLOR, triplet=ColorTriplet(red=176, green=213, blue=223)),   │                  │
│ │                      │   │   bgcolor=Color(                                                                                     │                  │
│ │                      │   │   │   '#6b7693',                                                                                     │                  │
│ │                      │   │   │   ColorType.TRUECOLOR,                                                                           │                  │
│ │                      │   │   │   triplet=ColorTriplet(red=107, green=118, blue=147)                                             │                  │
│ │                      │   │   ),                                                                                                 │                  │
│ │                      │   │   bold=True,                                                                                         │                  │
│ │                      │   │   meta={'row': -1, 'column': 0}                                                                      │                  │
│ │                      │   ),                                                                                                     │                  │
│ │                      │   chain=1                                                                                                │                  │
│ │                      )                                                                                                          │                  │
│ │    is_header_click = True                                                                                                       │                  │
│ │ is_row_label_click = False                                                                                                      │                  │
│ │               meta = {'row': -1, 'column': 0}                                                                                   │                  │
│ │          row_index = -1                                                                                                         │                  │
│ │               self = ResTable(id='results_table') 

I am almost certain I tried getting around that is_header_click bool, but there's no setter. Also, the traceback here has the chain at 1, but a single-click and nothing else does work, which makes me wonder if this is a "click timing" or message order handling/timing problem.

[nannerpusser]

I got it working finally BUT, the thing is, it will now only push_screen_wait IF I have show_row_labels = True. Meaning I cannot double click anywhere BUT the row label itself. The rich Text renderables themselves are non-interactive. I don't know why this is, but I know it's something stupid I'm doing and not thinking about as a python baddie. Here is the actual working implement, warts and all:

    @work
    async def on_click(self, event: Click) -> None:
        if event.control.id == "results_table":
            if event.chain == 1:
                event.prevent_default()
            if (row := event.style.meta.get("row", -1)) > -1 and event.chain == 2:
                    sel_row = int(row)
                    pl_id = self.search_results[sel_row]["playlistId"]
                    vid_id = self.search_results[sel_row]["videoId"]
                    search_type = self.app.query_one("#radio_set").pressed_button.id
                    await self.app.push_screen_wait(PlayerScreen(search_results=self.stuff_and_things, whatever)
            else:
                return

    async def on_resize(self, event: events.Resize):
        table = self.app.query_one("#results_table")
        if self.query_one("#results_table").is_mounted:
            column_w = int(self.app.query_one("#results_table").size.width / 3)
            for column in self.table.columns.values():
                column.auto_width = False
                column.width = column_w
            table.refresh()

    def update_table(self, results: List[dict]):
        table = self.query_one(DataTable)
        table.clear()
        for i, result in enumerate(results):
            table.add_row(Text(html.unescape(result["title"]), overflow="ellipsis", no_wrap=True), Text(result["link"], overflow="ellipsis", no_wrap=True), Text(html.unescape(result["description"]), overflow="ellipsis", no_wrap=True), label=str(i))

        table.refresh()

Lots of gross code there, I know. I wanted to do this without AI, but with the requisite help from StackOverflow/Google, so my methods are based on both this very GitHub repo examples and help forum and SO logic. If I'm doing something monumentally stupid, please correct.

EDIT: This is with: self.table.cursor_type = "row" and the other strange thing is, double-click response and action still works fine after I update the table rows, BUT ONLY on the header row. If I double-click BEFORE I update the table, it works and notifies I clicked row 0 anywhere I double click, but AFTER a table update and filled out rows, I can only double-click the row label OR the table header and still get the toast notify (and push_screen if it's a row double-click). Updated working example methods..

[willmcgugan]

You might want to post on the Discord channel for help with this.

[nannerpusser]

Will do, thank you!

[apoorva-01]

The crash is because you're reimplementing DataTable's own header branch (self.ordered_columns[column_index]) in your override, and hitting it with a column index that isn't a real column. You don't need to touch that path at all. Add a plain on_click on your subclass instead of overriding _on_click, and let the built-in one keep running.

Two facts that make this easy:

• Click events carry a chain attribute. event.chain == 2 is a double-click.
• The cell under the pointer is in event.style.meta as row/column. The header row is row == -1.

And the bit that isn't obvious: your subclass on_click and the built-in DataTable._on_click are on different classes in the MRO, so both fire. That means single-click keeps posting RowSelected for free, and you only add the double-click case:

from textual import events, work
from textual.widgets import DataTable

class MyTable(DataTable):
    def on_click(self, event: events.Click) -> None:
        row = event.style.meta.get("row", -1)
        if row < 0:                 # header or off a real row: ignore
            event.prevent_default() # stops the built-in header handling too
            return
        if event.chain == 2:        # double-click on a real row
            event.prevent_default() # skip the built-in select for this click
            self.open_modal(row)

    @work
    async def open_modal(self, row: int) -> None:
        await self.app.push_screen_wait(MyModal(row))

prevent_default() is the key. It sets a flag that stops the built-in _on_click (the "default action") from running for that event, which is how you make the header inert without crashing and how you keep a double-click from also firing a second RowSelected. event.stop() won't do this, it only stops bubbling to the parent, so use prevent_default here.

Single-click still flows through to your existing on_data_table_row_selected untouched. push_screen_wait has to be awaited from a worker, hence the @work.

[nannerpusser]

This was exactly right and ultimately what I ended up with, more or less, only I got there with more brute force and trial and error (emphasis on error) than a great summary of what precisely I had wrong. Appreciate the explanation and detail!