diff --git a/packages/nc-gui/components/smartsheet/grid/Table.vue b/packages/nc-gui/components/smartsheet/grid/Table.vue index 8e4cc1a313..583f7627a2 100644 --- a/packages/nc-gui/components/smartsheet/grid/Table.vue +++ b/packages/nc-gui/components/smartsheet/grid/Table.vue @@ -183,6 +183,7 @@ const isAddingColumnAllowed = computed(() => !readOnly.value && !isLocked.value const { onDrag, onDragStart, draggedCol, dragColPlaceholderDomRef, toBeDroppedColId } = useColumnDrag({ fields, tableBodyEl, + gridWrapper, }) // #Variables diff --git a/packages/nc-gui/components/smartsheet/grid/useColumnDrag.ts b/packages/nc-gui/components/smartsheet/grid/useColumnDrag.ts index 5991dab26e..6424b7e589 100644 --- a/packages/nc-gui/components/smartsheet/grid/useColumnDrag.ts +++ b/packages/nc-gui/components/smartsheet/grid/useColumnDrag.ts @@ -3,12 +3,15 @@ import type { ColumnType } from 'nocodb-sdk' export const useColumnDrag = ({ fields, tableBodyEl, + gridWrapper, }: { fields: Ref tableBodyEl: Ref + gridWrapper: Ref }) => { const { updateGridViewColumn, gridViewCols } = useViewColumnsOrThrow() const { leftSidebarWidth } = storeToRefs(useSidebarStore()) + const { width } = useWindowSize() const draggedCol = ref(null) const dragColPlaceholderDomRef = ref(null) @@ -72,6 +75,18 @@ export const useColumnDrag = ({ if (x >= 0) { dragColPlaceholderDomRef.value.style.left = `${x.toString()}px` } + + const remInPx = parseFloat(getComputedStyle(document.documentElement).fontSize) + + if (x > width.value * 0.5) { + setTimeout(() => { + gridWrapper.value!.scrollLeft += 2.5 + }, 250) + } else if (x < leftSidebarWidth.value + 10 * remInPx) { + setTimeout(() => { + gridWrapper.value!.scrollLeft -= 2.5 + }, 250) + } } return {