feat(data-table): adds get-csv-header and get-csv-cell props, closes #6542

CHANGELOG.en-US.md

@@ -23,6 +23,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 `get-csv-header` and `get-csv-cell` props, closes [#6542](https://github.com/tusen-ai/naive-ui/issues/6542).
 
 ## 2.40.1
 

CHANGELOG.zh-CN.md

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

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

@@ -82,6 +82,8 @@ export-csv.vue
 | expanded-row-keys | `Array<string \| number>` | `undefined` | Expanded row keys. |  |
 | filter-icon-popover-props | `PopoverProps` | `{ trigger: click, placement: bottom }` | Filter icon's Popover attribute of the button, See [Popover props](popover#Popover-Props) | 2.39.0 |
 | flex-height | `boolean` | `false` | Whether to make table body's height auto fit table area height. Make it enabled will make `table-layout` always set to `'fixed'`. |  |
+| get-csv-cell | `(value: any, row: object, col: DataTableBaseColumn) => string` | `undefined` | Get CSV's cell content. | NEXT_VERSION |
+| get-csv-header | `(cols: Array<DataTableColumn>) => string` | `undefined` | Get CSV's header content. | NEXT_VERSION |
 | header-height | `number` | `28` | Header height value when `virtual-scroll-header` is enabled. | 2.40.0 |
 | height-for-row | `(rowData: object, index: number) => number` | `undefined` | Height configuration function for each row of the table. It must be used with `virtual-scroll-x`. If it's not configured, each rows height would be set to `min-row-height`. | 2.40.0 |
 | indent | `number` | `16` | Indent of row content when using tree data. |  |

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

@@ -93,6 +93,8 @@ rtl-debug.vue
 | expanded-row-keys | `Array<string \| number>` | `undefined` | 展开行的 key 值 |  |
 | filter-icon-popover-props | `PopoverProps` | `{ trigger: click, placement: bottom }` | 过滤按钮的 Popover 属性，属性参考 [Popover props](popover#Popover-Props) | 2.39.0 |
 | flex-height | `boolean` | `false` | 是否让表格主体的高度自动适应整个表格区域的高度，打开这个选项会让 `table-layout` 始终为 `'fixed'` |  |
+| get-csv-cell | `(value: any, row: object, col: DataTableBaseColumn) => string` | `undefined` | 获取 CSV 的单元格数据 | NEXT_VERSION |
+| get-csv-header | `(cols: Array<DataTableColumn>) => string` | `undefined` | 获取 CSV 的 header | NEXT_VERSION |
 | header-height | `number` | `28` | 在开启 `virtual-scroll-header` 属性的情况下，表头的高度 | 2.40.0 |
 | height-for-row | `(rowData: object, index: number) => number` | `undefined` | 每行高度的配置函数，必须配合 `virtual-scroll-x` 使用，如果不进行配置，每一行的高度会被设为 `min-row-height` | 2.40.0 |
 | indent | `number` | `16` | 使用树形数据时行内容的缩进 |  |

src/data-table/index.ts

@@ -22,3 +22,4 @@ export type {
   FilterState as DataTableFilterState,
   SortState as DataTableSortState
 } from './src/interface'
+export * from './src/publicTypes'

src/data-table/src/DataTable.tsx

@@ -137,7 +137,12 @@ export default defineComponent({
     const downloadCsv = (options?: CsvOptionsType): void => {
       const { fileName = 'data.csv', keepOriginalData = false } = options || {}
       const data = keepOriginalData ? props.data : rawPaginatedDataRef.value
-      const csvData = generateCsv(props.columns, data)
+      const csvData = generateCsv(
+        props.columns,
+        data,
+        props.getCsvCell,
+        props.getCsvHeader
+      )
       const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8' })
       const downloadUrl = URL.createObjectURL(blob)
       download(

src/data-table/src/interface.ts

@@ -21,6 +21,7 @@ import type { DataTableTheme } from '../styles'
 import type { BaseLoadingExposedProps } from '../../_internal'
 import type { PopoverProps } from '../../popover'
 import type { ColItem, RowItem } from './use-group-header'
+import type { DataTableGetCsvCell, DataTableGetCsvHeader } from './publicTypes'
 
 export const dataTableProps = {
   ...(useTheme.props as ThemeProps<DataTableTheme>),
@@ -129,6 +130,8 @@ export const dataTableProps = {
   >,
   renderExpandIcon: Function as PropType<RenderExpandIcon>,
   spinProps: { type: Object as PropType<BaseLoadingExposedProps>, default: {} },
+  getCsvCell: Function as PropType<DataTableGetCsvCell>,
+  getCsvHeader: Function as PropType<DataTableGetCsvHeader>,
   onLoad: Function as PropType<DataTableOnLoad>,
   'onUpdate:page': [Function, Array] as PropType<
     PaginationProps['onUpdate:page']

src/data-table/src/publicTypes.ts

@@ -0,0 +1,8 @@
+import type { TableBaseColumn } from './interface'
+
+export type DataTableGetCsvCell = (
+  value: any,
+  rowData: object,
+  column: TableBaseColumn
+) => string
+export type DataTableGetCsvHeader = (column: TableBaseColumn) => string

src/data-table/src/utils.ts

@@ -13,6 +13,7 @@ import type {
   TableExpandColumn,
   TableSelectionColumn
 } from './interface'
+import type { DataTableGetCsvCell, DataTableGetCsvHeader } from './publicTypes'
 
 export const SELECTION_COL_WIDTH = 40
 export const EXPAND_COL_WIDTH = 40
@@ -205,17 +206,30 @@ function formatCsvCell(value: unknown): string {
   }
 }
 
-export function generateCsv(columns: TableColumn[], data: RowData[]): string {
+export function generateCsv(
+  columns: TableColumn[],
+  data: RowData[],
+  getCsvCell: DataTableGetCsvCell | undefined,
+  getCsvHeader: DataTableGetCsvHeader | undefined
+): string {
   const exportableColumns = columns.filter(
     column =>
       column.type !== 'expand'
       && column.type !== 'selection'
       && column.allowExport !== false
   )
-  const header = exportableColumns.map((col: any) => col.title).join(',')
+  const header = exportableColumns
+    .map((col: any) => {
+      return getCsvHeader ? getCsvHeader(col) : col.title
+    })
+    .join(',')
   const rows = data.map((row) => {
     return exportableColumns
-      .map((col: any) => formatCsvCell(row[col.key]))
+      .map((col: any) => {
+        return getCsvCell
+          ? getCsvCell(row[col.key], row, col)
+          : formatCsvCell(row[col.key])
+      })
       .join(',')
   })
   return [header, ...rows].join('\n')