Customized DataTable edit on cell region

[Yurii-huang]

from textual import on
from textual.app import App, ComposeResult
from textual.events import Blur
from textual.widgets import DataTable, OptionList, Input
from textual.widgets.data_table import CellKey, CellType
from textual.reactive import var
from textual.events import Blur
from textual.screen import Screen
from textual.coordinate import Coordinate
from rich.region import Region

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 DataEditor(Input):
    Input.DEFAULT_CSS = """
    Input{
        border: none;
        min-width: 15;
        width: auto;
        height: 1;
        background: green;       
    }
    SingleLineInput:focus {
        border: none;
    }
    Input>.input--cursor {
        background: $surface;
        color: $text;
        width: 1;
        text-style: reverse;
    }
    """
    
    def compose(self):
        self.event:DataTable.CellSelected
        return super().compose()
    
    @on(Blur)
    def on_blur(self, event:Blur) -> None:
        validation_result = (
            self.validate(self.value) if "submitted" in self.validate_on else None
        )
        self.post_message(DataEditor.Submitted(self, self.value, validation_result))

class DataView(DataTable):

    DEFAULT_CSS ="""
    DataView > DataEditor {
        width: 1fr;
        display: none;
        height: auto;
        max-height: 12;
        overlay: screen;
        constrain: y;
    }

    Select.-expanded > SelectOverlay {
        display: block;
    }
    """
    expanded: var[bool] = var(False, init=False)

    BINDINGS = [("enter", "select_cursor")]

    def compose(self):
        yield DataEditor()
    
    @on(DataEditor.Submitted)
    def _on_editor_submitted(self, event:DataEditor.Submitted):
        editor = self.query_one(DataEditor)
        data_table = editor.event.data_table
        data_table.focus()
        data_table.update_cell_at(editor.event.coordinate,
                                  editor.value,
                                  update_width=True)
        editor.display = "none"
    
    @on(DataTable.CellSelected)
    def _on_cell_selected(self, event:DataTable.CellSelected):
        editor = self.query_one(DataEditor)
        editor.value = str(event.value)
        editor.display = "block"
        editor.event = event
        region:Region = self._get_cell_region(event.coordinate)
        editor.styles.offset = (region.x, region.y)
        editor.styles.max_height = region.height
        editor.styles.max_width = region.width
        self.mount(editor)
        editor.focus()

class TableApp(App):
    def __init__(self):
        super().__init__()
        self.table = DataView(id="DataTable")
        self.table.add_columns(*ROWS[0])
        self.table.add_rows(ROWS[1:])
    def on_mount(self) -> None:
        self.mount(self.table)

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

[Yurii-huang]

[YoonSungHyun-Git]

Hello,
I have a question.
How should I modify the CSS to only apply input to DataEditor?

[Yurii-huang]

can't setting width, use "padding-left: 0" with input widget

[Yurii-huang]

display the string valueIt should not be long enough to show about the edited string, and if you want the width to show with your newly typed character, you need to call "update" to update it with "update_width=True"

[YoonSungHyun-Git]

thank you Modified by adding padding.

   DataEditor{
        border: none;
        min-width: 15;
        width: auto;
        height: 1;
        background: green;
        padding: 0;
    }

[YoonSungHyun-Git]

Can I ask you a few more questions?
When clicking, I would like to update the letter V by distinguishing the ID and clicking it like a checkbox to use the editor. By removing V if it exists.

def _on_cell_selected(self, event:DataTable.CellSelected):

The value of editor.event.data_table.id was empty. Is there a value that can be used to process the branch when clicked?

[Yurii-huang]

The id attribute be used css selector,
U can use query_one(".id") get widgets.
Don't use it in other cases, it's a framework feature