tusen-ai · jahnli · Oct 2, 2025
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -1,5 +1,13 @@
 # CHANGELOG
 
+## `NEXT_VERSION`
+
+`NEXT_VERSION`
+
+### Features
+
+- `n-data-table` adds `on-resize-start`, `on-resize` and `on-resize-end` events
+
 ## 2.43.1
 
 `2025-09-15`

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -1,5 +1,13 @@
 # CHANGELOG
 
+## `NEXT_VERSION`
+
+`NEXT_VERSION`
+
+### Features
+
+- `n-data-table` 新增 `on-resize-start`、`on-resize` 和 `on-resize-end` 事件
+
 ## 2.43.1
 
 `2025-09-15`

diff --git a/build/utils/terse-cssr.ts b/build/utils/terse-cssr.ts
@@ -10,7 +10,7 @@ export function terseCssr(code: string): string {
     sourceType: 'module'
   })
 
-  traverse(ast, {
+  traverse.default(ast, {
     TemplateElement(path: any) {
       ;(['raw', 'cooked'] as const).forEach((type) => {
         path.node.value[type] = path.node.value[type]

diff --git a/src/data-table/demos/enUS/index.demo-entry.md b/src/data-table/demos/enUS/index.demo-entry.md
@@ -32,6 +32,7 @@ pagination-behavior-on-filter.vue
 multiple-sorter.vue
 custom-sorter.vue
 column-draggable.vue
+resize-event.vue
 select.vue
 select-single.vue
 custom-select.vue
@@ -116,6 +117,9 @@ export-csv.vue
 | virtual-scroll-header | `boolean` | `false` | Whether to use virtual scrolling in table header. If there are too many columns, you can enable the prop. You must configure `header-height` at the same time. Enabling the prop will disable header cells that cross columns & rows. | 2.40.0 |
 | virtual-scroll-x | `boolean` | `false` | Whether to use horizontal virtual scrolling in table body. If there are too many columns, you can enable the prop. Enabling the prop will disable body cells that cross columns & rows. If the prop is enabled, every column should have `width` prop configured and `virtual-scroll`, `scroll-x`, `min-row-height`, `height-for-row`, `virtual-scroll-header` (optional), `header-height` (optional) props should be configured at the same time. You can refer to <n-a href="#virtual-x.vue">the example</n-a>. | 2.40.0 |
 | on-load | `(rowData: object) => Promise<void>` | `undefined` | Callback of async tree data expanding. | 2.27.0 |
+| on-resize-start | `(column: DataTableBaseColumn) => void` | `undefined` | Callback when column resizing starts. | NEXT_VERSION |
+| on-resize | `(column: DataTableBaseColumn, width: number) => void` | `undefined` | Callback when column is being resized. | NEXT_VERSION |
+| on-resize-end | `(column: DataTableBaseColumn) => void` | `undefined` | Callback when column resizing ends. | NEXT_VERSION |
 | on-scroll | `(e: Event) => void` | `undefined` | Callback of table body scrolling. | 2.29.1 |
 | on-update:checked-row-keys | `(keys: Array<string \| number>, rows: object[], meta: { row: object \| undefined, action: 'check' \| 'uncheck' \| 'checkAll' \| 'uncheckAll' }) => void` | `undefined` | The callback function triggered when the checked-row-keys value changes. | `rows` 2.30.5, `meta` 2.33.4 |
 | on-update:expanded-row-keys | `(keys: Array<string \| number>) => void` | `undefined` | The callback function triggered when the expanded-row-keys value changes. |  |

diff --git a/src/data-table/demos/enUS/resize-event.demo.vue b/src/data-table/demos/enUS/resize-event.demo.vue
@@ -0,0 +1,99 @@
+<markdown>
+  # 列宽拖拽事件
+
+  使用 `on-resize-start`、`on-resize` 和 `on-resize-end` 监听列宽拖拽事件。
+  </markdown>
+
+<script lang="ts" setup>
+import type { DataTableBaseColumn, DataTableColumns } from 'naive-ui'
+import { NButton, useMessage } from 'naive-ui'
+import { h } from 'vue'
+
+interface Song {
+  no: number
+  title: string
+  length: string
+}
+
+const message = useMessage()
+
+function handleResizeStart(column: DataTableBaseColumn): void {
+  message.info(`Start resize column: ${column.title}`)
+  console.log('Start resize column:', column)
+}
+
+function handleResize(column: DataTableBaseColumn, width: number): void {
+  console.log('Resizing:', column, width)
+}
+
+function handleResizeEnd(column: DataTableBaseColumn): void {
+  console.log('Finish resize column:', column.title, column)
+}
+
+function createColumns({
+  play
+}: {
+  play: (row: Song) => void
+}): DataTableColumns<Song> {
+  return [
+    {
+      title: 'No',
+      key: 'no',
+      width: 50
+    },
+    {
+      title: 'Title',
+      key: 'title',
+      resizable: true
+    },
+    {
+      title: 'Length',
+      key: 'length',
+      resizable: true,
+      minWidth: 100,
+      maxWidth: 500
+    },
+    {
+      title: 'Action',
+      key: 'actions',
+      render(row) {
+        return h(
+          NButton,
+          {
+            strong: true,
+            tertiary: true,
+            size: 'small',
+            onClick: () => play(row)
+          },
+          { default: () => 'Play' }
+        )
+      }
+    }
+  ]
+}
+
+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' }
+]
+
+const columns = createColumns({
+  play(row: Song) {
+    message.info(`Play ${row.title}`)
+  }
+})
+const pagination = false as const
+</script>
+
+<template>
+  <n-data-table
+    :columns="columns"
+    :data="data"
+    :pagination="pagination"
+    :bordered="false"
+    @resize-start="handleResizeStart"
+    @resize="handleResize"
+    @resize-end="handleResizeEnd"
+  />
+</template>
diff --git a/src/data-table/demos/zhCN/index.demo-entry.md b/src/data-table/demos/zhCN/index.demo-entry.md
@@ -34,6 +34,7 @@ pagination-behavior-on-filter.vue
 multiple-sorter.vue
 custom-sorter.vue
 column-draggable.vue
+resize-event.vue
 select.vue
 select-single.vue
 custom-select.vue
@@ -127,6 +128,9 @@ rtl-debug.vue
 | virtual-scroll-header | `boolean` | `false` | 是否打开表头的虚拟滚动，如果横向列太多，可以考虑打开此属性，打开此属性会导致表头单元格跨行列的功能不可用，同时必须要配置 `header-height` | 2.40.0 |
 | virtual-scroll-x | `boolean` | `false` | 是否打开表主体的横向虚拟滚动，如果横向列太多，可以考虑打开此属性，打开此属性会导致单元格跨行列的功能不可用，此属性开启时，必须要和 `virtual-scroll`、`scroll-x`、`min-row-height`、`height-for-row`、`virtual-scroll-header`、`header-height` 属性配合使用，同时每一列必须都配置 `width` 属性，你可以参考 <n-a href="#virtual-x.vue">完整的例子</n-a> | 2.40.0 |
 | on-load | `(rowData: object) => Promise<void>` | `undefined` | 异步展开树形数据的回调 | 2.27.0 |
+| on-resize-start | `(column: DataTableBaseColumn) => void` | `undefined` | 列宽开始拖拽时触发的回调函数 | NEXT_VERSION |
+| on-resize | `(column: DataTableBaseColumn, width: number) => void` | `undefined` | 列宽拖拽中触发的回调函数 | NEXT_VERSION |
+| on-resize-end | `(column: DataTableBaseColumn) => void` | `undefined` | 列宽拖拽结束时触发的回调函数 | NEXT_VERSION |
 | on-scroll | `(e: Event) => void` | `undefined` | 表格主体滚动的回调 | 2.29.1 |
 | on-update:checked-row-keys | `(keys: Array<string \| number>, rows: object[], meta: { row: object \| undefined, action: 'check' \| 'uncheck' \| 'checkAll' \| 'uncheckAll' }) => void` | `undefined` | checked-row-keys 值改变时触发的回调函数 | `rows` 2.30.5, `meta` 2.33.4 |
 | on-update:expanded-row-keys | `(keys: Array<string \| number>) => void` | `undefined` | expanded-row-keys 值改变时触发的回调函数 |  |

diff --git a/src/data-table/demos/zhCN/resize-event.demo.vue b/src/data-table/demos/zhCN/resize-event.demo.vue
@@ -0,0 +1,100 @@
+<markdown>
+# 列宽拖拽事件
+
+使用 `on-resize-start`、`on-resize` 和 `on-resize-end` 监听列宽拖拽事件。
+</markdown>
+
+<script lang="ts" setup>
+import type { DataTableBaseColumn, DataTableColumns } from 'naive-ui'
+import { NButton, useMessage } from 'naive-ui'
+import { h } from 'vue'
+
+interface Song {
+  no: number
+  title: string
+  length: string
+}
+
+const message = useMessage()
+
+function handleResizeStart(column: DataTableBaseColumn): void {
+  message.info(`开始拖拽列: ${column.title}`)
+  console.log('开始拖拽列:', column)
+}
+
+function handleResize(column: DataTableBaseColumn, width: number): void {
+  console.log('拖拽中:', column, width)
+}
+
+function handleResizeEnd(column: DataTableBaseColumn): void {
+  console.log('完成拖拽列:', column.title, column)
+  message.success(`完成拖拽列: ${column.title}`)
+}
+
+function createColumns({
+  play
+}: {
+  play: (row: Song) => void
+}): DataTableColumns<Song> {
+  return [
+    {
+      title: 'No',
+      key: 'no',
+      width: 50
+    },
+    {
+      title: 'Title',
+      key: 'title',
+      resizable: true
+    },
+    {
+      title: 'Length',
+      key: 'length',
+      resizable: true,
+      minWidth: 100,
+      maxWidth: 500
+    },
+    {
+      title: 'Action',
+      key: 'actions',
+      render(row) {
+        return h(
+          NButton,
+          {
+            strong: true,
+            tertiary: true,
+            size: 'small',
+            onClick: () => play(row)
+          },
+          { default: () => 'Play' }
+        )
+      }
+    }
+  ]
+}
+
+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' }
+]
+
+const columns = createColumns({
+  play(row: Song) {
+    message.info(`Play ${row.title}`)
+  }
+})
+const pagination = false as const
+</script>
+
+<template>
+  <n-data-table
+    :columns="columns"
+    :data="data"
+    :pagination="pagination"
+    :bordered="false"
+    @resize-start="handleResizeStart"
+    @resize="handleResize"
+    @resize-end="handleResizeEnd"
+  />
+</template>
diff --git a/src/data-table/src/DataTable.tsx b/src/data-table/src/DataTable.tsx
@@ -288,6 +288,9 @@ export default defineComponent({
       doUpdateFilters,
       getResizableWidth,
       onUnstableColumnResize,
+      onResizeStart: props.onResizeStart,
+      onResize: props.onResize,
+      onResizeEnd: props.onResizeEnd,
       clearResizableWidth,
       doUpdateResizableWidth,
       deriveNextSorter,

diff --git a/src/data-table/src/TableParts/Header.tsx b/src/data-table/src/TableParts/Header.tsx
@@ -100,6 +100,9 @@ export default defineComponent({
       virtualScrollHeaderRef,
       headerHeightRef,
       onUnstableColumnResize,
+      onResizeStart,
+      onResize,
+      onResizeEnd,
       doUpdateResizableWidth,
       handleTableHeaderScroll,
       deriveNextSorter,
@@ -142,6 +145,7 @@ export default defineComponent({
     const resizeStartWidthMap = new Map<ColumnKey, number | undefined>()
     function handleColumnResizeStart(column: TableBaseColumn): void {
       resizeStartWidthMap.set(column.key, getCellActualWidth(column.key))
+      onResizeStart?.(column)
     }
     function handleColumnResize(
       column: TableBaseColumn,
@@ -164,6 +168,10 @@ export default defineComponent({
         getCellActualWidth
       )
       doUpdateResizableWidth(column, limitWidth)
+      onResize?.(column, limitWidth)
+    }
+    function handleColumnResizeEnd(column: TableBaseColumn): void {
+      onResizeEnd?.(column)
     }
     return {
       cellElsRef,
@@ -189,7 +197,8 @@ export default defineComponent({
       handleColHeaderClick,
       handleTableHeaderScroll,
       handleColumnResizeStart,
-      handleColumnResize
+      handleColumnResize,
+      handleColumnResizeEnd
     }
   },
   render() {
@@ -214,7 +223,8 @@ export default defineComponent({
       handleColHeaderClick,
       handleCheckboxUpdateChecked,
       handleColumnResizeStart,
-      handleColumnResize
+      handleColumnResize,
+      handleColumnResizeEnd
     } = this
     let hasEllipsis = false
 
@@ -286,6 +296,9 @@ export default defineComponent({
                   onResize={(displacementX) => {
                     handleColumnResize(column as TableBaseColumn, displacementX)
                   }}
+                  onResizeEnd={() => {
+                    handleColumnResizeEnd(column as TableBaseColumn)
+                  }}
                 />
               ) : null}
             </>

diff --git a/src/data-table/src/interface.ts b/src/data-table/src/interface.ts
@@ -33,6 +33,11 @@ export const dataTableProps = {
       getColumnWidth: (key: ColumnKey) => number | undefined
     ) => void
   >,
+  onResizeStart: Function as PropType<(column: TableBaseColumn) => void>,
+  onResize: Function as PropType<
+    (column: TableBaseColumn, width: number) => void
+  >,
+  onResizeEnd: Function as PropType<(column: TableBaseColumn) => void>,
   pagination: {
     type: [Object, Boolean] as PropType<false | PaginationProps>,
     default: false
@@ -437,6 +442,9 @@ export interface DataTableInjection {
     column: TableBaseColumn,
     getColumnWidth: (key: ColumnKey) => number | undefined
   ) => void
+  onResizeStart: ((column: TableBaseColumn) => void) | undefined
+  onResize: ((column: TableBaseColumn, width: number) => void) | undefined
+  onResizeEnd: ((column: TableBaseColumn) => void) | undefined
   getResizableWidth: (key: ColumnKey) => number | undefined
   clearResizableWidth: () => void
   doUpdateResizableWidth: (column: TableColumn, width: number) => void