From b1af15baf7cf344071ef22c6adaf19182557ee82 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Thu, 27 Aug 2026 19:29:16 -0700
Subject: [PATCH] improvement(tables): simplify column dropdown

---
 .../column-config-sidebar/column-types.ts     |  4 +-
 .../components/column-config-sidebar/index.ts |  7 +--
 .../column-dropdown/column-dropdown.test.tsx  | 58 +++++++++++++++++++
 .../column-dropdown.tsx}                      | 24 +++-----
 .../components/column-dropdown/index.ts       |  1 +
 .../tables/[tableId]/components/index.ts      |  2 +-
 .../components/new-column-dropdown/index.ts   |  1 -
 .../components/table-grid/table-grid.tsx      | 20 +++++--
 .../[workspaceId]/tables/[tableId]/table.tsx  |  4 +-
 9 files changed, 88 insertions(+), 33 deletions(-)
 create mode 100644 apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-dropdown/column-dropdown.test.tsx
 rename apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/{new-column-dropdown/new-column-dropdown.tsx => column-dropdown/column-dropdown.tsx} (82%)
 create mode 100644 apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-dropdown/index.ts
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/new-column-dropdown/index.ts

diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-types.ts b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-types.ts
index 2f235137f17..a6ea0ba2ac1 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-types.ts
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-types.ts
@@ -8,9 +8,9 @@ import { ALL_COLUMN_TYPES } from '@/lib/table/column-types'
  * "+ New column" dropdown to spawn a workflow group; the resulting columns are
  * stored as scalar types under the hood (none carry `'workflow'`).
  */
-export type SidebarColumnType = ColumnDefinition['type'] | 'workflow'
+type SidebarColumnType = ColumnDefinition['type'] | 'workflow'
 
-export interface ColumnTypeOption {
+interface ColumnTypeOption {
   type: SidebarColumnType
   label: string
   icon: React.ComponentType<{ className?: string }>
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/index.ts b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/index.ts
index e458001136d..0308447977f 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/index.ts
@@ -1,8 +1,3 @@
 export type { ColumnConfig } from './column-config-sidebar'
 export { ColumnConfigSidebar } from './column-config-sidebar'
-export {
-  COLUMN_TYPE_OPTIONS,
-  type ColumnTypeOption,
-  PLAIN_COLUMN_TYPE_OPTIONS,
-  type SidebarColumnType,
-} from './column-types'
+export { COLUMN_TYPE_OPTIONS, PLAIN_COLUMN_TYPE_OPTIONS } from './column-types'
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-dropdown/column-dropdown.test.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-dropdown/column-dropdown.test.tsx
new file mode 100644
index 00000000000..6409eb7f513
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-dropdown/column-dropdown.test.tsx
@@ -0,0 +1,58 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { COLUMN_TYPE_OPTIONS } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar'
+import { ColumnDropdown } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/column-dropdown/column-dropdown'
+
+let container: HTMLDivElement
+let root: Root
+
+beforeEach(() => {
+  globalThis.IS_REACT_ACT_ENVIRONMENT = true
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+})
+
+afterEach(() => {
+  act(() => root.unmount())
+  container.remove()
+})
+
+describe('ColumnDropdown', () => {
+  it('lists Enrichments as a regular entry after the column options', () => {
+    const onPickEnrichment = vi.fn()
+
+    act(() => {
+      root.render(
+        <ColumnDropdown
+          trigger='header'
+          disabled={false}
+          onPickType={vi.fn()}
+          onPickWorkflow={vi.fn()}
+          onPickEnrichment={onPickEnrichment}
+          blocked={false}
+          onBlocked={vi.fn()}
+        />
+      )
+    })
+    act(() => {
+      container
+        .querySelector<HTMLButtonElement>('button')
+        ?.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true, button: 0 }))
+    })
+
+    const items = [...document.body.querySelectorAll<HTMLElement>('[role="menuitem"]')]
+    expect(items.map((item) => item.textContent)).toEqual([
+      ...COLUMN_TYPE_OPTIONS.map((option) => option.label),
+      'Enrichments',
+    ])
+    expect(document.body.querySelector('[role="separator"]')).toBeNull()
+
+    act(() => items.at(-1)?.click())
+    expect(onPickEnrichment).toHaveBeenCalledOnce()
+  })
+})
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/new-column-dropdown/new-column-dropdown.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-dropdown/column-dropdown.tsx
similarity index 82%
rename from apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/new-column-dropdown/new-column-dropdown.tsx
rename to apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-dropdown/column-dropdown.tsx
index 2e9b21332dc..c1829b3febe 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/new-column-dropdown/new-column-dropdown.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-dropdown/column-dropdown.tsx
@@ -8,7 +8,6 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
   Plus,
 } from '@sim/emcn'
