I can move columns

src/myfasthtml/assets/myfasthtml.js

@@ -1495,7 +1495,8 @@ function updateTabs(controllerId) {
 
 function initDataGrid(gridId) {
   initDataGridScrollbars(gridId);
-  makeDatagridColumnsResizable(gridId)
+  makeDatagridColumnsResizable(gridId);
+  makeDatagridColumnsMovable(gridId);
 }
 
 /**
@@ -1855,3 +1856,162 @@ function makeDatagridColumnsResizable(datagridId) {
         table.dispatchEvent(resetEvent);
     }
 }
+
+/**
+ * Enable column reordering via drag and drop on a DataGrid.
+ * Columns can be dragged to new positions with animated transitions.
+ * @param {string} gridId - The DataGrid instance ID
+ */
+function makeDatagridColumnsMovable(gridId) {
+    const table = document.getElementById(`t_${gridId}`);
+    const headerRow = document.getElementById(`th_${gridId}`);
+
+    if (!table || !headerRow) {
+        console.error(`DataGrid elements not found for ${gridId}`);
+        return;
+    }
+
+    const moveCommandId = headerRow.dataset.moveCommandId;
+    const headerCells = headerRow.querySelectorAll('.dt2-cell:not(.dt2-col-hidden)');
+
+    let sourceColumn = null;      // Column being dragged (original position)
+    let lastMoveTarget = null;    // Last column we moved to (for persistence)
+    let hoverColumn = null;       // Current hover target (for delayed move check)
+
+    headerCells.forEach(cell => {
+        cell.setAttribute('draggable', 'true');
+
+        // Prevent drag when clicking resize handle
+        const resizeHandle = cell.querySelector('.dt2-resize-handle');
+        if (resizeHandle) {
+            resizeHandle.addEventListener('mousedown', () => cell.setAttribute('draggable', 'false'));
+            resizeHandle.addEventListener('mouseup', () => cell.setAttribute('draggable', 'true'));
+        }
+
+        cell.addEventListener('dragstart', (e) => {
+            sourceColumn = cell.getAttribute('data-col');
+            lastMoveTarget = null;
+            hoverColumn = null;
+            e.dataTransfer.effectAllowed = 'move';
+            e.dataTransfer.setData('text/plain', sourceColumn);
+            cell.classList.add('dt2-dragging');
+        });
+
+        cell.addEventListener('dragenter', (e) => {
+            e.preventDefault();
+            const targetColumn = cell.getAttribute('data-col');
+            hoverColumn = targetColumn;
+
+            if (sourceColumn && sourceColumn !== targetColumn) {
+                // Delay to skip columns when dragging fast
+                setTimeout(() => {
+                    if (hoverColumn === targetColumn) {
+                        moveColumn(table, sourceColumn, targetColumn);
+                        lastMoveTarget = targetColumn;
+                    }
+                }, 50);
+            }
+        });
+
+        cell.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            e.dataTransfer.dropEffect = 'move';
+        });
+
+        cell.addEventListener('drop', (e) => {
+            e.preventDefault();
+            // Persist to server
+            if (moveCommandId && sourceColumn && lastMoveTarget) {
+                htmx.ajax('POST', '/myfasthtml/commands', {
+                    headers: {"Content-Type": "application/x-www-form-urlencoded"},
+                    swap: 'none',
+                    values: {
+                        c_id: moveCommandId,
+                        source_col_id: sourceColumn,
+                        target_col_id: lastMoveTarget
+                    }
+                });
+            }
+        });
+
+        cell.addEventListener('dragend', () => {
+            headerCells.forEach(c => c.classList.remove('dt2-dragging'));
+            sourceColumn = null;
+            lastMoveTarget = null;
+            hoverColumn = null;
+        });
+    });
+}
+
+/**
+ * Move a column to a new position with animation.
+ * All columns between source and target shift to fill the gap.
+ * @param {HTMLElement} table - The table element
+ * @param {string} sourceColId - Column ID to move
+ * @param {string} targetColId - Column ID to move next to
+ */
+function moveColumn(table, sourceColId, targetColId) {
+    const ANIMATION_DURATION = 300;  // Must match CSS transition duration
+
+    const sourceHeader = table.querySelector(`.dt2-cell[data-col="${sourceColId}"]`);
+    const targetHeader = table.querySelector(`.dt2-cell[data-col="${targetColId}"]`);
+
+    if (!sourceHeader || !targetHeader) return;
+    if (sourceHeader.classList.contains('dt2-moving')) return;  // Animation in progress
+
+    const headerCells = Array.from(sourceHeader.parentNode.children);
+    const sourceIdx = headerCells.indexOf(sourceHeader);
+    const targetIdx = headerCells.indexOf(targetHeader);
+
+    if (sourceIdx === targetIdx) return;
+
+    const movingRight = sourceIdx < targetIdx;
+    const sourceCells = table.querySelectorAll(`.dt2-cell[data-col="${sourceColId}"]`);
+
+    // Collect cells that need to shift (between source and target)
+    const cellsToShift = [];
+    let shiftWidth = 0;
+    const [startIdx, endIdx] = movingRight
+        ? [sourceIdx + 1, targetIdx]
+        : [targetIdx, sourceIdx - 1];
+
+    for (let i = startIdx; i <= endIdx; i++) {
+        const colId = headerCells[i].getAttribute('data-col');
+        cellsToShift.push(...table.querySelectorAll(`.dt2-cell[data-col="${colId}"]`));
+        shiftWidth += headerCells[i].offsetWidth;
+    }
+
+    // Calculate animation distances
+    const sourceWidth = sourceHeader.offsetWidth;
+    const sourceDistance = movingRight ? shiftWidth : -shiftWidth;
+    const shiftDistance = movingRight ? -sourceWidth : sourceWidth;
+
+    // Animate source column
+    sourceCells.forEach(cell => {
+        cell.classList.add('dt2-moving');
+        cell.style.transform = `translateX(${sourceDistance}px)`;
+    });
+
+    // Animate shifted columns
+    cellsToShift.forEach(cell => {
+        cell.classList.add('dt2-moving');
+        cell.style.transform = `translateX(${shiftDistance}px)`;
+    });
+
+    // After animation: reset transforms and update DOM
+    setTimeout(() => {
+        [...sourceCells, ...cellsToShift].forEach(cell => {
+            cell.classList.remove('dt2-moving');
+            cell.style.transform = '';
+        });
+
+        // Move source column in DOM
+        table.querySelectorAll('.dt2-row').forEach(row => {
+            const sourceCell = row.querySelector(`[data-col="${sourceColId}"]`);
+            const targetCell = row.querySelector(`[data-col="${targetColId}"]`);
+            if (sourceCell && targetCell) {
+                movingRight ? targetCell.after(sourceCell) : targetCell.before(sourceCell);
+            }
+        });
+    }, ANIMATION_DURATION);
+}