Editing cell in a DataTable

[davetapley]

Is there much appetite for in place editing DataTable cells?

I'm thinking double click a cell and it 'becomes' an input, Enter to 'save' the new value and emit a changed event.

[willmcgugan]

It would certainly be useful.

[TomJGooding]

How would you manage the type of the cell value if updated from input?

Here's a quick example using the swimmers data from the docs. Let's say you are editing a cell in the 'time' column. Should this only allow input that can be cast as the same type of the original cell value (i.e. float)? Or just allow any input and trust the programmer to manage any errors later?

from typing import Any

from textual.app import App, ComposeResult
from textual.screen import ModalScreen, Screen
from textual.widgets import DataTable, Input, TextLog

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),
]


class MainScreen(Screen):
    def compose(self) -> ComposeResult:
        yield DataTable()
        yield TextLog()

    def on_mount(self) -> None:
        table = self.query_one(DataTable)
        table.styles.margin = (3, 0)

        table.add_columns(*ROWS[0])  # type: ignore[arg-type]
        for number, row in enumerate(ROWS[1:], start=1):
            table.add_row(*row, label=str(number))

        table.focus()

    def on_data_table_cell_selected(
        self,
        event: DataTable.CellSelected,
    ) -> None:
        cell_value: Any = event.value

        message = (
            f"Original value of cell at {event.coordinate}"
            f" is {event.value} and type {type(event.value)}"
        )
        self.query_one(TextLog).write(message)

        self.app.push_screen(EditCellScreen(cell_value))


class EditCellScreen(ModalScreen):
    def __init__(
        self,
        cell_value: Any,
        name: str | None = None,
        id: str | None = None,
        classes: str | None = None,
    ) -> None:
        super().__init__(name=name, id=id, classes=classes)
        self.cell_value = cell_value

    def compose(self) -> ComposeResult:
        yield Input()

    def on_mount(self) -> None:
        cell_input = self.query_one(Input)
        cell_input.value = str(self.cell_value)

        cell_input.focus()

    def on_input_submitted(self, event: Input.Submitted) -> None:
        main_screen = self.app.get_screen("main")

        table = main_screen.query_one(DataTable)
        table.update_cell_at(
            table.cursor_coordinate,
            event.value,
            update_width=True,
        )

        message = (
            f"New value of cell at {table.cursor_coordinate}"
            f" is {event.value} and type {type(event.value)}"
        )
        main_screen.query_one(TextLog).write(message)

        self.app.pop_screen()


class ExampleApp(App):
    SCREENS = {"main": MainScreen()}

    def on_mount(self) -> None:
        self.push_screen("main")


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

[erfanhuda]

Is there any other way to editing cell by clickable event in the datatable cell?

[davetapley]

I ended up just pushing a modal with an input 🤷🏻

[greywidget]

Apologies, I see I replied to the wrong post...

Thanks @TomJGooding for the above snippet, that was very helpful.

I was trying to extend the example a bit to use a Select widget for items in Column 4 of the DataTable.
I'm also only allowing editing of values in columns 4 and 5.

It works OK where I'm adding a new value, but if my cell value has been populated (either on init or by a previous edit) the select_changed method fires straight away and I don't get the chance to amend the value. Feels like it's something to do with initialisation but I've been flailing about and not managed to figure it out.

I'm a pretty new to this, so sorry if I'm being a bit slow on the uptake...

Here is the code:

from typing import Any

from textual import on
from textual.app import App, ComposeResult
from textual.events import Click
from textual.screen import ModalScreen, Screen
from textual.widgets import DataTable, Input, RichLog, Select

ROWS = [
    ("lane", "swimmer", "country", "time", "usercode", "usertext"),
    (4, "Joseph Schooling", "Singapore", 50.39, None, ""),
    (2, "Michael Phelps", "United States", 51.14, None, ""),
]


class MainScreen(Screen):
    def compose(self) -> ComposeResult:
        yield DataTable()
        yield RichLog()

    def on_mount(self) -> None:
        table = self.query_one(DataTable)
        table.styles.margin = (3, 0)

        table.add_columns(*ROWS[0])  # type: ignore[arg-type]
        for number, row in enumerate(ROWS[1:], start=1):
            table.add_row(*row, label=str(number))

        table.focus()

    def on_data_table_cell_selected(
        self,
        event: DataTable.CellSelected,
    ) -> None:
        cell_value: Any = event.value
        if event.coordinate.column < 4:
            return

        message = (
            f"Original value of cell at {event.coordinate}"
            f" is {event.value} and type {type(event.value)}"
        )
        self.query_one(RichLog).write(message)

        if event.coordinate.column == 4:
            self.app.push_screen(SelectCodeScreen(cell_value))
        elif event.coordinate.column == 5:
            self.app.push_screen(EditCellScreen(cell_value))


