feat(tables): add delete-column undo/redo, rename metadata sync, and comprehensive row ID patching

waleedlatif1 · claude · waleedlatif1 · commit f03cec3f05cc · 2026-04-17T19:54:03.000-07:00
- Delete column now captures column definition, cell data, order, and width for full undo/redo
- Column rename undo/redo now properly syncs columnWidths and columnOrder metadata
- patchRedoRowId/patchUndoRowId extended to handle all action types containing row IDs

Co-Authored-By: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table/table.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table/table.tsx
@@ -255,10 +255,26 @@ export function Table({
     setColumnOrder(order)
   }, [])
 
+  const handleColumnRename = useCallback((oldName: string, newName: string) => {
+    let updatedWidths = columnWidthsRef.current
+    if (oldName in updatedWidths) {
+      const { [oldName]: width, ...rest } = updatedWidths
+      updatedWidths = { ...rest, [newName]: width }
+      setColumnWidths(updatedWidths)
+    }
+    const updatedOrder = columnOrderRef.current?.map((n) => (n === oldName ? newName : n))
+    if (updatedOrder) setColumnOrder(updatedOrder)
+    updateMetadataRef.current({
+      columnWidths: updatedWidths,
+      columnOrder: updatedOrder,
+    })
+  }, [])
+
   const { pushUndo, undo, redo } = useTableUndo({
     workspaceId,
     tableId,
     onColumnOrderChange: handleColumnOrderChange,
+    onColumnRename: handleColumnRename,
   })
   const undoRef = useRef(undo)
   undoRef.current = undo
