fix(data-table): incorrect position when the fixed columns can be dra…

…ggable, closes #5050

CHANGELOG.en-US.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## NEXT_VERSION
+
+### Fixes
+
+- Fix `n-data-table` incorrect position when the fixed columns can be draggable, closes [#5050](https://github.com/tusen-ai/naive-ui/issues/5050).
+
 ## 2.41.0
 
 ### Breaking Changes

CHANGELOG.zh-CN.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## NEXT_VERSION
+
+### Fixes
+
+- 修复 `n-data-table` 在固定列设置可拖拽时定位不正确，关闭 [#5050](https://github.com/tusen-ai/naive-ui/issues/5050)
+
 ## 2.41.0
 
 `2025-01-05`

src/data-table/demos/enUS/column-draggable.demo.vue

@@ -12,6 +12,7 @@ import { defineComponent, h } from 'vue'
 interface Song {
   no: number
   title: string
+  band: string
   length: string
 }
 
@@ -21,26 +22,41 @@ function createColumns({
   play: (row: Song) => void
 }): DataTableColumns<Song> {
   return [
+    {
+      type: 'selection',
+      fixed: 'left'
+    },
     {
       title: 'No',
       key: 'no',
-      width: 50
+      width: 100,
+      fixed: 'left',
+      resizable: true
     },
     {
       title: 'Title',
       key: 'title',
+      width: 200,
+      fixed: 'left',
       resizable: true
     },
     {
-      title: 'Length',
-      key: 'length',
-      resizable: true,
-      minWidth: 50,
-      maxWidth: 100
+      title: 'Length (minWidth: 100, maxWidth: 500)',
+      key: 'length'
+    },
+    {
+      title: 'Band',
+      key: 'band',
+      width: 100,
+      fixed: 'right',
+      resizable: true
     },
     {
       title: 'Action',
       key: 'actions',
+      fixed: 'right',
+      width: 100,
+      resizable: true,
       render(row) {
         return h(
           NButton,
@@ -81,9 +97,11 @@ export default defineComponent({
 
 <template>
   <n-data-table
+    :row-key="(row) => row.no"
     :columns="columns"
     :data="data"
     :pagination="pagination"
     :bordered="false"
+    :scroll-x="1800"
   />
 </template>

src/data-table/demos/zhCN/column-draggable.demo.vue

@@ -12,6 +12,7 @@
 interface Song {
   no: number
   title: string
+  band: string
   length: string
 }
 
@@ -21,27 +22,42 @@
   play: (row: Song) => void
 }): DataTableColumns<Song> {
   return [
+    {
+      type: 'selection',
+      fixed: 'left'
+    },
     {
       title: 'No',
       key: 'no',
-      width: 50
+      width: 100,
+      fixed: 'left',
+      resizable: true
     },
     {
       title: 'Title',
       key: 'title',
+      width: 200,
+      fixed: 'left',
       resizable: true
     },
     {
       title: 'Length (minWidth: 100, maxWidth: 500)',
-      key: 'length',
-      resizable: true,
-      minWidth: 100,
-      maxWidth: 500
+      key: 'length'
+    },
+    {
+      title: 'Band',
+      key: 'band',
+      width: 100,
+      fixed: 'right',
+      resizable: true
     },
     {
       title: 'Action',
       key: 'actions',
-      render(row) {
+      fixed: 'right',
+      width: 100,
+      resizable: true,
+      render (row) {
         return h(
           NButton,
           {
@@ -81,9 +97,10 @@
 
 <template>
   <n-data-table
+    :row-key="(row) => row.no"
     :columns="columns"
     :data="data"
     :pagination="pagination"
-    :bordered="false"
+    :scroll-x="1800"
   />
 </template>

src/data-table/src/DataTable.tsx

@@ -193,7 +193,8 @@ export default defineComponent({
     } = useScroll(props, {
       bodyWidthRef,
       mainTableInstRef,
-      mergedCurrentPageRef
+      mergedCurrentPageRef,
+      getResizableWidth
     })
     const { localeRef } = useLocale('DataTable')
     const mergedTableLayoutRef = computed(() => {

src/data-table/src/use-scroll.ts

@@ -14,11 +14,13 @@ export function useScroll(
   {
     mainTableInstRef,
     mergedCurrentPageRef,
-    bodyWidthRef
+    bodyWidthRef,
+    getResizableWidth
   }: {
     bodyWidthRef: Ref<null | number>
     mainTableInstRef: Ref<MainTableRef | null>
     mergedCurrentPageRef: ComputedRef<number>
+    getResizableWidth: (key: ColumnKey) => number | undefined
   }
 ) {
   let lastScrollLeft = 0
@@ -45,13 +47,20 @@ export function useScroll(
     function traverse(cols: TableColumn[]): void {
       cols.forEach((col) => {
         const positionInfo = { start: left, end: 0 }
-        columns[getColKey(col)] = positionInfo
+        const key = getColKey(col)
+        columns[key] = positionInfo
         if ('children' in col) {
           traverse(col.children)
           positionInfo.end = left
         }
         else {
-          left += getNumberColWidth(col) || 0
+          const resizeWidth = getResizableWidth(key)
+          if (resizeWidth) {
+            left += resizeWidth
+          }
+          else {
+            left += getNumberColWidth(col) || 0
+          }
           positionInfo.end = left
         }
       })
@@ -69,13 +78,20 @@ export function useScroll(
       for (let i = cols.length - 1; i >= 0; --i) {
         const col = cols[i]
         const positionInfo = { start: right, end: 0 }
-        columns[getColKey(col)] = positionInfo
+        const key = getColKey(col)
+        columns[key] = positionInfo
         if ('children' in col) {
           traverse(col.children)
           positionInfo.end = right
         }
         else {
-          right += getNumberColWidth(col) || 0
+          const resizeWidth = getResizableWidth(key)
+          if (resizeWidth) {
+            right += resizeWidth
+          }
+          else {
+            right += getNumberColWidth(col) || 0
+          }
           positionInfo.end = right
         }
       }