feat(tables): freeze columns

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/data-row.tsx

@@ -57,6 +57,10 @@ export interface DataRowProps {
    * queued indicators across page refresh during long Run-all dispatches.
    */
   activeDispatches: ActiveDispatch[] | undefined
+  /** Pixel `left` value for each frozen column key; absent keys are not frozen. */
+  frozenOffsets?: Map<string, number>
+  /** Key of the rightmost frozen column, used to render a separator shadow. */
+  lastFrozenColKey?: string | null
 }
 
 function cellRangeRowChanged(
@@ -113,7 +117,9 @@ function dataRowPropsAreEqual(prev: DataRowProps, next: DataRowProps): boolean {
     prev.onStopRow !== next.onStopRow ||
     prev.onRunRow !== next.onRunRow ||
     prev.workflowGroups !== next.workflowGroups ||
-    prev.activeDispatches !== next.activeDispatches
+    prev.activeDispatches !== next.activeDispatches ||
+    prev.frozenOffsets !== next.frozenOffsets ||
+    prev.lastFrozenColKey !== next.lastFrozenColKey
   ) {
     return false
   }
@@ -157,6 +163,8 @@ export const DataRow = React.memo(function DataRow({
   onRunRow,
   workflowGroups,
   activeDispatches,
+  frozenOffsets,
+  lastFrozenColKey,
 }: DataRowProps) {
   const sel = normalizedSelection
   /**
@@ -264,13 +272,23 @@ export const DataRow = React.memo(function DataRow({
         const isLeftEdge = inRange ? colIndex === sel!.startCol : colIndex === 0
         const isRightEdge = inRange ? colIndex === sel!.endCol : colIndex === columns.length - 1
 
+        const frozenLeft = frozenOffsets?.get(column.key)
+        const isFrozenCell = frozenLeft !== undefined
+        const isFrozenSeparator = column.key === lastFrozenColKey
+
         return (
           <td
             key={column.key}
             data-row={rowIndex}
             data-row-id={row.id}
             data-col={colIndex}
-            className={cn(CELL, (isHighlighted || isAnchor || isEditing) && 'relative')}
+            className={cn(
+              CELL,
+              (isHighlighted || isAnchor || isEditing) && 'relative',
+              isFrozenCell && 'z-[5] bg-[var(--bg)]',
+              isFrozenSeparator && '[box-shadow:2px_0_0_0_var(--border)]'
+            )}
+            style={isFrozenCell ? { position: 'sticky', left: frozenLeft } : undefined}
             onMouseDown={(e) => {
               if (e.button !== 0 || isEditing) return
               onCellMouseDown(rowIndex, colIndex, e.shiftKey)

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/column-header-menu.tsx

@@ -1,9 +1,9 @@
 'use client'
 
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import { ChevronDown } from 'lucide-react'
+import { ChevronDown } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
-import type { ColumnDefinition, WorkflowGroup } from '@/lib/table'
+import type { WorkflowGroup } from '@/lib/table'
 import type { WorkflowMetadata } from '@/stores/workflows/registry/types'
 import { COL_WIDTH, SELECTION_TINT_BG } from '../constants'
 import type { ColumnSourceInfo, DisplayColumn } from '../types'
@@ -21,7 +21,6 @@ interface ColumnHeaderMenuProps {
   onRenameSubmit: () => void
   onRenameCancel: () => void
   onColumnSelect: (colIndex: number, shiftKey: boolean) => void
-  onChangeType: (columnName: string, newType: ColumnDefinition['type']) => void
   onInsertLeft: (columnName: string) => void
   onInsertRight: (columnName: string) => void
   onDeleteColumn: (columnName: string) => void
@@ -42,6 +41,14 @@ interface ColumnHeaderMenuProps {
   /** Opens a popup preview of the column's underlying workflow. Surfaced in
    *  the chevron menu for workflow-output columns. */
   onViewWorkflow?: (workflowId: string) => void
+  /** Whether this column is currently frozen (pinned to the left). */
+  isFrozen?: boolean
+  /** Toggle the frozen state for this column. */
+  onFreezeToggle?: (columnName: string) => void
+  /** Left offset in pixels when frozen (drives `position: sticky`). */
+  stickyLeft?: number
+  /** Whether this is the rightmost frozen column (renders a separator shadow). */
+  isLastFrozen?: boolean
 }
 
 /**
@@ -76,6 +83,10 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
   sourceInfo,
   onOpenConfig,
   onViewWorkflow,
+  isFrozen,
+  onFreezeToggle,
+  stickyLeft,
+  isLastFrozen,
 }: ColumnHeaderMenuProps) {
   const renameInputRef = useRef<HTMLInputElement>(null)
   const didDragRef = useRef(false)
@@ -228,7 +239,12 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
 
   return (
     <th
-      className='group relative border-[var(--border)] border-r border-b bg-[var(--bg)] p-0 text-left align-middle'
+      className={cn(
+        'group relative border-[var(--border)] border-r border-b bg-[var(--bg)] p-0 text-left align-middle',
+        stickyLeft !== undefined && 'z-[11]',
+        isLastFrozen && '[box-shadow:2px_0_0_0_var(--border)]'
+      )}
+      style={stickyLeft !== undefined ? { position: 'sticky', left: stickyLeft } : undefined}
       draggable={!readOnly && !isRenaming}
       onDragStart={handleDragStart}
       onDragEnd={handleDragEnd}
@@ -316,6 +332,8 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
             onViewWorkflow={
               onViewWorkflow && ownGroup ? () => onViewWorkflow(ownGroup.workflowId) : undefined
             }
+            isFrozen={isFrozen}
+            onFreezeToggle={onFreezeToggle}
           />
         </div>
       )}

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/workflow-group-meta-cell.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import type React from 'react'
-import { useCallback, useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -17,9 +17,11 @@ import {
   ArrowRight,
   Eye,
   EyeOff,
+  Lock,
   Pencil,
   PlayOutline,
   Trash,
+  Unlock,
 } from '@/components/emcn/icons'
 import type { RunLimit, RunMode } from '@/lib/api/contracts/tables'
 import { cn } from '@/lib/core/utils/cn'
@@ -67,6 +69,10 @@ interface ColumnOptionsMenuProps {
   /** When set, the menu surfaces a "View workflow" item that opens a popup
    *  preview of the configured workflow. */
   onViewWorkflow?: () => void
+  /** Whether this column is currently frozen (pinned to the left). */
+  isFrozen?: boolean
+  /** Toggle the frozen state of this column. */
+  onFreezeToggle?: (columnName: string) => void
 }
 
 /**
@@ -93,6 +99,8 @@ export function ColumnOptionsMenu({
   onRunColumnSelected,
   selectedRowCount = 0,
   onViewWorkflow,
+  isFrozen,
+  onFreezeToggle,
 }: ColumnOptionsMenuProps) {
   const showRunActions = Boolean(onRunColumnAll && onRunColumnIncomplete)
   const showRunSelected = Boolean(onRunColumnSelected) && selectedRowCount > 0
@@ -159,6 +167,12 @@ export function ColumnOptionsMenu({
           <Pencil />
           Edit column
         </DropdownMenuItem>
+        {onFreezeToggle && (
+          <DropdownMenuItem onSelect={() => onFreezeToggle(column.name)}>
+            {isFrozen ? <Unlock /> : <Lock />}
+            {isFrozen ? 'Unfreeze column' : 'Freeze column'}
+          </DropdownMenuItem>
+        )}
         <DropdownMenuSeparator />
         <DropdownMenuItem onSelect={() => onInsertLeft(column.name)}>
           <ArrowLeft />
@@ -269,112 +283,94 @@ export function WorkflowGroupMetaCell({
 
   const selectedCount = selectedRowIds?.length ?? 0
 
-  const handleRunAll = useCallback(() => {
+  function handleRunAll() {
     if (groupId) onRunColumn?.(groupId, 'all')
-  }, [groupId, onRunColumn])
+  }
 
-  const handleRunIncomplete = useCallback(() => {
+  function handleRunIncomplete() {
     if (groupId) onRunColumn?.(groupId, 'incomplete')
-  }, [groupId, onRunColumn])
+  }
 
-  const handleRunSelected = useCallback(() => {
+  function handleRunSelected() {
     if (groupId && selectedRowIds && selectedRowIds.length > 0) {
       onRunColumn?.(groupId, 'all', selectedRowIds)
     }
-  }, [groupId, onRunColumn, selectedRowIds])
+  }
 
-  const handleRunLimited = useCallback(
-    (max: number) => {
-      if (groupId) onRunColumn?.(groupId, 'incomplete', undefined, { type: 'rows', max })
-    },
-    [groupId, onRunColumn]
-  )
+  function handleRunLimited(max: number) {
+    if (groupId) onRunColumn?.(groupId, 'incomplete', undefined, { type: 'rows', max })
+  }
 
-  const handleContextMenu = useCallback(
-    (e: React.MouseEvent) => {
-      if (!column) return
-      e.preventDefault()
-      e.stopPropagation()
-      setOptionsMenuPosition({ x: e.clientX, y: e.clientY })
-      setOptionsMenuOpen(true)
-    },
-    [column]
-  )
+  function handleContextMenu(e: React.MouseEvent) {
+    if (!column) return
+    e.preventDefault()
+    e.stopPropagation()
+    setOptionsMenuPosition({ x: e.clientX, y: e.clientY })
+    setOptionsMenuOpen(true)
+  }
 
-  const selectGroupAndOpenConfig = useCallback(
-    (e: React.MouseEvent<HTMLTableCellElement>) => {
-      // Ignore clicks that landed on an interactive child (badge, play button,
-      // dropdown items rendered via portal). Only the bare meta-cell area
-      // should select the group + open the config sidebar.
-      const target = e.target as HTMLElement
-      if (target.closest('button, [role="menuitem"], [role="menu"]')) return
-      // Drag-vs-click guard: when a drag just ended on this cell, swallow the
-      // synthetic click so we don't accidentally pop open the sidebar.
-      if (didDragRef.current) {
-        didDragRef.current = false
-        return
-      }
-      onSelectGroup(startColIndex, size)
-      if (columnName) onOpenConfig(columnName)
-    },
-    [columnName, onOpenConfig, onSelectGroup, size, startColIndex]
-  )
+  function selectGroupAndOpenConfig(e: React.MouseEvent<HTMLTableCellElement>) {
+    // Ignore clicks that landed on an interactive child (badge, play button,
+    // dropdown items rendered via portal). Only the bare meta-cell area
+    // should select the group + open the config sidebar.
+    const target = e.target as HTMLElement
+    if (target.closest('button, [role="menuitem"], [role="menu"]')) return
+    // Drag-vs-click guard: when a drag just ended on this cell, swallow the
+    // synthetic click so we don't accidentally pop open the sidebar.
+    if (didDragRef.current) {
+      didDragRef.current = false
+      return
+    }
+    onSelectGroup(startColIndex, size)
+    if (columnName) onOpenConfig(columnName)
+  }
 
-  const handleDragStart = useCallback(
-    (e: React.DragEvent) => {
-      if (readOnly || !onDragStart || !columnName) {
-        e.preventDefault()
-        return
-      }
-      didDragRef.current = true
-      e.dataTransfer.effectAllowed = 'move'
-      e.dataTransfer.setData('text/plain', columnName)
+  function handleDragStart(e: React.DragEvent) {
+    if (readOnly || !onDragStart || !columnName) {
+      e.preventDefault()
+      return
+    }
+    didDragRef.current = true
+    e.dataTransfer.effectAllowed = 'move'
+    e.dataTransfer.setData('text/plain', columnName)
 
-      const ghost = document.createElement('div')
-      ghost.textContent = name
-      ghost.style.cssText =
-        'position:absolute;top:-9999px;padding:4px 8px;background:var(--bg);border:1px solid var(--border);border-radius:4px;font-size:13px;font-weight:500;white-space:nowrap;color:var(--text-primary)'
-      document.body.appendChild(ghost)
-      e.dataTransfer.setDragImage(ghost, ghost.offsetWidth / 2, ghost.offsetHeight / 2)
-      requestAnimationFrame(() => ghost.parentNode?.removeChild(ghost))
+    const ghost = document.createElement('div')
+    ghost.textContent = name
+    ghost.style.cssText =
+      'position:absolute;top:-9999px;padding:4px 8px;background:var(--bg);border:1px solid var(--border);border-radius:4px;font-size:13px;font-weight:500;white-space:nowrap;color:var(--text-primary)'
+    document.body.appendChild(ghost)
+    e.dataTransfer.setDragImage(ghost, ghost.offsetWidth / 2, ghost.offsetHeight / 2)
+    requestAnimationFrame(() => ghost.parentNode?.removeChild(ghost))
 
-      onDragStart(columnName)
-    },
-    [columnName, name, onDragStart, readOnly]
-  )
+    onDragStart(columnName)
+  }
 
-  const handleDragOver = useCallback(
-    (e: React.DragEvent) => {
-      if (!onDragOver || !columnName) return
-      e.preventDefault()
-      e.dataTransfer.dropEffect = 'move'
-      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
-      const midX = rect.left + rect.width / 2
-      const side = e.clientX < midX ? 'left' : 'right'
-      onDragOver(columnName, side)
-    },
-    [columnName, onDragOver]
-  )
+  function handleDragOver(e: React.DragEvent) {
+    if (!onDragOver || !columnName) return
+    e.preventDefault()
+    e.dataTransfer.dropEffect = 'move'
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
+    const midX = rect.left + rect.width / 2
+    const side = e.clientX < midX ? 'left' : 'right'
+    onDragOver(columnName, side)
+  }
 
-  const handleDragEnd = useCallback(() => {
+  function handleDragEnd() {
     didDragRef.current = false
     onDragEnd?.()
-  }, [onDragEnd])
+  }
 
-  const handleDragLeave = useCallback(
-    (e: React.DragEvent) => {
-      const th = e.currentTarget as HTMLElement
-      const related = e.relatedTarget as Node | null
-      if (related && th.contains(related)) return
-      if (related && related instanceof Element && related.closest('th')) return
-      onDragLeave?.()
-    },
-    [onDragLeave]
-  )
+  function handleDragLeave(e: React.DragEvent) {
+    const th = e.currentTarget as HTMLElement
+    const related = e.relatedTarget as Node | null
+    if (related && th.contains(related)) return
+    if (related && related instanceof Element && related.closest('th')) return
+    onDragLeave?.()
+  }
 
-  const handleDrop = useCallback((e: React.DragEvent) => {
+  function handleDrop(e: React.DragEvent) {
     e.preventDefault()
-  }, [])
+  }
 
   const isDraggable = !readOnly && Boolean(onDragStart)