class EditCellScreen(ModalScreen):
    def __init__(
        self,
        cell_value: Any,
        name: str | None = None,
        id: str | None = None,
        classes: str | None = None,
    ) -> None:
        super().__init__(
            name=name,
            id=id,
            classes=classes,
        )
        self.cell_value = cell_value

    def compose(self) -> ComposeResult:
        yield Input()

    def on_mount(self) -> None:
        cell_input = self.query_one(Input)
        cell_input.value = str(self.cell_value)

        cell_input.focus()

    def on_click(self, event: Click) -> None:
        clicked, _ = self.get_widget_at(event.screen_x, event.screen_y)
        # Close the screen if the user clicks outside the modal content
        # (i.e. the darkened background)
        if clicked is self:
            self.app.pop_screen()

    def on_input_submitted(self, event: Input.Submitted) -> None:
        main_screen = self.app.get_screen("main")

        table = main_screen.query_one(DataTable)
        table.update_cell_at(
            table.cursor_coordinate,
            event.value,
            update_width=True,
        )

        message = (
            f"New value of cell at {table.cursor_coordinate}"
            f" is {event.value} and type {type(event.value)}"
        )
        main_screen.query_one(RichLog).write(message)

        self.app.pop_screen()


class SelectCodeScreen(ModalScreen):

    usercodes = [
        ("Groceries", 1),
        ("Eating Out", 2),
        ("Petrol", 3),
        ("Friperies", 4),
    ]

    def __init__(
        self,
        cell_value: Any,
        name: str | None = None,
        id: str | None = None,
        classes: str | None = None,
    ) -> None:
        super().__init__(name=name, id=id, classes=classes)
        self.cell_value = cell_value
        if not self.cell_value:
            self.cell_value = Select.BLANK

    def compose(self) -> ComposeResult:
        yield Select(self.usercodes, value=self.cell_value)

    def on_mount(self) -> None:
        cell_input = self.query_one(Select)
        # if not self.cell_value:
        #     cell_input.value = Select.BLANK
        # else:
        #     cell_input.value = self.cell_value

        cell_input.focus()

    def on_click(self, event: Click) -> None:
        clicked, _ = self.get_widget_at(event.screen_x, event.screen_y)
        # Close the screen if the user clicks outside the modal content
        # (i.e. the darkened background)
        if clicked is self:
            self.app.pop_screen()

    @on(Select.Changed)
    def select_changed(self, event: Select.Changed) -> None:
        main_screen = self.app.get_screen("main")

        table = main_screen.query_one(DataTable)
        table.update_cell_at(
            table.cursor_coordinate,
            event.value,
            update_width=True,
        )

        message = (
            f"New value of cell at {table.cursor_coordinate}"
            f" is {event.value} and type {type(event.value)}"
        )
        main_screen.query_one(RichLog).write(message)

        self.app.pop_screen()


class ExampleApp(App):
    SCREENS = {"main": MainScreen()}

    def on_mount(self) -> None:
        self.push_screen("main")


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

[TomJGooding]

@greywidget I've not had chance to run your example yet, but it sounds like this PR #4392 relating to Select might be helpful here.

[greywidget]

@TomJGooding Thanks so much for taking the time to help me out - much appreciated.

I need to think about this some more (I'm very new to textual) but this did solve the issue I was seeing. It works as I hoped, after the following modification:

diff --git a/app1.py b/app1.py
index 20544c7..7c5fdf3 100644
--- a/app1.py
+++ b/app1.py
@@ -120,7 +120,8 @@ class SelectCodeScreen(ModalScreen):
             self.cell_value = Select.BLANK

     def compose(self) -> ComposeResult:
-        yield Select(self.usercodes, value=self.cell_value)
+        with self.prevent(Select.Changed):
+            yield Select(self.usercodes, value=self.cell_value)

     def on_mount(self) -> None:
         cell_input = self.query_one(Select)

Nice one, thankyou Tom.

[prurph]

It would be great to have in place editing of table cells!