From 36169e924c1be0df7ca3bff79b0dcf758e4e63f0 Mon Sep 17 00:00:00 2001
From: Adam Obuchowicz <adam.obuchowicz@enso.org>
Date: Tue, 21 Jan 2025 10:57:25 +0100
Subject: [PATCH] Fix header rename (#12064)

Fixes #11150

The fix consist of two parts:
1. The state of editing is kept in the widget, not in particular header components; the communication is done in a vue fashion - the headers calls callback if they _want_ to be edited/not edited.
2. Copied the AgGridVue component and make it _not_ mount header components by itself, but use our VueComponentHost instead (which also as improved a bit, so we have more guarantees of preserving components).
---
 CHANGELOG.md                                  |   3 +
 app/common/src/utilities/data/object.ts       |  21 --
 .../components/CodeEditor/CodeEditorImpl.vue  |  10 +-
 .../components/CodeEditor/tooltips.ts         |   2 +-
 .../GraphEditor/widgets/WidgetTableEditor.vue |  94 ++++---
 .../widgets/WidgetTableEditor/TableHeader.vue | 109 ++++----
 .../__tests__/tableInputArgument.test.ts      |  10 +-
 .../WidgetTableEditor/tableInputArgument.ts   |  28 +-
 .../MarkdownEditor/MarkdownEditorImpl.vue     |   8 +-
 .../markdown/decoration/linksAndImages.ts     |   2 +-
 .../markdown/decoration/table.ts              |   2 +-
 .../markdown/decoration/treeStateDecorator.ts |   2 +-
 .../markdown/decoration/treeViewDecorator.ts  |   2 +-
 .../PlainTextEditor/PlainTextEditorImpl.vue   |   8 +-
 .../components/VueComponentHost.vue           |  39 ---
 .../project-view/components/VueHostRender.vue |  54 ++++
 .../components/shared/AgGridTableView.vue     |  68 ++++-
 .../shared/AgGridTableView/AgGridVue.ts       | 262 ++++++++++++++++++
 .../shared/AgGridTableView/Utils.ts           | 122 ++++++++
 .../src/project-view/util/codemirror/index.ts |   2 +-
 .../util/codemirror/linkEditPopup.ts          |   2 +-
 .../util/codemirror/vueHostExt.ts             |   2 +-
 22 files changed, 649 insertions(+), 203 deletions(-)
 delete mode 100644 app/gui/src/project-view/components/VueComponentHost.vue
 create mode 100644 app/gui/src/project-view/components/VueHostRender.vue
 create mode 100644 app/gui/src/project-view/components/shared/AgGridTableView/AgGridVue.ts
 create mode 100644 app/gui/src/project-view/components/shared/AgGridTableView/Utils.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 099bda81269a..0faf697cbdf3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,12 +9,15 @@
 - [Quick Fix Import Button][12051].
 - [Fixed nodes being selected after deleting other nodes or connections.][11902]
 - [Redo stack is no longer lost when interacting with text literals][11908].
+- [Fixed bug when clicking header in Table Editor Widget didn't start editing
+  it][12064]
 
 [11889]: https://github.com/enso-org/enso/pull/11889
 [11836]: https://github.com/enso-org/enso/pull/11836
 [12051]: https://github.com/enso-org/enso/pull/12051
 [11902]: https://github.com/enso-org/enso/pull/11902
 [11908]: https://github.com/enso-org/enso/pull/11908
+[12064]: https://github.com/enso-org/enso/pull/12064
 
 #### Enso Standard Library
 
diff --git a/app/common/src/utilities/data/object.ts b/app/common/src/utilities/data/object.ts
index a60e6051050b..44279a04d2b3 100644
--- a/app/common/src/utilities/data/object.ts
+++ b/app/common/src/utilities/data/object.ts
@@ -193,27 +193,6 @@ export type ExtractKeys<T, U> = {
 /** An instance method of the given type. */
 export type MethodOf<T> = (this: T, ...args: never) => unknown
 
-// ===================
-// === useObjectId ===
-// ===================
-
-/** Composable providing support for managing object identities. */
-export function useObjectId() {
-  let lastId = 0
-  const idNumbers = new WeakMap<object, number>()
-  /** @returns A value that can be used to compare object identity. */
-  function objectId(o: object): number {
-    const id = idNumbers.get(o)
-    if (id == null) {
-      lastId += 1
-      idNumbers.set(o, lastId)
-      return lastId
-    }
-    return id
-  }
-  return { objectId }
-}
-
 /**
  * Returns the union of `A` and `B`, with a type-level assertion that `A` and `B` don't have any keys in common; this
  * can be used to splice together objects without the risk of collisions.
diff --git a/app/gui/src/project-view/components/CodeEditor/CodeEditorImpl.vue b/app/gui/src/project-view/components/CodeEditor/CodeEditorImpl.vue
index 25f3451aafb5..7f0e28d22ba9 100644
--- a/app/gui/src/project-view/components/CodeEditor/CodeEditorImpl.vue
+++ b/app/gui/src/project-view/components/CodeEditor/CodeEditorImpl.vue
@@ -4,7 +4,7 @@ import { ensoSyntax } from '@/components/CodeEditor/ensoSyntax'
 import { useEnsoSourceSync } from '@/components/CodeEditor/sync'
 import { ensoHoverTooltip } from '@/components/CodeEditor/tooltips'
 import CodeMirrorRoot from '@/components/CodeMirrorRoot.vue'
-import VueComponentHost from '@/components/VueComponentHost.vue'
+import VueHostRender, { VueHost } from '@/components/VueHostRender.vue'
 import { useGraphStore } from '@/stores/graph'
 import { useProjectStore } from '@/stores/project'
 import { useSuggestionDbStore } from '@/stores/suggestionDatabase'
@@ -31,8 +31,6 @@ const projectStore = useProjectStore()
 const graphStore = useGraphStore()
 const suggestionDbStore = useSuggestionDbStore()
 
-const vueComponentHost =
-  useTemplateRef<ComponentInstance<typeof VueComponentHost>>('vueComponentHost')
 const editorRoot = useTemplateRef<ComponentInstance<typeof CodeMirrorRoot>>('editorRoot')
 const rootElement = computed(() => editorRoot.value?.rootElement)
 useAutoBlur(rootElement)
@@ -42,7 +40,7 @@ const autoindentOnEnter = {
   run: insertNewlineKeepIndent,
 }
 
-const vueHost = computed(() => vueComponentHost.value || undefined)
+const vueHost = new VueHost()
 const { editorView, setExtraExtensions } = useCodeMirror(editorRoot, {
   extensions: [
     keymap.of([indentWithTab, autoindentOnEnter]),
@@ -55,7 +53,7 @@ const { editorView, setExtraExtensions } = useCodeMirror(editorRoot, {
     highlightStyle(useCssModule()),
     ensoHoverTooltip(graphStore, suggestionDbStore, vueHost),
   ],
-  vueHost,
+  vueHost: () => vueHost,
 })
 ;(window as any).__codeEditorApi = testSupport(editorView)
 const { updateListener, connectModuleListener } = useEnsoSourceSync(
@@ -74,7 +72,7 @@ onMounted(() => {
 
 <template>
   <CodeMirrorRoot ref="editorRoot" class="CodeEditor" @keydown.tab.stop.prevent />
-  <VueComponentHost ref="vueComponentHost" />
+  <VueHostRender :host="vueHost" />
 </template>
 
 <style scoped>
diff --git a/app/gui/src/project-view/components/CodeEditor/tooltips.ts b/app/gui/src/project-view/components/CodeEditor/tooltips.ts
index 0c9cfb609b4d..d6af7c58c0fd 100644
--- a/app/gui/src/project-view/components/CodeEditor/tooltips.ts
+++ b/app/gui/src/project-view/components/CodeEditor/tooltips.ts
@@ -1,6 +1,6 @@
 import CodeEditorTooltip from '@/components/CodeEditor/CodeEditorTooltip.vue'
 import { astProp } from '@/components/CodeEditor/ensoSyntax'
-import { type VueHost } from '@/components/VueComponentHost.vue'
+import { type VueHost } from '@/components/VueHostRender.vue'
 import { type GraphStore } from '@/stores/graph'
 import { type SuggestionDbStore } from '@/stores/suggestionDatabase'
 import { Ast } from '@/util/ast'
diff --git a/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor.vue b/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor.vue
index 5d9fd957e27e..92a4b0030fc5 100644
--- a/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor.vue
+++ b/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { WidgetInputIsSpecificMethodCall } from '@/components/GraphEditor/widgets/WidgetFunction.vue'
-import TableHeader from '@/components/GraphEditor/widgets/WidgetTableEditor/TableHeader.vue'
 import {
   CELLS_LIMIT,
   tableInputCallMayBeHandled,
@@ -10,11 +9,11 @@ import {
 import ResizeHandles from '@/components/ResizeHandles.vue'
 import AgGridTableView from '@/components/shared/AgGridTableView.vue'
 import { injectGraphNavigator } from '@/providers/graphNavigator'
-import { useTooltipRegistry } from '@/providers/tooltipRegistry'
-import { Score, defineWidget, widgetProps } from '@/providers/widgetRegistry'
+import { defineWidget, Score, widgetProps } from '@/providers/widgetRegistry'
 import { WidgetEditHandler } from '@/providers/widgetRegistry/editHandler'
 import { useGraphStore } from '@/stores/graph'
 import { useSuggestionDbStore } from '@/stores/suggestionDatabase'
+import { targetIsOutside } from '@/util/autoBlur'
 import { Rect } from '@/util/data/rect'
 import { Vec2 } from '@/util/data/vec2'
 import { useToast } from '@/util/toast'
@@ -29,17 +28,23 @@ import type {
   ProcessDataFromClipboardParams,
   RowDragEndEvent,
 } from 'ag-grid-enterprise'
-import { computed, markRaw, ref } from 'vue'
+import { ComponentInstance, computed, proxyRefs, ref } from 'vue'
 import type { ComponentExposed } from 'vue-component-type-helpers'
 import { z } from 'zod'
+import TableHeader, { HeaderParams } from './WidgetTableEditor/TableHeader.vue'
 
 const props = defineProps(widgetProps(widgetDefinition))
 const graph = useGraphStore()
 const suggestionDb = useSuggestionDbStore()
-const grid = ref<ComponentExposed<typeof AgGridTableView<RowData, any>>>()
+const grid = ref<
+  ComponentInstance<typeof AgGridTableView<RowData, any>> &
+    ComponentExposed<typeof AgGridTableView<RowData, any>>
+>()
 const pasteWarning = useToast.warning()
 
-const configSchema = z.object({ size: z.object({ x: z.number(), y: z.number() }) })
+const configSchema = z.object({
+  size: z.object({ x: z.number(), y: z.number() }),
+})
 type Config = z.infer<typeof configSchema>
 
 const DEFAULT_CFG: Config = { size: { x: 200, y: 150 } }
@@ -115,34 +120,48 @@ const cellEditHandler = new CellEditing()
 
 class HeaderEditing {
   handler: WidgetEditHandler
-  stopEditingCallback: ((cancel: boolean) => void) | undefined
+  editedColId = ref<string>()
+  revertChangesCallback: (() => void) | undefined
 
   constructor() {
     this.handler = WidgetEditHandler.New('WidgetTableEditor.headerEditHandler', props.input, {
       cancel: () => {
-        this.stopEditingCallback?.(true)
+        this.revertChangesCallback?.()
+        this.editedColId.value = undefined
       },
       end: () => {
-        this.stopEditingCallback?.(false)
+        this.editedColId.value = undefined
+      },
+      pointerdown: (event) => {
+        if (
+          !(event.target instanceof HTMLInputElement) ||
+          targetIsOutside(event, grid.value?.$el)
+        ) {
+          this.handler.end()
+        } else {
+          return false
+        }
       },
     })
   }
 
-  headerEditedInGrid(stopCb: (cancel: boolean) => void) {
-    // If another header is edited, stop it (with the old callback).
-    if (this.handler.isActive()) {
-      this.stopEditingCallback?.(false)
-    }
-    this.stopEditingCallback = stopCb
-    if (!this.handler.isActive()) {
-      this.handler.start()
+  headerEditedInGrid(colId: string, revertChanges: () => void) {
+    if (this.editedColId.value !== colId) {
+      this.editedColId.value = colId
+      if (!this.handler.isActive()) {
+        this.handler.start()
+      }
     }
+    this.revertChangesCallback = revertChanges
   }
 
-  headerEditingStoppedInGrid() {
-    this.stopEditingCallback = undefined
-    if (this.handler.isActive()) {
-      this.handler.end()
+  headerEditingStoppedInGrid(colId: string) {
+    if (this.editedColId.value === colId) {
+      this.revertChangesCallback = undefined
+      this.editedColId.value = undefined
+      if (this.handler.isActive()) {
+        this.handler.end()
+      }
     }
   }
 }
@@ -164,7 +183,12 @@ const clientBounds = computed({
       portUpdate: {
         origin: props.input.portId,
         metadataKey: 'WidgetTableEditor',
-        metadata: { size: { x: value.width / graphNav.scale, y: value.height / graphNav.scale } },
+        metadata: {
+          size: {
+            x: value.width / graphNav.scale,
+            y: value.height / graphNav.scale,
+          },
+        },
       },
       directInteraction: false,
     })
@@ -211,23 +235,21 @@ function processDataFromClipboard({ data, api }: ProcessDataFromClipboardParams<
 
 // === Column Default Definition ===
 
-const tooltipRegistry = useTooltipRegistry()
-const defaultColDef: ColDef<RowData> = {
+const headerComponentParams = proxyRefs({
+  editedColId: headerEditHandler.editedColId,
+  onHeaderEditingStarted: headerEditHandler.headerEditedInGrid.bind(headerEditHandler),
+  onHeaderEditingStopped: headerEditHandler.headerEditingStoppedInGrid.bind(headerEditHandler),
+})
+
+const defaultColDef: ColDef<RowData> & {
+  headerComponentParams: HeaderParams
+} = {
   editable: true,
   resizable: true,
   sortable: false,
   lockPinned: true,
   menuTabs: ['generalMenuTab'],
-  headerComponentParams: {
-    // TODO[ao]: we mark raw, because otherwise any change _inside_ tooltipRegistry causes the grid
-    //  to be refreshed. Technically, shallowReactive should work here, but it does not,
-    //  I don't know why
-    tooltipRegistry: markRaw(tooltipRegistry),
-    editHandlers: {
-      onHeaderEditingStarted: headerEditHandler.headerEditedInGrid.bind(headerEditHandler),
-      onHeaderEditingStopped: headerEditHandler.headerEditingStoppedInGrid.bind(headerEditHandler),
-    },
-  },
+  headerComponentParams,
   cellStyle: { 'padding-left': 0, 'border-right': '1px solid #C0C0C0' },
 }
 </script>
@@ -260,7 +282,9 @@ export const widgetDefinition = defineWidget(
         :columnDefs="columnDefs"
         :rowData="rowData"
         :getRowId="(row) => `${row.data.index}`"
-        :components="{ agColumnHeader: TableHeader }"
+        :components="{
+          agColumnHeader: TableHeader,
+        }"
         :stopEditingWhenCellsLoseFocus="true"
         :suppressDragLeaveHidesColumns="true"
         :suppressMoveWhenColumnDragging="true"
diff --git a/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor/TableHeader.vue b/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor/TableHeader.vue
index 16fd638cffca..eb3c79a05374 100644
--- a/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor/TableHeader.vue
+++ b/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor/TableHeader.vue
@@ -1,66 +1,61 @@
 <script lang="ts">
 import SvgButton from '@/components/SvgButton.vue'
-import { provideTooltipRegistry, type TooltipRegistry } from '@/providers/tooltipRegistry'
 import type { IHeaderParams } from 'ag-grid-community'
 import { computed, ref, watch } from 'vue'
 
-export interface HeaderEditHandlers {
-  /** Setter called when column name is changed by the user. */
-  nameSetter: (newName: string) => void
-  onHeaderEditingStarted?: (stop: (cancel: boolean) => void) => void
-  onHeaderEditingStopped?: () => void
-}
-
 /**
- * A subset of {@link HeaderParams} which is meant to be specified for columns separately
- * (not in defaultColumnDef).
+ * Column-specific header parameters, set in particular column's definitions.
  */
-export type ColumnSpecificHeaderParams =
-  | { type: 'astColumn'; editHandlers: HeaderEditHandlers }
-  | { type: 'newColumn'; enabled?: boolean; newColumnRequested: () => void }
-  | { type: 'rowIndexColumn' }
+export interface ColumnSpecificParams {
+  columnParams:
+    | {
+        type: 'astColumn'
+        /** Setter called when column name is changed by the user. */
+        nameSetter: (newName: string) => void
+      }
+    | { type: 'newColumn'; enabled?: boolean; newColumnRequested: () => void }
+    | { type: 'rowIndexColumn' }
+}
 
 /**
- * Parameters recognized by this header component.
- *
- * They are set through `headerComponentParams` option in AGGrid column definition.
+ * General header parameters, set in default column configuration.
  */
-export type HeaderParams = ColumnSpecificHeaderParams & {
-  /**
-   * AgGrid mounts header components as separate "App", so we don't have access to any context.
-   * Threfore the tooltip registry must be provided by props.
-   */
-  tooltipRegistry: TooltipRegistry
+export interface HeaderParams {
+  /** The id of column whose header is currently edited. */
+  editedColId?: string | undefined
+  /** Callback called when editing this column is requested. */
+  onHeaderEditingStarted: (colId: string, revertChanges: () => void) => void
+  /** Callback called when editing of this column should be finished. */
+  onHeaderEditingStopped: (colId: string) => void
 }
 </script>
 
 <script setup lang="ts">
-const props = defineProps<{
-  params: IHeaderParams & HeaderParams
-}>()
-
-/** Re-provide tooltipRegistry. See `tooltipRegistry` docs in {@link HeaderParams} */
-provideTooltipRegistry.provideConstructed(props.params.tooltipRegistry)
-
-const editing = ref(false)
-const inputElement = ref<HTMLInputElement>()
-const editHandlers = computed(() =>
-  props.params.type === 'astColumn' ? props.params.editHandlers : undefined,
-)
+const props = defineProps<IHeaderParams & HeaderParams & ColumnSpecificParams>()
 
+const editing = computed(() => props.editedColId === props.column.getColId())
 watch(editing, (newVal) => {
-  if (newVal) {
-    editHandlers.value?.onHeaderEditingStarted?.((cancel: boolean) => {
-      if (cancel) editing.value = false
-      else acceptNewName()
-    })
-  } else {
-    editHandlers.value?.onHeaderEditingStopped?.()
+  if (!newVal) {
+    acceptNewName()
   }
 })
 
+const inputElement = ref<HTMLInputElement>()
+
+function emitEditStart() {
+  props.onHeaderEditingStarted?.(props.column.getColId(), () => {
+    if (inputElement.value) {
+      inputElement.value.value = props.displayName
+    }
+  })
+}
+
+function emitEditEnd() {
+  props.onHeaderEditingStopped?.(props.column.getColId())
+}
+
 watch(inputElement, (newVal, oldVal) => {
-  if (newVal != null && oldVal == null) {
+  if (newVal != null) {
     // Whenever input field appears, focus and select text
     newVal.focus()
     newVal.select()
@@ -68,7 +63,7 @@ watch(inputElement, (newVal, oldVal) => {
 })
 
 function acceptNewName() {
-  if (editHandlers.value == null) {
+  if (props.columnParams.type !== 'astColumn') {
     console.error("Tried to accept header new name where it's not editable!")
     return
   }
@@ -76,20 +71,22 @@ function acceptNewName() {
     console.error('Tried to accept header new name without input element!')
     return
   }
-  editHandlers.value.nameSetter(inputElement.value.value)
-  editing.value = false
+  if (inputElement.value.value !== props.displayName)
+    props.columnParams.nameSetter(inputElement.value.value)
+  if (editing.value) emitEditEnd()
 }
 
 function onMouseClick(event: MouseEvent) {
-  if (!editing.value && props.params.type === 'astColumn') {
-    editing.value = true
+  if (!editing.value && props.columnParams.type === 'astColumn') {
+    emitEditStart()
+  } else {
     event.stopPropagation()
   }
 }
 
 function onMouseRightClick(event: MouseEvent) {
   if (!editing.value) {
-    props.params.showColumnMenuAfterMouseClick(event)
+    props.showColumnMenuAfterMouseClick(event)
     event.preventDefault()
     event.stopPropagation()
   }
@@ -98,12 +95,12 @@ function onMouseRightClick(event: MouseEvent) {
 
 <template>
   <SvgButton
-    v-if="params.type === 'newColumn'"
+    v-if="columnParams.type === 'newColumn'"
     class="addColumnButton"
     name="add"
     title="Add new column"
-    :disabled="!(params.enabled ?? true)"
-    @click.stop="params.newColumnRequested()"
+    :disabled="!(columnParams.enabled ?? true)"
+    @click.stop="columnParams.newColumnRequested()"
   />
   <div
     v-else
@@ -118,8 +115,8 @@ function onMouseRightClick(event: MouseEvent) {
         v-if="editing"
         ref="inputElement"
         class="ag-input-field-input ag-text-field-input"
-        :value="params.displayName"
-        @change="acceptNewName()"
+        :value="displayName"
+        @change="acceptNewName"
         @keydown.arrow-left.stop
         @keydown.arrow-right.stop
         @keydown.arrow-up.stop
@@ -128,8 +125,8 @@ function onMouseRightClick(event: MouseEvent) {
       <span
         v-else
         class="ag-header-cell-text"
-        :class="{ virtualColumn: params.type !== 'astColumn' }"
-        >{{ params.displayName }}</span
+        :class="{ virtualColumn: columnParams.type !== 'astColumn' }"
+        >{{ displayName }}</span
       >
     </div>
   </div>
diff --git a/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor/__tests__/tableInputArgument.test.ts b/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor/__tests__/tableInputArgument.test.ts
index 03818aa88f13..8ff581c68f3f 100644
--- a/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor/__tests__/tableInputArgument.test.ts
+++ b/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor/__tests__/tableInputArgument.test.ts
@@ -168,8 +168,8 @@ test.each([
     )
     expect(tableNewArgs.rowData.value.length).toBe(rows + (expectNewRowEnabled ? 1 : 0))
     const lastColDef = tableNewArgs.columnDefs.value[tableNewArgs.columnDefs.value.length - 1]
-    assert(lastColDef?.headerComponentParams?.type === 'newColumn')
-    expect(lastColDef.headerComponentParams.enabled ?? true).toBe(expectNewColEnabled)
+    assert(lastColDef?.headerComponentParams.columnParams.type === 'newColumn')
+    expect(lastColDef.headerComponentParams.columnParams.enabled ?? true).toBe(expectNewColEnabled)
   },
 )
 
@@ -312,9 +312,9 @@ test.each([
     (colDef) => colDef.colId === NEW_COLUMN_ID,
   )
   assert(newColumnDef != null)
-  assert(newColumnDef.headerComponentParams?.type === 'newColumn')
-  assert(newColumnDef.headerComponentParams.newColumnRequested != null)
-  newColumnDef.headerComponentParams.newColumnRequested()
+  assert(newColumnDef.headerComponentParams?.columnParams.type === 'newColumn')
+  assert(newColumnDef.headerComponentParams.columnParams.newColumnRequested != null)
+  newColumnDef.headerComponentParams.columnParams.newColumnRequested()
   expect(onUpdate).toHaveBeenCalledOnce()
   if (importExpected) expect(addMissingImports).toHaveBeenCalled()
   else expect(addMissingImports).not.toHaveBeenCalled()
diff --git a/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor/tableInputArgument.ts b/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor/tableInputArgument.ts
index c7be71d8c4b9..06dce9120750 100644
--- a/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor/tableInputArgument.ts
+++ b/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor/tableInputArgument.ts
@@ -11,7 +11,7 @@ import type { ToValue } from '@/util/reactivity'
 import type { ColDef } from 'ag-grid-enterprise'
 import * as iter from 'enso-common/src/utilities/data/iter'
 import { computed, toValue } from 'vue'
-import type { ColumnSpecificHeaderParams } from './TableHeader.vue'
+import type { ColumnSpecificParams } from './TableHeader.vue'
 
 /** Id of a fake column with "Add new column" option. */
 export const NEW_COLUMN_ID = 'NewColumn'
@@ -44,7 +44,7 @@ export interface ColumnDef extends ColDef<RowData> {
   mainMenuItems: (string | MenuItem<RowData>)[]
   contextMenuItems: (string | MenuItem<RowData>)[]
   rowDrag?: ({ data }: { data: RowData | undefined }) => boolean
-  headerComponentParams?: ColumnSpecificHeaderParams
+  headerComponentParams: ColumnSpecificParams
 }
 
 namespace cellValueConversion {
@@ -287,13 +287,15 @@ export function useTableInputArgument(
     width: 40,
     maxWidth: 40,
     headerComponentParams: {
-      type: 'newColumn',
-      enabled: mayAddNewColumn(),
-      newColumnRequested: () => {
-        const edit = graph.startEdit()
-        fixColumns(edit)
-        addColumn(edit, `${DEFAULT_COLUMN_PREFIX}${columns.value.length + 1}`)
-        onUpdate({ edit, directInteraction: true })
+      columnParams: {
+        type: 'newColumn',
+        enabled: mayAddNewColumn(),
+        newColumnRequested: () => {
+          const edit = graph.startEdit()
+          fixColumns(edit)
+          addColumn(edit, `${DEFAULT_COLUMN_PREFIX}${columns.value.length + 1}`)
+          onUpdate({ edit, directInteraction: true })
+        },
       },
     },
     mainMenuItems: ['autoSizeThis', 'autoSizeAll'],
@@ -309,9 +311,7 @@ export function useTableInputArgument(
     editable: false,
     resizable: false,
     suppressNavigable: true,
-    headerComponentParams: {
-      type: 'rowIndexColumn',
-    },
+    headerComponentParams: { columnParams: { type: 'rowIndexColumn' } },
     mainMenuItems: ['autoSizeThis', 'autoSizeAll'],
     contextMenuItems: [removeRowMenuItem],
     cellClass: 'rowIndexCell',
@@ -355,8 +355,8 @@ export function useTableInputArgument(
             return true
           },
           headerComponentParams: {
-            type: 'astColumn',
-            editHandlers: {
+            columnParams: {
+              type: 'astColumn',
               nameSetter: (newName: string) => {
                 const edit = graph.startEdit()
                 fixColumns(edit)
diff --git a/app/gui/src/project-view/components/MarkdownEditor/MarkdownEditorImpl.vue b/app/gui/src/project-view/components/MarkdownEditor/MarkdownEditorImpl.vue
index ed9f3f4c6190..be8dfe603377 100644
--- a/app/gui/src/project-view/components/MarkdownEditor/MarkdownEditorImpl.vue
+++ b/app/gui/src/project-view/components/MarkdownEditor/MarkdownEditorImpl.vue
@@ -2,7 +2,7 @@
 import CodeMirrorRoot from '@/components/CodeMirrorRoot.vue'
 import { transformPastedText } from '@/components/DocumentationEditor/textPaste'
 import { ensoMarkdown } from '@/components/MarkdownEditor/markdown'
-import VueComponentHost from '@/components/VueComponentHost.vue'
+import VueHostRender, { VueHost } from '@/components/VueHostRender.vue'
 import { useCodeMirror } from '@/util/codemirror'
 import { highlightStyle } from '@/util/codemirror/highlight'
 import { useLinkTitles } from '@/util/codemirror/links'
@@ -20,7 +20,7 @@ const { content } = defineProps<{
 const focused = ref(false)
 const editing = computed(() => !readonly.value && focused.value)
 
-const vueHost = useTemplateRef<ComponentInstance<typeof VueComponentHost>>('vueHost')
+const vueHost = new VueHost()
 const editorRoot = useTemplateRef<ComponentInstance<typeof CodeMirrorRoot>>('editorRoot')
 const { editorView, readonly, putTextAt } = useCodeMirror(editorRoot, {
   content: () => content,
@@ -31,7 +31,7 @@ const { editorView, readonly, putTextAt } = useCodeMirror(editorRoot, {
     EditorView.clipboardInputFilter.of(transformPastedText),
     ensoMarkdown(),
   ],
-  vueHost: () => vueHost.value || undefined,
+  vueHost: () => vueHost,
 })
 
 useLinkTitles(editorView, { readonly })
@@ -65,7 +65,7 @@ defineExpose({
     :class="{ editing }"
     @focusout="focused = false"
   />
-  <VueComponentHost ref="vueHost" />
+  <VueHostRender :host="vueHost" />
 </template>
 
 <style scoped>
diff --git a/app/gui/src/project-view/components/MarkdownEditor/markdown/decoration/linksAndImages.ts b/app/gui/src/project-view/components/MarkdownEditor/markdown/decoration/linksAndImages.ts
index b04d76b9fdb8..3875cd5ac30d 100644
--- a/app/gui/src/project-view/components/MarkdownEditor/markdown/decoration/linksAndImages.ts
+++ b/app/gui/src/project-view/components/MarkdownEditor/markdown/decoration/linksAndImages.ts
@@ -1,6 +1,6 @@
 import DocumentationImage from '@/components/MarkdownEditor/DocumentationImage.vue'
 import { TreeViewDecorator } from '@/components/MarkdownEditor/markdown/decoration/treeViewDecorator'
-import { type VueHost } from '@/components/VueComponentHost.vue'
+import { type VueHost } from '@/components/VueHostRender.vue'
 import { linkEditPopup } from '@/util/codemirror/linkEditPopup'
 import { linkAttributesFactory, linkAttributesFactoryChanged } from '@/util/codemirror/links'
 import { vueHostChanged } from '@/util/codemirror/vueHostExt'
diff --git a/app/gui/src/project-view/components/MarkdownEditor/markdown/decoration/table.ts b/app/gui/src/project-view/components/MarkdownEditor/markdown/decoration/table.ts
index 7dcb98684fe6..8ca62c41a792 100644
--- a/app/gui/src/project-view/components/MarkdownEditor/markdown/decoration/table.ts
+++ b/app/gui/src/project-view/components/MarkdownEditor/markdown/decoration/table.ts
@@ -1,5 +1,5 @@
 import TableEditor from '@/components/MarkdownEditor/TableEditor.vue'
-import { type VueHost } from '@/components/VueComponentHost.vue'
+import { type VueHost } from '@/components/VueHostRender.vue'
 import type { Text } from '@codemirror/state'
 import { Decoration, WidgetType } from '@codemirror/view'
 import type { SyntaxNode, SyntaxNodeRef } from '@lezer/common'
diff --git a/app/gui/src/project-view/components/MarkdownEditor/markdown/decoration/treeStateDecorator.ts b/app/gui/src/project-view/components/MarkdownEditor/markdown/decoration/treeStateDecorator.ts
index 4e4d7dbe7309..e82d02fd4acf 100644
--- a/app/gui/src/project-view/components/MarkdownEditor/markdown/decoration/treeStateDecorator.ts
+++ b/app/gui/src/project-view/components/MarkdownEditor/markdown/decoration/treeStateDecorator.ts
@@ -1,4 +1,4 @@
-import { type VueHost } from '@/components/VueComponentHost.vue'
+import { type VueHost } from '@/components/VueHostRender.vue'
 import { getVueHost, vueHostChanged } from '@/util/codemirror/vueHostExt'
 import { syntaxTree } from '@codemirror/language'
 import {
diff --git a/app/gui/src/project-view/components/MarkdownEditor/markdown/decoration/treeViewDecorator.ts b/app/gui/src/project-view/components/MarkdownEditor/markdown/decoration/treeViewDecorator.ts
index cdb9bfe7b88e..3b0a7907846d 100644
--- a/app/gui/src/project-view/components/MarkdownEditor/markdown/decoration/treeViewDecorator.ts
+++ b/app/gui/src/project-view/components/MarkdownEditor/markdown/decoration/treeViewDecorator.ts
@@ -1,4 +1,4 @@
-import { type VueHost } from '@/components/VueComponentHost.vue'
+import { type VueHost } from '@/components/VueHostRender.vue'
 import { getVueHost } from '@/util/codemirror/vueHostExt'
 import { syntaxTree } from '@codemirror/language'
 import { type EditorState, RangeSetBuilder, type Text } from '@codemirror/state'
diff --git a/app/gui/src/project-view/components/PlainTextEditor/PlainTextEditorImpl.vue b/app/gui/src/project-view/components/PlainTextEditor/PlainTextEditorImpl.vue
index c158d3456c5c..b57982b42674 100644
--- a/app/gui/src/project-view/components/PlainTextEditor/PlainTextEditorImpl.vue
+++ b/app/gui/src/project-view/components/PlainTextEditor/PlainTextEditorImpl.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import CodeMirrorRoot from '@/components/CodeMirrorRoot.vue'
 import { linkifyUrls } from '@/components/PlainTextEditor/linkifyUrls'
-import VueComponentHost from '@/components/VueComponentHost.vue'
+import VueHostRender, { VueHost } from '@/components/VueHostRender.vue'
 import { useCodeMirror } from '@/util/codemirror'
 import { useLinkTitles } from '@/util/codemirror/links'
 import { useTemplateRef, type ComponentInstance } from 'vue'
@@ -10,11 +10,11 @@ import * as Y from 'yjs'
 const { content } = defineProps<{ content: Y.Text | string }>()
 
 const editorRoot = useTemplateRef<ComponentInstance<typeof CodeMirrorRoot>>('editorRoot')
-const vueHost = useTemplateRef<ComponentInstance<typeof VueComponentHost>>('vueHost')
+const vueHost = new VueHost()
 const { editorView, readonly, contentElement } = useCodeMirror(editorRoot, {
   content: () => content,
   extensions: [linkifyUrls],
-  vueHost: () => vueHost.value || undefined,
+  vueHost: () => vueHost,
 })
 
 useLinkTitles(editorView, { readonly })
@@ -26,7 +26,7 @@ defineExpose({
 
 <template>
   <CodeMirrorRoot ref="editorRoot" v-bind="$attrs" />
-  <VueComponentHost ref="vueHost" />
+  <VueHostRender :host="vueHost" />
 </template>
 
 <style scoped>
diff --git a/app/gui/src/project-view/components/VueComponentHost.vue b/app/gui/src/project-view/components/VueComponentHost.vue
deleted file mode 100644
index b785f728d2d0..000000000000
--- a/app/gui/src/project-view/components/VueComponentHost.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import { useObjectId } from 'enso-common/src/utilities/data/object'
-import { type Component, reactive } from 'vue'
-
-const teleportations = reactive(new Map<Component, HTMLElement>())
-
-defineExpose({
-  register: (component: Component, element: HTMLElement) => {
-    teleportations.set(component, element)
-    return { unregister: () => teleportations.delete(component) }
-  },
-} satisfies VueHost)
-
-const { objectId } = useObjectId()
-</script>
-
-<script lang="ts">
-/**
- * Supports creation of Vue Components within a particular Vue context.
- *
- * This enables creating Vue Components from code run outside any Vue context by APIs that render custom HTML content
- * but aren't Vue-aware.
- */
-export interface VueHost {
-  /**
-   * Request the given component to begin being rendered as a child of the specified HTML element. The returned
-   * `unregister` function should be called when the component should no longer be rendered.
-   */
-  register: (component: Component, element: HTMLElement) => { unregister: () => void }
-}
-</script>
-
-<template>
-  <template v-for="[component, slot] in teleportations.entries()" :key="objectId(component)">
-    <Teleport :to="slot">
-      <component :is="component" />
-    </Teleport>
-  </template>
-</template>
diff --git a/app/gui/src/project-view/components/VueHostRender.vue b/app/gui/src/project-view/components/VueHostRender.vue
new file mode 100644
index 000000000000..7213be14e327
--- /dev/null
+++ b/app/gui/src/project-view/components/VueHostRender.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { type Component, reactive } from 'vue'
+
+const _props = defineProps<{
+  host: VueHost
+}>()
+</script>
+
+<script lang="ts">
+let nextId = 0
+
+/**
+ * Supports creation of Vue Components within a particular Vue context.
+ *
+ * This enables creating Vue Components from code run outside any Vue context by APIs that render custom HTML content
+ * but aren't Vue-aware.
+ *
+ * To render registered components, the VueHost object should be passed to VueHostRender component.
+ */
+export class VueHost {
+  readonly teleportations = reactive(new Map<number | string | symbol, [Component, HTMLElement]>())
+
+  /**
+   * Request the given component to begin being rendered as a child of the specified HTML element. The returned
+   * handle allows updating and unregistering the component.
+   */
+  register(
+    component: Component,
+    element: HTMLElement,
+    customKey?: string | symbol,
+  ): VueComponentHandle {
+    const key = customKey ?? nextId++
+    this.teleportations.set(key, [component, element])
+    return {
+      unregister: () => this.teleportations.delete(key),
+      update: (component: Component, element: HTMLElement) =>
+        this.teleportations.set(key, [component, element]),
+    }
+  }
+}
+
+export interface VueComponentHandle {
+  unregister: () => void
+  update: (component: Component, element: HTMLElement) => void
+}
+</script>
+
+<template>
+  <template v-for="[key, [component, slot]] in host.teleportations.entries()" :key="key">
+    <Teleport :to="slot">
+      <component :is="component" />
+    </Teleport>
+  </template>
+</template>
diff --git a/app/gui/src/project-view/components/shared/AgGridTableView.vue b/app/gui/src/project-view/components/shared/AgGridTableView.vue
index da7cc89a5a43..70af524a0a4b 100644
--- a/app/gui/src/project-view/components/shared/AgGridTableView.vue
+++ b/app/gui/src/project-view/components/shared/AgGridTableView.vue
@@ -1,8 +1,4 @@
 <script lang="ts">
-import { gridBindings } from '@/bindings'
-import { modKey } from '@/composables/events'
-import type { MenuItemDef } from 'ag-grid-enterprise'
-import { ref } from 'vue'
 /**
  * A more specialized version of AGGrid's `MenuItemDef` to simplify testing (the tests need to provide
  * only values actually used by the composable)
@@ -65,7 +61,9 @@ export const commonContextMenuActions = {
  * Component adding some useful logic to AGGrid table component (like keeping track of colum sizes),
  * and using common style for tables in our application.
  */
+import { gridBindings } from '@/bindings'
 import type { TextFormatOptions } from '@/components/visualizations/TableVisualization.vue'
+import { modKey } from '@/composables/events'
 import { useAutoBlur } from '@/util/autoBlur'
 import type {
   CellEditingStartedEvent,
@@ -77,6 +75,9 @@ import type {
   GetRowIdFunc,
   GridApi,
   GridReadyEvent,
+  IHeaderComp,
+  IHeaderParams,
+  MenuItemDef,
   ProcessDataFromClipboardParams,
   RowDataUpdatedEvent,
   RowEditingStartedEvent,
@@ -86,22 +87,32 @@ import type {
 } from 'ag-grid-enterprise'
 import * as iter from 'enso-common/src/utilities/data/iter'
 import { LINE_BOUNDARIES } from 'enso-common/src/utilities/data/string'
-import { type ComponentInstance, reactive, shallowRef, watch } from 'vue'
+import {
+  Component,
+  type ComponentInstance,
+  computed,
+  h,
+  reactive,
+  ref,
+  shallowRef,
+  watch,
+} from 'vue'
 import { clipboardNodeData, writeClipboard } from '../GraphEditor/clipboard'
 import {
   parseTsvData,
   rowsToTsv,
   tableToEnsoExpression,
 } from '../GraphEditor/widgets/WidgetTableEditor/tableParsing'
+import { VueComponentHandle, default as VueComponentHost, VueHost } from '../VueHostRender.vue'
 
 const DEFAULT_ROW_HEIGHT = 22
 
-const _props = defineProps<{
+const props = defineProps<{
   rowData: TData[]
   columnDefs: (ColDef<TData, TValue> | ColGroupDef<TData>)[] | null
   defaultColDef: ColDef<TData>
   getRowId?: GetRowIdFunc<TData>
-  components?: Record<string, unknown>
+  components?: Record<string, Component>
   singleClickEdit?: boolean
   stopEditingWhenCellsLoseFocus?: boolean
   suppressDragLeaveHidesColumns?: boolean
@@ -130,7 +141,7 @@ function onGridReady(event: GridReadyEvent<TData>) {
 }
 
 function getRowHeight(params: RowHeightParams): number {
-  if (_props.textFormatOption === 'off') {
+  if (props.textFormatOption === 'off') {
     return DEFAULT_ROW_HEIGHT
   }
   const rowData = Object.values(params.data)
@@ -149,7 +160,7 @@ function getRowHeight(params: RowHeightParams): number {
 }
 
 watch(
-  () => _props.textFormatOption,
+  () => props.textFormatOption,
   () => {
     gridApi.value?.redrawRows()
     gridApi.value?.resetRowHeights()
@@ -300,7 +311,41 @@ function stopIfPrevented(event: Event) {
   if (event.defaultPrevented) event.stopPropagation()
 }
 
-const { AgGridVue } = await import('ag-grid-vue3')
+// === Wrapping and Hosting Vue Components ===
+
+const vueHost = new VueHost()
+
+const mappedComponents = computed(() => {
+  if (!props.components) return
+  const retval: Record<string, new () => IHeaderComp> = {}
+  for (const [key, comp] of Object.entries(props.components)) {
+    class ComponentWrapper implements IHeaderComp {
+      private readonly container: HTMLElement = document.createElement('div')
+      private handle: VueComponentHandle | undefined
+
+      init(params: IHeaderParams) {
+        this.handle = vueHost.register(h(comp, params), this.container)
+      }
+
+      getGui() {
+        return this.container
+      }
+
+      refresh(params: IHeaderParams) {
+        this.handle?.update(h(comp, params), this.container)
+        return true
+      }
+
+      destroy() {
+        this.handle?.unregister()
+      }
+    }
+    retval[key] = ComponentWrapper
+  }
+  return retval
+})
+
+const { AgGridVue } = await import('./AgGridTableView/AgGridVue')
 </script>
 
 <template>
@@ -320,7 +365,7 @@ const { AgGridVue } = await import('ag-grid-vue3')
       :suppressFieldDotNotation="true"
       :enableRangeSelection="true"
       :popupParent="popupParent"
-      :components="components"
+      :components="mappedComponents"
       :singleClickEdit="singleClickEdit"
       :stopEditingWhenCellsLoseFocus="stopEditingWhenCellsLoseFocus"
       :suppressDragLeaveHidesColumns="suppressDragLeaveHidesColumns"
@@ -339,6 +384,7 @@ const { AgGridVue } = await import('ag-grid-vue3')
       @filterChanged="emit('sortOrFilterUpdated', $event)"
       @contextmenu="stopIfPrevented"
     />
+    <VueComponentHost :host="vueHost" />
   </div>
 </template>
 
diff --git a/app/gui/src/project-view/components/shared/AgGridTableView/AgGridVue.ts b/app/gui/src/project-view/components/shared/AgGridTableView/AgGridVue.ts
new file mode 100644
index 000000000000..268f5433e679
--- /dev/null
+++ b/app/gui/src/project-view/components/shared/AgGridTableView/AgGridVue.ts
@@ -0,0 +1,262 @@
+/**
+ * @file Copy of https://github.com/ag-grid/ag-grid/blob/v32.3.3/packages/ag-grid-vue3/src/AgGridVue.ts
+ * with special overrides for Vue components removed; we handle them in a better way.
+ *
+ * Original file licenced under The MIT License:
+ *
+ * Copyright (c) 2015-2024 AG GRID LTD
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+// This is not our code, so I just blocked failing lints.
+/* eslint-disable vue/require-default-prop */
+/* eslint-disable vue/require-prop-types */
+/* eslint-disable vue/order-in-components */
+
+import type { AgEventType, GridApi, GridOptions, IRowNode, Module } from 'ag-grid-community'
+import {
+  ALWAYS_SYNC_GLOBAL_EVENTS,
+  ComponentUtil,
+  _combineAttributesAndGridOptions,
+  _processOnChange,
+  _warnOnce,
+  createGrid,
+} from 'ag-grid-community'
+import type { PropType } from 'vue'
+import { defineComponent, getCurrentInstance, h, markRaw, toRaw } from 'vue'
+
+import type { Properties } from './Utils'
+import { convertToRaw, getAgGridProperties } from './Utils'
+
+const ROW_DATA_EVENTS: Set<string> = new Set([
+  'rowDataUpdated',
+  'cellValueChanged',
+  'rowValueChanged',
+])
+const DATA_MODEL_ATTR_NAME = 'onUpdate:modelValue' // emit name would be update:ModelValue
+const DATA_MODEL_EMIT_NAME = 'update:modelValue'
+
+const [props, computed, watch] = getAgGridProperties()
+
+export const AgGridVue = defineComponent({
+  render() {
+    return h('div')
+  },
+  props: {
+    gridOptions: {
+      type: Object as PropType<GridOptions>,
+      default: () => ({}) as GridOptions,
+    },
+    componentDependencies: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+    },
+    plugins: [],
+    modules: {
+      type: Array as PropType<Module[]>,
+      default: () => [],
+    },
+    modelValue: {
+      type: Array,
+      default: undefined,
+      required: false,
+    },
+    ...props,
+  },
+  data(): {
+    api: GridApi | undefined
+    gridCreated: boolean
+    isDestroyed: boolean
+    gridReadyFired: boolean
+    emitRowModel?: (() => void | null) | undefined
+    batchTimeout: number | null
+    batchChanges: { [key: string]: any }
+  } {
+    return {
+      api: undefined,
+      gridCreated: false,
+      isDestroyed: false,
+      gridReadyFired: false,
+      emitRowModel: undefined,
+      batchTimeout: null,
+      batchChanges: markRaw({}),
+    }
+  },
+  computed,
+  watch,
+  methods: {
+    globalEventListenerFactory(restrictToSyncOnly?: boolean) {
+      return (eventType: AgEventType) => {
+        if (this.isDestroyed) {
+          return
+        }
+
+        if (eventType === 'gridReady') {
+          this.gridReadyFired = true
+        }
+
+        const alwaysSync = ALWAYS_SYNC_GLOBAL_EVENTS.has(eventType)
+        if ((alwaysSync && !restrictToSyncOnly) || (!alwaysSync && restrictToSyncOnly)) {
+          return
+        }
+
+        this.updateModelIfUsed(eventType)
+      }
+    },
+    processChanges(propertyName: string, currentValue: any, previousValue: any) {
+      if (this.gridCreated) {
+        if (this.skipChange(propertyName, currentValue, previousValue)) {
+          return
+        }
+
+        const options: Properties = {
+          [propertyName]:
+            propertyName === 'rowData' ?
+              Object.isFrozen(currentValue) ?
+                currentValue
+              : markRaw(toRaw(currentValue))
+            : currentValue,
+        }
+        // decouple the row data - if we don't when the grid changes row data directly that'll trigger this component to react to rowData changes,
+        // which can reset grid state (ie row selection)
+        _processOnChange(options, this.api as any)
+      }
+    },
+    checkForBindingConflicts() {
+      const thisAsAny = this as any
+      if (
+        ((thisAsAny.rowData && thisAsAny.rowData !== 'AG-VUE-OMITTED-PROPERTY') ||
+          this.gridOptions.rowData) &&
+        thisAsAny.modelValue
+      ) {
+        _warnOnce('Using both rowData and v-model. rowData will be ignored.')
+      }
+    },
+    getRowData(): any[] {
+      const rowData: any[] = []
+      this.api?.forEachNode((rowNode: IRowNode) => {
+        rowData.push(rowNode.data)
+      })
+      return rowData
+    },
+    updateModelIfUsed(eventType: string) {
+      if (
+        this.gridReadyFired &&
+        this.$attrs[DATA_MODEL_ATTR_NAME] &&
+        ROW_DATA_EVENTS.has(eventType)
+      ) {
+        if (this.emitRowModel) {
+          this.emitRowModel()
+        }
+      }
+    },
+    getRowDataBasedOnBindings() {
+      const thisAsAny = this as any
+
+      const rowData = thisAsAny.modelValue
+      return (
+        rowData ? rowData
+        : thisAsAny.rowData ? thisAsAny.rowData
+        : thisAsAny.gridOptions.rowData
+      )
+    },
+    getProvides() {
+      let instance = getCurrentInstance() as any
+      let provides = {}
+
+      while (instance) {
+        if (instance && instance.provides) {
+          provides = { ...provides, ...instance.provides }
+        }
+
+        instance = instance.parent
+      }
+
+      return provides
+    },
+    /*
+     * Prevents an infinite loop when using v-model for the rowData
+     */
+    skipChange(propertyName: string, currentValue: any, previousValue: any) {
+      if (this.gridReadyFired && propertyName === 'rowData' && this.$attrs[DATA_MODEL_ATTR_NAME]) {
+        if (currentValue === previousValue) {
+          return true
+        }
+
+        if (currentValue && previousValue) {
+          const currentRowData = currentValue as any[]
+          const previousRowData = previousValue as any[]
+          if (currentRowData.length === previousRowData.length) {
+            for (let i = 0; i < currentRowData.length; i++) {
+              if (currentRowData[i] !== previousRowData[i]) {
+                return false
+              }
+            }
+            return true
+          }
+        }
+      }
+
+      return false
+    },
+    debounce(func: () => void, delay: number) {
+      let timeout: number
+      return () => {
+        const later = function () {
+          func()
+        }
+        window.clearTimeout(timeout)
+        timeout = window.setTimeout(later, delay)
+      }
+    },
+  },
+  mounted() {
+    // we debounce the model update to prevent a flood of updates in the event there are many individual
+    // cell/row updates
+    this.emitRowModel = this.debounce(() => {
+      this.$emit(DATA_MODEL_EMIT_NAME, Object.freeze(this.getRowData()))
+    }, 20)
+
+    // the gridOptions we pass to the grid don't need to be reactive (and shouldn't be - it'll cause issues
+    // with mergeDeep for example
+    const gridOptions = markRaw(_combineAttributesAndGridOptions(toRaw(this.gridOptions), this))
+
+    this.checkForBindingConflicts()
+
+    const rowData = this.getRowDataBasedOnBindings()
+    if (rowData !== ComponentUtil.VUE_OMITTED_PROPERTY) {
+      gridOptions.rowData = convertToRaw(rowData)
+    }
+
+    const gridParams = {
+      globalEventListener: this.globalEventListenerFactory().bind(this),
+      globalSyncEventListener: this.globalEventListenerFactory(true).bind(this),
+      modules: this.modules,
+    }
+
+    this.api = createGrid(this.$el as HTMLElement, gridOptions, gridParams)
+    this.gridCreated = true
+  },
+  unmounted() {
+    if (this.gridCreated) {
+      this.api?.destroy()
+      this.isDestroyed = true
+    }
+  },
+})
diff --git a/app/gui/src/project-view/components/shared/AgGridTableView/Utils.ts b/app/gui/src/project-view/components/shared/AgGridTableView/Utils.ts
new file mode 100644
index 000000000000..95db41648a84
--- /dev/null
+++ b/app/gui/src/project-view/components/shared/AgGridTableView/Utils.ts
@@ -0,0 +1,122 @@
+/**
+ * @file Copy of https://github.com/ag-grid/ag-grid/blob/v32.3.3/packages/ag-grid-vue3/src/Utils.ts
+ * Used by our version of AgGridVue.ts.
+ *
+ * Original file licenced under The MIT License:
+ *
+ * Copyright (c) 2015-2024 AG GRID LTD
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { ComponentUtil, _processOnChange } from 'ag-grid-community'
+import { markRaw, toRaw } from 'vue'
+
+export const kebabProperty = (property: string) => {
+  return property.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
+}
+
+export const kebabNameToAttrEventName = (kebabName: string) => {
+  // grid-ready for example would become onGrid-ready in Vue
+  return `on${kebabName.charAt(0).toUpperCase()}${kebabName.substring(1, kebabName.length)}`
+}
+
+export const convertToRaw = (value: any) =>
+  value ?
+    Object.isFrozen(value) ?
+      value
+    : markRaw(toRaw(value))
+  : value
+
+export interface Properties {
+  [propertyName: string]: any
+}
+
+export const getAgGridProperties = (): [Properties, Properties, Properties] => {
+  const props: Properties = {}
+
+  // for example, 'grid-ready' would become 'onGrid-ready': undefined
+  // without this emitting events results in a warning
+  // and adding 'grid-ready' (and variations of this to the emits option in AgGridVue doesn't help either)
+  const eventNameAsProps = ComponentUtil.PUBLIC_EVENTS.map((eventName: string) =>
+    kebabNameToAttrEventName(kebabProperty(eventName)),
+  )
+  eventNameAsProps.forEach((eventName: string) => (props[eventName] = undefined))
+
+  const computed: Properties = {}
+
+  const watch: Properties = {
+    modelValue: {
+      handler(currentValue: any, previousValue: any) {
+        if (!this.gridCreated || !this.api) {
+          return
+        }
+
+        /*
+         * Prevents an infinite loop when using v-model for the rowData
+         */
+        if (currentValue === previousValue) {
+          return
+        }
+        if (currentValue && previousValue) {
+          if (currentValue.length === previousValue.length) {
+            if (currentValue.every((item: any, index: number) => item === previousValue[index])) {
+              return
+            }
+          }
+        }
+
+        _processOnChange({ rowData: currentValue }, this.api)
+      },
+      deep: true,
+    },
+  }
+
+  ComponentUtil.ALL_PROPERTIES.filter((propertyName: string) => propertyName != 'gridOptions') // dealt with in AgGridVue itself
+    .forEach((propertyName: string) => {
+      props[propertyName] = {
+        default: ComponentUtil.VUE_OMITTED_PROPERTY,
+      }
+
+      watch[propertyName] = {
+        handler(currentValue: any, _previousValue: any) {
+          let currValue = currentValue
+
+          if (propertyName === 'rowData' && currentValue != ComponentUtil.VUE_OMITTED_PROPERTY) {
+            // Prevent the grids internal edits from being reactive
+            currValue = convertToRaw(currentValue)
+          }
+
+          this.batchChanges[propertyName] =
+            currValue === ComponentUtil.VUE_OMITTED_PROPERTY ? undefined : currValue
+          if (this.batchTimeout == null) {
+            this.batchTimeout = setTimeout(() => {
+              // Clear the timeout before processing the changes in case processChanges triggers another change.
+              this.batchTimeout = null
+              _processOnChange(this.batchChanges, this.api)
+              this.batchChanges = markRaw({})
+            }, 0)
+          }
+        },
+        deep: true,
+      }
+    })
+
+  return [props, computed, watch]
+}
diff --git a/app/gui/src/project-view/util/codemirror/index.ts b/app/gui/src/project-view/util/codemirror/index.ts
index 2a220fd08784..2c6e16e9b593 100644
--- a/app/gui/src/project-view/util/codemirror/index.ts
+++ b/app/gui/src/project-view/util/codemirror/index.ts
@@ -1,6 +1,6 @@
 import { textEditorsBindings } from '@/bindings'
 import CodeMirrorRoot from '@/components/CodeMirrorRoot.vue'
-import { type VueHost } from '@/components/VueComponentHost.vue'
+import { type VueHost } from '@/components/VueHostRender.vue'
 import { injectKeyboard } from '@/providers/keyboard'
 import { useCompartment, useDispatch, useStateEffect } from '@/util/codemirror/reactivity'
 import { setVueHost } from '@/util/codemirror/vueHostExt'
diff --git a/app/gui/src/project-view/util/codemirror/linkEditPopup.ts b/app/gui/src/project-view/util/codemirror/linkEditPopup.ts
index 96f90e3fc433..df3ad6183415 100644
--- a/app/gui/src/project-view/util/codemirror/linkEditPopup.ts
+++ b/app/gui/src/project-view/util/codemirror/linkEditPopup.ts
@@ -1,5 +1,5 @@
 import LinkEditPopup from '@/components/LinkEditPopup.vue'
-import { type VueHost } from '@/components/VueComponentHost.vue'
+import { type VueHost } from '@/components/VueHostRender.vue'
 import {
   contentFocused,
   contentFocusedChanged,
diff --git a/app/gui/src/project-view/util/codemirror/vueHostExt.ts b/app/gui/src/project-view/util/codemirror/vueHostExt.ts
index 39f619d7de1b..1c9fb26ac97e 100644
--- a/app/gui/src/project-view/util/codemirror/vueHostExt.ts
+++ b/app/gui/src/project-view/util/codemirror/vueHostExt.ts
@@ -1,4 +1,4 @@
-import { type VueHost } from '@/components/VueComponentHost.vue'
+import { type VueHost } from '@/components/VueHostRender.vue'
 import { valueExt } from '@/util/codemirror/stateEffect'
 
 /** A CodeMirror extension for getting and setting a {@link VueHost} for Vue-based decorations. */