fix(tables): enrichment columns use type icon; output names editable

- Drop the per-column enrichment icon (it duplicated the meta-header icon).
  Enrichment output columns now render the standard column-type icon (Text,
  etc.) — the enrichment's icon stays only on the group meta-header.
- Make output column names editable in the enrichment config edit mode too;
  changed names rename their columns via useUpdateColumn (the rename cascades
  into the group's output refs server-side). Validation excludes the output's
  own current name.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: TheodoreSpeaks

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichment-config.tsx

@@ -21,7 +21,11 @@ import { cn } from '@/lib/core/utils/cn'
 import type { ColumnDefinition, WorkflowGroup, WorkflowGroupOutput } from '@/lib/table'
 import { deriveOutputColumnName } from '@/lib/table/column-naming'
 import type { EnrichmentConfig as EnrichmentDef } from '@/enrichments/types'
-import { useAddWorkflowGroup, useUpdateWorkflowGroup } from '@/hooks/queries/tables'
+import {
+  useAddWorkflowGroup,
+  useUpdateColumn,
+  useUpdateWorkflowGroup,
+} from '@/hooks/queries/tables'
 import { RunSettingsSection } from '../workflow-sidebar/run-settings-section'
 
 interface EnrichmentConfigProps {
@@ -32,8 +36,7 @@ interface EnrichmentConfigProps {
   onBack: () => void
   onClose: () => void
   /** When set, the panel edits this existing enrichment group (pre-filled,
-   *  updates instead of creating). Output columns already exist and are shown
-   *  read-only. */
+   *  updates instead of creating; changed output names rename their columns). */
   existingGroup?: WorkflowGroup
 }
 
@@ -66,8 +69,13 @@ export function EnrichmentConfig({
 }: EnrichmentConfigProps) {
   const addWorkflowGroup = useAddWorkflowGroup({ workspaceId, tableId })
   const updateWorkflowGroup = useUpdateWorkflowGroup({ workspaceId, tableId })
+  const updateColumn = useUpdateColumn({ workspaceId, tableId })
   const isEditing = Boolean(existingGroup)
 
+  /** Output column's persisted name (edit mode), used to detect renames. */
+  const originalOutputName = (outputId: string): string | undefined =>
+    existingGroup?.outputs.find((o) => o.outputId === outputId)?.columnName
+
   const [inputMappings, setInputMappings] = useState<Record<string, string>>(() => {
     if (existingGroup) {
       const seed: Record<string, string> = {}
@@ -81,8 +89,8 @@ export function EnrichmentConfig({
     }
     return seed
   })
-  // Per-output column names. Edit mode reflects the existing columns (read-only);
-  // create mode seeds deduped defaults the user can rename.
+  // Per-output column names. Editable in both modes — edit mode seeds the
+  // existing column names and renames changed ones on save.
   const [outputNames, setOutputNames] = useState<Record<string, string>>(() => {
     const seed: Record<string, string> = {}
     if (existingGroup) {
@@ -108,22 +116,29 @@ export function EnrichmentConfig({
   const missingRequired = enrichment.inputs.some((i) => i.required && !inputMappings[i.id])
   const depsValid = !autoRun || deps.length > 0
 
-  /** Per-output name validation (create mode only — edit mode columns exist). */
+  /** Per-output column-name validation (both modes). Excludes the output's own
+   *  current column so renaming to its existing name isn't flagged. */
   function outputNameError(outputId: string): string | null {
-    if (isEditing) return null
     const value = (outputNames[outputId] ?? '').trim()
     if (!value) return 'Required'
     const lower = value.toLowerCase()
-    if (allColumns.some((c) => c.name.toLowerCase() === lower)) return 'Column already exists'
+    const ownOriginal = originalOutputName(outputId)?.toLowerCase()
+    if (
+      allColumns.some((c) => c.name.toLowerCase() === lower && c.name.toLowerCase() !== ownOriginal)
+    )
+      return 'Column already exists'
     const dup = enrichment.outputs.some(
       (o) => o.id !== outputId && (outputNames[o.id] ?? '').trim().toLowerCase() === lower
     )
     return dup ? 'Duplicate name' : null
   }
-  const outputsInvalid =
-    !isEditing && enrichment.outputs.some((o) => outputNameError(o.id) !== null)
+  const outputsInvalid = enrichment.outputs.some((o) => outputNameError(o.id) !== null)
   const saveDisabled =
-    addWorkflowGroup.isPending || updateWorkflowGroup.isPending || !depsValid || outputsInvalid
+    addWorkflowGroup.isPending ||
+    updateWorkflowGroup.isPending ||
+    updateColumn.isPending ||
+    !depsValid ||
+    outputsInvalid
 
   async function handleSave() {
     if (missingRequired || (autoRun && deps.length === 0) || outputsInvalid) {
@@ -136,6 +151,15 @@ export function EnrichmentConfig({
 
     if (existingGroup) {
       try {
+        // Rename any output columns the user changed first; the rename cascades
+        // into the group's output refs server-side.
+        for (const o of enrichment.outputs) {
+          const original = originalOutputName(o.id)
+          const next = (outputNames[o.id] ?? '').trim()
+          if (original && next && next !== original) {
+            await updateColumn.mutateAsync({ columnName: original, updates: { name: next } })
+          }
+        }
         await updateWorkflowGroup.mutateAsync({
           groupId: existingGroup.id,
           name: enrichment.name,
@@ -298,7 +322,6 @@ export function EnrichmentConfig({
                     onChange={(e) =>
                       setOutputNames((prev) => ({ ...prev, [output.id]: e.target.value }))
                     }
-                    disabled={isEditing}
                     spellCheck={false}
                     autoComplete='off'
                     className={cn(outErr && 'border-[var(--text-error)]')}

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

@@ -250,7 +250,7 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
         <div className='flex h-full w-full min-w-0 items-center px-2 py-[7px]'>
           <ColumnTypeIcon
             type={column.type}
-            isWorkflowColumn={!!column.workflowGroupId}
+            isWorkflowColumn={!!column.workflowGroupId && ownGroup?.type !== 'enrichment'}
             blockIconInfo={sourceInfo?.blockIconInfo}
           />
           <input
@@ -270,7 +270,7 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
         <div className='flex h-full w-full min-w-0 items-center px-2 py-[7px]'>
           <ColumnTypeIcon
             type={column.type}
-            isWorkflowColumn={!!column.workflowGroupId}
+            isWorkflowColumn={!!column.workflowGroupId && ownGroup?.type !== 'enrichment'}
             blockIconInfo={sourceInfo?.blockIconInfo}
           />
           <span className='ml-1.5 min-w-0 overflow-clip text-ellipsis whitespace-nowrap font-medium text-[13px] text-[var(--text-primary)]'>
@@ -287,7 +287,7 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
           >
             <ColumnTypeIcon
               type={column.type}
-              isWorkflowColumn={!!column.workflowGroupId}
+              isWorkflowColumn={!!column.workflowGroupId && ownGroup?.type !== 'enrichment'}
               blockIconInfo={sourceInfo?.blockIconInfo}
             />
             <span className='ml-1.5 min-w-0 overflow-clip text-ellipsis whitespace-nowrap font-medium text-[var(--text-primary)] text-small'>

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

@@ -6,7 +6,6 @@ import type { ColumnDefinition, TableDefinition, TableRow, WorkflowGroup } from
 import { TABLE_LIMITS } from '@/lib/table/constants'
 import type { FlattenOutputsBlockInput } from '@/lib/workflows/blocks/flatten-outputs'
 import { getBlock } from '@/blocks'
-import { getEnrichment } from '@/enrichments/registry'
 import {
   tableRowsInfiniteOptions,
   useInfiniteTableRows,
@@ -190,19 +189,10 @@ export function useTable({ workspaceId, tableId, queryOptions }: UseTableParams)
   const columnSourceInfo = useMemo<Map<string, ColumnSourceInfo>>(() => {
     const map = new Map<string, ColumnSourceInfo>()
     for (const group of tableWorkflowGroups) {
-      // Enrichment groups have no workflow blocks — source the icon/name from
-      // the enrichment registry so every output column shows the enrichment's
-      // own icon (e.g. Mail for work-email) instead of the generic play icon.
-      if (group.type === 'enrichment') {
-        const enrichment = getEnrichment(group.enrichmentId)
-        const blockIconInfo: BlockIconInfo | undefined = enrichment?.icon
-          ? { icon: enrichment.icon, color: '#6B7280' }
-          : undefined
-        for (const out of group.outputs) {
-          map.set(out.columnName, { blockIconInfo, blockName: enrichment?.name })
-        }
-        continue
-      }
+      // Enrichment groups have no workflow blocks; their output columns render
+      // with the standard column-type icon (the meta-header already carries the
+      // enrichment's icon), so we skip building source info for them.
+      if (group.type === 'enrichment') continue
       const state = workflowStates.get(group.workflowId)
       const blocks = (state as { blocks?: Record<string, FlattenOutputsBlockInput> } | null)?.blocks
       for (const out of group.outputs) {