From 19a2885cb3f9af52290b2491e642afa7f38e1313 Mon Sep 17 00:00:00 2001
From: Artea <sepush@outlook.com>
Date: Sun, 5 Jan 2025 10:45:12 +0800
Subject: [PATCH] docs(data-table): merge-cell ts demo

Signed-off-by: Artea <sepush@outlook.com>
---
 src/data-table/demos/enUS/index.demo-entry.md |  2 +-
 ...merge-cell.demo.md => merge-cell.demo.vue} | 56 +++++++++++++------
 src/data-table/demos/zhCN/index.demo-entry.md |  2 +-
 ...merge-cell.demo.md => merge-cell.demo.vue} | 54 ++++++++++++------
 4 files changed, 76 insertions(+), 38 deletions(-)
 rename src/data-table/demos/enUS/{merge-cell.demo.md => merge-cell.demo.vue} (73%)
 rename src/data-table/demos/zhCN/{merge-cell.demo.md => merge-cell.demo.vue} (75%)

diff --git a/src/data-table/demos/enUS/index.demo-entry.md b/src/data-table/demos/enUS/index.demo-entry.md
index 87a34fcdc1b..2bb2edbf662 100644
--- a/src/data-table/demos/enUS/index.demo-entry.md
+++ b/src/data-table/demos/enUS/index.demo-entry.md
@@ -26,7 +26,7 @@ empty.vue
 border.vue
 size.vue
 row-props.vue
-merge-cell
+merge-cell.vue
 filter-and-sorter
 pagination-behavior-on-filter.vue
 multiple-sorter
diff --git a/src/data-table/demos/enUS/merge-cell.demo.md b/src/data-table/demos/enUS/merge-cell.demo.vue
similarity index 73%
rename from src/data-table/demos/enUS/merge-cell.demo.md
rename to src/data-table/demos/enUS/merge-cell.demo.vue
index 035d8f11cc6..ebae2217def 100644
--- a/src/data-table/demos/enUS/merge-cell.demo.md
+++ b/src/data-table/demos/enUS/merge-cell.demo.vue
@@ -1,24 +1,35 @@
+<markdown>
 # Merge cell
 
 Set colspan and rowspan by setting `colSpan` and `rowSpan` of column object. Set colspan in header by setting `titleColSpan` of column object.
+</markdown>
 
-```html
-<n-data-table
-  :columns="columns"
-  :data="data"
-  :pagination="pagination"
-  :single-line="false"
-/>
-```
-
-```js
+<script lang="ts">
+import type { DataTableColumns } from 'naive-ui'
 import { NButton, NTag, useMessage } from 'naive-ui'
 import { defineComponent, h } from 'vue'
 
-function createColumns({ sendMail }) {
+interface RawData {
+  key: number
+  name: string
+  age: number
+  address: string
+  tags: string[]
+}
+
+interface SendMail {
+  (rowData: RawData): void
+}
+
+function createColumns({
+  sendMail
+}: {
+  sendMail: SendMail
+}): DataTableColumns<RawData> {
   return [
     {
       title: 'Name',
+      titleColSpan: 2,
       key: 'name',
       rowSpan: (rowData, rowIndex) => (rowIndex === 0 ? 2 : 1),
       colSpan: (rowData, rowIndex) => (rowIndex === 0 ? 2 : 1)
@@ -35,6 +46,7 @@ function createColumns({ sendMail }) {
     {
       title: 'Tags',
       key: 'tags',
+      titleColSpan: 2,
       render(row) {
         const tags = row.tags.map((tagKey) => {
           return h(
@@ -72,7 +84,7 @@ function createColumns({ sendMail }) {
   ]
 }
 
-function createData() {
+function createData(): RawData[] {
   return [
     {
       key: 0,
@@ -101,17 +113,25 @@ function createData() {
 export default defineComponent({
   setup() {
     const message = useMessage()
+    function sendMail(rowData: RawData) {
+      message.info(`send mail to ${rowData.name}`)
+    }
     return {
       data: createData(),
-      columns: createColumns({
-        sendMail(rowData) {
-          message.info(`send mail to ${rowData.name}`)
-        }
-      }),
+      columns: createColumns({ sendMail }),
       pagination: {
         pageSize: 10
       }
     }
   }
 })
-```
+</script>
+
+<template>
+  <n-data-table
+    :columns="columns"
+    :data="data"
+    :pagination="pagination"
+    :single-line="false"
+  />
+</template>
diff --git a/src/data-table/demos/zhCN/index.demo-entry.md b/src/data-table/demos/zhCN/index.demo-entry.md
index 73978e01842..cc338965178 100644
--- a/src/data-table/demos/zhCN/index.demo-entry.md
+++ b/src/data-table/demos/zhCN/index.demo-entry.md
@@ -28,7 +28,7 @@ empty.vue
 border.vue
 size.vue
 row-props.vue
-merge-cell
+merge-cell.vue
 filter-and-sorter
 pagination-behavior-on-filter.vue
 multiple-sorter
diff --git a/src/data-table/demos/zhCN/merge-cell.demo.md b/src/data-table/demos/zhCN/merge-cell.demo.vue
similarity index 75%
rename from src/data-table/demos/zhCN/merge-cell.demo.md
rename to src/data-table/demos/zhCN/merge-cell.demo.vue
index 8f9afebe4d4..6a74c1731c5 100644
--- a/src/data-table/demos/zhCN/merge-cell.demo.md
+++ b/src/data-table/demos/zhCN/merge-cell.demo.vue
@@ -1,21 +1,31 @@
+<markdown>
 # 合并单元格
 
 设定列的 `colSpan` 和 `rowSpan` 来控制单元格的 `colspan` 和 `rowspan`。设定列的 `titleColSpan` 控制表头的 colspan。
+</markdown>
 
-```html
-<n-data-table
-  :columns="columns"
-  :data="data"
-  :pagination="pagination"
-  :single-line="false"
-/>
-```
-
-```js
+<script lang="ts">
+import type { DataTableColumns } from 'naive-ui'
 import { NButton, NTag, useMessage } from 'naive-ui'
 import { defineComponent, h } from 'vue'
 
-function createColumns({ sendMail }) {
+interface RawData {
+  key: number
+  name: string
+  age: number
+  address: string
+  tags: string[]
+}
+
+interface SendMail {
+  (rowData: RawData): void
+}
+
+function createColumns({
+  sendMail
+}: {
+  sendMail: SendMail
+}): DataTableColumns<RawData> {
   return [
     {
       title: 'Name',
@@ -74,7 +84,7 @@ function createColumns({ sendMail }) {
   ]
 }
 
-function createData() {
+function createData(): RawData[] {
   return [
     {
       key: 0,
@@ -103,17 +113,25 @@ function createData() {
 export default defineComponent({
   setup() {
     const message = useMessage()
+    function sendMail(rowData: RawData) {
+      message.info(`send mail to ${rowData.name}`)
+    }
     return {
       data: createData(),
-      columns: createColumns({
-        sendMail(rowData) {
-          message.info(`send mail to ${rowData.name}`)
-        }
-      }),
+      columns: createColumns({ sendMail }),
       pagination: {
         pageSize: 10
       }
     }
   }
 })
-```
+</script>
+
+<template>
+  <n-data-table
+    :columns="columns"
+    :data="data"
+    :pagination="pagination"
+    :single-line="false"
+  />
+</template>