fixes

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/row-modal/row-modal.tsx

@@ -42,13 +42,9 @@ export interface RowModalProps {
 
 function createInitialRowData(columns: ColumnDefinition[]): Record<string, unknown> {
   const initial: Record<string, unknown> = {}
-  columns.forEach((col) => {
-    if (col.type === 'boolean') {
-      initial[col.name] = false
-    } else {
-      initial[col.name] = ''
-    }
-  })
+  for (const col of columns) {
+    initial[col.name] = col.type === 'boolean' ? false : ''
+  }
   return initial
 }
 
@@ -57,16 +53,13 @@ function cleanRowData(
   rowData: Record<string, unknown>
 ): Record<string, unknown> {
   const cleanData: Record<string, unknown> = {}
-
-  columns.forEach((col) => {
-    const value = rowData[col.name]
+  for (const col of columns) {
     try {
-      cleanData[col.name] = cleanCellValue(value, col)
+      cleanData[col.name] = cleanCellValue(rowData[col.name], col)
     } catch {
       throw new Error(`Invalid JSON for field: ${col.name}`)
     }
-  })
-
+  }
   return cleanData
 }
 
@@ -89,8 +82,7 @@ export function RowModal({ mode, isOpen, onClose, table, row, rowIds, onSuccess
   const workspaceId = params.workspaceId as string
   const tableId = table.id
 
-  const schema = table?.schema
-  const columns = schema?.columns || []
+  const columns = table.schema?.columns || []
 
   const [rowData, setRowData] = useState<Record<string, unknown>>(() =>
     getInitialRowData(mode, columns, row)

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

@@ -237,6 +237,7 @@ export function Table({
   const ghostRef = useRef<HTMLDivElement>(null)
   const tableFilterRef = useRef<TableFilterHandle>(null)
   const isDraggingRef = useRef(false)
+  const dragEscapeCleanupRef = useRef<(() => void) | null>(null)
 
   const { tableData, isLoadingTable, rows, isLoadingRows } = useTableData({
     workspaceId,
@@ -715,7 +716,6 @@ export function Table({
       const scrollRect = scroll.getBoundingClientRect()
       const tableEl = element.closest('table')
 
-      // Position the ghost at the dragged column's location
       ghost.style.left = `${dragged.left}px`
       ghost.style.width = `${dragged.width}px`
       ghost.style.height = `${tableEl ? tableEl.offsetHeight : scroll.scrollHeight}px`
@@ -746,6 +746,7 @@ export function Table({
         element.removeEventListener('pointercancel', handleCancel)
         document.removeEventListener('keydown', handleKeyDown)
         element.releasePointerCapture(pointerId)
+        dragEscapeCleanupRef.current = null
         if (shouldCommit) commit()
         ghost.style.display = 'none'
         ghost.style.transform = 'translateX(0)'
@@ -758,7 +759,6 @@ export function Table({
         const delta = ev.clientX - startX
         ghost.style.transform = `translateX(${delta}px)`
 
-        // Determine which column the cursor is over
         const tableX = ev.clientX - scrollRect.left + scroll.scrollLeft
         let target = boundaries[boundaries.length - 1]
         let side: 'left' | 'right' = 'right'
@@ -771,7 +771,6 @@ export function Table({
         }
 
         if (target.name === columnName) {
-          // Hovering over self — suppress the indicator
           if (dropTargetColumnNameRef.current !== null) {
             setDropTargetColumnName(null)
           }
@@ -795,6 +794,7 @@ export function Table({
       element.addEventListener('pointerup', handleUp)
       element.addEventListener('pointercancel', handleCancel)
       document.addEventListener('keydown', handleKeyDown)
+      dragEscapeCleanupRef.current = () => cleanup(false)
     },
     []
   )
@@ -833,6 +833,12 @@ export function Table({
     return () => document.removeEventListener('mouseup', handleMouseUp)
   }, [])
 
+  useEffect(() => {
+    return () => {
+      dragEscapeCleanupRef.current?.()
+    }
+  }, [])
+
   useEffect(() => {
     if (!selectionAnchor) return
     const { rowIndex, colIndex } = selectionAnchor
@@ -1466,10 +1472,10 @@ export function Table({
   }, [])
 
   const generateColumnName = useCallback(() => {
-    const existing = schemaColumnsRef.current.map((c) => c.name.toLowerCase())
+    const existing = new Set(schemaColumnsRef.current.map((c) => c.name.toLowerCase()))
     let name = 'untitled'
     let i = 2
-    while (existing.includes(name.toLowerCase())) {
+    while (existing.has(name)) {
       name = `untitled_${i}`
       i++
     }
@@ -2906,10 +2912,9 @@ const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
   const renameInputRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
-    if (isRenaming && renameInputRef.current) {
-      renameInputRef.current.focus()
-      renameInputRef.current.select()
-    }
+    if (!isRenaming || !renameInputRef.current) return
+    renameInputRef.current.focus()
+    renameInputRef.current.select()
   }, [isRenaming])
 
   const handleResizePointerDown = useCallback(
@@ -2958,7 +2963,6 @@ const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
   const handleThPointerDown = useCallback(
     (e: React.PointerEvent) => {
       if (isRenaming || e.button !== 0) return
-      if ((e.target as HTMLElement).closest('button')) return
       e.preventDefault()
 
       const th = e.currentTarget as HTMLElement
@@ -3042,24 +3046,25 @@ const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
           )}
         </div>
       ) : (
-        <div className='flex h-full w-full min-w-0 items-center'>
+        <div className='flex h-full w-full min-w-0 items-center px-2 py-[7px]'>
+          <ColumnTypeIcon type={column.type} />
+          <span className='ml-1.5 min-w-0 overflow-clip text-ellipsis whitespace-nowrap font-medium text-[var(--text-primary)] text-small'>
+            {column.name}
+          </span>
+          {sortDirection && (
+            <span className='ml-1 shrink-0'>
+              <SortDirectionIndicator direction={sortDirection} />
+            </span>
+          )}
           <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
             <DropdownMenuTrigger asChild>
               <button
                 type='button'
-                onClick={(e) => onColumnSelect?.(colIndex, e.shiftKey)}
-                className='flex min-w-0 flex-1 cursor-pointer items-center px-2 py-[7px] outline-none'
+                onPointerDown={(e) => e.stopPropagation()}
+                onClick={() => onColumnSelect?.(colIndex, false)}
+                className='ml-1 flex shrink-0 cursor-pointer items-center opacity-0 outline-none transition-opacity group-hover:opacity-100'
               >
-                <ColumnTypeIcon type={column.type} />
-                <span className='ml-1.5 min-w-0 overflow-clip text-ellipsis whitespace-nowrap font-medium text-[var(--text-primary)] text-small'>
-                  {column.name}
-                </span>
-                {sortDirection && (
-                  <span className='ml-1 shrink-0'>
-                    <SortDirectionIndicator direction={sortDirection} />
-                  </span>
-                )}
-                <ChevronDown className='ml-1 h-[7px] w-[9px] shrink-0 text-[var(--text-muted)] opacity-0 transition-opacity group-hover:opacity-100' />
+                <ChevronDown className='h-[7px] w-[9px] text-[var(--text-muted)]' />
               </button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align='start' sideOffset={0}>

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/hooks/use-export-table.ts

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useState } from 'react'
+import { useCallback, useRef, useState } from 'react'
 import { usePostHog } from 'posthog-js/react'
 import { toast } from '@/components/emcn'
 import { downloadFile, sanitizePathSegment } from '@/lib/core/utils/file-download'
@@ -29,12 +29,12 @@ export function useExportTable({
 }: UseExportTableParams) {
   const posthog = usePostHog()
   const [isExporting, setIsExporting] = useState(false)
+  const isExportingRef = useRef(false)
 
   const handleExportTable = useCallback(async () => {
-    if (!canExport || !workspaceId || !tableId || isExporting) {
-      return
-    }
+    if (!canExport || !workspaceId || !tableId || isExportingRef.current) return
 
+    isExportingRef.current = true
     setIsExporting(true)
 
     try {
@@ -63,12 +63,12 @@ export function useExportTable({
         duration: 5000,
       })
     } finally {
+      isExportingRef.current = false
       setIsExporting(false)
     }
   }, [
     canExport,
     columns,
-    isExporting,
     posthog,
     queryOptions.filter,
     queryOptions.sort,

apps/sim/app/workspace/[workspaceId]/tables/tables.tsx

@@ -68,9 +68,8 @@ export function Tables() {
   const { data: tables = [], isLoading, error } = useTablesList(workspaceId)
   const { data: members } = useWorkspaceMembersQuery(workspaceId)
 
-  if (error) {
-    logger.error('Failed to load tables:', error)
-  }
+  if (error) logger.error('Failed to load tables:', error)
+
   const deleteTable = useDeleteTable(workspaceId)
   const createTable = useCreateTable(workspaceId)
   const uploadCsv = useUploadCsvToTable()