refactor(gui-v2): replace column with reactive object

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui-v2/components/cell/Checkbox.vue

@@ -26,7 +26,7 @@ const checkboxMeta = $computed(() => {
       unchecked: 'mdi-checkbox-blank-circle-outline',
     },
     color: 'primary',
-    ...(column?.meta || {}),
+    ...(column?.value?.meta || {}),
   }
 })
 </script>

packages/nc-gui-v2/components/cell/Currency.vue

@@ -22,7 +22,7 @@ const currencyMeta = computed(() => {
   return {
     currency_locale: 'en-US',
     currency_code: 'USD',
-    ...(column && column.meta ? column.meta : {}),
+    ...(column?.value?.meta ? column?.value?.meta : {}),
   }
 })
 const currency = computed(() => {

packages/nc-gui-v2/components/cell/DatePicker.vue

@@ -14,7 +14,7 @@ const columnMeta = inject(ColumnInj, null)
 const readOnlyMode = inject(ReadonlyInj, false)
 
 let isDateInvalid = $ref(false)
-const dateFormat = columnMeta?.meta?.date_format ?? 'YYYY-MM-DD'
+const dateFormat = columnMeta?.value?.meta?.date_format ?? 'YYYY-MM-DD'
 
 const localState = $computed({
   get() {

packages/nc-gui-v2/components/cell/Duration.vue

@@ -16,7 +16,7 @@ const column = inject(ColumnInj)
 const showWarningMessage = ref(false)
 const durationInMS = ref(0)
 const isEdited = ref(false)
-const durationType = ref(column?.meta?.duration || 0)
+const durationType = ref(column?.value?.meta?.duration || 0)
 
 const durationPlaceholder = computed(() => durationOptions[durationType.value].title)
 const localState = computed({

packages/nc-gui-v2/components/cell/MultiSelect.vue

@@ -14,7 +14,7 @@ const column = inject(ColumnInj)
 const isForm = inject<boolean>('isForm', false)
 const editEnabled = inject(EditModeInj, ref(false))
 
-const options = computed(() => column?.dtxp?.split(',').map((v) => v.replace(/\\'/g, "'").replace(/^'|'$/g, '')) || [])
+const options = computed(() => column?.value?.dtxp?.split(',').map((v) => v.replace(/\\'/g, "'").replace(/^'|'$/g, '')) || [])
 
 const localState = computed({
   get() {

packages/nc-gui-v2/components/cell/Percent.vue

@@ -17,7 +17,7 @@ const percent = ref()
 
 const isEdited = ref(false)
 
-const percentType = computed(() => column?.meta?.precision || 0)
+const percentType = computed(() => column?.value?.meta?.precision || 0)
 
 const percentStep = computed(() => getPercentStep(percentType.value))
 
@@ -27,7 +27,7 @@ const localState = computed({
   },
   set: (val) => {
     if (val === null) val = 0
-    if (isValidPercent(val, column?.meta?.negative)) {
+    if (isValidPercent(val, column?.value?.meta?.negative)) {
       percent.value = val / 100
     }
   },

packages/nc-gui-v2/components/cell/Rating.vue

@@ -26,7 +26,7 @@ const ratingMeta = computed(() => {
     },
     color: '#fcb401',
     max: 5,
-    ...(column?.meta || {}),
+    ...(column?.value?.meta || {}),
   }
 })
 

packages/nc-gui-v2/components/cell/SingleSelect.vue

@@ -19,7 +19,7 @@ const vModel = computed({
   set: (val) => emit('update:modelValue', val),
 })
 
-const options = computed(() => column?.dtxp?.split(',').map((v) => v.replace(/\\'/g, "'").replace(/^'|'$/g, '')) || [])
+const options = computed(() => column?.value?.dtxp?.split(',').map((v) => v.replace(/\\'/g, "'").replace(/^'|'$/g, '')) || [])
 </script>
 
 <template>

packages/nc-gui-v2/components/cell/Url.vue

@@ -18,7 +18,7 @@ const editEnabled = inject(EditModeInj, ref(false))
 const vModel = computed({
   get: () => value,
   set: (val) => {
-    if (!(column && column.meta && column.meta.validate) || isValidURL(val)) {
+    if (!column?.value?.meta?.validate || isValidURL(val)) {
       emit('update:modelValue', val)
     }
   },

packages/nc-gui-v2/components/cell/attachment/utils.ts

@@ -78,7 +78,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
         try {
           const data = await api.storage.upload(
             {
-              path: [NOCO, project.value.title, meta.value.title, column.title].join('/'),
+              path: [NOCO, project.value.title, meta.value.title, column.value.title].join('/'),
             },
             {
               files: file,

packages/nc-gui-v2/components/smartsheet-header/Cell.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import type { ColumnType, TableType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { inject } from 'vue'
+import { inject, toRef } from 'vue'
 import { ColumnInj, MetaInj } from '~/context'
 import { useProvideColumnCreateStore } from '#imports'
 
-const { column } = defineProps<{ column: ColumnType & { meta: any } }>()
-
+const props = defineProps<{ column: ColumnType & { meta: any } }>()
+const column = toRef(props, 'column')
 provide(ColumnInj, column)
 
 const meta = inject(MetaInj)

packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
+import { toRef } from 'vue'
 import { ColumnInj } from '~/context'
 import FilePhoneIcon from '~icons/mdi/file-phone'
 import { useColumn } from '#imports'
@@ -24,14 +25,15 @@ import CurrencyIcon from '~icons/mdi/currency-usd-circle-outline'
 import PercentIcon from '~icons/mdi/percent-outline'
 import DecimalIcon from '~icons/mdi/decimal'
 
-const { columnMeta } = defineProps<{ columnMeta?: ColumnType }>()
+const props = defineProps<{ columnMeta?: ColumnType }>()
 
-const column = inject(ColumnInj, columnMeta)
+const columnMeta = toRef(props, 'columnMeta')
+const column = inject(ColumnInj, ref(columnMeta))
 
-const additionalColMeta = useColumn(column as ColumnType)
+const additionalColMeta = useColumn(column.value as ColumnType)
 
 const icon = computed(() => {
-  if (column?.pk) {
+  if (column?.value?.pk) {
     return KeyIcon
   } else if (additionalColMeta.isJSON) {
     return JSONIcon

packages/nc-gui-v2/components/smartsheet-header/Menu.vue

@@ -25,13 +25,13 @@ const { getMeta } = useMetas()
 
 const deleteColumn = () =>
   Modal.confirm({
-    title: h('div', ['Do you want to delete ', h('span', { class: 'font-weight-bold' }, [column?.title]), ' column ?']),
+    title: h('div', ['Do you want to delete ', h('span', { class: 'font-weight-bold' }, [column?.value?.title]), ' column ?']),
     okText: t('general.delete'),
     okType: 'danger',
     cancelText: t('general.cancel'),
     async onOk() {
       try {
-        await $api.dbTableColumn.delete(column?.id as string)
+        await $api.dbTableColumn.delete(column?.value?.id as string)
         getMeta(meta?.value?.id as string, true)
       } catch (e) {
         toast.error(await extractSdkResponseErrorMsg(e))
@@ -41,7 +41,7 @@ const deleteColumn = () =>
 
 const setAsPrimaryValue = async () => {
   try {
-    await $api.dbTableColumn.primaryColumnSet(column?.id as string)
+    await $api.dbTableColumn.primaryColumnSet(column?.value?.id as string)
     getMeta(meta?.value?.id as string, true)
     toast.success('Successfully updated as primary column')
   } catch (e) {

packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
+import { toRef } from 'vue'
 import type { ColumnType, TableType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { ColumnInj, MetaInj } from '~/context'
 import { provide } from '#imports'
 
-const { column } = defineProps<{ column: ColumnType & { meta: any } }>()
+const props = defineProps<{ column: ColumnType & { meta: any } }>()
+const column = toRef(props, 'column')
 
 provide(ColumnInj, column)
 

packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
 import { RelationTypes, UITypes } from 'nocodb-sdk'
+import { toRef } from 'vue'
 import { ColumnInj } from '~/context'
 import GenericIcon from '~icons/mdi/square-rounded'
 import HMIcon from '~icons/mdi/table-arrow-right'
@@ -11,14 +12,15 @@ import RollupIcon from '~icons/mdi/movie-roll'
 import CountIcon from '~icons/mdi/counter'
 import SpecificDBTypeIcon from '~icons/mdi/database-settings'
 
-const { columnMeta } = defineProps<{ columnMeta?: ColumnType }>()
+const props = defineProps<{ columnMeta?: ColumnType }>()
+const columnMeta = toRef(props, 'columnMeta')
 
-const column = inject(ColumnInj, columnMeta)
+const column = inject(ColumnInj, ref(columnMeta))
 
 const icon = computed(() => {
-  switch (column?.uidt) {
+  switch (column?.value?.uidt) {
     case UITypes.LinkToAnotherRecord:
-      switch ((column?.colOptions as LinkToAnotherRecordType)?.type) {
+      switch ((column?.value?.colOptions as LinkToAnotherRecordType)?.type) {
         case RelationTypes.MANY_TO_MANY:
           return MMIcon
         case RelationTypes.HAS_MANY:

packages/nc-gui-v2/components/smartsheet/Cell.vue

@@ -16,9 +16,9 @@ interface Emits {
   (event: 'update:modelValue', value: any): void
 }
 
-const { column, ...props } = defineProps<Props>()
-
+const props = defineProps<Props>()
 const emit = defineEmits(['update:modelValue', 'save', 'navigate', 'update:editEnabled'])
+const column = toRef(props, 'column')
 
 provide(ColumnInj, column)
 
@@ -44,11 +44,11 @@ const isAutoSaved = $computed(() => {
     UITypes.AutoNumber,
     UITypes.SpecificDBType,
     UITypes.Geometry,
-  ].includes(column.uidt as UITypes)
+  ].includes(column?.value?.uidt as UITypes)
 })
 
 const isManualSaved = $computed(() => {
-  return [UITypes.Currency, UITypes.Year, UITypes.Time, UITypes.Duration].includes(column.uidt as UITypes)
+  return [UITypes.Currency, UITypes.Year, UITypes.Time, UITypes.Duration].includes(column?.value?.uidt as UITypes)
 })
 
 const vModel = computed({
@@ -89,7 +89,7 @@ const {
   isMultiSelect,
   isPercent,
   isPhoneNumber,
-} = useColumn(column)
+} = useColumn(column?.value)
 
 const syncAndNavigate = (dir: NavigateDir) => {
   if (changed) {

packages/nc-gui-v2/components/smartsheet/VirtualCell.vue

@@ -14,12 +14,11 @@ interface Props {
 
 const props = defineProps<Props>()
 const emit = defineEmits(['update:modelValue', 'navigate'])
-const { column, modelValue: value } = props
+const { column } = props
 const active = toRef(props, 'active', false)
 const row = toRef(props, 'row')
 
 provide(ColumnInj, column)
-provide(CellValueInj, value)
 provide(ActiveCellInj, active)
 provide(RowInj, row)
 provide(CellValueInj, toRef(props, 'modelValue'))

packages/nc-gui-v2/composables/useColumnCreateStore.ts

@@ -20,205 +20,207 @@ const useForm = Form.useForm
 
 const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber]
 
-const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState((meta: Ref<TableType>, column?: ColumnType) => {
-  const { sqlUi } = useProject()
-  const { $api } = useNuxtApp()
+const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState(
+  (meta: Ref<TableType>, column?: Ref<ColumnType>) => {
+    const { sqlUi } = useProject()
+    const { $api } = useNuxtApp()
+
+    const toast = useToast()
+
+    const idType = null
+
+    // state
+    // todo: give proper type - ColumnType
+    const formState = ref<Partial<Record<string, any>>>({
+      title: 'title',
+      uidt: UITypes.SingleLineText,
+      ...(column?.value || {}),
+      // todo: swagger json update - include meta
+      meta: (column?.value as any)?.meta || {},
+    })
+
+    const additionalValidations = ref<Record<string, any>>({})
+
+    const validators = computed(() => {
+      return {
+        column_name: [
+          {
+            required: true,
+            message: 'Column name is required',
+          },
+          // validation for unique column name
+          {
+            validator: (rule: any, value: any) => {
+              return new Promise<void>((resolve, reject) => {
+                if (
+                  meta.value?.columns?.some(
+                    (c) =>
+                      c.id !== formState.value.id && // ignore current column
+                      // compare against column_name and title
+                      ((value || '').toLowerCase() === (c.column_name || '').toLowerCase() ||
+                        (value || '').toLowerCase() === (c.title || '').toLowerCase()),
+                  )
+                ) {
+                  return reject(new Error('Duplicate column name'))
+                }
+                resolve()
+              })
+            },
+          },
+        ],
+        uidt: [
+          {
+            required: true,
+            message: 'UI Datatype is required',
+          },
+        ],
+        ...(additionalValidations?.value || {}),
+      }
+    })
 
-  const toast = useToast()
+    const { resetFields, validate, validateInfos } = useForm(formState, validators)
 
-  const idType = null
+    const setAdditionalValidations = (validations: Record<string, any>) => {
+      additionalValidations.value = validations
+    }
 
-  // state
-  // todo: give proper type - ColumnType
-  const formState = ref<Partial<Record<string, any>>>({
-    title: 'title',
-    uidt: UITypes.SingleLineText,
-    ...(column || {}),
-    // todo: swagger json update - include meta
-    meta: (column as any)?.meta || {},
-  })
+    // actions
+    const generateNewColumnMeta = () => {
+      setAdditionalValidations({})
+      formState.value = { meta: {}, ...sqlUi.value.getNewColumn((meta.value?.columns?.length || 0) + 1) }
+    }
 
-  const additionalValidations = ref<Record<string, any>>({})
+    const onUidtOrIdTypeChange = () => {
+      const { isCurrency } = useColumn(formState.value as ColumnType)
+
+      const colProp = sqlUi?.value.getDataTypeForUiType(formState?.value as any, idType as any)
+      formState.value = {
+        ...formState.value,
+        meta: {},
+        rqd: false,
+        pk: false,
+        ai: false,
+        cdf: null,
+        un: false,
+        dtx: 'specificType',
+        ...colProp,
+      }
 
-  const validators = computed(() => {
-    return {
-      column_name: [
-        {
-          required: true,
-          message: 'Column name is required',
-        },
-        // validation for unique column name
-        {
-          validator: (rule: any, value: any) => {
-            return new Promise<void>((resolve, reject) => {
-              if (
-                meta.value?.columns?.some(
-                  (c) =>
-                    c.id !== formState.value.id && // ignore current column
-                    // compare against column_name and title
-                    ((value || '').toLowerCase() === (c.column_name || '').toLowerCase() ||
-                      (value || '').toLowerCase() === (c.title || '').toLowerCase()),
-                )
-              ) {
-                return reject(new Error('Duplicate column name'))
-              }
-              resolve()
-            })
-          },
-        },
-      ],
-      uidt: [
-        {
-          required: true,
-          message: 'UI Datatype is required',
-        },
-      ],
-      ...(additionalValidations?.value || {}),
-    }
-  })
-
-  const { resetFields, validate, validateInfos } = useForm(formState, validators)
-
-  const setAdditionalValidations = (validations: Record<string, any>) => {
-    additionalValidations.value = validations
-  }
-
-  // actions
-  const generateNewColumnMeta = () => {
-    setAdditionalValidations({})
-    formState.value = { meta: {}, ...sqlUi.value.getNewColumn((meta.value?.columns?.length || 0) + 1) }
-  }
-
-  const onUidtOrIdTypeChange = () => {
-    const { isCurrency } = useColumn(formState.value as ColumnType)
-
-    const colProp = sqlUi?.value.getDataTypeForUiType(formState?.value as any, idType as any)
-    formState.value = {
-      ...formState.value,
-      meta: {},
-      rqd: false,
-      pk: false,
-      ai: false,
-      cdf: null,
-      un: false,
-      dtx: 'specificType',
-      ...colProp,
-    }
+      formState.value.dtxp = sqlUi.value.getDefaultLengthForDatatype(formState.value.dt)
+      formState.value.dtxs = sqlUi.value.getDefaultScaleForDatatype(formState.value.dt)
 
-    formState.value.dtxp = sqlUi.value.getDefaultLengthForDatatype(formState.value.dt)
-    formState.value.dtxs = sqlUi.value.getDefaultScaleForDatatype(formState.value.dt)
+      const selectTypes = [UITypes.MultiSelect, UITypes.SingleSelect]
+      if (column && selectTypes.includes(formState.value.uidt) && selectTypes.includes(column?.value?.uidt as UITypes)) {
+        formState.value.dtxp = column?.value?.dtxp
+      }
 
-    const selectTypes = [UITypes.MultiSelect, UITypes.SingleSelect]
-    if (column && selectTypes.includes(formState.value.uidt) && selectTypes.includes(column.uidt as UITypes)) {
-      formState.value.dtxp = column.dtxp
-    }
+      if (columnToValidate.includes(formState.value.uidt)) {
+        formState.value.meta = {
+          validate: formState.value.meta && formState.value.meta.validate,
+        }
+      }
 
-    if (columnToValidate.includes(formState.value.uidt)) {
-      formState.value.meta = {
-        validate: formState.value.meta && formState.value.meta.validate,
+      if (isCurrency) {
+        if (column?.value?.uidt === UITypes.Currency) {
+          formState.value.dtxp = column.value.dtxp
+          formState.value.dtxs = column.value.dtxs
+        } else {
+          formState.value.dtxp = 19
+          formState.value.dtxs = 2
+        }
       }
+
+      formState.value.altered = formState.value.altered || 2
     }
 
-    if (isCurrency) {
-      if (column?.uidt === UITypes.Currency) {
-        formState.value.dtxp = column.dtxp
-        formState.value.dtxs = column.dtxs
-      } else {
-        formState.value.dtxp = 19
-        formState.value.dtxs = 2
+    const onDataTypeChange = () => {
+      const { isCurrency } = useColumn(formState.value as ColumnType)
+
+      formState.value.rqd = false
+      if (formState.value.uidt !== UITypes.ID) {
+        formState.value.primaryKey = false
       }
-    }
+      formState.value.ai = false
+      formState.value.cdf = null
+      formState.value.un = false
+      formState.value.dtxp = sqlUi.value.getDefaultLengthForDatatype(formState.value.dt)
+      formState.value.dtxs = sqlUi.value.getDefaultScaleForDatatype(formState.value.dt)
 
-    formState.value.altered = formState.value.altered || 2
-  }
+      formState.value.dtx = 'specificType'
 
-  const onDataTypeChange = () => {
-    const { isCurrency } = useColumn(formState.value as ColumnType)
+      const selectTypes = [UITypes.MultiSelect, UITypes.SingleSelect]
+      if (column?.value && selectTypes.includes(formState.value.uidt) && selectTypes.includes(column?.value.uidt as UITypes)) {
+        formState.value.dtxp = column?.value.dtxp
+      }
 
-    formState.value.rqd = false
-    if (formState.value.uidt !== UITypes.ID) {
-      formState.value.primaryKey = false
-    }
-    formState.value.ai = false
-    formState.value.cdf = null
-    formState.value.un = false
-    formState.value.dtxp = sqlUi.value.getDefaultLengthForDatatype(formState.value.dt)
-    formState.value.dtxs = sqlUi.value.getDefaultScaleForDatatype(formState.value.dt)
+      if (isCurrency) {
+        if (column?.value?.uidt === UITypes.Currency) {
+          formState.value.dtxp = column.value.dtxp
+          formState.value.dtxs = column.value.dtxs
+        } else {
+          formState.value.dtxp = 19
+          formState.value.dtxs = 2
+        }
+      }
 
-    formState.value.dtx = 'specificType'
+      // this.$set(formState.value, 'uidt', sqlUi.value.getUIType(formState.value));
 
-    const selectTypes = [UITypes.MultiSelect, UITypes.SingleSelect]
-    if (column && selectTypes.includes(formState.value.uidt) && selectTypes.includes(column.uidt as UITypes)) {
-      formState.value.dtxp = column.dtxp
+      formState.value.altered = formState.value.altered || 2
     }
 
-    if (isCurrency) {
-      if (column?.uidt === UITypes.Currency) {
-        formState.value.dtxp = column.dtxp
-        formState.value.dtxs = column.dtxs
-      } else {
-        formState.value.dtxp = 19
-        formState.value.dtxs = 2
-      }
+    const onAlter = (val = 2, cdf = false) => {
+      formState.value.altered = formState.value.altered || val
+      if (cdf) formState.value.cdf = formState.value.cdf || null
     }
 
-    // this.$set(formState.value, 'uidt', sqlUi.value.getUIType(formState.value));
-
-    formState.value.altered = formState.value.altered || 2
-  }
-
-  const onAlter = (val = 2, cdf = false) => {
-    formState.value.altered = formState.value.altered || val
-    if (cdf) formState.value.cdf = formState.value.cdf || null
-  }
-
-  const addOrUpdate = async (onSuccess: () => {}) => {
-    try {
-      console.log(formState, validators)
-      if (!(await validate())) return
-
-      formState.value.table_name = meta.value.table_name
-      formState.value.title = formState.value.column_name
-      if (column) {
-        await $api.dbTableColumn.update(column.id as string, formState.value)
-        toast.success('Column updated')
-      } else {
-        // todo : set additional meta for auto generated string id
-        if (formState.value.uidt === UITypes.ID) {
-          // based on id column type set autogenerated meta prop
-          // if (isAutoGenId) {
-          //   this.newColumn.meta = {
-          //     ag: 'nc',
-          //   };
-          // }
+    const addOrUpdate = async (onSuccess: () => {}) => {
+      try {
+        console.log(formState, validators)
+        if (!(await validate())) return
+
+        formState.value.table_name = meta.value.table_name
+        formState.value.title = formState.value.column_name
+        if (column?.value) {
+          await $api.dbTableColumn.update(column?.value?.id as string, formState.value)
+          toast.success('Column updated')
+        } else {
+          // todo : set additional meta for auto generated string id
+          if (formState.value.uidt === UITypes.ID) {
+            // based on id column type set autogenerated meta prop
+            // if (isAutoGenId) {
+            //   this.newColumn.meta = {
+            //     ag: 'nc',
+            //   };
+            // }
+          }
+          await $api.dbTableColumn.create(meta.value.id as string, formState.value)
+
+          toast.success('Column created')
         }
-        await $api.dbTableColumn.create(meta.value.id as string, formState.value)
-
-        toast.success('Column created')
+        onSuccess()
+      } catch (e: any) {
+        const error = await extractSdkResponseErrorMsg(e)
+        if (error) toast.error(await extractSdkResponseErrorMsg(e))
       }
-      onSuccess()
-    } catch (e: any) {
-      const error = await extractSdkResponseErrorMsg(e)
-      if (error) toast.error(await extractSdkResponseErrorMsg(e))
     }
-  }
-
-  return {
-    formState,
-    resetFields,
-    validate,
-    validateInfos,
-    setAdditionalValidations,
-    onUidtOrIdTypeChange,
-    sqlUi,
-    onDataTypeChange,
-    onAlter,
-    addOrUpdate,
-    generateNewColumnMeta,
-    isEdit: !!column?.id,
-    column,
-  }
-})
+
+    return {
+      formState,
+      resetFields,
+      validate,
+      validateInfos,
+      setAdditionalValidations,
+      onUidtOrIdTypeChange,
+      sqlUi,
+      onDataTypeChange,
+      onAlter,
+      addOrUpdate,
+      generateNewColumnMeta,
+      isEdit: computed(() => !!column?.value?.id),
+      column,
+    }
+  },
+)
 
 export { useProvideColumnCreateStore }
 

packages/nc-gui-v2/composables/useVirtualCell.ts

@@ -1,26 +1,28 @@
 import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
 import { RelationTypes, UITypes } from 'nocodb-sdk'
+import type { Ref } from 'vue'
 import { computed } from '#imports'
 
-export function useVirtualCell(column: ColumnType) {
+export function useVirtualCell(column: Ref<ColumnType>) {
   const isHm = computed(
     () =>
-      column.uidt === UITypes.LinkToAnotherRecord && (<LinkToAnotherRecordType>column.colOptions).type === RelationTypes.HAS_MANY,
+      column?.value?.uidt === UITypes.LinkToAnotherRecord &&
+      (<LinkToAnotherRecordType>column?.value?.colOptions).type === RelationTypes.HAS_MANY,
   )
   const isMm = computed(
     () =>
-      column.uidt === UITypes.LinkToAnotherRecord &&
-      (<LinkToAnotherRecordType>column.colOptions).type === RelationTypes.MANY_TO_MANY,
+      column?.value?.uidt === UITypes.LinkToAnotherRecord &&
+      (<LinkToAnotherRecordType>column?.value?.colOptions).type === RelationTypes.MANY_TO_MANY,
   )
   const isBt = computed(
     () =>
-      column.uidt === UITypes.LinkToAnotherRecord &&
-      (<LinkToAnotherRecordType>column.colOptions).type === RelationTypes.BELONGS_TO,
+      column?.value?.uidt === UITypes.LinkToAnotherRecord &&
+      (<LinkToAnotherRecordType>column?.value?.colOptions).type === RelationTypes.BELONGS_TO,
   )
-  const isLookup = computed(() => column.uidt === UITypes.Lookup)
-  const isRollup = computed(() => column.uidt === UITypes.Rollup)
-  const isFormula = computed(() => column.uidt === UITypes.Formula)
-  const isCount = computed(() => column.uidt === UITypes.Count)
+  const isLookup = computed(() => column?.value?.uidt === UITypes.Lookup)
+  const isRollup = computed(() => column?.value?.uidt === UITypes.Rollup)
+  const isFormula = computed(() => column?.value?.uidt === UITypes.Formula)
+  const isCount = computed(() => column?.value?.uidt === UITypes.Count)
 
   return {
     isHm,

packages/nc-gui-v2/context/index.ts

@@ -8,7 +8,7 @@ import type { TabItem } from '~/composables/useTabs'
 export const EditEnabledInj: InjectionKey<boolean> = Symbol('edit-enabled')
 export const ActiveCellInj: InjectionKey<Ref<boolean>> = Symbol('active-cell')
 export const RowInj: InjectionKey<Ref<Row>> = Symbol('row')
-export const ColumnInj: InjectionKey<ColumnType & { meta: any }> = Symbol('column-injection')
+export const ColumnInj: InjectionKey<Ref<ColumnType & { meta: any }>> = Symbol('column-injection')
 export const MetaInj: InjectionKey<ComputedRef<TableType>> = Symbol('meta-injection')
 export const TabMetaInj: InjectionKey<ComputedRef<TabItem>> = Symbol('tab-meta-injection')
 export const PaginationDataInj: InjectionKey<ReturnType<typeof useViewData>['paginationData']> =