I can click on the grid to select a cell

src/myfasthtml/controls/DataGrid.py

@@ -11,6 +11,7 @@ from pandas import DataFrame
 
 from myfasthtml.controls.BaseCommands import BaseCommands
 from myfasthtml.controls.DataGridQuery import DataGridQuery, DG_QUERY_FILTER
+from myfasthtml.controls.Mouse import Mouse
 from myfasthtml.controls.datagrid_objects import DataGridColumnState, DataGridRowState, \
   DatagridSelectionState, DataGridHeaderFooterConf, DatagridEditionState
 from myfasthtml.controls.helpers import mk
@@ -110,6 +111,13 @@ class Commands(BaseCommands):
                    self._owner,
                    self._owner.filter
                    )
+  
+  def on_click(self):
+    return Command("OnClick",
+                   "Click on the table",
+                   self._owner,
+                   self._owner.on_click
+                   ).htmx(target=f"#tsm_{self._id}")
 
 
 class DataGrid(MultipleInstance):
@@ -121,6 +129,11 @@ class DataGrid(MultipleInstance):
     self.init_from_dataframe(self._state.ne_df, init_state=False)  # state comes from DatagridState
     self._datagrid_filter = DataGridQuery(self)
     self._datagrid_filter.bind_command("QueryChanged", self.commands.filter())
+    self._datagrid_filter.bind_command("CancelQuery", self.commands.filter())
+    self._datagrid_filter.bind_command("ChangeFilterType", self.commands.filter())
+    
+    # update the filter
+    self._state.filtered[FILTER_INPUT_CID] = self._datagrid_filter.get_query()
   
   @property
   def _df(self):
@@ -169,6 +182,31 @@ class DataGrid(MultipleInstance):
     
     return df
   
+  def _get_element_id_from_pos(self, selection_mode, pos):
+    if pos is None or pos == (None, None):
+      return None
+    elif selection_mode == "row":
+      return f"trow_{self._id}-{pos[0]}"
+    elif selection_mode == "column":
+      return f"tcol_{self._id}-{pos[1]}"
+    else:
+      return f"tcell_{self._id}-{pos[0]}-{pos[1]}"
+  
+  def _get_pos_from_element_id(self, element_id):
+    if element_id is None:
+      return None
+    
+    if element_id.startswith("tcell_"):
+      parts = element_id.split("-")
+      return int(parts[-2]), int(parts[-1])
+    
+    return None
+  
+  def _update_current_position(self, pos):
+    self._state.selection.last_selected = self._state.selection.selected
+    self._state.selection.selected = pos
+    self._state.save()
+  
   def init_from_dataframe(self, df, init_state=True):
     
     def _get_column_type(dtype):
@@ -271,7 +309,16 @@ class DataGrid(MultipleInstance):
   def filter(self):
     logger.debug("filter")
     self._state.filtered[FILTER_INPUT_CID] = self._datagrid_filter.get_query()
-    return self.mk_body_container(redraw_scrollbars=True)
+    return self.render_partial("body", redraw_scrollbars=True)
+  
+  def on_click(self, combination, is_inside, cell_id):
+    logger.debug(f"on_click {combination=} {is_inside=} {cell_id=}")
+    if is_inside and cell_id:
+      if cell_id.startswith("tcell_"):
+        pos = self._get_pos_from_element_id(cell_id)
+        self._update_current_position(pos)
+    
+    return self.render_partial()
   
   def mk_headers(self):
     resize_cmd = self.commands.set_column_width()
@@ -375,6 +422,7 @@ class DataGrid(MultipleInstance):
                         data_col=col_def.col_id,
                         data_tooltip=str(value),
                         style=f"width:{col_def.width}px;",
+                        id=self._get_element_id_from_pos("cell", (row_index, col_pos)),
                         cls="dt2-cell")
   
   def mk_body_content_page(self, page_index: int):
@@ -404,12 +452,11 @@ class DataGrid(MultipleInstance):
     
     return rows
   
-  def mk_body_container(self, redraw_scrollbars=False):
+  def mk_body_container(self):
     return Div(
       self.mk_body(),
-      Script(f"initDataGridScrollbars('{self._id}');") if redraw_scrollbars else None,
       cls="dt2-body-container",
-      id=f"tb_{self._id}"
+      id=f"tb_{self._id}",
     )
   
   def mk_body(self):
