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 1/3] 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>

From 049d4d46a34a8f9df84885c0ef9888961db05e24 Mon Sep 17 00:00:00 2001
From: Artea <sepush@outlook.com>
Date: Sun, 5 Jan 2025 15:29:02 +0800
Subject: [PATCH 2/3] docs(data-table): render-header ts demo

Signed-off-by: Artea <sepush@outlook.com>
---
 src/data-table/demos/enUS/index.demo-entry.md |  2 +-
 src/data-table/demos/enUS/merge-cell.demo.vue | 10 ++---
 ...-header.demo.md => render-header.demo.vue} | 40 +++++++++++++------
 src/data-table/demos/zhCN/index.demo-entry.md |  2 +-
 src/data-table/demos/zhCN/merge-cell.demo.vue | 10 ++---
 ...-header.demo.md => render-header.demo.vue} | 40 +++++++++++++------
 6 files changed, 66 insertions(+), 38 deletions(-)
 rename src/data-table/demos/enUS/{render-header.demo.md => render-header.demo.vue} (60%)
 rename src/data-table/demos/zhCN/{render-header.demo.md => render-header.demo.vue} (59%)

diff --git a/src/data-table/demos/enUS/index.demo-entry.md b/src/data-table/demos/enUS/index.demo-entry.md
index 2bb2edbf662..31b33e6f975 100644
--- a/src/data-table/demos/enUS/index.demo-entry.md
+++ b/src/data-table/demos/enUS/index.demo-entry.md
@@ -45,7 +45,7 @@ summary.vue
 ellipsis.vue
 ellipsis-tooltip.vue
 expand.vue
-render-header
+render-header.vue
 custom-style.vue
 ajax-usage
 virtual.vue
diff --git a/src/data-table/demos/enUS/merge-cell.demo.vue b/src/data-table/demos/enUS/merge-cell.demo.vue
index ebae2217def..f4b3bc59957 100644
--- a/src/data-table/demos/enUS/merge-cell.demo.vue
+++ b/src/data-table/demos/enUS/merge-cell.demo.vue
@@ -9,7 +9,7 @@ import type { DataTableColumns } from 'naive-ui'
 import { NButton, NTag, useMessage } from 'naive-ui'
 import { defineComponent, h } from 'vue'
 
