feat(tables): add column reorder undo/redo, body drop targets, and escape cancel

Column drag-and-drop now supports dropping anywhere in a column (not just headers),
pressing Escape to cancel a drag, and full undo/redo integration for column reordering.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table/table.tsx

@@ -251,7 +251,15 @@ export function Table({
   const deleteColumnMutation = useDeleteColumn({ workspaceId, tableId })
   const updateMetadataMutation = useUpdateTableMetadata({ workspaceId, tableId })
 
-  const { pushUndo, undo, redo } = useTableUndo({ workspaceId, tableId })
+  const handleColumnOrderChange = useCallback((order: string[]) => {
+    setColumnOrder(order)
+  }, [])
+
+  const { pushUndo, undo, redo } = useTableUndo({
+    workspaceId,
+    tableId,
+    onColumnOrderChange: handleColumnOrderChange,
+  })
   const undoRef = useRef(undo)
   undoRef.current = undo
   const redoRef = useRef(redo)
@@ -750,6 +758,11 @@ export function Table({
         newOrder.splice(insertIndex, 0, dragged)
         const orderChanged = newOrder.some((name, i) => currentOrder[i] !== name)
         if (orderChanged) {
+          pushUndoRef.current({
+            type: 'reorder-columns',
+            previousOrder: currentOrder,
+            newOrder,
+          })
           setColumnOrder(newOrder)
           updateMetadataRef.current({
             columnWidths: columnWidthsRef.current,
@@ -768,6 +781,37 @@ export function Table({
     setDropTargetColumnName(null)
   }, [])
 
+  const handleScrollDragOver = useCallback((e: React.DragEvent) => {
+    if (!dragColumnNameRef.current) return
+    e.preventDefault()
+    e.dataTransfer.dropEffect = 'move'
+
+    const scrollEl = scrollRef.current
+    if (!scrollEl) return
+    const scrollRect = scrollEl.getBoundingClientRect()
+    const cursorX = e.clientX - scrollRect.left + scrollEl.scrollLeft
+
+    const cols = columnsRef.current
+    let left = CHECKBOX_COL_WIDTH
+    for (const col of cols) {
+      const w = columnWidthsRef.current[col.name] ?? COL_WIDTH
+      if (cursorX < left + w) {
+        const midX = left + w / 2
+        const side = cursorX < midX ? 'left' : 'right'
+        if (col.name !== dropTargetColumnNameRef.current || side !== dropSideRef.current) {
+          setDropTargetColumnName(col.name)
+          setDropSide(side)
+        }
+        return
+      }
+      left += w
+    }
+  }, [])
+
+  const handleScrollDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+  }, [])
+
   useEffect(() => {
     if (!tableData?.metadata || metadataSeededRef.current) return
     if (!tableData.metadata.columnWidths && !tableData.metadata.columnOrder) return
@@ -878,6 +922,12 @@ export function Table({
 
       if (e.key === 'Escape') {
         e.preventDefault()
+        if (dragColumnNameRef.current) {
+          setDragColumnName(null)
+          setDropTargetColumnName(null)
+          setDropSide('left')
+          return
+        }
         setSelectionAnchor(null)
         setSelectionFocus(null)
         setCheckedRows((prev) => (prev.size === 0 ? prev : EMPTY_CHECKED_ROWS))
@@ -1805,6 +1855,8 @@ export function Table({
           resizingColumn && 'select-none'
         )}
         data-table-scroll
+        onDragOver={handleScrollDragOver}
+        onDrop={handleScrollDrop}
       >
         <div className='relative h-fit' style={{ width: `${tableWidth}px` }}>
           <table

apps/sim/hooks/use-table-undo.ts

@@ -2,7 +2,7 @@
  * Hook that connects the table undo/redo store to React Query mutations.
  */
 
-import { useCallback, useEffect } from 'react'
+import { useCallback, useEffect, useRef } from 'react'
 import { createLogger } from '@sim/logger'
 import {
   useAddTableColumn,
@@ -14,6 +14,7 @@ import {
   useDeleteTableRows,
   useRenameTable,
   useUpdateColumn,
+  useUpdateTableMetadata,
   useUpdateTableRow,
 } from '@/hooks/queries/tables'
 import { runWithoutRecording, useTableUndoStore } from '@/stores/table/store'
@@ -33,9 +34,10 @@ export function extractCreatedRowId(response: Record<string, unknown>): string |
 interface UseTableUndoProps {
   workspaceId: string
   tableId: string
+  onColumnOrderChange?: (order: string[]) => void
 }
 
-export function useTableUndo({ workspaceId, tableId }: UseTableUndoProps) {
+export function useTableUndo({ workspaceId, tableId, onColumnOrderChange }: UseTableUndoProps) {
   const push = useTableUndoStore((s) => s.push)
   const popUndo = useTableUndoStore((s) => s.popUndo)
   const popRedo = useTableUndoStore((s) => s.popRedo)
@@ -55,6 +57,10 @@ export function useTableUndo({ workspaceId, tableId }: UseTableUndoProps) {
   const updateColumnMutation = useUpdateColumn({ workspaceId, tableId })
   const deleteColumnMutation = useDeleteColumn({ workspaceId, tableId })
   const renameTableMutation = useRenameTable(workspaceId)
+  const updateMetadataMutation = useUpdateTableMetadata({ workspaceId, tableId })
+
+  const onColumnOrderChangeRef = useRef(onColumnOrderChange)
+  onColumnOrderChangeRef.current = onColumnOrderChange
 
   useEffect(() => {
     return () => clear(tableId)
@@ -229,6 +235,13 @@ export function useTableUndo({ workspaceId, tableId }: UseTableUndoProps) {
             renameTableMutation.mutate({ tableId: action.tableId, name })
             break
           }
+
+          case 'reorder-columns': {
+            const order = direction === 'undo' ? action.previousOrder : action.newOrder
+            onColumnOrderChangeRef.current?.(order)
+            updateMetadataMutation.mutate({ columnOrder: order })
+            break
+          }
         }
       } catch (err) {
         logger.error('Failed to execute undo/redo action', { action, direction, err })

apps/sim/stores/table/types.ts

@@ -42,6 +42,7 @@ export type TableUndoAction =
       newValue: boolean
     }
   | { type: 'rename-table'; tableId: string; previousName: string; newName: string }
+  | { type: 'reorder-columns'; previousOrder: string[]; newOrder: string[] }
 
 export interface UndoEntry {
   id: string