feat(gui-v2): add cell refs to smartsheet store

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

@@ -7,10 +7,14 @@ import {
   inject,
   onMounted,
   provide,
+  reactive,
+  ref,
   useGridViewColumnWidth,
   useProvideColumnCreateStore,
   useSmartsheetStoreOrThrow,
+  useTemplateRefsList,
   useViewData,
+  watch,
 } from '#imports'
 import type { Row } from '~/composables'
 import {
@@ -27,20 +31,32 @@ import {
 import { NavigateDir } from '~/lib'
 
 const meta = inject(MetaInj)
+
 const view = inject(ActiveViewInj)
+
 // keep a root fields variable and will get modified from
 // fields menu and get used in grid and gallery
 const fields = inject(FieldsInj, ref([]))
+
 const isLocked = inject(IsLockedInj, false)
+
+const reloadViewDataHook = inject(ReloadViewDataHookInj)
+
 // todo: get from parent ( inject or use prop )
 const isPublicView = false
+
 const isView = false
 
 const selected = reactive<{ row: number | null; col: number | null }>({ row: null, col: null })
+
 let editEnabled = $ref(false)
-const { xWhere, isPkAvail } = useSmartsheetStoreOrThrow()
+
+const { xWhere, isPkAvail, cellRefs } = useSmartsheetStoreOrThrow()
+
 const addColumnDropdown = ref(false)
+
 const contextMenu = ref(false)
+
 const contextMenuTarget = ref(false)
 
 const visibleColLength = $computed(() => fields.value?.length)
@@ -56,7 +72,9 @@ const {
   deleteSelectedRows,
   selectedAllRecords,
 } = useViewData(meta, view as any, xWhere)
+
 const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view as any)
+
 onMounted(loadGridViewColumns)
 
 provide(IsFormInj, false)
@@ -64,7 +82,6 @@ provide(IsGridInj, true)
 provide(PaginationDataInj, paginationData)
 provide(ChangePageInj, changePage)
 
-const reloadViewDataHook = inject(ReloadViewDataHookInj)
 reloadViewDataHook?.on(() => {
   loadData()
 })
@@ -87,6 +104,7 @@ watch(
 const onresize = (colID: string, event: any) => {
   updateWidth(colID, event.detail)
 }
+
 const onXcResizing = (cn: string, event: any) => {
   resizingCol.value = cn
   resizingColWidth.value = event.detail
@@ -322,6 +340,7 @@ const onNavigate = (dir: NavigateDir) => {
               </td>
               <td
                 v-for="(columnObj, colIndex) of fields"
+                :ref="cellRefs.set"
                 :key="rowIndex + columnObj.title"
                 class="cell relative cursor-pointer nc-grid-cell"
                 :class="{

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

@@ -1,15 +1,14 @@
-import { computed } from '@vue/reactivity'
 import { ViewTypes } from 'nocodb-sdk'
 import type { TableType, ViewType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { useNuxtApp } from '#app'
-import { useProject } from '#imports'
-import { useInjectionState } from '~/composables/useInjectionState'
+import { computed, reactive, useInjectionState, useNuxtApp, useProject, useTemplateRefsList } from '#imports'
 
 const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState((view: Ref<ViewType>, meta: Ref<TableType>) => {
   const { $api } = useNuxtApp()
   const { sqlUi } = useProject()
 
+  const cellRefs = useTemplateRefsList<HTMLTableDataCellElement>()
+
   // state
   // todo: move to grid view store
   const search = reactive({
@@ -37,8 +36,6 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState((view:
     return where
   })
 
-  // actions
-
   return {
     view,
     meta,
@@ -50,6 +47,7 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState((view:
     isForm,
     isGrid,
     isGallery,
+    cellRefs,
   }
 }, 'smartsheet-store')