diff --git a/packages/nc-gui/components/smartsheet/grid/Table.vue b/packages/nc-gui/components/smartsheet/grid/Table.vue
index 4cb7990b6c..27364f30bb 100644
--- a/packages/nc-gui/components/smartsheet/grid/Table.vue
+++ b/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)"
>
{
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"
diff --git a/packages/nc-gui/composables/useGridViewColumn.ts b/packages/nc-gui/composables/useGridViewColumn.ts
index ff0899fab3..f0622163f3 100644
--- a/packages/nc-gui/composables/useGridViewColumn.ts
+++ b/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>({})
- const resizingCol = ref('')
- const resizingColWidth = ref('200px')
+ const resizingColOldWith = ref('200px')
const isPublic = inject(IsPublicInj, ref(statePublic))
const columns = computed(() => 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>((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',
)
diff --git a/packages/nc-gui/plugins/resizeDirective.ts b/packages/nc-gui/plugins/resizeDirective.ts
index 549131ee99..6b58a3eedd 100644
--- a/packages/nc-gui/plugins/resizeDirective.ts
+++ b/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