@@ -19,7 +18,7 @@ import { COLUMN_TYPE_OPTIONS } from '../column-config-sidebar'
 const CELL_HEADER =
   'border-[var(--border)] border-r border-b bg-[var(--bg)] px-2 py-[7px] text-left align-middle'
 
-interface NewColumnDropdownProps {
+interface ColumnDropdownProps {
   /** `'header'` renders the page-header trigger (subtle Button); `'inline-header'` renders
    *  the in-table column-header `<th>` trigger. Same dropdown content either way. */
   trigger: 'header' | 'inline-header'
@@ -42,7 +41,7 @@ interface NewColumnDropdownProps {
  * Lists every column type plus "Workflow" and "Enrichments"; picking a type
  * opens the right sidebar pre-seeded.
  */
-export function NewColumnDropdown({
+export function ColumnDropdown({
   trigger,
   disabled,
   onPickType,
@@ -50,7 +49,7 @@ export function NewColumnDropdown({
   onPickEnrichment,
   blocked,
   onBlocked,
-}: NewColumnDropdownProps) {
+}: ColumnDropdownProps) {
   const triggerButton =
     trigger === 'header' ? (
       <button
@@ -86,18 +85,7 @@ export function NewColumnDropdown({
   const menu = (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>{triggerButton}</DropdownMenuTrigger>
-      {/* Taller than the 240px shared default: the full type list is 9 items
-          (295px with its separator and padding), so the default cut the last
-          two off behind a scrollbar. Sized here rather than in the shared
-          component, which every other dropdown in the app relies on. */}
-      <DropdownMenuContent align='start' side='bottom' sideOffset={4} className='max-h-[320px]'>
-        <>
-          <DropdownMenuItem onSelect={onPickEnrichment}>
-            <Sparkles className='size-[14px] text-[var(--text-icon)]' />
-            Enrichments
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
-        </>
+      <DropdownMenuContent align='start' side='bottom' sideOffset={4}>
         {COLUMN_TYPE_OPTIONS.map((option) => {
           const Icon = option.icon
           const onSelect =
@@ -111,6 +99,10 @@ export function NewColumnDropdown({
             </DropdownMenuItem>
           )
         })}
+        <DropdownMenuItem onSelect={onPickEnrichment}>
+          <Sparkles className='size-[14px] text-[var(--text-icon)]' />
+          Enrichments
+        </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-dropdown/index.ts b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-dropdown/index.ts
new file mode 100644
index 00000000000..02681f50420
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-dropdown/index.ts
@@ -0,0 +1 @@
+export { ColumnDropdown } from './column-dropdown'
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/index.ts b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/index.ts
index 8307081376a..a50073f74a9 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/index.ts
@@ -1,10 +1,10 @@
 export * from './column-config-sidebar'
+export * from './column-dropdown'
 export * from './columns-menu'
 export * from './context-menu'
 export * from './enrichment-details'
 export * from './enrichments-sidebar'
 export * from './lock-settings-modal'
-export * from './new-column-dropdown'
 export * from './row-modal'
 export * from './run-status-control'
 export * from './save-view-modal'
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/new-column-dropdown/index.ts b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/new-column-dropdown/index.ts
deleted file mode 100644
index 026d9ff58f1..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/new-column-dropdown/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { NewColumnDropdown } from './new-column-dropdown'
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-grid.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-grid.tsx
index 5758689092d..63c97d55518 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-grid.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-grid.tsx
@@ -57,8 +57,8 @@ import { useContextMenu, useTable } from '../../hooks'
 import type { EditingCell, QueryOptions, SaveReason } from '../../types'
 import { cleanCellValue, generateColumnName as sharedGenerateColumnName } from '../../utils'
 import type { ColumnConfig } from '../column-config-sidebar'
+import { ColumnDropdown } from '../column-dropdown'
 import { ContextMenu } from '../context-menu'
-import { NewColumnDropdown } from '../new-column-dropdown'
 import type { WorkflowConfig } from '../workflow-sidebar'
 import { ExpandedCellPopover } from './cells'
 import { ADD_COL_WIDTH, COL_WIDTH, SELECTION_TINT_BG } from './constants'
@@ -898,7 +898,11 @@ export function TableGrid({
    *  so solo editing never pays the map build. */
   const columnIndexById = useMemo(() => {
     const map = new Map<string, number>()
-    if (remoteSelections.length > 0) displayColumns.forEach((col, index) => map.set(col.key, index))
+    if (remoteSelections.length > 0) {
+      displayColumns.forEach((col, index) => {
+        map.set(col.key, index)
+      })
+    }
     return map
   }, [displayColumns, remoteSelections.length])
 
@@ -907,7 +911,11 @@ export function TableGrid({
    *  solo editing never pays the O(n) map build on a refetch. */
   const rowIndexById = useMemo(() => {
     const map = new Map<string, number>()
-    if (remoteSelections.length > 0) rows.forEach((row, index) => map.set(row.id, index))
+    if (remoteSelections.length > 0) {
+      rows.forEach((row, index) => {
+        map.set(row.id, index)
+      })
+    }
     return map
   }, [rows, remoteSelections.length])
 
@@ -2251,7 +2259,9 @@ export function TableGrid({
       const draggedGid = colByName.get(dragged)?.workflowGroupId
 
       const orderIndex = new Map<string, number>()
-      currentOrder.forEach((n, i) => orderIndex.set(n, i))
+      currentOrder.forEach((n, i) => {
+        orderIndex.set(n, i)
+      })
 
       // Compute the contiguous run covering the dragged column. For a plain
       // column this is just [fromIndex, fromIndex]. For a group member it spans
@@ -4853,7 +4863,7 @@ export function TableGrid({
                         )
                       })}
                       {userPermissions.canEdit && (
-                        <NewColumnDropdown
+                        <ColumnDropdown
                           trigger='inline-header'
                           disabled={addColumnMutation.isPending}
                           blocked={!canMutateSchema}
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/table.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/table.tsx
index ee9f6b52e27..83de26602ef 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/table.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/table.tsx
@@ -71,11 +71,11 @@ import type { DeletedRowSnapshot } from '@/stores/table/types'
 import {
   type ColumnConfig,
   ColumnConfigSidebar,
+  ColumnDropdown,
   ColumnsMenu,
   EnrichmentDetails,
   EnrichmentsSidebar,
   LockSettingsModal,
-  NewColumnDropdown,
   RowModal,
   RunStatusControl,
   SaveViewModal,
@@ -1372,7 +1372,7 @@ export function Table({
   // table is schema-locked and explains itself instead of disappearing.
   const canMutateSchema = userPermissions.canEdit && !tableData?.locks.schemaLocked
   const createTrigger = userPermissions.canEdit ? (
-    <NewColumnDropdown
+    <ColumnDropdown
       trigger='header'
       disabled={false}
       blocked={!canMutateSchema}