feat(data-table): add rowData return for render-expand-icon (#6183)

Co-authored-by: 07akioni <07akioni2@gmail.com>

CHANGELOG.en-US.md

@@ -27,6 +27,7 @@
 - Adds `n-highlight` component.
 - `n-slider` `marks` prop to support render function, closes [#5967](https://github.com/tusen-ai/naive-ui/issues/5967)
 - `n-transfer` `source-title` `target-title` prop to support render function, closes [#6004](https://github.com/tusen-ai/naive-ui/issues/6004)
+- `n-data-table` add `rowData` return for `render-expand-icon`, closes [#6108](https://github.com/tusen-ai/naive-ui/issues/6108)
 - `n-empty` `size` prop to support `tiny` size.
 - `n-config-provider` adds `style-mount-target` prop to control where to mount components' style.
 - `n-cascader` filter ignore case sensitive

CHANGELOG.zh-CN.md

@@ -27,6 +27,7 @@
 - 新增 `n-highlight` 组件
 - `n-slider` `marks` 支持渲染函数，关闭 [#5967](https://github.com/tusen-ai/naive-ui/issues/5967)
 - `n-transfer` `source-title` `target-title` 支持渲染函数，关闭 [#6004](https://github.com/tusen-ai/naive-ui/issues/6004)
+- `n-data-table` `render-expand-icon` 新增 `rowData`，关闭 [#6108](https://github.com/tusen-ai/naive-ui/issues/6108)
 - `n-empty` `size` 支持 `tiny` 尺寸
 - `n-config-provider` 新增 `style-mount-target` 属性，用于控制样式的挂载位置
 - `n-cascader` 过滤算法忽略大小写

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

@@ -90,7 +90,7 @@ export-csv.vue
 | pagination-behavior-on-filter | `'first' \| 'current'` | `'current'` | The behavior of pagination after filter state is changed. `'first'` means returning to first page on filter, `'current'` means keep at current page on filter. | 2.28.3 |
 | remote | `boolean` | `false` | If data-table do automatic paging. You may set it to `true` in async usage. |  |
 | render-cell | `(value: any, rowData: object, column: DataTableBaseColumn) => VNodeChild` | `undefined` | Render function of cell, it will be overwritten by columns' `render`. | 2.30.5 |
-| render-expand-icon | `({ expanded }: { expanded: boolean }) => VNodeChild` | `undefined` | Render function of expand icon. | 2.32.2, `expanded`: 2.34.4 |
+| render-expand-icon | `({ expanded, rowData }: { expanded: boolean, rowData: object }) => VNodeChild` | `undefined` | Render function of expand icon. | 2.32.2, `expanded`: 2.34.4, `rowData`: `NEXT_VERSION` |
 | row-class-name | `string \| (rowData: object, rowIndex : number) => string` | `undefined` | Class name of each row. |  |
 | row-key | `(rowData: object) => (number \| string)` | `undefined` | Generate the key of the row by row data (if you don't want to set the key). |  |
 | row-props | `(rowData: object, rowIndex : number) => HTMLAttributes` | `undefined` | Customize row attributes. |  |

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

@@ -101,7 +101,7 @@ rtl-debug.vue
 | pagination-behavior-on-filter | `'first' \| 'current'` | `'current'` | 过滤操作后页面的状态，`'first'` 为回到首页，`'current'` 为停留在当前页 | 2.28.3 |
 | remote | `boolean` | `false` | 表格是否自动分页数据，在异步的状况下你可能需要把它设为 `true` |  |
 | render-cell | `(value: any, rowData: object, column: DataTableBaseColumn) => VNodeChild` | `undefined` | 自定义单元格渲染，优先级低于列的 `render` | 2.30.5 |
-| render-expand-icon | `({ expanded }: { expanded: boolean }) => VNodeChild` | `undefined` | 自定义渲染展开图标 | 2.32.2, `expanded`: 2.34.4 |
+| render-expand-icon | `({ expanded, rowData }: { expanded: boolean, rowData: object }) => VNodeChild` | `undefined` | 自定义渲染展开图标 | 2.32.2, `expanded`: 2.34.4, `rowData`: `NEXT_VERSION` |
 | row-class-name | `string \| (rowData: object, index : number) => string` | `undefined` | 每一行上的类名 |  |
 | row-key | `(rowData: object) => (number \| string)` | `undefined` | 通过行数据创建行的 key（如果你不想给每一行加上 key） |  |
 | row-props | `(rowData: object, rowIndex : number) => HTMLAttributes` | `undefined` | 自定义行属性 |  |

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

@@ -883,6 +883,7 @@ export default defineComponent({
                                   class={`${mergedClsPrefix}-data-table-expand-trigger`}
                                   clsPrefix={mergedClsPrefix}
                                   expanded={expanded}
+                                  rowData={rowData}
                                   renderExpandIcon={this.renderExpandIcon}
                                   loading={loadingKeySet.has(rowInfo.key)}
                                   onClick={() => {
@@ -924,6 +925,7 @@ export default defineComponent({
                             || column.expandable?.(rowData) ? (
                                   <ExpandTrigger
                                     clsPrefix={mergedClsPrefix}
+                                    rowData={rowData}
                                     expanded={expanded}
                                     renderExpandIcon={this.renderExpandIcon}
                                     onClick={() => {

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

@@ -5,7 +5,7 @@ import {
   NBaseLoading,
   NIconSwitchTransition
 } from '../../../_internal'
-import type { RenderExpandIcon } from '../interface'
+import type { RenderExpandIcon, RowData } from '../interface'
 
 export default defineComponent({
   name: 'DataTableExpandTrigger',
@@ -22,6 +22,10 @@ export default defineComponent({
     },
     renderExpandIcon: {
       type: Function as PropType<RenderExpandIcon>
+    },
+    rowData: {
+      type: Object as PropType<RowData>,
+      required: true
     }
   },
   render() {
@@ -50,7 +54,8 @@ export default defineComponent({
                 />
               ) : this.renderExpandIcon ? (
                 this.renderExpandIcon({
-                  expanded: this.expanded
+                  expanded: this.expanded,
+                  rowData: this.rowData
                 })
               ) : (
                 <NBaseIcon clsPrefix={clsPrefix} key="base-icon">

src/data-table/src/interface.ts

@@ -312,9 +312,11 @@ export type RenderExpand<T = InternalRowData> = (
   index: number
 ) => VNodeChild
 export type RenderExpandIcon = ({
-  expanded
+  expanded,
+  rowData
 }: {
   expanded: boolean
+  rowData: RowData
 }) => VNodeChild
 
 // TODO: we should deprecate `index` since it would change after row is expanded