Merge pull request #6610 from nocodb/nc-fix/column-resize

fix: column resize

packages/nc-gui/components/smartsheet/grid/Table.vue

@@ -885,7 +885,7 @@ const saveOrUpdateRecords = async (args: { metaValue?: TableType; viewMetaValue?
 }
 
 // #Grid Resize
-const { updateGridViewColumn, resizingColWidth, resizingCol } = useGridViewColumnOrThrow()
+const { updateGridViewColumn, gridViewCols, resizingColOldWith } = useGridViewColumnOrThrow()
 
 const onresize = (colID: string | undefined, event: any) => {
   if (!colID) return
@@ -894,8 +894,12 @@ const onresize = (colID: string | undefined, event: any) => {
 
 const onXcResizing = (cn: string | undefined, event: any) => {
   if (!cn) return
-  resizingCol.value = cn
-  resizingColWidth.value = event.detail
+  gridViewCols.value[cn].width = `${event.detail}`
+}
+
+const onXcStartResizing = (cn: string | undefined, event: any) => {
+  if (!cn) return
+  resizingColOldWith.value = event.detail
 }
 
 const loadColumn = (title: string, tp: string, colOptions?: any) => {
@@ -1231,9 +1235,14 @@ const loaderText = computed(() => {
                   v-xc-ver-resize
                   :data-col="col.id"
                   :data-title="col.title"
+                  :style="{
+                    'min-width': gridViewCols[col.id]?.width || '200px',
+                    'max-width': gridViewCols[col.id]?.width || '200px',
+                    'width': gridViewCols[col.id]?.width || '200px',
+                  }"
+                  @xcstartresizing="onXcStartResizing(col.id, $event)"
                   @xcresize="onresize(col.id, $event)"
-                  @xcresizing="onXcResizing(col.title, $event)"
-                  @xcresized="resizingCol = null"
+                  @xcresizing="onXcResizing(col.id, $event)"
                 >
                   <div class="w-full h-full flex items-center">
                     <LazySmartsheetHeaderVirtualCell
@@ -1459,6 +1468,11 @@ const loaderText = computed(() => {
                           hasEditPermission &&
                           isCellSelected(rowIndex, colIndex),
                       }"
+                      :style="{
+                        'min-width': gridViewCols[columnObj.id]?.width || '200px',
+                        'max-width': gridViewCols[columnObj.id]?.width || '200px',
+                        'width': gridViewCols[columnObj.id]?.width || '200px',
+                      }"
                       :data-testid="`cell-${columnObj.title}-${rowIndex}`"
                       :data-key="`data-key-${rowIndex}-${columnObj.id}`"
                       :data-col="columnObj.id"

packages/nc-gui/composables/useGridViewColumn.ts

@@ -1,11 +1,9 @@
 import type { ColumnType, GridColumnReqType, GridColumnType, ViewType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { IsPublicInj, computed, inject, ref, useMetas, useNuxtApp, useRoles, useStyleTag, useUndoRedo, watch } from '#imports'
+import { IsPublicInj, computed, inject, ref, useMetas, useNuxtApp, useRoles, useUndoRedo, watch } from '#imports'
 
 const [useProvideGridViewColumn, useGridViewColumn] = useInjectionState(
   (view: Ref<(ViewType & { columns?: GridColumnType[] }) | undefined>, statePublic = false) => {
-    const { css, load: loadCss, unload: unloadCss } = useStyleTag('')
-
     const { isUIAllowed } = useRoles()
 
     const { $api } = useNuxtApp()
@@ -15,30 +13,11 @@ const [useProvideGridViewColumn, useGridViewColumn] = useInjectionState(
     const { addUndo, defineViewScope } = useUndoRedo()
 
     const gridViewCols = ref<Record<string, GridColumnType>>({})
-    const resizingCol = ref<string | null>('')
-    const resizingColWidth = ref('200px')
+    const resizingColOldWith = ref('200px')
     const isPublic = inject(IsPublicInj, ref(statePublic))
 
     const columns = computed<ColumnType[]>(() => metas.value?.[view.value?.fk_model_id as string]?.columns || [])
 
-    watch(
-      [gridViewCols, resizingCol, resizingColWidth],
-      () => {
-        let style = ''
-        for (const c of columns?.value || []) {
-          const val = gridViewCols?.value?.[c?.id as string]?.width || '200px'
-
-          if (val && c.title !== resizingCol?.value) {
-            style += `[data-col="${c.id}"]{min-width:${val};max-width:${val};width: ${val};}`
-          } else {
-            style += `[data-col="${c.id}"]{min-width:${resizingColWidth?.value};max-width:${resizingColWidth?.value};width: ${resizingColWidth?.value};}`
-          }
-        }
-        css.value = style
-      },
-      { deep: true, immediate: true },
-    )
-
     const loadGridViewColumns = async () => {
       if (!view.value?.id && !isPublic.value) return
 
@@ -52,8 +31,6 @@ const [useProvideGridViewColumn, useGridViewColumn] = useInjectionState(
         }),
         {},
       )
-
-      loadCss()
     }
 
     /** when columns changes(create/delete) reload grid columns
@@ -70,7 +47,8 @@ const [useProvideGridViewColumn, useGridViewColumn] = useInjectionState(
       if (!undo) {
         const oldProps = Object.keys(props).reduce<Partial<GridColumnReqType>>((o: any, k) => {
           if (gridViewCols.value[id][k as keyof GridColumnType]) {
-            o[k] = gridViewCols.value[id][k as keyof GridColumnType]
+            if (k === 'width') o[k] = `${resizingColOldWith.value}px`
+            else o[k] = gridViewCols.value[id][k as keyof GridColumnType]
           }
           return o
         }, {})
@@ -105,7 +83,7 @@ const [useProvideGridViewColumn, useGridViewColumn] = useInjectionState(
       }
     }
 
-    return { loadGridViewColumns, updateGridViewColumn, resizingCol, resizingColWidth, gridViewCols, loadCss, unloadCss }
+    return { loadGridViewColumns, updateGridViewColumn, gridViewCols, resizingColOldWith }
   },
   'useGridViewColumn',
 )

packages/nc-gui/plugins/resizeDirective.ts

@@ -36,6 +36,7 @@ export default defineNuxtPlugin((nuxtApp) => {
         startWidth = parseInt(document.defaultView?.getComputedStyle(el)?.width || '0', 10)
         document.documentElement.addEventListener('mousemove', doDrag, false)
         document.documentElement.addEventListener('mouseup', stopDrag, false)
+        emit('xcstartresizing', startWidth)
       }
 
       ;(el as any).initDrag = initDrag