kodjo/MyFastHtml
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

I can click on the grid to select a cell

Browse Source
This commit is contained in:
Kodjo Sossouvi
2026-01-24 12:06:22 +01:00
parent 191ead1c89
commit ba2b6e672a
9 changed files with 1268 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/myfasthtml/assets/myfasthtml.css
View File

@@ -2,6 +2,8 @@
--color-border-primary: color-mix(in oklab, var(--color-primary) 40%, #0000);
--color-border: color-mix(in oklab, var(--color-base-content) 20%, #0000);
--color-resize: color-mix(in oklab, var(--color-base-content) 50%, #0000);
--color-selection: color-mix(in oklab, var(--color-primary) 20%, #0000);
--datagrid-resize-zindex: 1;
--font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
@@ -851,7 +853,7 @@
.dt2-row {
display: flex;
width: 100%;
height: 22px;
height: 20px;
}
/* Cell */
@@ -928,6 +930,34 @@
color: var(--color-accent);
}
.dt2-selected-focus {
outline: 2px solid var(--color-primary);
outline-offset: -3px; /* Ensure the outline is snug to the cell */
}
.dt2-cell:hover,
.dt2-selected-cell {
background-color: var(--color-selection);
}
.dt2-selected-row {
background-color: var(--color-selection);
}
.dt2-selected-column {
background-color: var(--color-selection);
}
.dt2-hover-row {
background-color: var(--color-selection);
}
.dt2-hover-column {
background-color: var(--color-selection);
}
/* *********************************************** */
/* ******** DataGrid Fixed Header/Footer ******** */
/* *********************************************** */

345
src/myfasthtml/assets/myfasthtml.js
View File

@@ -395,6 +395,128 @@ function updateTabs(controllerId) {
}
}
/**
* Find the parent element with .dt2-cell class and return its id.
* Used with hx-vals="js:getCellId()" for DataGrid cell identification.
*
* @param {MouseEvent} event - The mouse event
* @returns {Object} Object with cell_id property, or empty object if not found
*/
function getCellId(event) {
const cell = event.target.closest('.dt2-cell');
if (cell && cell.id) {
return {cell_id: cell.id};
}
return {cell_id: null};
}
/**
* Shared utility function for triggering HTMX actions from keyboard/mouse bindings.
* Handles dynamic hx-vals with "js:functionName()" syntax.
*
* @param {string} elementId - ID of the element
* @param {Object} config - HTMX configuration object
* @param {string} combinationStr - The matched combination string
* @param {boolean} isInside - Whether the focus/click is inside the element
* @param {Event} event - The event that triggered this action (KeyboardEvent or MouseEvent)
*/
function triggerHtmxAction(elementId, config, combinationStr, isInside, event) {
const element = document.getElementById(elementId);
if (!element) return;
const hasFocus = document.activeElement === element;
// Extract HTTP method and URL from hx-* attributes
let method = 'POST'; // default
let url = null;
const methodMap = {
'hx-post': 'POST',
'hx-get': 'GET',
'hx-put': 'PUT',
'hx-delete': 'DELETE',
'hx-patch': 'PATCH'
};
for (const [attr, httpMethod] of Object.entries(methodMap)) {
if (config[attr]) {
method = httpMethod;
url = config[attr];
break;
}
}
if (!url) {
console.error('No HTTP method attribute found in config:', config);
return;
}
// Build htmx.ajax options
const htmxOptions = {};
// Map hx-target to target
if (config['hx-target']) {
htmxOptions.target = config['hx-target'];
}
// Map hx-swap to swap
if (config['hx-swap']) {
htmxOptions.swap = config['hx-swap'];
}
// Map hx-vals to values and add combination, has_focus, and is_inside
const values = {};
// 1. Merge static hx-vals from command (if present)
if (config['hx-vals'] && typeof config['hx-vals'] === 'object') {
Object.assign(values, config['hx-vals']);
}
// 2. Merge hx-vals-extra (user overrides)
if (config['hx-vals-extra']) {
const extra = config['hx-vals-extra'];
// Merge static dict values
if (extra.dict && typeof extra.dict === 'object') {
Object.assign(values, extra.dict);
}
// Call dynamic JS function and merge result
if (extra.js) {
try {
const func = window[extra.js];
if (typeof func === 'function') {
const dynamicValues = func(event, element, combinationStr);
if (dynamicValues && typeof dynamicValues === 'object') {
Object.assign(values, dynamicValues);
}
} else {
console.error(`Function "${extra.js}" not found on window`);
}
} catch (e) {
console.error('Error calling dynamic hx-vals function:', e);
}
}
}
values.combination = combinationStr;
values.has_focus = hasFocus;
values.is_inside = isInside;
htmxOptions.values = values;
// Add any other hx-* attributes (like hx-headers, hx-select, etc.)
for (const [key, value] of Object.entries(config)) {
if (key.startsWith('hx-') && !['hx-post', 'hx-get', 'hx-put', 'hx-delete', 'hx-patch', 'hx-target', 'hx-swap', 'hx-vals'].includes(key)) {
// Remove 'hx-' prefix and convert to camelCase
const optionKey = key.substring(3).replace(/-([a-z])/g, (g) => g[1].toUpperCase());
htmxOptions[optionKey] = value;
}
}
// Make AJAX call with htmx
htmx.ajax(method, url, htmxOptions);
}
/**
* Create keyboard bindings
*/
@@ -553,80 +675,6 @@ function updateTabs(controllerId) {
return false;
}
/**
* Trigger an action for a matched combination
* @param {string} elementId - ID of the element
* @param {Object} config - HTMX configuration object
* @param {string} combinationStr - The matched combination string
* @param {boolean} isInside - Whether the focus is inside the element
*/
function triggerAction(elementId, config, combinationStr, isInside) {
const element = document.getElementById(elementId);
if (!element) return;
const hasFocus = document.activeElement === element;
// Extract HTTP method and URL from hx-* attributes
let method = 'POST'; // default
let url = null;
const methodMap = {
'hx-post': 'POST',
'hx-get': 'GET',
'hx-put': 'PUT',
'hx-delete': 'DELETE',
'hx-patch': 'PATCH'
};
for (const [attr, httpMethod] of Object.entries(methodMap)) {
if (config[attr]) {
method = httpMethod;
url = config[attr];
break;
}
}
if (!url) {
console.error('No HTTP method attribute found in config:', config);
return;
}
// Build htmx.ajax options
const htmxOptions = {};
// Map hx-target to target
if (config['hx-target']) {
htmxOptions.target = config['hx-target'];
}
// Map hx-swap to swap
if (config['hx-swap']) {
htmxOptions.swap = config['hx-swap'];
}
// Map hx-vals to values and add combination, has_focus, and is_inside
const values = {};
if (config['hx-vals']) {
Object.assign(values, config['hx-vals']);
}
values.combination = combinationStr;
values.has_focus = hasFocus;
values.is_inside = isInside;
htmxOptions.values = values;
// Add any other hx-* attributes (like hx-headers, hx-select, etc.)
for (const [key, value] of Object.entries(config)) {
if (key.startsWith('hx-') && !['hx-post', 'hx-get', 'hx-put', 'hx-delete', 'hx-patch', 'hx-target', 'hx-swap', 'hx-vals'].includes(key)) {
// Remove 'hx-' prefix and convert to camelCase
const optionKey = key.substring(3).replace(/-([a-z])/g, (g) => g[1].toUpperCase());
htmxOptions[optionKey] = value;
}
}
// Make AJAX call with htmx
htmx.ajax(method, url, htmxOptions);
}
/**
* Handle keyboard events and trigger matching combinations
* @param {KeyboardEvent} event - The keyboard event
@@ -710,7 +758,7 @@ function updateTabs(controllerId) {
// We have matches and NO element has longer sequences possible
// Trigger ALL matches immediately
for (const match of currentMatches) {
triggerAction(match.elementId, match.config, match.combinationStr, match.isInside);
triggerHtmxAction(match.elementId, match.config, match.combinationStr, match.isInside, event);
}
// Clear history after triggering
@@ -721,11 +769,12 @@ function updateTabs(controllerId) {
// Wait for timeout - ALL current matches will be triggered if timeout expires
KeyboardRegistry.pendingMatches = currentMatches;
const savedEvent = event; // Save event for timeout callback
KeyboardRegistry.pendingTimeout = setTimeout(() => {
// Timeout expired, trigger ALL pending matches
for (const match of KeyboardRegistry.pendingMatches) {
triggerAction(match.elementId, match.config, match.combinationStr, match.isInside);
triggerHtmxAction(match.elementId, match.config, match.combinationStr, match.isInside, savedEvent);
}
// Clear state
@@ -1051,80 +1100,6 @@ function updateTabs(controllerId) {
return actions;
}
/**
* Trigger an action for a matched combination
* @param {string} elementId - ID of the element
* @param {Object} config - HTMX configuration object
* @param {string} combinationStr - The matched combination string
* @param {boolean} isInside - Whether the click was inside the element
*/
function triggerAction(elementId, config, combinationStr, isInside) {
const element = document.getElementById(elementId);
if (!element) return;
const hasFocus = document.activeElement === element;
// Extract HTTP method and URL from hx-* attributes
let method = 'POST'; // default
let url = null;
const methodMap = {
'hx-post': 'POST',
'hx-get': 'GET',
'hx-put': 'PUT',
'hx-delete': 'DELETE',
'hx-patch': 'PATCH'
};
for (const [attr, httpMethod] of Object.entries(methodMap)) {
if (config[attr]) {
method = httpMethod;
url = config[attr];
break;
}
}
if (!url) {
console.error('No HTTP method attribute found in config:', config);
return;
}
// Build htmx.ajax options
const htmxOptions = {};
// Map hx-target to target
if (config['hx-target']) {
htmxOptions.target = config['hx-target'];
}
// Map hx-swap to swap
if (config['hx-swap']) {
htmxOptions.swap = config['hx-swap'];
}
// Map hx-vals to values and add combination, has_focus, and is_inside
const values = {};
if (config['hx-vals']) {
Object.assign(values, config['hx-vals']);
}
values.combination = combinationStr;
values.has_focus = hasFocus;
values.is_inside = isInside;
htmxOptions.values = values;
// Add any other hx-* attributes (like hx-headers, hx-select, etc.)
for (const [key, value] of Object.entries(config)) {
if (key.startsWith('hx-') && !['hx-post', 'hx-get', 'hx-put', 'hx-delete', 'hx-patch', 'hx-target', 'hx-swap', 'hx-vals'].includes(key)) {
// Remove 'hx-' prefix and convert to camelCase
const optionKey = key.substring(3).replace(/-([a-z])/g, (g) => g[1].toUpperCase());
htmxOptions[optionKey] = value;
}
}
// Make AJAX call with htmx
htmx.ajax(method, url, htmxOptions);
}
/**
* Handle mouse events and trigger matching combinations
* @param {MouseEvent} event - The mouse event
@@ -1223,7 +1198,7 @@ function updateTabs(controllerId) {
// We have matches and NO longer sequences possible
// Trigger ALL matches immediately
for (const match of currentMatches) {
triggerAction(match.elementId, match.config, match.combinationStr, match.isInside);
triggerHtmxAction(match.elementId, match.config, match.combinationStr, match.isInside, event);
}
// Clear history after triggering
@@ -1234,11 +1209,12 @@ function updateTabs(controllerId) {
// Wait for timeout - ALL current matches will be triggered if timeout expires
MouseRegistry.pendingMatches = currentMatches;
const savedEvent = event; // Save event for timeout callback
MouseRegistry.pendingTimeout = setTimeout(() => {
// Timeout expired, trigger ALL pending matches
for (const match of MouseRegistry.pendingMatches) {
triggerAction(match.elementId, match.config, match.combinationStr, match.isInside);
triggerHtmxAction(match.elementId, match.config, match.combinationStr, match.isInside, savedEvent);
}
// Clear state
@@ -1267,9 +1243,8 @@ function updateTabs(controllerId) {
MouseRegistry.snapshotHistory = [];
}
// DEBUG: Log click handler performance
// Warn if click handler is slow
const clickDuration = performance.now() - clickStart;
console.warn(`🖱️ Click handler DONE: ${clickDuration.toFixed(2)}ms (${iterationCount} iterations, ${currentMatches.length} matches)`);
if (clickDuration > 100) {
console.warn(`⚠️ SLOW CLICK HANDLER: ${clickDuration.toFixed(2)}ms for ${elementCount} elements`);
}
@@ -1361,7 +1336,7 @@ function updateTabs(controllerId) {
// We have matches and NO longer sequences possible
// Trigger ALL matches immediately
for (const match of currentMatches) {
triggerAction(match.elementId, match.config, match.combinationStr, match.isInside);
triggerHtmxAction(match.elementId, match.config, match.combinationStr, match.isInside, event);
}
// Clear history after triggering
@@ -1372,11 +1347,12 @@ function updateTabs(controllerId) {
// Wait for timeout - ALL current matches will be triggered if timeout expires
MouseRegistry.pendingMatches = currentMatches;
const savedEvent = event; // Save event for timeout callback
MouseRegistry.pendingTimeout = setTimeout(() => {
// Timeout expired, trigger ALL pending matches
for (const match of MouseRegistry.pendingMatches) {
triggerAction(match.elementId, match.config, match.combinationStr, match.isInside);
triggerHtmxAction(match.elementId, match.config, match.combinationStr, match.isInside, savedEvent);
}
// Clear state
@@ -1495,8 +1471,14 @@ function updateTabs(controllerId) {
function initDataGrid(gridId) {
initDataGridScrollbars(gridId);
initDataGridMouseOver(gridId);
makeDatagridColumnsResizable(gridId);
makeDatagridColumnsMovable(gridId);
updateDatagridSelection(gridId)
}
function initDataGridMouseOver(gridId) {
}
/**
@@ -1656,7 +1638,7 @@ function initDataGridScrollbars(gridId) {
dragStartY = e.clientY;
dragStartScrollTop = cachedBodyScrollTop;
wrapper.setAttribute("mf-no-tooltip", "");
}, { signal });
}, {signal});
// Horizontal scrollbar mousedown
horizontalScrollbar.addEventListener("mousedown", (e) => {
@@ -1664,7 +1646,7 @@ function initDataGridScrollbars(gridId) {
dragStartX = e.clientX;
dragStartScrollLeft = cachedTableScrollLeft;
wrapper.setAttribute("mf-no-tooltip", "");
}, { signal });
}, {signal});
// Consolidated mousemove listener
document.addEventListener("mousemove", (e) => {
@@ -1695,7 +1677,7 @@ function initDataGridScrollbars(gridId) {
});
}
}
}, { signal });
}, {signal});
// Consolidated mouseup listener
document.addEventListener("mouseup", () => {
@@ -1706,7 +1688,7 @@ function initDataGridScrollbars(gridId) {
isDraggingHorizontal = false;
wrapper.removeAttribute("mf-no-tooltip");
}
}, { signal });
}, {signal});
// Wheel scrolling - OPTIMIZED with RAF throttling
let rafScheduledWheel = false;
@@ -1759,7 +1741,7 @@ function initDataGridScrollbars(gridId) {
updateScrollbars();
});
}
}, { signal });
}, {signal});
}
function makeDatagridColumnsResizable(datagridId) {
@@ -2022,3 +2004,44 @@ function moveColumn(table, sourceColId, targetColId) {
});
}, ANIMATION_DURATION);
}
function updateDatagridSelection(datagridId) {
const selectionManager = document.getElementById(`tsm_${datagridId}`);
if (!selectionManager) return;
// Clear previous selections
document.querySelectorAll('.dt2-selected-focus, .dt2-selected-cell, .dt2-selected-row, .dt2-selected-column').forEach((element) => {
element.classList.remove('dt2-selected-focus', 'dt2-selected-cell', 'dt2-selected-row', 'dt2-selected-column');
element.style.userSelect = 'none';
});
// Loop through the children of the selection manager
Array.from(selectionManager.children).forEach((selection) => {
const selectionType = selection.getAttribute('selection-type');
const elementId = selection.getAttribute('element-id');
if (selectionType === 'focus') {
const cellElement = document.getElementById(`${elementId}`);
if (cellElement) {
cellElement.classList.add('dt2-selected-focus');
cellElement.style.userSelect = 'text';
}
} else if (selectionType === 'cell') {
const cellElement = document.getElementById(`${elementId}`);
if (cellElement) {
cellElement.classList.add('dt2-selected-cell');
cellElement.style.userSelect = 'text';
}
} else if (selectionType === 'row') {
const rowElement = document.getElementById(`${elementId}`);
if (rowElement) {
rowElement.classList.add('dt2-selected-row');
}
} else if (selectionType === 'column') {
// Select all elements in the specified column
document.querySelectorAll(`[data-col="${elementId}"]`).forEach((columnElement) => {
columnElement.classList.add('dt2-selected-column');
});
}
});
}

105
src/myfasthtml/controls/DataGrid.py
View File

@@ -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()

2
src/myfasthtml/controls/DataGridQuery.py
View File

@@ -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):

105
src/myfasthtml/controls/Mouse.py
View File

@@ -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):

3
src/myfasthtml/controls/datagrid_objects.py
View File

@@ -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