feat(data-table): add render-cell

CHANGELOG.en-US.md

@@ -13,9 +13,7 @@
 ### Feats
 
 - Exports `NTooltipInst` type.
-
-### Feats
-
+- `n-data-table` adds `render-cell` prop, closes [#3095](https://github.com/TuSimple/naive-ui/issues/3095).
 - `n-space` adds `wrap-item` prop.
 
 ## 2.30.4

CHANGELOG.zh-CN.md

@@ -13,9 +13,7 @@
 ### Feats
 
 - 导出 `NTooltipInst` 类型
-
-### Feats
-
+- `n-data-table` 新增 `render-cell` 属性，关闭 [#3095](https://github.com/TuSimple/naive-ui/issues/3095)
 - `n-space` 新增 `wrap-item` 属性
 
 ## 2.30.4

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

@@ -46,6 +46,7 @@ simple-editable.vue
 switchable-editable
 context-menu.vue
 async-expand.vue
+render-cell.vue
 ```
 
 ## API
@@ -75,6 +76,7 @@ async-expand.vue
 | paginate-single-page | `boolean` | `true` | Whether show pagination data is less than one page. | 2.28.0 |
 | pagination | `false \| object` | `false` | See [Pagination props](pagination#Pagination-Props) |  |
 | remote | `boolean` | `false` | If data-table do automatic paging. You may set it to `false` in async usage. |  |
+| render-cell | `(value: any) => VNodeChild` | `undefined` | Render function of cell, it will be overwritten by `render`. | 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) => object` | `undefined` | Customize row attributes. |  |

src/data-table/demos/enUS/render-cell.demo.vue

@@ -0,0 +1,59 @@
+<markdown>
+# Customized cell rendering
+
+</markdown>
+
+<template>
+  <n-data-table :columns="columns" :data="data" :render-cell="renderCell" />
+</template>
+
+<script lang="ts">
+import { defineComponent, h } from 'vue'
+import type { DataTableColumns } from 'naive-ui'
+
+type Song = {
+  no: number
+  note: string
+}
+
+const createColumns = (): DataTableColumns<Song> => {
+  return [
+    {
+      title: 'week',
+      key: 'no',
+      width: 120,
+      render: (_, index) => {
+        return `${index + 1}`
+      }
+    },
+    {
+      title: 'note',
+      key: 'note'
+    }
+  ]
+}
+
+const data: Song[] = [
+  { no: 3, note: '' },
+  { no: 4, note: '' },
+  { no: 12, note: '' },
+  { no: 10, note: '' },
+  { no: 19, note: '' }
+]
+
+export default defineComponent({
+  setup () {
+    return {
+      data,
+      columns: createColumns(),
+      pagination: false as const,
+      renderCell: (value: string | number) => {
+        if (!value) {
+          return h('span', { style: 'color: #ccc;' }, { default: () => 'null' })
+        }
+        return value
+      }
+    }
+  }
+})
+</script>

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

@@ -46,6 +46,7 @@ simple-editable.vue
 switchable-editable
 context-menu.vue
 async-expand.vue
+render-cell.vue
 fixed-column-debug
 fixed-column2-debug
 scroll-debug
@@ -80,6 +81,7 @@ keep-alive-debug.vue
 | paginate-single-page | `boolean` | `true` | 当表格数据只有一页时是否显示分页面 | 2.28.0 |
 | pagination | `false \| object` | `false` | 属性参考 [Pagination props](pagination#Pagination-Props) |  |
 | remote | `boolean` | `false` | 表格是否自动分页数据，在异步的状况下你可能需要把它设为 `true` |  |
+| render-cell | `(value: any) => VNodeChild` | `undefined` | 自定义单元格渲染，可以被 `render` 覆盖 | 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) => object` | `undefined` | 自定义行属性 |  |

src/data-table/demos/zhCN/render-cell.demo.vue

@@ -0,0 +1,65 @@
+<markdown>
+# 自定义单元格
+
+日报比小说更玄幻
+
+</markdown>
+
+<template>
+  <n-data-table :columns="columns" :data="data" :render-cell="renderCell" />
+</template>
+
+<script lang="ts">
+import { defineComponent, h } from 'vue'
+import type { DataTableColumns } from 'naive-ui'
+
+type Song = {
+  no: number
+  note: string
+}
+
+const createColumns = (): DataTableColumns<Song> => {
+  return [
+    {
+      title: '日期',
+      key: 'no',
+      width: 120,
+      render: (_, index) => {
+        return `星期 ${index + 1}`
+      }
+    },
+    {
+      title: '记录',
+      key: 'note'
+    }
+  ]
+}
+
+const data: Song[] = [
+  { no: 3, note: '' },
+  { no: 4, note: '' },
+  { no: 12, note: '' },
+  { no: 10, note: '' },
+  { no: 19, note: '' }
+]
+
+export default defineComponent({
+  setup () {
+    return {
+      data,
+      columns: createColumns(),
+      pagination: false as const,
+      renderCell: (value: string | number) => {
+        if (!value) {
+          return h(
+            'span',
+            { style: 'color: #ccc;' },
+            { default: () => '该怎么编？' }
+          )
+        }
+        return value
+      }
+    }
+  }
+})
+</script>

src/data-table/src/DataTable.tsx

@@ -10,7 +10,8 @@ import {
   CSSProperties,
   Transition,
   watchEffect,
-  onDeactivated
+  onDeactivated,
+  VNodeChild
 } from 'vue'
 import { createId } from 'seemly'
 import { useConfig, useLocale, useTheme, useThemeClass } from '../../_mixins'
@@ -129,6 +130,7 @@ export const dataTableProps = {
     type: String as PropType<'first' | 'current'>,
     default: 'current'
   },
+  renderCell: Function as PropType<(value: any) => VNodeChild>,
   onLoad: Function as PropType<DataTableOnLoad>,
   'onUpdate:page': [Function, Array] as PropType<
   PaginationProps['onUpdate:page']
@@ -394,7 +396,8 @@ export default defineComponent({
       doUpdateExpandedRowKeys,
       handleTableHeaderScroll,
       handleTableBodyScroll,
-      setHeaderScrollLeft
+      setHeaderScrollLeft,
+      renderCell: props.renderCell
     })
     const exposedMethods: DataTableInst = {
       filter,

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

@@ -176,7 +176,8 @@ export default defineComponent({
       doUpdateExpandedRowKeys,
       handleTableBodyScroll,
       doCheck,
-      doUncheck
+      doUncheck,
+      renderCell
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     } = inject(dataTableInjectionKey)!
     const scrollbarInstRef = ref<ScrollbarInst | null>(null)
@@ -467,6 +468,7 @@ export default defineComponent({
       handleTableBodyScroll,
       handleCheckboxUpdateChecked,
       handleUpdateExpanded,
+      renderCell,
       ...exposedMethods
     }
   },
@@ -827,6 +829,7 @@ export default defineComponent({
                             column={column}
                             isSummary={isSummary}
                             mergedTheme={mergedTheme}
+                            renderCell={this.renderCell}
                           />
                         )}
                       </td>

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

@@ -24,13 +24,15 @@ export default defineComponent({
     mergedTheme: {
       type: Object as PropType<MergedTheme<DataTableTheme>>,
       required: true
-    }
+    },
+    renderCell: Function as PropType<(value: any) => VNodeChild>
   },
   render () {
     const {
       isSummary,
       column: { render, key, ellipsis },
-      row
+      row,
+      renderCell
     } = this
     let cell: VNodeChild
     if (render && !isSummary) {
@@ -39,7 +41,7 @@ export default defineComponent({
       if (isSummary) {
         cell = (row[key] as SummaryCell).value
       } else {
-        cell = get(row, key) as any
+        cell = renderCell ? renderCell(get(row, key)) : (get(row, key) as any)
       }
     }
     if (ellipsis && typeof ellipsis === 'object') {

src/data-table/src/interface.ts

@@ -231,6 +231,7 @@ export interface DataTableInjection {
   handleTableBodyScroll: (e: Event) => void
   syncScrollState: (deltaX?: number, deltaY?: number) => void
   setHeaderScrollLeft: (scrollLeft: number) => void
+  renderCell?: (value: any) => VNodeChild
 }
 
 export const dataTableInjectionKey =