@@ -433,6 +480,8 @@ class DataGrid(MultipleInstance):
   
   def mk_table(self):
     return Div(
+      self.mk_selection_manager(),
+      
       # Grid table with header, body, footer
       Div(
         # Header container - no scroll
@@ -469,6 +518,25 @@ class DataGrid(MultipleInstance):
       id=f"tw_{self._id}"
     )
   
+  def mk_selection_manager(self):
+    
+    extra_attr = {
+        "hx-on::after-settle": f"updateDatagridSelection('{self._id}');",
+    }
+    
+    selected = []
+    
+    if self._state.selection.selected:
+      #selected.append(("cell", self._get_element_id_from_pos("cell", self._state.selection.selected)))
+      selected.append(("focus", self._get_element_id_from_pos("cell", self._state.selection.selected)))
+    
+    return Div(
+      *[Div(selection_type=s_type, element_id=f"{elt_id}") for s_type, elt_id in selected],
+      id=f"tsm_{self._id}",
+      selection_mode=f"{self._state.selection.selection_mode}",
+      **extra_attr,
+    )
+  
   def mk_aggregation_cell(self, col_def, row_index: int, footer_conf, oob=False):
     """
     Generates a footer cell for a data table based on the provided column definition,
@@ -535,14 +603,43 @@ class DataGrid(MultipleInstance):
     if self._state.ne_df is None:
       return Div("No data to display !")
     
+    mouse_support = {
+        "click": {"command": self.commands.on_click(), "hx_vals": "js:getCellId()"},
+        "ctrl+click": {"command": self.commands.on_click(), "hx_vals": "js:getCellId()"},
+        "shift+click": {"command": self.commands.on_click(), "hx_vals": "js:getCellId()"},
+    }
+    
     return Div(
       Div(self._datagrid_filter, cls="mb-2"),
       self.mk_table(),
       Script(f"initDataGrid('{self._id}');"),
+      Mouse(self, combinations=mouse_support),
       id=self._id,
       cls="grid",
       style="height: 100%; grid-template-rows: auto 1fr;"
     )
   
+  def render_partial(self, fragment="cell", redraw_scrollbars=False):
+    """
+    
+    :param fragment: cell | body
+    :param redraw_scrollbars:
+    :return:
+    """
+    res = []
+    
+    extra_attr = {
+        "hx-on::after-settle": f"initDataGridScrollbars('{self._id}');",
+    }
+    
+    if fragment == "body":
+      body_container = self.mk_body_container()
+      body_container.attrs.update(extra_attr)
+      res.append(body_container)
+    
+    res.append(self.mk_selection_manager())
+    
+    return tuple(res)
+  
   def __ft__(self):
     return self.render()

src/myfasthtml/controls/DataGridQuery.py

@@ -75,7 +75,7 @@ class DataGridQuery(MultipleInstance):
   
   def query_changed(self, query):
     logger.debug(f"query_changed {query=}")
-    self._state.query = query
+    self._state.query = query.strip() if query is not None else None
     return self
   
   def render(self):

src/myfasthtml/controls/Mouse.py

@@ -12,17 +12,112 @@ class Mouse(MultipleInstance):
 
   This class is used to add, manage, and render mouse event sequences with corresponding
   commands, providing a flexible way to handle mouse interactions programmatically.
+
+  Combinations can be defined with:
+  - A Command object: mouse.add("click", command)
+  - HTMX parameters: mouse.add("click", hx_post="/url", hx_vals={...})
+  - Both (named params override command): mouse.add("click", command, hx_target="#other")
+
+  For dynamic hx_vals, use "js:functionName()" to call a client-side function.
   """
   def __init__(self, parent, _id=None, combinations=None):
     super().__init__(parent, _id=_id)
     self.combinations = combinations or {}
-  
-  def add(self, sequence: str, command: Command):
-    self.combinations[sequence] = command
+
+  def add(self, sequence: str, command: Command = None, *,
+          hx_post: str = None, hx_get: str = None, hx_put: str = None,
+          hx_delete: str = None, hx_patch: str = None,
+          hx_target: str = None, hx_swap: str = None, hx_vals=None):
+    """
+    Add a mouse combination with optional command and HTMX parameters.
+
+    Args:
+        sequence: Mouse event sequence (e.g., "click", "ctrl+click", "click right_click")
+        command: Optional Command object for server-side action
+        hx_post: HTMX post URL (overrides command)
+        hx_get: HTMX get URL (overrides command)
+        hx_put: HTMX put URL (overrides command)
+        hx_delete: HTMX delete URL (overrides command)
+        hx_patch: HTMX patch URL (overrides command)
+        hx_target: HTMX target selector (overrides command)
+        hx_swap: HTMX swap strategy (overrides command)
+        hx_vals: HTMX values dict or "js:functionName()" for dynamic values
+
+    Returns:
+        self for method chaining
+    """
+    self.combinations[sequence] = {
+      "command": command,
+      "hx_post": hx_post,
+      "hx_get": hx_get,
+      "hx_put": hx_put,
+      "hx_delete": hx_delete,
+      "hx_patch": hx_patch,
+      "hx_target": hx_target,
+      "hx_swap": hx_swap,
+      "hx_vals": hx_vals,
+    }
     return self
-  
+
+  def _build_htmx_params(self, combination_data: dict) -> dict:
+    """
+    Build HTMX parameters by merging command params with named overrides.
+
+    Named parameters take precedence over command parameters.
+    hx_vals is handled separately via hx-vals-extra to preserve command's hx-vals.
+    """
+    command = combination_data.get("command")
+
+    # Start with command params if available
+    if command is not None:
+      params = command.get_htmx_params().copy()
+    else:
+      params = {}
+
+    # Override with named parameters (only if explicitly set)
+    # Note: hx_vals is handled separately below
+    param_mapping = {
+      "hx_post": "hx-post",
+      "hx_get": "hx-get",
+      "hx_put": "hx-put",
+      "hx_delete": "hx-delete",
+      "hx_patch": "hx-patch",
+      "hx_target": "hx-target",
+      "hx_swap": "hx-swap",
+    }
+
+    for py_name, htmx_name in param_mapping.items():
+      value = combination_data.get(py_name)
+      if value is not None:
+        params[htmx_name] = value
+
+    # Handle hx_vals separately - store in hx-vals-extra to not overwrite command's hx-vals
+    hx_vals = combination_data.get("hx_vals")
+    if hx_vals is not None:
+      if isinstance(hx_vals, str) and hx_vals.startswith("js:"):
+        # Dynamic values: extract function name
+        func_name = hx_vals[3:].rstrip("()")
+        params["hx-vals-extra"] = {"js": func_name}
+      elif isinstance(hx_vals, dict):
+        # Static dict values
+        params["hx-vals-extra"] = {"dict": hx_vals}
+      else:
+        # Other string values - try to parse as JSON
+        try:
+          parsed = json.loads(hx_vals)
+          if not isinstance(parsed, dict):
+            raise ValueError(f"hx_vals must be a dict, got {type(parsed).__name__}")
+          params["hx-vals-extra"] = {"dict": parsed}
+        except json.JSONDecodeError as e:
+          raise ValueError(f"hx_vals must be a dict or 'js:functionName()', got invalid JSON: {e}")
+
+    return params
+
   def render(self):
-    str_combinations = {sequence: command.get_htmx_params() for sequence, command in self.combinations.items()}
+    str_combinations = {
+      sequence: self._build_htmx_params(data)
+      for sequence, data in self.combinations.items()
+    }
     return Script(f"add_mouse_support('{self._parent.get_id()}', '{json.dumps(str_combinations)}')")
   
   def __ft__(self):

src/myfasthtml/controls/datagrid_objects.py

@@ -9,6 +9,7 @@ class DataGridRowState:
   visible: bool = True
   height: int | None = None
 
+
 @dataclass
 class DataGridColumnState:
   col_id: str  # name of the column: cannot be changed
@@ -40,8 +41,6 @@ class DataGridHeaderFooterConf:
   conf: dict[str, str] = field(default_factory=dict)  # first 'str' is the column id
 
 
-
-
 @dataclass
 class DatagridView:
   name: str