refactor(gui-v2): use id as data-col attribute value to make it unique across tabs

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

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

@@ -26,13 +26,9 @@ const isPublicView = false
 const selected = reactive<{ row?: number | null; col?: number | null }>({})
 const editEnabled = ref(false)
 
-const instance: any = getCurrentInstance()
-
 const { loadData, paginationData, formattedData: data, updateRowProperty, changePage } = useViewData(meta, view)
-console.log(instance)
 const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(
-  view,
+  view
-  instance.ctx.$options.__scopeId,
 )
 onMounted(loadGridViewColumns)
 
@@ -91,7 +87,7 @@ defineExpose({
               v-for="col in fields"
               :key="col.title"
               v-xc-ver-resize
-              :data-col="col.title"
+              :data-col="col.id"
               @xcresize="onresize(col.id, $event)"
               @xcresizing="onXcResizing(col.title, $event)"
               @xcresized="resizingCol = null"
@@ -118,7 +114,7 @@ defineExpose({
                 // 'text-center': isCentrallyAligned(columnObj),
                 // 'required': isRequired(columnObj, rowObj),
               }"
-              :data-col="columnObj.title"
+              :data-col="columnObj.id"
               @click="selectCell(rowIndex, colIndex)"
               @dblclick="editEnabled = true"
             >

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

@@ -5,7 +5,7 @@ import type GridView from '../../nocodb/src/lib/models/GridView'
 import useMetas from '~/composables/useMetas'
 
 // todo: update swagger
-export default (view: Ref<(GridView & { id?: string }) | undefined>, scopeId: string) => {
+export default (view: Ref<(GridView & { id?: string }) | undefined>) => {
   const { css, load: loadCss, unload: unloadCss } = useStyleTag('')
 
   const gridViewCols = ref<Record<string, GridColumnType>>({})
@@ -27,9 +27,9 @@ export default (view: Ref<(GridView & { id?: string }) | undefined>, scopeId: st
         const val = gridViewCols?.value?.[c?.id as string]?.width || '200px'
 
         if (val && c.title !== resizingCol?.value) {
-          style += `[${scopeId}] [data-col="${c.title}"]{min-width:${val};max-width:${val};width: ${val};}`
+          style += `[data-col="${c.id}"]{min-width:${val};max-width:${val};width: ${val};}`
         } else {
-          style += `[${scopeId}] [data-col="${c.title}"]{min-width:${resizingColWidth?.value};max-width:${resizingColWidth?.value};width: ${resizingColWidth?.value};}`
+          style += `[data-col="${c.id}"]{min-width:${resizingColWidth?.value};max-width:${resizingColWidth?.value};width: ${resizingColWidth?.value};}`
         }
       }
       css.value = style