-interface RawData {
+interface RowData {
   key: number
   name: string
   age: number
@@ -18,14 +18,14 @@ interface RawData {
 }
 
 interface SendMail {
-  (rowData: RawData): void
+  (rowData: RowData): void
 }
 
 function createColumns({
   sendMail
 }: {
   sendMail: SendMail
-}): DataTableColumns<RawData> {
+}): DataTableColumns<RowData> {
   return [
     {
       title: 'Name',
@@ -84,7 +84,7 @@ function createColumns({
   ]
 }
 
-function createData(): RawData[] {
+function createData(): RowData[] {
   return [
     {
       key: 0,
@@ -113,7 +113,7 @@ function createData(): RawData[] {
 export default defineComponent({
   setup() {
     const message = useMessage()
-    function sendMail(rowData: RawData) {
+    function sendMail(rowData: RowData) {
       message.info(`send mail to ${rowData.name}`)
     }
     return {
diff --git a/src/data-table/demos/enUS/render-header.demo.md b/src/data-table/demos/enUS/render-header.demo.vue
similarity index 60%
rename from src/data-table/demos/enUS/render-header.demo.md
rename to src/data-table/demos/enUS/render-header.demo.vue
index 27cf20c692c..6dc5796deda 100644
--- a/src/data-table/demos/enUS/render-header.demo.md
+++ b/src/data-table/demos/enUS/render-header.demo.vue
@@ -1,25 +1,34 @@
+<markdown>
 # Customized column header rendering
+</markdown>
 
-```html
-<n-data-table :columns="columns" :data="data" :pagination="pagination" />
-```
-
-```js
+<script lang="ts">
+import type { DataTableBaseColumn, DataTableColumns } from 'naive-ui'
+import type { ComponentInternalInstance, VNode, VNodeChild } from 'vue'
 import { NGradientText, NTooltip } from 'naive-ui'
-import { defineComponent, h } from 'vue'
+import { defineComponent, getCurrentInstance, h } from 'vue'
+
+interface RowData extends Record<string, unknown> {
+  key: number
+  name: string
+  age: number
+  address: string
+}
 
-function renderTooltip(trigger, content) {
+function renderTooltip(trigger: VNode, content: string): VNodeChild {
   return h(NTooltip, null, {
     trigger: () => trigger,
     default: () => content
   })
 }
 
-function createColumns(instance) {
+function createColumns(
+  _instance: ComponentInternalInstance | null
+): DataTableColumns<RowData> {
   return [
     {
       key: 'name',
-      title(column) {
+      title(_column: DataTableBaseColumn<RowData>) {
         return renderTooltip(
           h(
             NGradientText,
@@ -35,7 +44,7 @@ function createColumns(instance) {
     },
     {
       key: 'age',
-      title(column) {
+      title(_column: DataTableBaseColumn<RowData>) {
         return h(
           NGradientText,
           {
@@ -48,7 +57,7 @@ function createColumns(instance) {
     },
     {
       key: 'address',
-      title(column) {
+      title(_column: DataTableBaseColumn<RowData>) {
         return h(
           NGradientText,
           {
@@ -85,13 +94,18 @@ const data = [
 
 export default defineComponent({
   setup() {
+    const instance = getCurrentInstance()
     return {
       data,
-      columns: createColumns(this),
+      columns: createColumns(instance),
       pagination: {
         pageSize: 10
       }
     }
   }
 })
-```
+</script>
+
+<template>
+  <n-data-table :columns="columns" :data="data" :pagination="pagination" />
+</template>
diff --git a/src/data-table/demos/zhCN/index.demo-entry.md b/src/data-table/demos/zhCN/index.demo-entry.md
index cc338965178..24dea2407f7 100644
--- a/src/data-table/demos/zhCN/index.demo-entry.md
+++ b/src/data-table/demos/zhCN/index.demo-entry.md
@@ -47,7 +47,7 @@ summary.vue
 ellipsis.vue
 ellipsis-tooltip.vue
 expand.vue
-render-header
+render-header.vue
 custom-style.vue
 ajax-usage
 virtual.vue
diff --git a/src/data-table/demos/zhCN/merge-cell.demo.vue b/src/data-table/demos/zhCN/merge-cell.demo.vue
index 6a74c1731c5..4fc027590ba 100644
--- a/src/data-table/demos/zhCN/merge-cell.demo.vue
+++ b/src/data-table/demos/zhCN/merge-cell.demo.vue
@@ -9,7 +9,7 @@ import type { DataTableColumns } from 'naive-ui'
 import { NButton, NTag, useMessage } from 'naive-ui'
 import { defineComponent, h } from 'vue'
 
-interface RawData {
+interface RowData {
   key: number
   name: string
   age: number
@@ -18,14 +18,14 @@ interface RawData {
 }
 
 interface SendMail {
-  (rowData: RawData): void
+  (rowData: RowData): void
 }
 
 function createColumns({
   sendMail
 }: {
   sendMail: SendMail
-}): DataTableColumns<RawData> {
+}): DataTableColumns<RowData> {
   return [
     {
       title: 'Name',
@@ -84,7 +84,7 @@ function createColumns({
   ]
 }
 
-function createData(): RawData[] {
+function createData(): RowData[] {
   return [
     {
       key: 0,
@@ -113,7 +113,7 @@ function createData(): RawData[] {
 export default defineComponent({
   setup() {
     const message = useMessage()
-    function sendMail(rowData: RawData) {
+    function sendMail(rowData: RowData) {
       message.info(`send mail to ${rowData.name}`)
     }
     return {
diff --git a/src/data-table/demos/zhCN/render-header.demo.md b/src/data-table/demos/zhCN/render-header.demo.vue
similarity index 59%
rename from src/data-table/demos/zhCN/render-header.demo.md
rename to src/data-table/demos/zhCN/render-header.demo.vue
index ad6e984ca79..f5af0063ba2 100644
--- a/src/data-table/demos/zhCN/render-header.demo.md
+++ b/src/data-table/demos/zhCN/render-header.demo.vue
@@ -1,25 +1,34 @@
+<markdown>
 # 自定义渲染列头
+</markdown>
 
-```html
-<n-data-table :columns="columns" :data="data" :pagination="pagination" />
-```
-
-```js
+<script lang="ts">
+import type { DataTableBaseColumn, DataTableColumns } from 'naive-ui'
+import type { ComponentInternalInstance, VNode, VNodeChild } from 'vue'
 import { NGradientText, NTooltip } from 'naive-ui'
-import { defineComponent, h } from 'vue'
+import { defineComponent, getCurrentInstance, h } from 'vue'
+
+interface RowData extends Record<string, unknown> {
+  key: number
+  name: string
+  age: number
+  address: string
+}
 
-function renderTooltip(trigger, content) {
+function renderTooltip(trigger: VNode, content: string): VNodeChild {
   return h(NTooltip, null, {
     trigger: () => trigger,
     default: () => content
   })
 }
 
-function createColumns(instance) {
+function createColumns(
+  _instance: ComponentInternalInstance | null
+): DataTableColumns<RowData> {
   return [
     {
       key: 'name',
-      title(column) {
+      title(_column: DataTableBaseColumn<RowData>) {
         return renderTooltip(
           h(
             NGradientText,
@@ -35,7 +44,7 @@ function createColumns(instance) {
     },
     {
       key: 'age',
-      title(column) {
+      title(_column: DataTableBaseColumn<RowData>) {
         return h(
           NGradientText,
           {
@@ -48,7 +57,7 @@ function createColumns(instance) {
     },
     {
       key: 'address',
-      title(column) {
+      title(_column: DataTableBaseColumn<RowData>) {
         return h(
           NGradientText,
           {
@@ -85,13 +94,18 @@ const data = [
 
 export default defineComponent({
   setup() {
+    const instance = getCurrentInstance()
     return {
       data,
-      columns: createColumns(this),
+      columns: createColumns(instance),
       pagination: {
         pageSize: 10
       }
     }
   }
 })
-```
+</script>
+
+<template>
+  <n-data-table :columns="columns" :data="data" :pagination="pagination" />
+</template>

From 923a5d924f169ea867aa2440b208bf06d4baea18 Mon Sep 17 00:00:00 2001
From: Artea <sepush@outlook.com>
Date: Sun, 5 Jan 2025 16:48:49 +0800
Subject: [PATCH 3/3] docs(data-table): switchable-editable ts demo

Signed-off-by: Artea <sepush@outlook.com>
---
 src/data-table/demos/enUS/index.demo-entry.md |  2 +-
 ...e.demo.md => switchable-editable.demo.vue} | 72 +++++++++++--------
 src/data-table/demos/zhCN/index.demo-entry.md |  2 +-
 ...e.demo.md => switchable-editable.demo.vue} | 69 +++++++++++-------
 4 files changed, 87 insertions(+), 58 deletions(-)
 rename src/data-table/demos/enUS/{switchable-editable.demo.md => switchable-editable.demo.vue} (67%)
 rename src/data-table/demos/zhCN/{switchable-editable.demo.md => switchable-editable.demo.vue} (67%)

diff --git a/src/data-table/demos/enUS/index.demo-entry.md b/src/data-table/demos/enUS/index.demo-entry.md
index 31b33e6f975..4fba767196b 100644
--- a/src/data-table/demos/enUS/index.demo-entry.md
+++ b/src/data-table/demos/enUS/index.demo-entry.md
@@ -55,7 +55,7 @@ tree.vue
 flex-height.vue
 striped.vue
 simple-editable.vue
-switchable-editable
+switchable-editable.vue
 context-menu.vue
 async-expand.vue
 render-cell.vue
diff --git a/src/data-table/demos/enUS/switchable-editable.demo.md b/src/data-table/demos/enUS/switchable-editable.demo.vue
similarity index 67%
rename from src/data-table/demos/enUS/switchable-editable.demo.md
rename to src/data-table/demos/enUS/switchable-editable.demo.vue
index 21e4afbf669..5a9b615ba2f 100644
--- a/src/data-table/demos/enUS/switchable-editable.demo.md
+++ b/src/data-table/demos/enUS/switchable-editable.demo.vue
@@ -1,20 +1,25 @@
+<markdown>
 # Switchable Editable Table
+</markdown>
 
-```html
-<n-data-table
-  :key="(row) => row.key"
-  :columns="columns"
-  :data="data"
-  :pagination="paginationRef"
-  :on-update:page="handlePageChange"
-/>
-```
-
-```js
+<script lang="ts">
+import type { InputInst } from 'naive-ui'
+import type { PropType } from 'vue'
 import { NInput } from 'naive-ui'
 import { computed, defineComponent, h, nextTick, ref } from 'vue'
 
-function createData() {
+interface RowData {
+  key: number
+  name: string
+  age: number
+  address: string
+}
+
+interface OnUpdateValue {
+  (value: string): void
+}
+
+function createData(): RowData[] {
   return Array.from({ length: 100 }).map((_, index) => ({
     key: index,
     name: `John Brown ${index}`,
@@ -26,20 +31,20 @@ function createData() {
 const ShowOrEdit = defineComponent({
   props: {
     value: [String, Number],
-    onUpdateValue: [Function, Array]
+    onUpdateValue: [Function, Array] as PropType<OnUpdateValue>
   },
   setup(props) {
     const isEdit = ref(false)
-    const inputRef = ref(null)
+    const inputRef = ref<InputInst | null>(null)
     const inputValue = ref(props.value)
     function handleOnClick() {
       isEdit.value = true
       nextTick(() => {
-        inputRef.value.focus()
+        inputRef.value?.focus()
       })
     }
     function handleChange() {
-      props.onUpdateValue(inputValue.value)
+      props.onUpdateValue?.(String(inputValue.value))
       isEdit.value = false
     }
     return () =>
@@ -52,7 +57,7 @@ const ShowOrEdit = defineComponent({
         isEdit.value
           ? h(NInput, {
               ref: inputRef,
-              value: inputValue.value,
+              value: String(inputValue.value),
               onUpdateValue: (v) => {
                 inputValue.value = v
               },
@@ -67,13 +72,12 @@ const ShowOrEdit = defineComponent({
 export default defineComponent({
   setup() {
     const data = ref(createData())
+    const page = ref(1)
 
-    const getDataIndex = (key) => {
+    const getDataIndex = (key: number) => {
       return data.value.findIndex(item => item.key === key)
     }
-    const page = ref(1)
-
-    const handlePageChange = (curPage) => {
+    const handlePageChange = (curPage: number) => {
       page.value = curPage
     }
 
@@ -91,11 +95,11 @@ export default defineComponent({
           title: 'Name',
           key: 'name',
           width: 150,
-          render(row) {
+          render(row: RowData) {
             const index = getDataIndex(row.key)
             return h(ShowOrEdit, {
               value: row.name,
-              onUpdateValue(v) {
+              onUpdateValue(v: string) {
                 data.value[index].name = v
               }
             })
@@ -105,12 +109,12 @@ export default defineComponent({
           title: 'Age',
           key: 'age',
           width: 100,
-          render(row) {
+          render(row: RowData) {
             const index = getDataIndex(row.key)
             return h(ShowOrEdit, {
               value: row.age,
-              onUpdateValue(v) {
-                data.value[index].age = v
+              onUpdateValue(v: string) {
+                data.value[index].age = Number(v)
               }
             })
           }
@@ -118,11 +122,11 @@ export default defineComponent({
         {
           title: 'Address',
           key: 'address',
-          render(row) {
+          render(row: RowData) {
             const index = getDataIndex(row.key)
             return h(ShowOrEdit, {
               value: row.address,
-              onUpdateValue(v) {
+              onUpdateValue(v: string) {
                 data.value[index].address = v
               }
             })
@@ -132,4 +136,14 @@ export default defineComponent({
     }
   }
 })
-```
+</script>
+
+<template>
+  <n-data-table
+    :key="(row: RowData) => row.key"
+    :columns="columns"
+    :data="data"
+    :pagination="paginationRef"
+    :on-update:page="handlePageChange"
+  />
+</template>
diff --git a/src/data-table/demos/zhCN/index.demo-entry.md b/src/data-table/demos/zhCN/index.demo-entry.md
index 24dea2407f7..f25af678ec4 100644
--- a/src/data-table/demos/zhCN/index.demo-entry.md
+++ b/src/data-table/demos/zhCN/index.demo-entry.md
@@ -57,7 +57,7 @@ tree.vue
 flex-height.vue
 striped.vue
 simple-editable.vue
-switchable-editable
+switchable-editable.vue
 context-menu.vue
 async-expand.vue
 render-cell.vue
diff --git a/src/data-table/demos/zhCN/switchable-editable.demo.md b/src/data-table/demos/zhCN/switchable-editable.demo.vue
similarity index 67%
rename from src/data-table/demos/zhCN/switchable-editable.demo.md
rename to src/data-table/demos/zhCN/switchable-editable.demo.vue
index 5531dcb092f..39751f22ec0 100644
--- a/src/data-table/demos/zhCN/switchable-editable.demo.md
+++ b/src/data-table/demos/zhCN/switchable-editable.demo.vue
@@ -1,20 +1,25 @@
+<markdown>
 # 可切换的可编辑表格
+</markdown>
 
-```html
-<n-data-table
-  :key="(row) => row.key"
-  :columns="columns"
-  :data="data"
-  :pagination="paginationRef"
-  :on-update:page="handlePageChange"
-/>
-```
-
-```js
+<script lang="ts">
+import type { InputInst } from 'naive-ui'
+import type { PropType } from 'vue'
 import { NInput } from 'naive-ui'
 import { computed, defineComponent, h, nextTick, ref } from 'vue'
 
-function createData() {
+interface RowData {
+  key: number
+  name: string
+  age: number
+  address: string
+}
+
+interface OnUpdateValue {
+  (value: string): void
+}
+
+function createData(): RowData[] {
   return Array.from({ length: 100 }).map((_, index) => ({
     key: index,
     name: `John Brown ${index}`,
@@ -26,20 +31,20 @@ function createData() {
 const ShowOrEdit = defineComponent({
   props: {
     value: [String, Number],
-    onUpdateValue: [Function, Array]
+    onUpdateValue: [Function, Array] as PropType<OnUpdateValue>
   },
   setup(props) {
     const isEdit = ref(false)
-    const inputRef = ref(null)
+    const inputRef = ref<InputInst | null>(null)
     const inputValue = ref(props.value)
     function handleOnClick() {
       isEdit.value = true
       nextTick(() => {
-        inputRef.value.focus()
+        inputRef.value?.focus()
       })
     }
     function handleChange() {
-      props.onUpdateValue(inputValue.value)
+      props.onUpdateValue?.(String(inputValue.value))
       isEdit.value = false
     }
     return () =>
@@ -52,7 +57,7 @@ const ShowOrEdit = defineComponent({
         isEdit.value
           ? h(NInput, {
               ref: inputRef,
-              value: inputValue.value,
+              value: String(inputValue.value),
               onUpdateValue: (v) => {
                 inputValue.value = v
               },
@@ -69,10 +74,10 @@ export default defineComponent({
     const data = ref(createData())
     const page = ref(1)
 
-    const getDataIndex = (key) => {
+    const getDataIndex = (key: number) => {
       return data.value.findIndex(item => item.key === key)
     }
-    const handlePageChange = (curPage) => {
+    const handlePageChange = (curPage: number) => {
       page.value = curPage
     }
 
@@ -90,11 +95,11 @@ export default defineComponent({
           title: 'Name',
           key: 'name',
           width: 150,
-          render(row) {
+          render(row: RowData) {
             const index = getDataIndex(row.key)
             return h(ShowOrEdit, {
               value: row.name,
-              onUpdateValue(v) {
+              onUpdateValue(v: string) {
                 data.value[index].name = v
               }
             })
@@ -104,12 +109,12 @@ export default defineComponent({
           title: 'Age',
           key: 'age',
           width: 100,
-          render(row) {
+          render(row: RowData) {
             const index = getDataIndex(row.key)
             return h(ShowOrEdit, {
               value: row.age,
-              onUpdateValue(v) {
-                data.value[index].age = v
+              onUpdateValue(v: string) {
+                data.value[index].age = Number(v)
               }
             })
           }
@@ -117,11 +122,11 @@ export default defineComponent({
         {
           title: 'Address',
           key: 'address',
-          render(row) {
+          render(row: RowData) {
             const index = getDataIndex(row.key)
             return h(ShowOrEdit, {
               value: row.address,
-              onUpdateValue(v) {
+              onUpdateValue(v: string) {
                 data.value[index].address = v
               }
             })
@@ -131,4 +136,14 @@ export default defineComponent({
     }
   }
 })
-```
+</script>
+
+<template>
+  <n-data-table
+    :key="(row: RowData) => row.key"
+    :columns="columns"
+    :data="data"
+    :pagination="paginationRef"
+    :on-update:page="handlePageChange"
+  />
+</template>