@@ -1631,6 +1647,26 @@ export function Table({
     if (!deletingColumn) return
     const columnToDelete = deletingColumn
     const orderAtDelete = columnOrderRef.current
+    const cols = schemaColumnsRef.current
+    const colDef = cols.find((c) => c.name === columnToDelete)
+    const colPosition = cols.indexOf(colDef!)
+    const currentRows = rowsRef.current
+    const cellData = currentRows
+      .filter((r) => r.data[columnToDelete] != null)
+      .map((r) => ({ rowId: r.id, value: r.data[columnToDelete] }))
+    const previousWidth = columnWidthsRef.current[columnToDelete] ?? null
+
+    pushUndoRef.current({
+      type: 'delete-column',
+      columnName: columnToDelete,
+      columnType: colDef?.type ?? 'string',
+      columnPosition: colPosition >= 0 ? colPosition : cols.length,
+      columnUnique: colDef?.unique ?? false,
+      cellData,
+      previousOrder: orderAtDelete ? [...orderAtDelete] : null,
+      previousWidth,
+    })
+
     setDeletingColumn(null)
     deleteColumnMutation.mutate(columnToDelete, {
       onSuccess: () => {
diff --git a/apps/sim/hooks/use-table-undo.ts b/apps/sim/hooks/use-table-undo.ts
@@ -35,9 +35,15 @@ interface UseTableUndoProps {
   workspaceId: string
   tableId: string
   onColumnOrderChange?: (order: string[]) => void
+  onColumnRename?: (oldName: string, newName: string) => void
 }
 
-export function useTableUndo({ workspaceId, tableId, onColumnOrderChange }: UseTableUndoProps) {
+export function useTableUndo({
+  workspaceId,
+  tableId,
+  onColumnOrderChange,
+  onColumnRename,
+}: UseTableUndoProps) {
   const push = useTableUndoStore((s) => s.push)
   const popUndo = useTableUndoStore((s) => s.popUndo)
   const popRedo = useTableUndoStore((s) => s.popRedo)
@@ -61,6 +67,8 @@ export function useTableUndo({ workspaceId, tableId, onColumnOrderChange }: UseT
 
   const onColumnOrderChangeRef = useRef(onColumnOrderChange)
   onColumnOrderChangeRef.current = onColumnOrderChange
+  const onColumnRenameRef = useRef(onColumnRename)
+  onColumnRenameRef.current = onColumnRename
 
   useEffect(() => {
     return () => clear(tableId)
@@ -197,21 +205,66 @@ export function useTableUndo({ workspaceId, tableId, onColumnOrderChange }: UseT
             break
           }
 
-          case 'rename-column': {
+          case 'delete-column': {
             if (direction === 'undo') {
-              updateColumnMutation.mutate({
-                columnName: action.newName,
-                updates: { name: action.oldName },
-              })
+              addColumnMutation.mutate(
+                {
+                  name: action.columnName,
+                  type: action.columnType,
+                  unique: action.columnUnique,
+                  position: action.columnPosition,
+                },
+                {
+                  onSuccess: () => {
+                    if (action.cellData.length > 0) {
+                      const updates = action.cellData.map((c) => ({
+                        rowId: c.rowId,
+                        data: { [action.columnName]: c.value },
+                      }))
+                      batchUpdateRowsMutation.mutate({ updates })
+                    }
+                    if (action.previousOrder) {
+                      onColumnOrderChangeRef.current?.(action.previousOrder)
+                      updateMetadataMutation.mutate({
+                        columnOrder: action.previousOrder,
+                        ...(action.previousWidth !== null
+                          ? {
+                              columnWidths: {
+                                ...({} as Record<string, number>),
+                                [action.columnName]: action.previousWidth,
+                              },
+                            }
+                          : {}),
+                      })
+                    }
+                  },
+                }
+              )
             } else {
-              updateColumnMutation.mutate({
-                columnName: action.oldName,
-                updates: { name: action.newName },
+              deleteColumnMutation.mutate(action.columnName, {
+                onSuccess: () => {
+                  if (action.previousOrder) {
+                    const newOrder = action.previousOrder.filter((n) => n !== action.columnName)
+                    onColumnOrderChangeRef.current?.(newOrder)
+                    updateMetadataMutation.mutate({ columnOrder: newOrder })
+                  }
+                },
               })
             }
             break
           }
 
+          case 'rename-column': {
+            const fromName = direction === 'undo' ? action.newName : action.oldName
+            const toName = direction === 'undo' ? action.oldName : action.newName
+            updateColumnMutation.mutate({
+              columnName: fromName,
+              updates: { name: toName },
+            })
+            onColumnRenameRef.current?.(fromName, toName)
+            break
+          }
+
           case 'update-column-type': {
             const type = direction === 'undo' ? action.previousType : action.newType
             updateColumnMutation.mutate({
diff --git a/apps/sim/stores/table/store.ts b/apps/sim/stores/table/store.ts
@@ -13,6 +13,73 @@ const EMPTY_STACKS: TableUndoStacks = { undo: [], redo: [] }
 
 let undoRedoInProgress = false
 
+function patchRowIdInEntry(entry: UndoEntry, oldRowId: string, newRowId: string): UndoEntry {
+  const { action } = entry
+  switch (action.type) {
+    case 'update-cell':
+      if (action.rowId === oldRowId) {
+        return { ...entry, action: { ...action, rowId: newRowId } }
+      }
+      break
+    case 'clear-cells': {
+      const hasMatch = action.cells.some((c) => c.rowId === oldRowId)
+      if (hasMatch) {
+        const patched = action.cells.map((c) =>
+          c.rowId === oldRowId ? { ...c, rowId: newRowId } : c
+        )
+        return { ...entry, action: { ...action, cells: patched } }
+      }
+      break
+    }
+    case 'update-cells': {
+      const hasMatch = action.cells.some((c) => c.rowId === oldRowId)
+      if (hasMatch) {
+        const patched = action.cells.map((c) =>
+          c.rowId === oldRowId ? { ...c, rowId: newRowId } : c
+        )
+        return { ...entry, action: { ...action, cells: patched } }
+      }
+      break
+    }
+    case 'create-row':
+      if (action.rowId === oldRowId) {
+        return { ...entry, action: { ...action, rowId: newRowId } }
+      }
+      break
+    case 'create-rows': {
+      const hasMatch = action.rows.some((r) => r.rowId === oldRowId)
+      if (hasMatch) {
+        const patched = action.rows.map((r) =>
+          r.rowId === oldRowId ? { ...r, rowId: newRowId } : r
+        )
+        return { ...entry, action: { ...action, rows: patched } }
+      }
+      break
+    }
+    case 'delete-rows': {
+      const hasMatch = action.rows.some((r) => r.rowId === oldRowId)
+      if (hasMatch) {
+        const patched = action.rows.map((r) =>
+          r.rowId === oldRowId ? { ...r, rowId: newRowId } : r
+        )
+        return { ...entry, action: { ...action, rows: patched } }
+      }
+      break
+    }
+    case 'delete-column': {
+      const hasMatch = action.cellData.some((c) => c.rowId === oldRowId)
+      if (hasMatch) {
+        const patched = action.cellData.map((c) =>
+          c.rowId === oldRowId ? { ...c, rowId: newRowId } : c
+        )
+        return { ...entry, action: { ...action, cellData: patched } }
+      }
+      break
+    }
+  }
+  return entry
+}
+
 /**
  * Run a function without recording undo entries.
  * Used by the hook when executing undo/redo mutations to prevent recursive recording.
@@ -86,16 +153,7 @@ export const useTableUndoStore = create<TableUndoState>()(
         const stacks = get().stacks[tableId]
         if (!stacks) return
 
-        const patchedRedo = stacks.redo.map((entry) => {
-          const { action } = entry
-          if (action.type === 'delete-rows') {
-            const patchedRows = action.rows.map((r) =>
-              r.rowId === oldRowId ? { ...r, rowId: newRowId } : r
-            )
-            return { ...entry, action: { ...action, rows: patchedRows } }
-          }
-          return entry
-        })
+        const patchedRedo = stacks.redo.map((entry) => patchRowIdInEntry(entry, oldRowId, newRowId))
 
         set((state) => ({
           stacks: {
@@ -109,13 +167,7 @@ export const useTableUndoStore = create<TableUndoState>()(
         const stacks = get().stacks[tableId]
         if (!stacks) return
 
-        const patchedUndo = stacks.undo.map((entry) => {
-          const { action } = entry
-          if (action.type === 'create-row' && action.rowId === oldRowId) {
-            return { ...entry, action: { ...action, rowId: newRowId } }
-          }
-          return entry
-        })
+        const patchedUndo = stacks.undo.map((entry) => patchRowIdInEntry(entry, oldRowId, newRowId))
 
         set((state) => ({
           stacks: {
diff --git a/apps/sim/stores/table/types.ts b/apps/sim/stores/table/types.ts
@@ -32,6 +32,16 @@ export type TableUndoAction =
     }
   | { type: 'delete-rows'; rows: DeletedRowSnapshot[] }
   | { type: 'create-column'; columnName: string; position: number }
+  | {
+      type: 'delete-column'
+      columnName: string
+      columnType: string
+      columnPosition: number
+      columnUnique: boolean
+      cellData: Array<{ rowId: string; value: unknown }>
+      previousOrder: string[] | null
+      previousWidth: number | null
+    }
   | { type: 'rename-column'; oldName: string; newName: string }
   | { type: 'update-column-type'; columnName: string; previousType: string; newType: string }
   | {
