diff --git a/packages/nc-gui-v2/components/cell/DatePicker.vue b/packages/nc-gui-v2/components/cell/DatePicker.vue
index 37a6050c03..8bb9bee22e 100644
--- a/packages/nc-gui-v2/components/cell/DatePicker.vue
+++ b/packages/nc-gui-v2/components/cell/DatePicker.vue
@@ -2,14 +2,14 @@
 import dayjs from 'dayjs'
 import { ColumnInj, ReadonlyInj } from '~/context'
 
-const { modelValue } = defineProps<Props>()
-
-const emit = defineEmits(['update:modelValue'])
-
 interface Props {
   modelValue: string | null
 }
 
+const { modelValue } = defineProps<Props>()
+
+const emit = defineEmits(['update:modelValue'])
+
 const columnMeta = inject(ColumnInj, null)
 const readOnlyMode = inject(ReadonlyInj, false)
 
@@ -42,12 +42,12 @@ const localState = $computed({
 })
 const open = ref(false)
 
-const randonClass = `picker_${Math.floor(Math.random() * 99999)}`
+const randomClass = `picker_${Math.floor(Math.random() * 99999)}`
 watch(
   open,
   (next) => {
     if (next) {
-      onClickOutside(document.querySelector(`.${randonClass}`)! as HTMLDivElement, () => (open.value = false))
+      onClickOutside(document.querySelector(`.${randomClass}`)! as HTMLDivElement, () => (open.value = false))
     }
   },
   { flush: 'post' },
@@ -63,7 +63,7 @@ watch(
     :placeholder="isDateInvalid ? 'Invalid date' : !readOnlyMode ? 'Select date' : ''"
     :allow-clear="!readOnlyMode"
     :input-read-only="true"
-    :dropdown-class-name="randonClass"
+    :dropdown-class-name="randomClass"
     :open="readOnlyMode ? false : open"
     @click="open = !open"
   >
diff --git a/packages/nc-gui-v2/components/cell/DateTimePicker.vue b/packages/nc-gui-v2/components/cell/DateTimePicker.vue
index 10a30dad1e..385078a193 100644
--- a/packages/nc-gui-v2/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui-v2/components/cell/DateTimePicker.vue
@@ -44,12 +44,12 @@ const localState = $computed({
 
 const open = ref(false)
 
-const randonClass = `picker_${Math.floor(Math.random() * 99999)}`
+const randomClass = `picker_${Math.floor(Math.random() * 99999)}`
 watch(
   open,
   (next) => {
     if (next) {
-      onClickOutside(document.querySelector(`.${randonClass}`)! as HTMLDivElement, () => (open.value = false))
+      onClickOutside(document.querySelector(`.${randomClass}`)! as HTMLDivElement, () => (open.value = false))
     }
   },
   { flush: 'post' },
@@ -66,7 +66,7 @@ watch(
     :placeholder="isDateInvalid ? 'Invalid date' : !readOnlyMode ? 'Select date and time' : ''"
     :allow-clear="!readOnlyMode"
     :input-read-only="true"
-    :dropdown-class-name="randonClass"
+    :dropdown-class-name="randomClass"
     :open="readOnlyMode ? false : open"
     @click="open = !open"
   >
diff --git a/packages/nc-gui-v2/components/cell/TimePicker.vue b/packages/nc-gui-v2/components/cell/TimePicker.vue
index a49055fbfb..09763085f2 100644
--- a/packages/nc-gui-v2/components/cell/TimePicker.vue
+++ b/packages/nc-gui-v2/components/cell/TimePicker.vue
@@ -54,12 +54,12 @@ const localState = $computed({
 
 const open = ref(false)
 
-const randonClass = `picker_${Math.floor(Math.random() * 99999)}`
+const randomClass = `picker_${Math.floor(Math.random() * 99999)}`
 watch(
   open,
   (next) => {
     if (next) {
-      onClickOutside(document.querySelector(`.${randonClass}`)! as HTMLDivElement, () => (open.value = false))
+      onClickOutside(document.querySelector(`.${randomClass}`)! as HTMLDivElement, () => (open.value = false))
     }
   },
   { flush: 'post' },
@@ -79,7 +79,7 @@ watch(
     :allow-clear="!readOnlyMode"
     :input-read-only="true"
     :open="readOnlyMode ? false : open"
-    :dropdown-class-name="randonClass"
+    :dropdown-class-name="randomClass"
     @click="open = !open"
     @ok="open = !open"
   >
diff --git a/packages/nc-gui-v2/components/cell/YearPicker.vue b/packages/nc-gui-v2/components/cell/YearPicker.vue
index 0e57ae313e..819e37a688 100644
--- a/packages/nc-gui-v2/components/cell/YearPicker.vue
+++ b/packages/nc-gui-v2/components/cell/YearPicker.vue
@@ -43,12 +43,12 @@ const localState = $computed({
 
 const open = ref(false)
 
-const randonClass = `picker_${Math.floor(Math.random() * 99999)}`
+const randomClass = `picker_${Math.floor(Math.random() * 99999)}`
 watch(
   open,
   (next) => {
     if (next) {
-      onClickOutside(document.querySelector(`.${randonClass}`)! as HTMLDivElement, () => (open.value = false))
+      onClickOutside(document.querySelector(`.${randomClass}`)! as HTMLDivElement, () => (open.value = false))
     }
   },
   { flush: 'post' },
@@ -65,7 +65,7 @@ watch(
     :allow-clear="!readOnlyMode"
     :input-read-only="true"
     :open="readOnlyMode ? false : open"
-    :dropdown-class-name="randonClass"
+    :dropdown-class-name="randomClass"
     @click="open = !open"
     @change="open = !open"
   >
diff --git a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
index 9a39419209..284fb9cad6 100644
--- a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
@@ -4,7 +4,7 @@ import type { Ref } from 'vue'
 import ItemChip from './components/ItemChip.vue'
 import ListItems from './components/ListItems.vue'
 import { inject, ref, useProvideLTARStore, useSmartsheetRowStoreOrThrow } from '#imports'
-import {ActiveCellInj,  CellValueInj, ColumnInj, ReloadViewDataHookInj, RowInj } from '~/context'
+import { ActiveCellInj, CellValueInj, ColumnInj, ReloadViewDataHookInj, RowInj } from '~/context'
 import MdiArrowExpand from '~icons/mdi/arrow-expand'
 import MdiPlus from '~icons/mdi/plus'