Added keyboard support

This commit is contained in:
2026-02-11 22:32:15 +01:00
parent fe322300c1
commit 0df78c0513

View File

@@ -16,6 +16,7 @@ from myfasthtml.controls.DataGridColumnsManager import DataGridColumnsManager
from myfasthtml.controls.DataGridFormattingEditor import DataGridFormattingEditor
from myfasthtml.controls.DataGridQuery import DataGridQuery, DG_QUERY_FILTER
from myfasthtml.controls.DslEditor import DslEditorConf
from myfasthtml.controls.Keyboard import Keyboard
from myfasthtml.controls.Mouse import Mouse
from myfasthtml.controls.Panel import Panel, PanelConf
from myfasthtml.controls.datagrid_objects import DataGridColumnState, DataGridRowState, \
@@ -157,6 +158,13 @@ class Commands(BaseCommands):
self._owner.on_click
).htmx(target=f"#tsm_{self._id}")
def on_key_pressed(self):
return Command("OnKeyPressed",
"Key pressed on the table",
self._owner,
self._owner.on_key_pressed
).htmx(target=f"#tsm_{self._id}")
def on_mouse_selection(self):
return Command("OnMouseSelection",
"Range selection with mouse",
@@ -252,6 +260,10 @@ class DataGrid(MultipleInstance):
"shift+click": {"command": self.commands.on_click(), "hx_vals": "js:getCellId()"},
}
self._key_support = {
"esc": self.commands.on_key_pressed(),
}
logger.debug(f"DataGrid '{self.get_table_name()}' with id='{self._id}' created.")
@property
@@ -521,6 +533,14 @@ class DataGrid(MultipleInstance):
return self.render_partial()
def on_key_pressed(self, combination, has_focus, is_inside):
logger.debug(f"on_key_pressed {combination=} {has_focus=} {is_inside=}")
if combination == "esc":
self._update_current_position(None)
self._state.selection.extra_selected.clear()
return self.render_partial()
def on_column_changed(self):
logger.debug("on_column_changed")
return self.render_partial("table")
@@ -876,6 +896,7 @@ class DataGrid(MultipleInstance):
self._panel.set_main(self.mk_table_wrapper()),
Script(f"initDataGrid('{self._id}');"),
Mouse(self, combinations=self._mouse_support, _id="-mouse"),
Keyboard(self, combinations=self._key_support, _id="-keyboard"),
id=self._id,
cls="grid",
style="height: 100%; grid-template-rows: auto 1fr;"