feat(n-data-table): adds on-resize-start and on-resize event

CHANGELOG.en-US.md

@@ -16,6 +16,7 @@
 - `n-progress`'s `color` prop supports gradient config.
 - `n-select` adds `font-weight` theme variable
 - `n-input` adds `font-weight` theme variable
+- `n-data-table` adds `on-resize-start` and `on-resize` events, closes [#3827](https://github.com/tusen-ai/naive-ui/issues/3827)
 
 ## 2.40.1
 

CHANGELOG.zh-CN.md

@@ -16,6 +16,7 @@
 - `n-progress` 的 `color` 属性支持渐变色配置
 - `n-select` 新增 `font-weight` 主题变量
 - `n-input` 新增 `font-weight` 主题变量
+- `n-data-table` 新增 `on-resize-start` 和 `on-resize` 事件，关闭 [#3827](https://github.com/tusen-ai/naive-ui/issues/3827)
 
 ## 2.40.1
 

src/data-table/demos/enUS/index.demo-entry.md

@@ -113,6 +113,8 @@ 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 triggered when column width dragging starts. | NEXT_VERSION |
+| on-resize | `(column: DataTableBaseColumn, displacementX: number, startWidth: number) => void` | `undefined` | Callback triggered during column width dragging. | 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. |  |

src/data-table/demos/zhCN/index.demo-entry.md

@@ -124,6 +124,8 @@ 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, displacementX: number, startWidth: number) => 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 值改变时触发的回调函数 |  |

src/data-table/src/DataTable.tsx

@@ -292,7 +292,9 @@ export default defineComponent({
       handleTableHeaderScroll,
       handleTableBodyScroll,
       setHeaderScrollLeft,
-      renderCell: toRef(props, 'renderCell')
+      renderCell: toRef(props, 'renderCell'),
+      onResizeStart: props.onResizeStart,
+      onResize: props.onResize
     })
     const exposedMethods: DataTableInst = {
       filter,

src/data-table/src/TableParts/Header.tsx

@@ -104,7 +104,9 @@ export default defineComponent({
       handleTableHeaderScroll,
       deriveNextSorter,
       doUncheckAll,
-      doCheckAll
+      doCheckAll,
+      onResizeStart,
+      onResize
     } = inject(dataTableInjectionKey)!
     const virtualListRef = ref<VirtualListInst | null>()
     const cellElsRef = ref<Record<ColumnKey, HTMLTableCellElement>>({})
@@ -141,13 +143,15 @@ export default defineComponent({
     }
     const resizeStartWidthMap = new Map<ColumnKey, number | undefined>()
     function handleColumnResizeStart(column: TableBaseColumn): void {
+      onResizeStart?.(column)
       resizeStartWidthMap.set(column.key, getCellActualWidth(column.key))
     }
     function handleColumnResize(
       column: TableBaseColumn,
       displacementX: number
     ): void {
       const startWidth = resizeStartWidthMap.get(column.key)
+      onResize?.(column, displacementX, startWidth)
       if (startWidth === undefined) {
         return
       }

src/data-table/src/interface.ts

@@ -172,6 +172,10 @@ export const dataTableProps = {
   >,
   onCheckedRowKeysChange: [Function, Array] as PropType<
     MaybeArray<OnUpdateCheckedRowKeys> | undefined
+  >,
+  onResizeStart: Function as PropType<(column: TableBaseColumn) => void>,
+  onResize: Function as PropType<
+    (column: TableBaseColumn, displacementX: number) => void
   >
 } as const
 
@@ -447,6 +451,14 @@ export interface DataTableInjection {
     | undefined
     | ((value: any, rowData: object, column: TableBaseColumn) => VNodeChild)
   >
+  onResizeStart: ((column: TableBaseColumn) => void) | undefined
+  onResize:
+    | ((
+      column: TableBaseColumn,
+      displacementX: number,
+      startWidth?: number
+    ) => void)
+    | undefined
 }
 
 export const dataTableInjectionKey