I can resize Datagrid columns

src/myfasthtml/assets/myfasthtml.js

@@ -1493,6 +1493,11 @@ function updateTabs(controllerId) {
   };
 })();
 
+function initDataGrid(gridId) {
+  initDataGridScrollbars(gridId);
+  makeDatagridColumnsResizable(gridId)
+}
+
 /**
  * Initialize DataGrid with CSS Grid layout + Custom Scrollbars
  *
@@ -1731,7 +1736,7 @@ function initDataGridScrollbars(gridId) {
     event.preventDefault();
   };
 
-  wrapper.addEventListener("wheel", handleWheelScrolling, { passive: false });
+  wrapper.addEventListener("wheel", handleWheelScrolling, {passive: false});
 
   // Initialize scrollbars with single batched update
   updateScrollbars();
@@ -1749,3 +1754,104 @@ function initDataGridScrollbars(gridId) {
   });
 }
 
+function makeDatagridColumnsResizable(datagridId) {
+    console.debug("makeResizable on element " + datagridId);
+
+    const tableId = 't_' + datagridId;
+    const table = document.getElementById(tableId);
+    const resizeHandles = table.querySelectorAll('.dt2-resize-handle');
+    const MIN_WIDTH = 30; // Prevent columns from becoming too narrow
+
+    // Attach event listeners using delegation
+    resizeHandles.forEach(handle => {
+        handle.addEventListener('mousedown', onStartResize);
+        handle.addEventListener('touchstart', onStartResize, {passive: false});
+        handle.addEventListener('dblclick', onDoubleClick); // Reset column width
+    });
+
+    let resizingState = null; // Maintain resizing state information
+
+    function onStartResize(event) {
+        event.preventDefault(); // Prevent unintended selections
+
+        const isTouch = event.type === 'touchstart';
+        const startX = isTouch ? event.touches[0].pageX : event.pageX;
+        const handle = event.target;
+        const cell = handle.parentElement;
+        const colIndex = cell.getAttribute('data-col');
+        const commandId = handle.dataset.commandId;
+        const cells = table.querySelectorAll(`.dt2-cell[data-col="${colIndex}"]`);
+
+        // Store initial state
+        const startWidth = cell.offsetWidth + 8;
+        resizingState = {startX, startWidth, colIndex, commandId, cells};
+
+        // Attach event listeners for resizing
+        document.addEventListener(isTouch ? 'touchmove' : 'mousemove', onResize);
+        document.addEventListener(isTouch ? 'touchend' : 'mouseup', onStopResize);
+    }
+
+    function onResize(event) {
+        if (!resizingState) {
+            return;
+        }
+
+        const isTouch = event.type === 'touchmove';
+        const currentX = isTouch ? event.touches[0].pageX : event.pageX;
+        const {startX, startWidth, cells} = resizingState;
+
+        // Calculate new width and apply constraints
+        const newWidth = Math.max(MIN_WIDTH, startWidth + (currentX - startX));
+        cells.forEach(cell => {
+            cell.style.width = `${newWidth}px`;
+        });
+    }
+
+    function onStopResize(event) {
+        if (!resizingState) {
+            return;
+        }
+
+        const {colIndex, commandId, cells} = resizingState;
+
+        const finalWidth = cells[0].offsetWidth;
+
+        // Send width update to server via HTMX
+        if (commandId) {
+            htmx.ajax('POST', '/myfasthtml/commands', {
+                headers: {
+                    "Content-Type": "application/x-www-form-urlencoded"
+                },
+                swap: 'none',
+                values: {
+                    c_id: commandId,
+                    col_id: colIndex,
+                    width: finalWidth
+                }
+            });
+        }
+
+        // Clean up
+        resizingState = null;
+        document.removeEventListener('mousemove', onResize);
+        document.removeEventListener('mouseup', onStopResize);
+        document.removeEventListener('touchmove', onResize);
+        document.removeEventListener('touchend', onStopResize);
+    }
+
+    function onDoubleClick(event) {
+        const handle = event.target;
+        const cell = handle.parentElement;
+        const colIndex = cell.getAttribute('data-col');
+        const cells = table.querySelectorAll(`.dt2-cell[data-col="${colIndex}"]`);
+
+        // Reset column width
+        cells.forEach(cell => {
+            cell.style.width = ''; // Use CSS default width
+        });
+
+        // Emit reset event
+        const resetEvent = new CustomEvent('columnReset', {detail: {colIndex}});
+        table.dispatchEvent(resetEvent);
+    }
+}