improvement(tables): react-doctor safe performance pass

Apply high-confidence, behavior-preserving perf fixes surfaced by
react-doctor on the tables module:

- Lazy-init the import-status ref so it stops allocating and discarding
  a fresh Map on every render (rerender-lazy-ref-init).
- expandToDisplayColumns: build an outputs-by-column-name Map once per
  workflow group instead of Array.find() per column (js-index-maps).
- Sort the tables list with toSorted() instead of [...list].sort()
  (js-tosorted-immutable; ES2023 lib is enabled for apps/sim).
- Hoist the static TITLE_BY_MODE map and the pure editor wheel handler
  to module scope so they are not rebuilt each render.

Left the effect/selection refactors (state-synced-to-prop, effect
chains) untouched: those effects react to async-loaded rows and are not
the copy-a-prop-into-state anti-pattern; refactoring them needs live
grid verification. Barrel-import findings are false positives against
the repo's mandated barrel-import convention.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/inline-editors.tsx

@@ -19,6 +19,15 @@ interface InlineEditorProps {
   onCancel: () => void
 }
 
+/** Redirect wheel gestures over an inline editor to the surrounding table scroll container. */
+function handleEditorWheel(e: React.WheelEvent<HTMLInputElement>) {
+  e.preventDefault()
+  const container = e.currentTarget.closest('[data-table-scroll]') as HTMLElement | null
+  if (container) {
+    container.scrollBy(e.deltaX, e.deltaY)
+  }
+}
+
 /** Inline editor for `date` columns — text input + popover calendar. */
 function InlineDateEditor({
   value,
@@ -152,14 +161,6 @@ function InlineTextEditor({
     }
   }, [])
 
-  const handleWheel = (e: React.WheelEvent<HTMLInputElement>) => {
-    e.preventDefault()
-    const container = e.currentTarget.closest('[data-table-scroll]') as HTMLElement | null
-    if (container) {
-      container.scrollBy(e.deltaX, e.deltaY)
-    }
-  }
-
   const doSave = (reason: SaveReason) => {
     if (doneRef.current) return
     doneRef.current = true
@@ -194,7 +195,7 @@ function InlineTextEditor({
       value={draft ?? ''}
       onChange={(e) => setDraft(e.target.value)}
       onKeyDown={handleKeyDown}
-      onWheel={handleWheel}
+      onWheel={handleEditorWheel}
       onBlur={() => doSave('blur')}
       className='w-full min-w-0 select-text border-none bg-transparent p-0 text-[var(--text-primary)] text-small outline-none'
     />

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/utils.ts

@@ -116,10 +116,13 @@ export function expandToDisplayColumns(
         size++
       }
       const group = groupById.get(gid)
+      const outputByColumnName = group
+        ? new Map(group.outputs.map((o) => [o.columnName, o]))
+        : undefined
       const startIdx = out.length
       for (let k = 0; k < size; k++) {
         const child = columns[i + k]
-        const output = group?.outputs.find((o) => o.columnName === getColumnId(child))
+        const output = outputByColumnName?.get(getColumnId(child))
         out.push({
           ...child,
           key: getColumnId(child),

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx

@@ -121,6 +121,12 @@ interface WorkflowSidebarProps {
 
 const OUTPUT_VALUE_SEPARATOR = '::'
 
+const TITLE_BY_MODE = {
+  create: 'Add workflow',
+  'edit-group': 'Configure workflow',
+  'edit-output': 'Configure output column',
+} as const
+
 const encodeOutputValue = (blockId: string, path: string) =>
   `${blockId}${OUTPUT_VALUE_SEPARATOR}${path}`
 
@@ -772,15 +778,10 @@ export function WorkflowSidebarBody({
     updateWorkflowGroup.isPending ||
     updateColumn.isPending ||
     !depsValid
-  const titleByMode = {
-    create: 'Add workflow',
-    'edit-group': 'Configure workflow',
-    'edit-output': 'Configure output column',
-  } as const
   const title =
     config.mode === 'create' && config.kind === 'enrichment' && config.enrichmentName
       ? config.enrichmentName
-      : titleByMode[config.mode]
+      : TITLE_BY_MODE[config.mode]
   const showBackButton = isEnrichment && Boolean(onBack)
 
   // edit-output mode is single-select on the output picker; everywhere else

apps/sim/app/workspace/[workspaceId]/tables/components/import-progress-menu/use-workspace-imports.ts

@@ -51,12 +51,14 @@ export function useWorkspaceImports(
   // jobs), so the tray reads them from their dedicated workspace listing.
   const { data: exportJobs } = useWorkspaceExportJobs(workspaceId)
 
-  const prevStatus = useRef<Map<string, string>>(new Map())
+  const prevStatusRef = useRef<Map<string, string> | null>(null)
+  prevStatusRef.current ??= new Map()
   useEffect(() => {
     if (!tables) return
+    const prevStatus = prevStatusRef.current ?? new Map<string, string>()
     const store = useImportTrayStore.getState()
     for (const table of tables) {
-      const before = prevStatus.current.get(table.id)
+      const before = prevStatus.get(table.id)
       const now = table.jobStatus ?? 'none'
       if (before === 'running' && now === 'ready') {
         // Success toast only for imports — deletes reflect instantly in the grid and backfills
@@ -80,7 +82,7 @@ export function useWorkspaceImports(
         if (table.jobType === 'import') store.notify(table.id)
       }
       if (now !== 'running' && store.isCanceled(table.id)) store.consumeCanceled(table.id)
-      prevStatus.current.set(table.id, now)
+      prevStatus.set(table.id, now)
     }
   }, [tables])
 

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

@@ -185,7 +185,7 @@ export function Tables() {
     }
     const col = activeSort?.column ?? 'updated'
     const dir = activeSort?.direction ?? 'desc'
-    return [...result].sort((a, b) => {
+    return result.toSorted((a, b) => {
       let cmp = 0
       switch (col) {
         case 'name':