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

…ggable, closes #5050
tusen-ai · Aug 1, 2023 · b53afec · b53afec
1 parent 437ce23
commit b53afec
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 26 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -32,6 +32,7 @@
 - Fix `n-tree`'s `TreeOption`'s `checkboxDisabled` prop doesn't work when `check-on-click` is `true`.
 - Fix rapid clicks on `n-date-input`'s buttons triggering a text select for the rest of the website.
 - Fix `n-auto-complete`'s autocomplete menu's unexpected open when clicking the clear icon with the input not focused, closes [#4658](https://github.com/tusen-ai/naive-ui/issues/4658).
+- Fix `n-data-table` incorrect position when the fixed columns can be draggable, closes [#5050](https://github.com/tusen-ai/naive-ui/issues/5050).
 
 ### Features
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -32,6 +32,7 @@
 - 修复 `n-tree` `check-on-click` 为 `true` 时，`TreeOption` `checkboxDisabled` 不生效
 - 修复 `n-date-input` 的按钮快速点击时网站其余文本会被选中
 - 修复 `n-auto-complete` 在未聚焦状态下点击清除按钮时补全菜单意外打开的问题，关闭 [#4658](https://github.com/tusen-ai/naive-ui/issues/4658)
+- 修复 `n-data-table` 在固定列设为可拖拽时定位不正确，关闭 [#5050](https://github.com/tusen-ai/naive-ui/issues/5050)
 
 ### Features
 

diff --git a/src/data-table/demos/enUS/column-draggable.demo.vue b/src/data-table/demos/enUS/column-draggable.demo.vue
@@ -6,10 +6,12 @@ Only support leaf nodes.
 
 <template>
   <n-data-table
+    :row-key="(d) => d.no"
     :columns="columns"
     :data="data"
     :pagination="pagination"
     :bordered="false"
+    :scroll-x="1800"
   />
 </template>
 
@@ -21,35 +23,50 @@ import type { DataTableColumns } from 'naive-ui'
 type Song = {
   no: number
   title: string
+  band: string
   length: string
 }
-
 const createColumns = ({
   play
 }: {
   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,
@@ -67,9 +84,24 @@ const createColumns = ({
 }
 
 const data: Song[] = [
-  { no: 3, title: 'Wonderwall', length: '4:18' },
-  { no: 4, title: "Don't Look Back in Anger", length: '4:48' },
-  { no: 12, title: 'Champagne Supernova', length: '7:27' }
+  {
+    no: 3,
+    title: 'Wonderwall',
+    band: 'Oasis',
+    length: '4:18'
+  },
+  {
+    no: 4,
+    title: "Don't Look Back in Anger",
+    band: 'Oasis',
+    length: '4:48'
+  },
+  {
+    no: 12,
+    title: 'Champagne Supernova',
+    band: 'Oasis',
+    length: '7:27'
+  }
 ]
 
 export default defineComponent({

diff --git a/src/data-table/demos/zhCN/column-draggable.demo.vue b/src/data-table/demos/zhCN/column-draggable.demo.vue
@@ -6,10 +6,11 @@
 
 <template>
   <n-data-table
+    :row-key="(d) => d.no"
     :columns="columns"
     :data="data"
     :pagination="pagination"
-    :bordered="false"
+    :scroll-x="1800"
   />
 </template>
 
@@ -21,35 +22,50 @@ import type { DataTableColumns } from 'naive-ui'
 type Song = {
   no: number
   title: string
+  band: string
   length: string
 }
-
 const createColumns = ({
   play
 }: {
   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',
+      fixed: 'right',
+      width: 100,
+      resizable: true,
       render (row) {
         return h(
           NButton,
@@ -67,9 +83,24 @@ const createColumns = ({
 }
 
 const data: Song[] = [
-  { no: 3, title: 'Wonderwall', length: '4:18' },
-  { no: 4, title: "Don't Look Back in Anger", length: '4:48' },
-  { no: 12, title: 'Champagne Supernova', length: '7:27' }
+  {
+    no: 3,
+    title: 'Wonderwall',
+    band: 'Oasis',
+    length: '4:18'
+  },
+  {
+    no: 4,
+    title: "Don't Look Back in Anger",
+    band: 'Oasis',
+    length: '4:48'
+  },
+  {
+    no: 12,
+    title: 'Champagne Supernova',
+    band: 'Oasis',
+    length: '7:27'
+  }
 ]
 
 export default defineComponent({

diff --git a/src/data-table/src/DataTable.tsx b/src/data-table/src/DataTable.tsx
@@ -151,7 +151,8 @@ export default defineComponent({
     } = useScroll(props, {
       bodyWidthRef,
       mainTableInstRef,
-      mergedCurrentPageRef
+      mergedCurrentPageRef,
+      getResizableWidth
     })
     const { localeRef } = useLocale('DataTable')
     const mergedTableLayoutRef = computed(() => {

diff --git a/src/data-table/src/use-scroll.ts b/src/data-table/src/use-scroll.ts
@@ -15,11 +15,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
@@ -46,12 +48,18 @@ 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,12 +77,18 @@ 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
         }
       }