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 01/15] 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 02/15] 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 03/15] 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>

From 4ec15e44a5b465938b398fca240813ed1ef8708e Mon Sep 17 00:00:00 2001
From: Artea <sepush@outlook.com>
Date: Mon, 13 Jan 2025 02:09:38 +0800
Subject: [PATCH 04/15] docs(data-table): controlled-mutiple-sorter ts demo

Signed-off-by: Artea <sepush@outlook.com>
---
 ...md => controlled-multiple-sorter.demo.vue} | 67 +++++++++++++------
 src/data-table/demos/enUS/index.demo-entry.md |  2 +-
 ...md => controlled-multiple-sorter.demo.vue} | 67 +++++++++++++------
 src/data-table/demos/zhCN/index.demo-entry.md |  2 +-
 4 files changed, 94 insertions(+), 44 deletions(-)
 rename src/data-table/demos/enUS/{controlled-multiple-sorter.demo.md => controlled-multiple-sorter.demo.vue} (64%)
 rename src/data-table/demos/zhCN/{controlled-multiple-sorter.demo.md => controlled-multiple-sorter.demo.vue} (64%)

diff --git a/src/data-table/demos/enUS/controlled-multiple-sorter.demo.md b/src/data-table/demos/enUS/controlled-multiple-sorter.demo.vue
similarity index 64%
rename from src/data-table/demos/enUS/controlled-multiple-sorter.demo.md
rename to src/data-table/demos/enUS/controlled-multiple-sorter.demo.vue
index 1a3b6a3b932..164a81cbe7b 100644
--- a/src/data-table/demos/enUS/controlled-multiple-sorter.demo.md
+++ b/src/data-table/demos/enUS/controlled-multiple-sorter.demo.vue
@@ -1,22 +1,30 @@
+<markdown>
 # Controlled multi-column sorting
 
 If column object's `sortOrder` is set to `'ascend'`, `'descend'` or `false`, the data table would be in controlled state.
 
 If you only want UI to display multiple sort state, you can leave `compare` empty.
+</markdown>
 
-```html
-<n-data-table
-  :columns="columns"
-  :data="data"
-  :pagination="pagination"
-  @update:sorter="handleUpdateSorter"
-/>
-```
-
-```js
+<script lang="ts">
+import type {
+  DataTableColumnKey,
+  DataTableColumns,
+  DataTableSortOrder,
+  DataTableSortState
+} from 'naive-ui'
 import { computed, defineComponent, ref } from 'vue'
 
-const data = [
+interface RowData {
+  key: number
+  name: string
+  age: number
+  chinese: number
+  math: number
+  english: number
+}
+
+const data: RowData[] = [
   {
     key: 0,
     name: 'John Brown',
@@ -53,16 +61,24 @@ const data = [
 
 export default defineComponent({
   setup() {
-    const sortStatesRef = ref([])
-    const sortKeyMapOrderRef = computed(() =>
-      sortStatesRef.value.reduce((result, { columnKey, order }) => {
-        result[columnKey] = order
-        return result
-      }, {})
+    const sortStatesRef = ref<DataTableSortState[]>([])
+    const sortKeyMapOrderRef = computed<
+      Record<DataTableColumnKey, DataTableSortOrder>
+    >(() =>
+      sortStatesRef.value.reduce(
+        (
+          result: Record<DataTableColumnKey, DataTableSortOrder>,
+          { columnKey, order }
+        ) => {
+          result[columnKey] = order
+          return result
+        },
+        {}
+      )
     )
     const paginationRef = ref({ pageSize: 5 })
 
-    const columnsRef = computed(() => [
+    const columnsRef = computed<DataTableColumns<RowData>>(() => [
       {
         title: 'Name',
         key: 'name'
@@ -104,9 +120,9 @@ export default defineComponent({
       }
     ])
 
-    function handleUpdateSorter(sorters) {
+    function handleUpdateSorter(sorters: DataTableSortState[]) {
       console.log(sorters)
-      sortStatesRef.value = [].concat(sorters)
+      sortStatesRef.value = ([] as DataTableSortState[]).concat(sorters)
     }
     return {
       columns: columnsRef,
@@ -116,4 +132,13 @@ export default defineComponent({
     }
   }
 })
-```
+</script>
+
+<template>
+  <n-data-table
+    :columns="columns"
+    :data="data"
+    :pagination="pagination"
+    @update:sorter="handleUpdateSorter"
+  />
+</template>
diff --git a/src/data-table/demos/enUS/index.demo-entry.md b/src/data-table/demos/enUS/index.demo-entry.md
index 4fba767196b..18791b9546b 100644
--- a/src/data-table/demos/enUS/index.demo-entry.md
+++ b/src/data-table/demos/enUS/index.demo-entry.md
@@ -38,7 +38,7 @@ group-header.vue
 controlled-page.vue
 controlled-filter.vue
 controlled-sorter.vue
-controlled-multiple-sorter
+controlled-multiple-sorter.vue
 fixed-header.vue
 fixed-header-column.vue
 summary.vue
diff --git a/src/data-table/demos/zhCN/controlled-multiple-sorter.demo.md b/src/data-table/demos/zhCN/controlled-multiple-sorter.demo.vue
similarity index 64%
rename from src/data-table/demos/zhCN/controlled-multiple-sorter.demo.md
rename to src/data-table/demos/zhCN/controlled-multiple-sorter.demo.vue
index 95c1ca70932..d89b6455759 100644
--- a/src/data-table/demos/zhCN/controlled-multiple-sorter.demo.md
+++ b/src/data-table/demos/zhCN/controlled-multiple-sorter.demo.vue
@@ -1,22 +1,30 @@
+<markdown>
 # 受控的多列排序
 
 如果列对象的 `sortOrder` 属性被设为 `'ascend'`、`'descend'` 或者 `false`，表格的排序将为受控状态。
 
 如果你只需要 UI 显示多列排序的状态，那么不传 `compare` 即可。
+</markdown>
 
-```html
-<n-data-table
-  :columns="columns"
-  :data="data"
-  :pagination="pagination"
-  @update:sorter="handleUpdateSorter"
-/>
-```
-
-```js
+<script lang="ts">
+import type {
+  DataTableColumnKey,
+  DataTableColumns,
+  DataTableSortOrder,
+  DataTableSortState
+} from 'naive-ui'
 import { computed, defineComponent, ref } from 'vue'
 
-const data = [
+interface RowData {
+  key: number
+  name: string
+  age: number
+  chinese: number
+  math: number
+  english: number
+}
+
+const data: RowData[] = [
   {
     key: 0,
     name: 'John Brown',
@@ -53,16 +61,24 @@ const data = [
 
 export default defineComponent({
   setup() {
-    const sortStatesRef = ref([])
-    const sortKeyMapOrderRef = computed(() =>
-      sortStatesRef.value.reduce((result, { columnKey, order }) => {
-        result[columnKey] = order
-        return result
-      }, {})
+    const sortStatesRef = ref<DataTableSortState[]>([])
+    const sortKeyMapOrderRef = computed<
+      Record<DataTableColumnKey, DataTableSortOrder>
+    >(() =>
+      sortStatesRef.value.reduce(
+        (
+          result: Record<DataTableColumnKey, DataTableSortOrder>,
+          { columnKey, order }
+        ) => {
+          result[columnKey] = order
+          return result
+        },
+        {}
+      )
     )
     const paginationRef = ref({ pageSize: 5 })
 
-    const columnsRef = computed(() => [
+    const columnsRef = computed<DataTableColumns<RowData>>(() => [
       {
         title: 'Name',
         key: 'name'
@@ -104,9 +120,9 @@ export default defineComponent({
       }
     ])
 
-    function handleUpdateSorter(sorters) {
+    function handleUpdateSorter(sorters: DataTableSortState[]) {
       console.log(sorters)
-      sortStatesRef.value = [].concat(sorters)
+      sortStatesRef.value = ([] as DataTableSortState[]).concat(sorters)
     }
     return {
       columns: columnsRef,
@@ -116,4 +132,13 @@ export default defineComponent({
     }
   }
 })
-```
+</script>
+
+<template>
+  <n-data-table
+    :columns="columns"
+    :data="data"
+    :pagination="pagination"
+    @update:sorter="handleUpdateSorter"
+  />
+</template>
diff --git a/src/data-table/demos/zhCN/index.demo-entry.md b/src/data-table/demos/zhCN/index.demo-entry.md
index f25af678ec4..8cb385c3da1 100644
--- a/src/data-table/demos/zhCN/index.demo-entry.md
+++ b/src/data-table/demos/zhCN/index.demo-entry.md
@@ -40,7 +40,7 @@ group-header.vue
 controlled-page.vue
 controlled-filter.vue
 controlled-sorter.vue
-controlled-multiple-sorter
+controlled-multiple-sorter.vue
 fixed-header.vue
 fixed-header-column.vue
 summary.vue

From 9d80ee3bca9c61d24c5dcffa4766aeb4e260345f Mon Sep 17 00:00:00 2001
From: Artea <sepush@outlook.com>
Date: Mon, 13 Jan 2025 02:50:03 +0800
Subject: [PATCH 05/15] fix(data-table): expose method `sort` prama type

---
 src/data-table/src/interface.ts  | 2 +-
 src/data-table/src/use-sorter.ts | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/data-table/src/interface.ts b/src/data-table/src/interface.ts
index b965367cd76..c1dda47c348 100644
--- a/src/data-table/src/interface.ts
+++ b/src/data-table/src/interface.ts
@@ -545,7 +545,7 @@ export interface DataTableInst {
   clearFilters: () => void
   clearSorter: () => void
   page: (page: number) => void
-  sort: (columnKey: ColumnKey, order: SortOrder) => void
+  sort: (columnKey: ColumnKey | null, order?: SortOrder) => void
   scrollTo: ScrollTo
   downloadCsv: (options?: CsvOptionsType) => void
   /** @deprecated it but just leave it here, it does no harm */
diff --git a/src/data-table/src/use-sorter.ts b/src/data-table/src/use-sorter.ts
index e86410fab25..56a5b086743 100644
--- a/src/data-table/src/use-sorter.ts
+++ b/src/data-table/src/use-sorter.ts
@@ -220,7 +220,10 @@ export function useSorter(
     uncontrolledSortStateRef.value = sortState
   }
 
-  function sort(columnKey: ColumnKey, order: SortOrder = 'ascend'): void {
+  function sort(
+    columnKey: ColumnKey | null,
+    order: SortOrder = 'ascend'
+  ): void {
     if (!columnKey) {
       clearSorter()
     }

From 1f2f462d36693cc0f871699f915a1faf738b98cd Mon Sep 17 00:00:00 2001
From: Artea <sepush@outlook.com>
Date: Mon, 13 Jan 2025 02:50:45 +0800
Subject: [PATCH 06/15] docs(data-table): mutiple-sorter ts demo

Signed-off-by: Artea <sepush@outlook.com>
---
 src/data-table/demos/enUS/index.demo-entry.md |  2 +-
 ...orter.demo.md => multiple-sorter.demo.vue} | 75 ++++++++++++-------
 src/data-table/demos/zhCN/index.demo-entry.md |  2 +-
 ...orter.demo.md => multiple-sorter.demo.vue} | 75 ++++++++++++-------
 4 files changed, 98 insertions(+), 56 deletions(-)
 rename src/data-table/demos/enUS/{multiple-sorter.demo.md => multiple-sorter.demo.vue} (63%)
 rename src/data-table/demos/zhCN/{multiple-sorter.demo.md => multiple-sorter.demo.vue} (63%)

diff --git a/src/data-table/demos/enUS/index.demo-entry.md b/src/data-table/demos/enUS/index.demo-entry.md
index 18791b9546b..aeef3b4ff06 100644
--- a/src/data-table/demos/enUS/index.demo-entry.md
+++ b/src/data-table/demos/enUS/index.demo-entry.md
@@ -29,7 +29,7 @@ row-props.vue
 merge-cell.vue
 filter-and-sorter
 pagination-behavior-on-filter.vue
-multiple-sorter
+multiple-sorter.vue
 column-draggable.vue
 select.vue
 select-single.vue
diff --git a/src/data-table/demos/enUS/multiple-sorter.demo.md b/src/data-table/demos/enUS/multiple-sorter.demo.vue
similarity index 63%
rename from src/data-table/demos/enUS/multiple-sorter.demo.md
rename to src/data-table/demos/enUS/multiple-sorter.demo.vue
index cac60221015..472f733b47a 100644
--- a/src/data-table/demos/enUS/multiple-sorter.demo.md
+++ b/src/data-table/demos/enUS/multiple-sorter.demo.vue
@@ -1,28 +1,24 @@
+<markdown>
 # Multiple column sorting
 
 Set `multiple` and `compare` on `sorter` to enable multiple column sorting. `multiple` is the priority of sorting (larger value means higher priority).
+</markdown>
 
-```html
-<n-space vertical :size="12">
-  <n-space>
-    <n-button @click="sortName">Sort By Name (Ascend)</n-button>
-    <n-button @click="filterAddress">Filter Address (London)</n-button>
-    <n-button @click="clearFilters">Clear Filters</n-button>
-    <n-button @click="clearSorter">Clear Sorter</n-button>
-  </n-space>
-  <n-data-table
-    ref="dataTableInst"
-    :columns="columns"
-    :data="data"
-    :pagination="pagination"
-  />
-</n-space>
-```
-
-```js
+<script lang="ts">
+import type { DataTableColumns, DataTableInst } from 'naive-ui'
 import { defineComponent, ref } from 'vue'
 
-const columns = [
+interface RowData {
+  key: number
+  name: string
+  age: number
+  address: string
+  chinese: number
+  math: number
+  english: number
+}
+
+const columns: DataTableColumns<RowData> = [
   {
     title: 'Name',
     key: 'name'
@@ -73,12 +69,12 @@ const columns = [
       }
     ],
     filter(value, row) {
-      return ~row.address.indexOf(value)
+      return Boolean(~row.address.indexOf(value as string))
     }
   }
 ]
 
-const data = [
+const data: RowData[] = [
   {
     key: 0,
     name: 'John Brown',
@@ -119,27 +115,52 @@ const data = [
 
 export default defineComponent({
   setup() {
-    const dataTableInstRef = ref(null)
+    const dataTableInstRef = ref<DataTableInst | null>(null)
     return {
       data,
       columns,
       dataTableInst: dataTableInstRef,
       pagination: ref({ pageSize: 5 }),
       filterAddress() {
-        dataTableInstRef.value.filter({
+        dataTableInstRef.value?.filter({
           address: ['London']
         })
       },
       sortName() {
-        dataTableInstRef.value.sort('name', 'ascend')
+        dataTableInstRef.value?.sort('name', 'ascend')
       },
       clearFilters() {
-        dataTableInstRef.value.filter(null)
+        dataTableInstRef.value?.filter(null)
       },
       clearSorter() {
-        dataTableInstRef.value.sort(null)
+        dataTableInstRef.value?.sort(null)
       }
     }
   }
 })
-```
+</script>
+
+<template>
+  <n-space vertical :size="12">
+    <n-space>
+      <n-button @click="sortName">
+        Sort By Name (Ascend)
+      </n-button>
+      <n-button @click="filterAddress">
+        Filter Address (London)
+      </n-button>
+      <n-button @click="clearFilters">
+        Clear Filters
+      </n-button>
+      <n-button @click="clearSorter">
+        Clear Sorter
+      </n-button>
+    </n-space>
+    <n-data-table
+      ref="dataTableInst"
+      :columns="columns"
+      :data="data"
+      :pagination="pagination"
+    />
+  </n-space>
+</template>
diff --git a/src/data-table/demos/zhCN/index.demo-entry.md b/src/data-table/demos/zhCN/index.demo-entry.md
index 8cb385c3da1..27837f36148 100644
--- a/src/data-table/demos/zhCN/index.demo-entry.md
+++ b/src/data-table/demos/zhCN/index.demo-entry.md
@@ -31,7 +31,7 @@ row-props.vue
 merge-cell.vue
 filter-and-sorter
 pagination-behavior-on-filter.vue
-multiple-sorter
+multiple-sorter.vue
 column-draggable.vue
 select.vue
 select-single.vue
diff --git a/src/data-table/demos/zhCN/multiple-sorter.demo.md b/src/data-table/demos/zhCN/multiple-sorter.demo.vue
similarity index 63%
rename from src/data-table/demos/zhCN/multiple-sorter.demo.md
rename to src/data-table/demos/zhCN/multiple-sorter.demo.vue
index eb5e143f1cf..f60f9123a1c 100644
--- a/src/data-table/demos/zhCN/multiple-sorter.demo.md
+++ b/src/data-table/demos/zhCN/multiple-sorter.demo.vue
@@ -1,28 +1,24 @@
+<markdown>
 # 多列排序
 
 为 `sorter` 设定 `multiple` 和 `compare` 来开启多列排序，其中 `multiple` 为多列排序的优先级，越高优先级越高。
+</markdown>
 
-```html
-<n-space vertical :size="12">
-  <n-space>
-    <n-button @click="sortName">Sort By Name (Ascend)</n-button>
-    <n-button @click="filterAddress">Filter Address (London)</n-button>
-    <n-button @click="clearFilters">Clear Filters</n-button>
-    <n-button @click="clearSorter">Clear Sorter</n-button>
-  </n-space>
-  <n-data-table
-    ref="dataTableInst"
-    :columns="columns"
-    :data="data"
-    :pagination="pagination"
-  />
-</n-space>
-```
-
-```js
+<script lang="ts">
+import type { DataTableColumns, DataTableInst } from 'naive-ui'
 import { defineComponent, ref } from 'vue'
 
-const columns = [
+interface RowData {
+  key: number
+  name: string
+  age: number
+  address: string
+  chinese: number
+  math: number
+  english: number
+}
+
+const columns: DataTableColumns<RowData> = [
   {
     title: 'Name',
     key: 'name'
@@ -73,12 +69,12 @@ const columns = [
       }
     ],
     filter(value, row) {
-      return ~row.address.indexOf(value)
+      return Boolean(~row.address.indexOf(value as string))
     }
   }
 ]
 
-const data = [
+const data: RowData[] = [
   {
     key: 0,
     name: 'John Brown',
@@ -119,27 +115,52 @@ const data = [
 
 export default defineComponent({
   setup() {
-    const dataTableInstRef = ref(null)
+    const dataTableInstRef = ref<DataTableInst | null>(null)
     return {
       data,
       columns,
       dataTableInst: dataTableInstRef,
       pagination: ref({ pageSize: 5 }),
       filterAddress() {
-        dataTableInstRef.value.filter({
+        dataTableInstRef.value?.filter({
           address: ['London']
         })
       },
       sortName() {
-        dataTableInstRef.value.sort('name', 'ascend')
+        dataTableInstRef.value?.sort('name', 'ascend')
       },
       clearFilters() {
-        dataTableInstRef.value.filter(null)
+        dataTableInstRef.value?.filter(null)
       },
       clearSorter() {
-        dataTableInstRef.value.sort(null)
+        dataTableInstRef.value?.sort(null)
       }
     }
   }
 })
-```
+</script>
+
+<template>
+  <n-space vertical :size="12">
+    <n-space>
+      <n-button @click="sortName">
+        Sort By Name (Ascend)
+      </n-button>
+      <n-button @click="filterAddress">
+        Filter Address (London)
+      </n-button>
+      <n-button @click="clearFilters">
+        Clear Filters
+      </n-button>
+      <n-button @click="clearSorter">
+        Clear Sorter
+      </n-button>
+    </n-space>
+    <n-data-table
+      ref="dataTableInst"
+      :columns="columns"
+      :data="data"
+      :pagination="pagination"
+    />
+  </n-space>
+</template>

From 148e46ddbfc5ab066e73454d74af2e469aecd53f Mon Sep 17 00:00:00 2001
From: Artea <sepush@outlook.com>
Date: Mon, 13 Jan 2025 03:04:06 +0800
Subject: [PATCH 07/15] docs(data-table): filter and sorter ts demo

Signed-off-by: Artea <sepush@outlook.com>
---
 ...ter.demo.md => filter-and-sorter.demo.vue} |  72 +++++++-----
 src/data-table/demos/enUS/index.demo-entry.md |   2 +-
 ...ter.demo.md => filter-and-sorter.demo.vue} |  70 +++++++-----
 .../demos/zhCN/filter-and-sortor.demo.md      | 108 ------------------
 src/data-table/demos/zhCN/index.demo-entry.md |   2 +-
 5 files changed, 91 insertions(+), 163 deletions(-)
 rename src/data-table/demos/enUS/{filter-and-sorter.demo.md => filter-and-sorter.demo.vue} (54%)
 rename src/data-table/demos/zhCN/{filter-and-sorter.demo.md => filter-and-sorter.demo.vue} (55%)
 delete mode 100644 src/data-table/demos/zhCN/filter-and-sortor.demo.md

diff --git a/src/data-table/demos/enUS/filter-and-sorter.demo.md b/src/data-table/demos/enUS/filter-and-sorter.demo.vue
similarity index 54%
rename from src/data-table/demos/enUS/filter-and-sorter.demo.md
rename to src/data-table/demos/enUS/filter-and-sorter.demo.vue
index 8c6e20e7612..dccd98ff50d 100644
--- a/src/data-table/demos/enUS/filter-and-sorter.demo.md
+++ b/src/data-table/demos/enUS/filter-and-sorter.demo.vue
@@ -1,26 +1,19 @@
-# Uncontrolled filter and sorter
+<mardown>
+  # Uncontrolled filter and sorter
+</mardown>
 
-```html
-<n-space vertical :size="12">
-  <n-space>
-    <n-button @click="sortName">Sort By Name (Ascend)</n-button>
-    <n-button @click="filterAddress">Filter Address (London)</n-button>
-    <n-button @click="clearFilters">Clear Filters</n-button>
-    <n-button @click="clearSorter">Clear Sorter</n-button>
-  </n-space>
-  <n-data-table
-    ref="table"
-    :columns="columns"
-    :data="data"
-    :pagination="pagination"
-  />
-</n-space>
-```
-
-```js
+<script lang="ts">
+import type { DataTableColumns, DataTableInst } from 'naive-ui'
 import { defineComponent, ref } from 'vue'
 
-const columns = [
+interface RowData {
+  key: number
+  name: string
+  age: number
+  address: string
+}
+
+const columns: DataTableColumns<RowData> = [
   {
     title: 'Name',
     key: 'name',
@@ -47,7 +40,7 @@ const columns = [
       }
     ],
     filter(value, row) {
-      return ~row.address.indexOf(value)
+      return Boolean(~row.address.indexOf(value as string))
     }
   }
 ]
@@ -81,7 +74,7 @@ const data = [
 
 export default defineComponent({
   setup() {
-    const tableRef = ref(null)
+    const tableRef = ref<DataTableInst | null>(null)
 
     return {
       table: tableRef,
@@ -89,20 +82,45 @@ export default defineComponent({
       columns,
       pagination: { pageSize: 5 },
       filterAddress() {
-        tableRef.value.filter({
+        tableRef.value?.filter({
           address: ['London']
         })
       },
       sortName() {
-        tableRef.value.sort('name', 'ascend')
+        tableRef.value?.sort('name', 'ascend')
       },
       clearFilters() {
-        tableRef.value.filter(null)
+        tableRef.value?.filter(null)
       },
       clearSorter() {
-        tableRef.value.sort(null)
+        tableRef.value?.sort(null)
       }
     }
   }
 })
-```
+</script>
+
+<template>
+  <n-space vertical :size="12">
+    <n-space>
+      <n-button @click="sortName">
+        Sort By Name (Ascend)
+      </n-button>
+      <n-button @click="filterAddress">
+        Filter Address (London)
+      </n-button>
+      <n-button @click="clearFilters">
+        Clear Filters
+      </n-button>
+      <n-button @click="clearSorter">
+        Clear Sorter
+      </n-button>
+    </n-space>
+    <n-data-table
+      ref="table"
+      :columns="columns"
+      :data="data"
+      :pagination="pagination"
+    />
+  </n-space>
+</template>
diff --git a/src/data-table/demos/enUS/index.demo-entry.md b/src/data-table/demos/enUS/index.demo-entry.md
index aeef3b4ff06..9668fcfa8fc 100644
--- a/src/data-table/demos/enUS/index.demo-entry.md
+++ b/src/data-table/demos/enUS/index.demo-entry.md
@@ -27,7 +27,7 @@ border.vue
 size.vue
 row-props.vue
 merge-cell.vue
-filter-and-sorter
+filter-and-sorter.vue
 pagination-behavior-on-filter.vue
 multiple-sorter.vue
 column-draggable.vue
diff --git a/src/data-table/demos/zhCN/filter-and-sorter.demo.md b/src/data-table/demos/zhCN/filter-and-sorter.demo.vue
similarity index 55%
rename from src/data-table/demos/zhCN/filter-and-sorter.demo.md
rename to src/data-table/demos/zhCN/filter-and-sorter.demo.vue
index 3448f39838e..5034dbbd303 100644
--- a/src/data-table/demos/zhCN/filter-and-sorter.demo.md
+++ b/src/data-table/demos/zhCN/filter-and-sorter.demo.vue
@@ -1,26 +1,19 @@
+<markdown>
 # 非受控过滤 & 排序
+</markdown>
 
-```html
-<n-space vertical :size="12">
-  <n-space>
-    <n-button @click="sortName">Sort By Name (Ascend)</n-button>
-    <n-button @click="filterAddress">Filter Address (London)</n-button>
-    <n-button @click="clearFilters">Clear Filters</n-button>
-    <n-button @click="clearSorter">Clear Sorter</n-button>
-  </n-space>
-  <n-data-table
-    ref="table"
-    :columns="columns"
-    :data="data"
-    :pagination="pagination"
-  />
-</n-space>
-```
-
-```js
+<script lang="ts">
+import type { DataTableColumns, DataTableInst } from 'naive-ui'
 import { defineComponent, ref } from 'vue'
 
-const columns = [
+interface RowData {
+  key: number
+  name: string
+  age: number
+  address: string
+}
+
+const columns: DataTableColumns<RowData> = [
   {
     title: 'Name',
     key: 'name',
@@ -47,7 +40,7 @@ const columns = [
       }
     ],
     filter(value, row) {
-      return ~row.address.indexOf(value)
+      return Boolean(~row.address.indexOf(value as string))
     }
   }
 ]
@@ -81,7 +74,7 @@ const data = [
 
 export default defineComponent({
   setup() {
-    const tableRef = ref(null)
+    const tableRef = ref<DataTableInst | null>(null)
 
     return {
       table: tableRef,
@@ -89,20 +82,45 @@ export default defineComponent({
       columns,
       pagination: { pageSize: 5 },
       filterAddress() {
-        tableRef.value.filter({
+        tableRef.value?.filter({
           address: ['London']
         })
       },
       sortName() {
-        tableRef.value.sort('name', 'ascend')
+        tableRef.value?.sort('name', 'ascend')
       },
       clearFilters() {
-        tableRef.value.filter(null)
+        tableRef.value?.filter(null)
       },
       clearSorter() {
-        tableRef.value.sort(null)
+        tableRef.value?.sort(null)
       }
     }
   }
 })
-```
+</script>
+
+<template>
+  <n-space vertical :size="12">
+    <n-space>
+      <n-button @click="sortName">
+        Sort By Name (Ascend)
+      </n-button>
+      <n-button @click="filterAddress">
+        Filter Address (London)
+      </n-button>
+      <n-button @click="clearFilters">
+        Clear Filters
+      </n-button>
+      <n-button @click="clearSorter">
+        Clear Sorter
+      </n-button>
+    </n-space>
+    <n-data-table
+      ref="table"
+      :columns="columns"
+      :data="data"
+      :pagination="pagination"
+    />
+  </n-space>
+</template>
diff --git a/src/data-table/demos/zhCN/filter-and-sortor.demo.md b/src/data-table/demos/zhCN/filter-and-sortor.demo.md
deleted file mode 100644
index 3448f39838e..00000000000
--- a/src/data-table/demos/zhCN/filter-and-sortor.demo.md
+++ /dev/null
@@ -1,108 +0,0 @@
-# 非受控过滤 & 排序
-
-```html
-<n-space vertical :size="12">
-  <n-space>
-    <n-button @click="sortName">Sort By Name (Ascend)</n-button>
-    <n-button @click="filterAddress">Filter Address (London)</n-button>
-    <n-button @click="clearFilters">Clear Filters</n-button>
-    <n-button @click="clearSorter">Clear Sorter</n-button>
-  </n-space>
-  <n-data-table
-    ref="table"
-    :columns="columns"
-    :data="data"
-    :pagination="pagination"
-  />
-</n-space>
-```
-
-```js
-import { defineComponent, ref } from 'vue'
-
-const columns = [
-  {
-    title: 'Name',
-    key: 'name',
-    defaultSortOrder: 'ascend',
-    sorter: 'default'
-  },
-  {
-    title: 'Age',
-    key: 'age',
-    sorter: (row1, row2) => row1.age - row2.age
-  },
-  {
-    title: 'Address',
-    key: 'address',
-    defaultFilterOptionValues: ['London', 'New York'],
-    filterOptions: [
-      {
-        label: 'London',
-        value: 'London'
-      },
-      {
-        label: 'New York',
-        value: 'New York'
-      }
-    ],
-    filter(value, row) {
-      return ~row.address.indexOf(value)
-    }
-  }
-]
-
-const data = [
-  {
-    key: 0,
-    name: 'John Brown',
-    age: 32,
-    address: 'New York No. 1 Lake Park'
-  },
-  {
-    key: 1,
-    name: 'Jim Green',
-    age: 42,
-    address: 'London No. 1 Lake Park'
-  },
-  {
-    key: 2,
-    name: 'Joe Black',
-    age: 32,
-    address: 'Sidney No. 1 Lake Park'
-  },
-  {
-    key: 3,
-    name: 'Jim Red',
-    age: 32,
-    address: 'London No. 2 Lake Park'
-  }
-]
-
-export default defineComponent({
-  setup() {
-    const tableRef = ref(null)
-
-    return {
-      table: tableRef,
-      data,
-      columns,
-      pagination: { pageSize: 5 },
-      filterAddress() {
-        tableRef.value.filter({
-          address: ['London']
-        })
-      },
-      sortName() {
-        tableRef.value.sort('name', 'ascend')
-      },
-      clearFilters() {
-        tableRef.value.filter(null)
-      },
-      clearSorter() {
-        tableRef.value.sort(null)
-      }
-    }
-  }
-})
-```
diff --git a/src/data-table/demos/zhCN/index.demo-entry.md b/src/data-table/demos/zhCN/index.demo-entry.md
index 27837f36148..5ae377dc47f 100644
--- a/src/data-table/demos/zhCN/index.demo-entry.md
+++ b/src/data-table/demos/zhCN/index.demo-entry.md
@@ -29,7 +29,7 @@ border.vue
 size.vue
 row-props.vue
 merge-cell.vue
-filter-and-sorter
+filter-and-sorter.vue
 pagination-behavior-on-filter.vue
 multiple-sorter.vue
 column-draggable.vue

From 13659f9609a053ce972501247ebb92e0e7dc898f Mon Sep 17 00:00:00 2001
From: Artea <sepush@outlook.com>
Date: Mon, 13 Jan 2025 04:22:00 +0800
Subject: [PATCH 08/15] docs(data-table): async ts demo&export
 DataTableFilterOptionValue

Signed-off-by: Artea <sepush@outlook.com>
---
 ...ajax-usage.demo.md => ajax-usage.demo.vue} | 145 +++++++++++-------
 src/data-table/demos/enUS/index.demo-entry.md |   2 +-
 ...ajax-usage.demo.md => ajax-usage.demo.vue} | 143 ++++++++++-------
 src/data-table/demos/zhCN/index.demo-entry.md |   2 +-
 src/data-table/index.ts                       |   1 +
 5 files changed, 184 insertions(+), 109 deletions(-)
 rename src/data-table/demos/enUS/{ajax-usage.demo.md => ajax-usage.demo.vue} (54%)
 rename src/data-table/demos/zhCN/{ajax-usage.demo.md => ajax-usage.demo.vue} (55%)

diff --git a/src/data-table/demos/enUS/ajax-usage.demo.md b/src/data-table/demos/enUS/ajax-usage.demo.vue
similarity index 54%
rename from src/data-table/demos/enUS/ajax-usage.demo.md
rename to src/data-table/demos/enUS/ajax-usage.demo.vue
index 81de148ddb0..acf6f8347ab 100644
--- a/src/data-table/demos/enUS/ajax-usage.demo.md
+++ b/src/data-table/demos/enUS/ajax-usage.demo.vue
@@ -1,31 +1,33 @@
-# Async
+<markdown>
+  # Async
+</markdown>
 
-```html
-<n-data-table
-  remote
-  ref="table"
-  :columns="columns"
-  :data="data"
-  :loading="loading"
-  :pagination="pagination"
-  :row-key="rowKey"
-  @update:sorter="handleSorterChange"
-  @update:filters="handleFiltersChange"
-  @update:page="handlePageChange"
-/>
-```
-
-```js
+<script lang="ts">
+import type {
+  DataTableColumn,
+  DataTableColumns,
+  DataTableFilterOptionValue,
+  DataTableFilterState,
+  DataTableSortOrder,
+  DataTableSortState,
+  PaginationInfo
+} from 'naive-ui'
 import { defineComponent, onMounted, reactive, ref } from 'vue'
 
-const column1 = {
+interface RowData {
+  column1: number
+  column2: number
+  column3: string
+}
+
+const column1: DataTableColumn<RowData> = {
   title: 'column1',
   key: 'column1',
   sorter: true,
   sortOrder: false
 }
 
-const column2 = {
+const column2: DataTableColumn<RowData> = {
   title: 'column2',
   key: 'column2',
   filter: true,
@@ -42,7 +44,7 @@ const column2 = {
   ]
 }
 
-const columns = [
+const columns: DataTableColumns<RowData> = [
   column1,
   column2,
   {
@@ -61,12 +63,30 @@ const data = Array.from({ length: 987 })
     }
   })
 
-function query(page, pageSize = 10, order = 'ascend', filterValues = []) {
+interface QueryParams {
+  page: number
+  pageSize: number
+  order?: DataTableSortOrder
+  filterValues?: DataTableFilterOptionValue[] | null
+}
+
+interface QueryResult {
+  pageCount: number
+  data: RowData[]
+  total: number
+}
+
+function query({
+  page,
+  pageSize = 10,
+  order = 'ascend',
+  filterValues = []
+}: QueryParams): Promise<QueryResult> {
   return new Promise((resolve) => {
     const copiedData = data.map(v => v)
     const orderedData = order === 'descend' ? copiedData.reverse() : copiedData
-    const filteredData = filterValues.length
-      ? orderedData.filter(row => filterValues.includes(row.column2))
+    const filteredData = filterValues?.length
+      ? orderedData.filter(row => filterValues?.includes(row.column2))
       : orderedData
     const pagedData = filteredData.slice((page - 1) * pageSize, page * pageSize)
     const total = filteredData.length
@@ -85,7 +105,7 @@ function query(page, pageSize = 10, order = 'ascend', filterValues = []) {
 
 export default defineComponent({
   setup() {
-    const dataRef = ref([])
+    const dataRef = ref<RowData[]>([])
     const loadingRef = ref(true)
     const columnsRef = ref(columns)
     const column1Reactive = reactive(column1)
@@ -94,18 +114,19 @@ export default defineComponent({
       page: 1,
       pageCount: 1,
       pageSize: 10,
-      prefix({ itemCount }) {
+      itemCount: 0,
+      prefix({ itemCount }: PaginationInfo) {
         return `Total is ${itemCount}.`
       }
     })
 
     onMounted(() => {
-      query(
-        paginationReactive.page,
-        paginationReactive.pageSize,
-        column1Reactive.sortOrder,
-        column2Reactive.filterOptionValues
-      ).then((data) => {
+      query({
+        page: paginationReactive.page,
+        pageSize: paginationReactive.pageSize,
+        order: column1Reactive.sortOrder,
+        filterValues: column2Reactive.filterOptionValues
+      }).then((data) => {
         dataRef.value = data.data
         paginationReactive.pageCount = data.pageCount
         paginationReactive.itemCount = data.total
@@ -120,19 +141,19 @@ export default defineComponent({
       column2: column2Reactive,
       pagination: paginationReactive,
       loading: loadingRef,
-      rowKey(rowData) {
+      rowKey(rowData: RowData) {
         return rowData.column1
       },
-      handleSorterChange(sorter) {
+      handleSorterChange(sorter: DataTableSortState) {
         if (!sorter || sorter.columnKey === 'column1') {
           if (!loadingRef.value) {
             loadingRef.value = true
-            query(
-              paginationReactive.page,
-              paginationReactive.pageSize,
-              !sorter ? false : sorter.order,
-              column2Reactive.filterOptionValues
-            ).then((data) => {
+            query({
+              page: paginationReactive.page,
+              pageSize: paginationReactive.pageSize,
+              order: !sorter ? false : sorter.order,
+              filterValues: column2Reactive.filterOptionValues
+            }).then((data) => {
               column1Reactive.sortOrder = !sorter ? false : sorter.order
               dataRef.value = data.data
               paginationReactive.pageCount = data.pageCount
@@ -142,16 +163,18 @@ export default defineComponent({
           }
         }
       },
-      handleFiltersChange(filters) {
+      handleFiltersChange(filters: DataTableFilterState) {
         if (!loadingRef.value) {
           loadingRef.value = true
-          const filterValues = filters.column2 || []
-          query(
-            paginationReactive.page,
-            paginationReactive.pageSize,
-            column1Reactive.sortOrder,
+          const filterValues = Array.isArray(filters.column2)
+            ? filters.column2
+            : []
+          query({
+            page: paginationReactive.page,
+            pageSize: paginationReactive.pageSize,
+            order: column1Reactive.sortOrder,
             filterValues
-          ).then((data) => {
+          }).then((data) => {
             column2Reactive.filterOptionValues = filterValues
             dataRef.value = data.data
             paginationReactive.pageCount = data.pageCount
@@ -160,15 +183,15 @@ export default defineComponent({
           })
         }
       },
-      handlePageChange(currentPage) {
+      handlePageChange(currentPage: number) {
         if (!loadingRef.value) {
           loadingRef.value = true
-          query(
-            currentPage,
-            paginationReactive.pageSize,
-            column1Reactive.sortOrder,
-            column2Reactive.filterOptionValues
-          ).then((data) => {
+          query({
+            page: currentPage,
+            pageSize: paginationReactive.pageSize,
+            order: column1Reactive.sortOrder,
+            filterValues: column2Reactive.filterOptionValues
+          }).then((data) => {
             dataRef.value = data.data
             paginationReactive.page = currentPage
             paginationReactive.pageCount = data.pageCount
@@ -180,4 +203,18 @@ export default defineComponent({
     }
   }
 })
-```
+</script>
+
+<template>
+  <n-data-table
+    remote
+    :columns="columns"
+    :data="data"
+    :loading="loading"
+    :pagination="pagination"
+    :row-key="rowKey"
+    @update:sorter="handleSorterChange"
+    @update:filters="handleFiltersChange"
+    @update:page="handlePageChange"
+  />
+</template>
diff --git a/src/data-table/demos/enUS/index.demo-entry.md b/src/data-table/demos/enUS/index.demo-entry.md
index 9668fcfa8fc..076b3d3021f 100644
--- a/src/data-table/demos/enUS/index.demo-entry.md
+++ b/src/data-table/demos/enUS/index.demo-entry.md
@@ -47,7 +47,7 @@ ellipsis-tooltip.vue
 expand.vue
 render-header.vue
 custom-style.vue
-ajax-usage
+ajax-usage.vue
 virtual.vue
 virtual-x.vue
 custom-filter-menu.vue
diff --git a/src/data-table/demos/zhCN/ajax-usage.demo.md b/src/data-table/demos/zhCN/ajax-usage.demo.vue
similarity index 55%
rename from src/data-table/demos/zhCN/ajax-usage.demo.md
rename to src/data-table/demos/zhCN/ajax-usage.demo.vue
index 18f7f8a8f2b..640028a6e41 100644
--- a/src/data-table/demos/zhCN/ajax-usage.demo.md
+++ b/src/data-table/demos/zhCN/ajax-usage.demo.vue
@@ -1,31 +1,33 @@
+<markdown>
 # 异步
+</markdown>
 
-```html
-<n-data-table
-  remote
-  ref="table"
-  :columns="columns"
-  :data="data"
-  :loading="loading"
-  :pagination="pagination"
-  :row-key="rowKey"
-  @update:sorter="handleSorterChange"
-  @update:filters="handleFiltersChange"
-  @update:page="handlePageChange"
-/>
-```
-
-```js
+<script lang="ts">
+import type {
+  DataTableColumn,
+  DataTableColumns,
+  DataTableFilterOptionValue,
+  DataTableFilterState,
+  DataTableSortOrder,
+  DataTableSortState,
+  PaginationInfo
+} from 'naive-ui'
 import { defineComponent, onMounted, reactive, ref } from 'vue'
 
-const column1 = {
+interface RowData {
+  column1: number
+  column2: number
+  column3: string
+}
+
+const column1: DataTableColumn<RowData> = {
   title: 'column1',
   key: 'column1',
   sorter: true,
   sortOrder: false
 }
 
-const column2 = {
+const column2: DataTableColumn<RowData> = {
   title: 'column2',
   key: 'column2',
   filter: true,
@@ -42,7 +44,7 @@ const column2 = {
   ]
 }
 
-const columns = [
+const columns: DataTableColumns<RowData> = [
   column1,
   column2,
   {
@@ -61,12 +63,30 @@ const data = Array.from({ length: 987 })
     }
   })
 
-function query(page, pageSize = 10, order = 'ascend', filterValues = []) {
+interface QueryParams {
+  page: number
+  pageSize: number
+  order?: DataTableSortOrder
+  filterValues?: DataTableFilterOptionValue[] | null
+}
+
+interface QueryResult {
+  pageCount: number
+  data: RowData[]
+  total: number
+}
+
+function query({
+  page,
+  pageSize = 10,
+  order = 'ascend',
+  filterValues = []
+}: QueryParams): Promise<QueryResult> {
   return new Promise((resolve) => {
     const copiedData = data.map(v => v)
     const orderedData = order === 'descend' ? copiedData.reverse() : copiedData
-    const filteredData = filterValues.length
-      ? orderedData.filter(row => filterValues.includes(row.column2))
+    const filteredData = filterValues?.length
+      ? orderedData.filter(row => filterValues?.includes(row.column2))
       : orderedData
     const pagedData = filteredData.slice((page - 1) * pageSize, page * pageSize)
     const total = filteredData.length
@@ -85,7 +105,7 @@ function query(page, pageSize = 10, order = 'ascend', filterValues = []) {
 
 export default defineComponent({
   setup() {
-    const dataRef = ref([])
+    const dataRef = ref<RowData[]>([])
     const loadingRef = ref(true)
     const columnsRef = ref(columns)
     const column1Reactive = reactive(column1)
@@ -94,18 +114,19 @@ export default defineComponent({
       page: 1,
       pageCount: 1,
       pageSize: 10,
-      prefix({ itemCount }) {
+      itemCount: 0,
+      prefix({ itemCount }: PaginationInfo) {
         return `Total is ${itemCount}.`
       }
     })
 
     onMounted(() => {
-      query(
-        paginationReactive.page,
-        paginationReactive.pageSize,
-        column1Reactive.sortOrder,
-        column2Reactive.filterOptionValues
-      ).then((data) => {
+      query({
+        page: paginationReactive.page,
+        pageSize: paginationReactive.pageSize,
+        order: column1Reactive.sortOrder,
+        filterValues: column2Reactive.filterOptionValues
+      }).then((data) => {
         dataRef.value = data.data
         paginationReactive.pageCount = data.pageCount
         paginationReactive.itemCount = data.total
@@ -120,19 +141,19 @@ export default defineComponent({
       column2: column2Reactive,
       pagination: paginationReactive,
       loading: loadingRef,
-      rowKey(rowData) {
+      rowKey(rowData: RowData) {
         return rowData.column1
       },
-      handleSorterChange(sorter) {
+      handleSorterChange(sorter: DataTableSortState) {
         if (!sorter || sorter.columnKey === 'column1') {
           if (!loadingRef.value) {
             loadingRef.value = true
-            query(
-              paginationReactive.page,
-              paginationReactive.pageSize,
-              !sorter ? false : sorter.order,
-              column2Reactive.filterOptionValues
-            ).then((data) => {
+            query({
+              page: paginationReactive.page,
+              pageSize: paginationReactive.pageSize,
+              order: !sorter ? false : sorter.order,
+              filterValues: column2Reactive.filterOptionValues
+            }).then((data) => {
               column1Reactive.sortOrder = !sorter ? false : sorter.order
               dataRef.value = data.data
               paginationReactive.pageCount = data.pageCount
@@ -142,16 +163,18 @@ export default defineComponent({
           }
         }
       },
-      handleFiltersChange(filters) {
+      handleFiltersChange(filters: DataTableFilterState) {
         if (!loadingRef.value) {
           loadingRef.value = true
-          const filterValues = filters.column2 || []
-          query(
-            paginationReactive.page,
-            paginationReactive.pageSize,
-            column1Reactive.sortOrder,
+          const filterValues = Array.isArray(filters.column2)
+            ? filters.column2
+            : []
+          query({
+            page: paginationReactive.page,
+            pageSize: paginationReactive.pageSize,
+            order: column1Reactive.sortOrder,
             filterValues
-          ).then((data) => {
+          }).then((data) => {
             column2Reactive.filterOptionValues = filterValues
             dataRef.value = data.data
             paginationReactive.pageCount = data.pageCount
@@ -160,15 +183,15 @@ export default defineComponent({
           })
         }
       },
-      handlePageChange(currentPage) {
+      handlePageChange(currentPage: number) {
         if (!loadingRef.value) {
           loadingRef.value = true
-          query(
-            currentPage,
-            paginationReactive.pageSize,
-            column1Reactive.sortOrder,
-            column2Reactive.filterOptionValues
-          ).then((data) => {
+          query({
+            page: currentPage,
+            pageSize: paginationReactive.pageSize,
+            order: column1Reactive.sortOrder,
+            filterValues: column2Reactive.filterOptionValues
+          }).then((data) => {
             dataRef.value = data.data
             paginationReactive.page = currentPage
             paginationReactive.pageCount = data.pageCount
@@ -180,4 +203,18 @@ export default defineComponent({
     }
   }
 })
-```
+</script>
+
+<template>
+  <n-data-table
+    remote
+    :columns="columns"
+    :data="data"
+    :loading="loading"
+    :pagination="pagination"
+    :row-key="rowKey"
+    @update:sorter="handleSorterChange"
+    @update:filters="handleFiltersChange"
+    @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 5ae377dc47f..37405b50d9d 100644
--- a/src/data-table/demos/zhCN/index.demo-entry.md
+++ b/src/data-table/demos/zhCN/index.demo-entry.md
@@ -49,7 +49,7 @@ ellipsis-tooltip.vue
 expand.vue
 render-header.vue
 custom-style.vue
-ajax-usage
+ajax-usage.vue
 virtual.vue
 virtual-x.vue
 custom-filter-menu.vue
diff --git a/src/data-table/index.ts b/src/data-table/index.ts
index 6e44afd22db..a32c5f98e7a 100644
--- a/src/data-table/index.ts
+++ b/src/data-table/index.ts
@@ -11,6 +11,7 @@ export type {
   CreateRowProps as DataTableCreateRowProps,
   CreateSummary as DataTableCreateSummary,
   TableExpandColumn as DataTableExpandColumn,
+  FilterOptionValue as DataTableFilterOptionValue,
   FilterState as DataTableFilterState,
   DataTableInst,
   DataTableProps,

From 125b6badfd5245f76675847fbe267e1f5e40d0f7 Mon Sep 17 00:00:00 2001
From: Artea <sepush@outlook.com>
Date: Mon, 13 Jan 2025 13:55:11 +0800
Subject: [PATCH 09/15] fix: typo of filter-and-sorter demo

Signed-off-by: Artea <sepush@outlook.com>
---
 src/data-table/demos/enUS/filter-and-sorter.demo.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/data-table/demos/enUS/filter-and-sorter.demo.vue b/src/data-table/demos/enUS/filter-and-sorter.demo.vue
index dccd98ff50d..c229d588fa3 100644
--- a/src/data-table/demos/enUS/filter-and-sorter.demo.vue
+++ b/src/data-table/demos/enUS/filter-and-sorter.demo.vue
@@ -1,6 +1,6 @@
-<mardown>
+<markdown>
   # Uncontrolled filter and sorter
-</mardown>
+</markdown>
 
 <script lang="ts">
 import type { DataTableColumns, DataTableInst } from 'naive-ui'

From 518c9d2d73b9160fa249e7976348bba8fd89dbb1 Mon Sep 17 00:00:00 2001
From: YAYALUOYA <yayaluoya@sina.com>
Date: Mon, 9 Dec 2024 15:25:36 +0800
Subject: [PATCH 10/15] Update index.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修改了社区精选资源中文文档
---
 demo/pages/docs/community/zhCN/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/demo/pages/docs/community/zhCN/index.md b/demo/pages/docs/community/zhCN/index.md
index d63e93107cc..0ee25165e03 100644
--- a/demo/pages/docs/community/zhCN/index.md
+++ b/demo/pages/docs/community/zhCN/index.md
@@ -22,4 +22,4 @@ Naive UI 是统一设计规范的高质量 Vue 组件库，我们倾向于只提
 | [Dumogu-admin](https://admin.dumogu.top/base-naive-ui/) | 一个基于Vue3、Vite5、Naive UI, 简洁干净后台管理模板，方便二次开发，易于上手，只有基础功能。 |
 | [chatgpt-web](https://github.com/Chanzhaoyu/chatgpt-web) | 使用 Express 和 Vue3 搭建的 ChatGPT 演示网页 |
 | [pro-components-naive-ui](https://github.com/Zheng-Changfu/pro-components-naive-ui) | 基于 Naive UI 二次封装, 基于原有组件扩展了更多功能 |
-| [vue3-dynamic-form](https://vue3-dynamic-form.dumogu.top/) | 一个基于Vue3、Naive UI, 的动态表单设计器，实现了很多基础控件，能非常方便的自定义控件。 |
+| [vue3-dynamic-form](https://github.com/yayaluoya/vue3-dynamic-form) | 一个基于Vue3、Naive UI, 的动态表单设计器，实现了很多基础控件，能非常方便的自定义控件。 |

From 63b664c07ddaf6d1f01f6cb7f938e6cb586085da Mon Sep 17 00:00:00 2001
From: YAYALUOYA <yayaluoya@sina.com>
Date: Mon, 9 Dec 2024 15:26:46 +0800
Subject: [PATCH 11/15] Update index.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修改了社区精选资源的英文文档
---
 demo/pages/docs/community/enUS/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/demo/pages/docs/community/enUS/index.md b/demo/pages/docs/community/enUS/index.md
index 24b6206fb01..370baa35124 100644
--- a/demo/pages/docs/community/enUS/index.md
+++ b/demo/pages/docs/community/enUS/index.md
@@ -22,4 +22,4 @@ If you want to contribute excellent resources, please contact 07akioni or amadeu
 | [Dumogu-admin](https://admin.dumogu.top/base-naive-ui/) | Vue3, Vite5, Naive UI, Minimalist clean background management template. |
 | [chatgpt-web](https://github.com/Chanzhaoyu/chatgpt-web) | ChatGPT demo web page built with Express and Vue3 |
 | [pro-components-naive-ui](https://github.com/Zheng-Changfu/pro-components-naive-ui) | Based on Naive UI secondary encapsulation, more functions are extended on the original components |
-| [vue3-dynamic-form](https://vue3-dynamic-form.dumogu.top/) | A dynamic form designer based on Vue3, Naive UI, to implement a lot of basic controls, can be very convenient to customize the control. |
+| [vue3-dynamic-form](https://github.com/yayaluoya/vue3-dynamic-form) | A dynamic form designer based on Vue3, Naive UI, to implement a lot of basic controls, can be very convenient to customize the control. |

From 8a47030f8e5268afffa8956b404f8cbf78e833f5 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Fri, 20 Dec 2024 14:03:27 +0800
Subject: [PATCH 12/15] docs: fixes changelog

---
 CHANGELOG.en-US.md | 3 ++-
 CHANGELOG.zh-CN.md | 7 +++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 742f704ca8d..e3aafc826d9 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -1,6 +1,6 @@
 # CHANGELOG
 
-## NEXT_VERSION
+## 2.41.0
 
 ### Breaking Changes
 
@@ -9,6 +9,7 @@
 ### i18n
 
 - Add kmKH locale.
+- Add ugCN locale.
 
 ### Features
 
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 2740c468397..dd6c97db9d9 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -1,6 +1,8 @@
 # CHANGELOG
 
-## NEXT_VERSION
+## 2.41.0
+
+`2025-01-05`
 
 ### Breaking Changes
 
@@ -9,10 +11,11 @@
 ### i18n
 
 - 添加 kmKH 国际化
+- 添加 ugCN 国际化
 
 ### Features
 
-- `n-modal` 新增 `draggable` 属性，关闭 [#6525](https://github.com/tusen-ai/naive-ui/issues/6525)，[#5792](https://github.com/tusen-ai/naive-ui/issues/5792)，[#5711](https://github.com/tusen-ai/naive-ui/issues/5711)，[#5501](https://github.com/tusen-ai/naive-ui/issues/5501)，[#2152](https://github.com/tusen-ai/naive-ui/issues/2152)
+- `n-modal` 新增 `draggable` 属性，关闭 [#6525](https://github.com/tusen-ai/naive-ui/issues/6525)、[#5792](https://github.com/tusen-ai/naive-ui/issues/5792)、[#5711](https://github.com/tusen-ai/naive-ui/issues/5711)、[#5501](https://github.com/tusen-ai/naive-ui/issues/5501)、[#2152](https://github.com/tusen-ai/naive-ui/issues/2152)
 - `useDialog` 支持 `draggable` 参数
 - `useModal` 支持 `draggable` 参数
 

From 19017ff3cf7a464a0704f750caebad9bc5fc0194 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Sun, 5 Jan 2025 22:14:41 +0800
Subject: [PATCH 13/15] docs: complete locale chart

---
 demo/pages/docs/i18n/enUS/index.md | 65 +++++++++++++++---------------
 demo/pages/docs/i18n/zhCN/index.md | 65 +++++++++++++++---------------
 2 files changed, 66 insertions(+), 64 deletions(-)

diff --git a/demo/pages/docs/i18n/enUS/index.md b/demo/pages/docs/i18n/enUS/index.md
index a299f2a466d..83f88c4a4fa 100644
--- a/demo/pages/docs/i18n/enUS/index.md
+++ b/demo/pages/docs/i18n/enUS/index.md
@@ -44,38 +44,39 @@ PRs are welcomed for locales that are not supported yet!
 
 The following list is sorted by 'Config' column.
 
-| Language                   | Config | Date config | Version |
-| -------------------------- | ------ | ----------- | ------- |
-| Arabic (العربية)           | arDZ   | dateArDZ    | 2.34.0  |
-| Azerbaijani (Azərbaycanca) | azAZ   | dateAzAZ    | 2.39.0  |
-| Czech (Czechia)            | csCZ   | dateCsCz    | 2.38.2  |
-| German (Germany)           | deDE   | dateDeDE    |         |
-| English (British)          | enGB   | dateEnGB    | 2.25.1  |
-| English                    | enUS   | dateEnUS    |         |
-| Esperanto                  | eo     | dateEo      | 2.25.2  |
-| Spanish (Argentina)        | esAR   | dateEsAR    | 2.24.2  |
-| Estonian                   | etEE   | dateEtEE    | 2.38.0  |
-| Persian                    | faIR   | dateFaIR    | 2.34.4  |
-| French                     | frFR   | dateFrFR    |         |
-| Bahasa Indonesia           | idID   | dateIdID    |         |
-| Italiano                   | itIT   | dateItIT    | 2.24.2  |
-| Japanese                   | jaJP   | dateJaJP    |         |
-| Korean (South Korea)       | koKR   | dateKoKR    | 2.28.1  |
-| Norwegian Bokmål (Norway)  | nbNO   | dateNbNO    |         |
-| Dutch (Netherlands)        | nlNL   | dateNlNL    | 2.29.0  |
-| Polish (Poland)            | plPL   | datePlPL    | 2.25.2  |
-| Portuguese (Brazil)        | ptBR   | datePtBR    | 2.28.1  |
-| Russian                    | ruRU   | dateRuRU    |         |
-| Slovak                     | skSK   | dateSkSK    | 2.25.3  |
-| Swedish                    | svSE   | dateSvSE    | 2.35.0  |
-| Thai (Thailand)            | thTH   | dateThTH    | 2.27.0  |
-| Turkish                    | trTR   | dateTrTR    | 2.34.0  |
-| Ukrainian                  | ukUA   | dateUkUA    |         |
-| Uzbek (Uzbekistan)         | uzUZ   | dateUzUZ    | 2.39.0  |
-| Vietnamese (Vietnam)       | viVN   | dateViVN    | 2.30.7  |
-| Chinese (Simplified)       | zhCN   | dateZhCN    |         |
-| Chinese (Traditional)      | zhTW   | dateZhTW    |         |
-| Uyghur(China)              | ugCN   | dateUgCN    |         |
+| Language                   | Config | Date config | Version      |
+| -------------------------- | ------ | ----------- | ------------ |
+| Arabic (العربية)           | arDZ   | dateArDZ    | 2.34.0       |
+| Azerbaijani (Azərbaycanca) | azAZ   | dateAzAZ    | 2.39.0       |
+| Czech (Czechia)            | csCZ   | dateCsCz    | 2.38.2       |
+| German (Germany)           | deDE   | dateDeDE    |              |
+| English (British)          | enGB   | dateEnGB    | 2.25.1       |
+| English                    | enUS   | dateEnUS    |              |
+| Esperanto                  | eo     | dateEo      | 2.25.2       |
+| Spanish (Argentina)        | esAR   | dateEsAR    | 2.24.2       |
+| Estonian                   | etEE   | dateEtEE    | 2.38.0       |
+| Persian                    | faIR   | dateFaIR    | 2.34.4       |
+| French                     | frFR   | dateFrFR    |              |
+| Bahasa Indonesia           | idID   | dateIdID    |              |
+| Italiano                   | itIT   | dateItIT    | 2.24.2       |
+| Japanese                   | jaJP   | dateJaJP    |              |
+| Khmer (Cambodia)           | kmKH   | dateKmKH    | NEXT_VERSION |
+| Korean (South Korea)       | koKR   | dateKoKR    | 2.28.1       |
+| Norwegian Bokmål (Norway)  | nbNO   | dateNbNO    |              |
+| Dutch (Netherlands)        | nlNL   | dateNlNL    | 2.29.0       |
+| Polish (Poland)            | plPL   | datePlPL    | 2.25.2       |
+| Portuguese (Brazil)        | ptBR   | datePtBR    | 2.28.1       |
+| Russian                    | ruRU   | dateRuRU    |              |
+| Slovak                     | skSK   | dateSkSK    | 2.25.3       |
+| Swedish                    | svSE   | dateSvSE    | 2.35.0       |
+| Thai (Thailand)            | thTH   | dateThTH    | 2.27.0       |
+| Turkish                    | trTR   | dateTrTR    | 2.34.0       |
+| Uyghur (China)             | ugCN   | dateUgCN    |              |
+| Ukrainian                  | ukUA   | dateUkUA    |              |
+| Uzbek (Uzbekistan)         | uzUZ   | dateUzUZ    | 2.39.0       |
+| Vietnamese (Vietnam)       | viVN   | dateViVN    | 2.30.7       |
+| Chinese (Simplified)       | zhCN   | dateZhCN    |              |
+| Chinese (Traditional)      | zhTW   | dateZhTW    |              |
 
 ## Customize the existing locale
 
diff --git a/demo/pages/docs/i18n/zhCN/index.md b/demo/pages/docs/i18n/zhCN/index.md
index da60c6fdc63..2031530047b 100644
--- a/demo/pages/docs/i18n/zhCN/index.md
+++ b/demo/pages/docs/i18n/zhCN/index.md
@@ -44,38 +44,39 @@ Naive-ui 通过使用 `n-config-provider` 调整语言，默认情况下所有
 
 以下列表依据“配置”列排序。
 
-| 语言               | 配置 | 日期配置 | 版本   |
-| ------------------ | ---- | -------- | ------ |
-| 阿拉伯语           | arDZ | dateArDZ | 2.34.0 |
-| 阿塞拜疆语         | azAZ | dateAzAZ | 2.39.0 |
-| 捷克语（捷克）     | csCZ | dateCsCz | 2.38.2 |
-| 德语               | deDE | dateDeDE |        |
-| 英国英语           | enGB | dateEnGB | 2.25.1 |
-| 英语               | enUS | dateEnUS |        |
-| 世界语             | eo   | dateEo   | 2.25.2 |
-| 西班牙语（阿根廷） | esAR | dateEsAR | 2.24.2 |
-| 爱沙尼亚语         | etEE | dateEtEE | 2.38.0 |
-| 波斯语             | faIR | dateFaIR | 2.34.4 |
-| 法语               | frFR | dateFrFR |        |
-| 印度尼西亚语       | idID | dateIdID |        |
-| 意大利语           | itIT | dateItIT | 2.24.2 |
-| 日语               | jaJP | dateJaJP |        |
-| 韩语               | koKR | dateKoKR | 2.28.1 |
-| 书面挪威语         | nbNO | dateNbNO |        |
-| 荷兰语（荷兰）     | nlNL | dateNlNL | 2.29.0 |
-| 波兰语（波兰）     | plPL | datePlPL | 2.25.2 |
-| 葡萄牙语 (巴西)    | ptBR | datePtBR | 2.28.1 |
-| 俄罗斯语           | ruRU | dateRuRU |        |
-| 斯洛伐克语         | skSK | dateSkSK | 2.25.3 |
-| 瑞典語             | svSE | dateSvSE | 2.35.0 |
-| 泰语（泰国）       | thTH | dateThTH | 2.27.0 |
-| 土耳其语           | trTR | dateTrTR | 2.34.0 |
-| 乌克兰语           | ukUA | dateUkUA |        |
-| 乌兹别克语         | uzUZ | dateUzUZ | 2.39.0 |
-| 越南语（越南）     | viVN | dateViVN | 2.30.7 |
-| 简体中文           | zhCN | dateZhCN |        |
-| 繁体中文           | zhTW | dateZhTW |        |
-| 维吾尔语           | ugCN | dateUgCN |        |
+| 语言               | 配置 | 日期配置 | 版本         |
+| ------------------ | ---- | -------- | ------------ |
+| 阿拉伯语           | arDZ | dateArDZ | 2.34.0       |
+| 阿塞拜疆语         | azAZ | dateAzAZ | 2.39.0       |
+| 捷克语（捷克）     | csCZ | dateCsCz | 2.38.2       |
+| 德语               | deDE | dateDeDE |              |
+| 英国英语           | enGB | dateEnGB | 2.25.1       |
+| 英语               | enUS | dateEnUS |              |
+| 世界语             | eo   | dateEo   | 2.25.2       |
+| 西班牙语（阿根廷） | esAR | dateEsAR | 2.24.2       |
+| 爱沙尼亚语         | etEE | dateEtEE | 2.38.0       |
+| 波斯语             | faIR | dateFaIR | 2.34.4       |
+| 法语               | frFR | dateFrFR |              |
+| 印度尼西亚语       | idID | dateIdID |              |
+| 意大利语           | itIT | dateItIT | 2.24.2       |
+| 日语               | jaJP | dateJaJP |              |
+| 高棉语（柬埔寨）   | kmKH | dateKmKH | NEXT_VERSION |
+| 韩语               | koKR | dateKoKR | 2.28.1       |
+| 书面挪威语         | nbNO | dateNbNO |              |
+| 荷兰语（荷兰）     | nlNL | dateNlNL | 2.29.0       |
+| 波兰语（波兰）     | plPL | datePlPL | 2.25.2       |
+| 葡萄牙语 (巴西)    | ptBR | datePtBR | 2.28.1       |
+| 俄罗斯语           | ruRU | dateRuRU |              |
+| 斯洛伐克语         | skSK | dateSkSK | 2.25.3       |
+| 瑞典語             | svSE | dateSvSE | 2.35.0       |
+| 泰语（泰国）       | thTH | dateThTH | 2.27.0       |
+| 土耳其语           | trTR | dateTrTR | 2.34.0       |
+| 维吾尔语           | ugCN | dateUgCN | NEXT_VERSION |
+| 乌克兰语           | ukUA | dateUkUA |              |
+| 乌兹别克语         | uzUZ | dateUzUZ | 2.39.0       |
+| 越南语（越南）     | viVN | dateViVN | 2.30.7       |
+| 简体中文           | zhCN | dateZhCN |              |
+| 繁体中文           | zhTW | dateZhTW |              |
 
 ## 在现有国际化基础上调整
 

From 0165591eae03ab44167e8cecce92ee5717b8ce81 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Sun, 5 Jan 2025 22:47:49 +0800
Subject: [PATCH 14/15] 2.41.0

---
 demo/pages/docs/i18n/enUS/index.md        | 66 +++++++++++------------
 demo/pages/docs/i18n/zhCN/index.md        | 66 +++++++++++------------
 package.json                              |  2 +-
 src/dialog/demos/enUS/index.demo-entry.md |  2 +-
 src/dialog/demos/zhCN/index.demo-entry.md |  2 +-
 src/modal/demos/enUS/index.demo-entry.md  |  2 +-
 src/modal/demos/zhCN/index.demo-entry.md  |  2 +-
 src/version.ts                            |  2 +-
 8 files changed, 72 insertions(+), 72 deletions(-)

diff --git a/demo/pages/docs/i18n/enUS/index.md b/demo/pages/docs/i18n/enUS/index.md
index 83f88c4a4fa..6f2e0e88d21 100644
--- a/demo/pages/docs/i18n/enUS/index.md
+++ b/demo/pages/docs/i18n/enUS/index.md
@@ -44,39 +44,39 @@ PRs are welcomed for locales that are not supported yet!
 
 The following list is sorted by 'Config' column.
 
-| Language                   | Config | Date config | Version      |
-| -------------------------- | ------ | ----------- | ------------ |
-| Arabic (العربية)           | arDZ   | dateArDZ    | 2.34.0       |
-| Azerbaijani (Azərbaycanca) | azAZ   | dateAzAZ    | 2.39.0       |
-| Czech (Czechia)            | csCZ   | dateCsCz    | 2.38.2       |
-| German (Germany)           | deDE   | dateDeDE    |              |
-| English (British)          | enGB   | dateEnGB    | 2.25.1       |
-| English                    | enUS   | dateEnUS    |              |
-| Esperanto                  | eo     | dateEo      | 2.25.2       |
-| Spanish (Argentina)        | esAR   | dateEsAR    | 2.24.2       |
-| Estonian                   | etEE   | dateEtEE    | 2.38.0       |
-| Persian                    | faIR   | dateFaIR    | 2.34.4       |
-| French                     | frFR   | dateFrFR    |              |
-| Bahasa Indonesia           | idID   | dateIdID    |              |
-| Italiano                   | itIT   | dateItIT    | 2.24.2       |
-| Japanese                   | jaJP   | dateJaJP    |              |
-| Khmer (Cambodia)           | kmKH   | dateKmKH    | NEXT_VERSION |
-| Korean (South Korea)       | koKR   | dateKoKR    | 2.28.1       |
-| Norwegian Bokmål (Norway)  | nbNO   | dateNbNO    |              |
-| Dutch (Netherlands)        | nlNL   | dateNlNL    | 2.29.0       |
-| Polish (Poland)            | plPL   | datePlPL    | 2.25.2       |
-| Portuguese (Brazil)        | ptBR   | datePtBR    | 2.28.1       |
-| Russian                    | ruRU   | dateRuRU    |              |
-| Slovak                     | skSK   | dateSkSK    | 2.25.3       |
-| Swedish                    | svSE   | dateSvSE    | 2.35.0       |
-| Thai (Thailand)            | thTH   | dateThTH    | 2.27.0       |
-| Turkish                    | trTR   | dateTrTR    | 2.34.0       |
-| Uyghur (China)             | ugCN   | dateUgCN    |              |
-| Ukrainian                  | ukUA   | dateUkUA    |              |
-| Uzbek (Uzbekistan)         | uzUZ   | dateUzUZ    | 2.39.0       |
-| Vietnamese (Vietnam)       | viVN   | dateViVN    | 2.30.7       |
-| Chinese (Simplified)       | zhCN   | dateZhCN    |              |
-| Chinese (Traditional)      | zhTW   | dateZhTW    |              |
+| Language                   | Config | Date config | Version |
+| -------------------------- | ------ | ----------- | ------- |
+| Arabic (العربية)           | arDZ   | dateArDZ    | 2.34.0  |
+| Azerbaijani (Azərbaycanca) | azAZ   | dateAzAZ    | 2.39.0  |
+| Czech (Czechia)            | csCZ   | dateCsCz    | 2.38.2  |
+| German (Germany)           | deDE   | dateDeDE    |         |
+| English (British)          | enGB   | dateEnGB    | 2.25.1  |
+| English                    | enUS   | dateEnUS    |         |
+| Esperanto                  | eo     | dateEo      | 2.25.2  |
+| Spanish (Argentina)        | esAR   | dateEsAR    | 2.24.2  |
+| Estonian                   | etEE   | dateEtEE    | 2.38.0  |
+| Persian                    | faIR   | dateFaIR    | 2.34.4  |
+| French                     | frFR   | dateFrFR    |         |
+| Bahasa Indonesia           | idID   | dateIdID    |         |
+| Italiano                   | itIT   | dateItIT    | 2.24.2  |
+| Japanese                   | jaJP   | dateJaJP    |         |
+| Khmer (Cambodia)           | kmKH   | dateKmKH    | 2.41.0  |
+| Korean (South Korea)       | koKR   | dateKoKR    | 2.28.1  |
+| Norwegian Bokmål (Norway)  | nbNO   | dateNbNO    |         |
+| Dutch (Netherlands)        | nlNL   | dateNlNL    | 2.29.0  |
+| Polish (Poland)            | plPL   | datePlPL    | 2.25.2  |
+| Portuguese (Brazil)        | ptBR   | datePtBR    | 2.28.1  |
+| Russian                    | ruRU   | dateRuRU    |         |
+| Slovak                     | skSK   | dateSkSK    | 2.25.3  |
+| Swedish                    | svSE   | dateSvSE    | 2.35.0  |
+| Thai (Thailand)            | thTH   | dateThTH    | 2.27.0  |
+| Turkish                    | trTR   | dateTrTR    | 2.34.0  |
+| Uyghur (China)             | ugCN   | dateUgCN    |         |
+| Ukrainian                  | ukUA   | dateUkUA    |         |
+| Uzbek (Uzbekistan)         | uzUZ   | dateUzUZ    | 2.39.0  |
+| Vietnamese (Vietnam)       | viVN   | dateViVN    | 2.30.7  |
+| Chinese (Simplified)       | zhCN   | dateZhCN    |         |
+| Chinese (Traditional)      | zhTW   | dateZhTW    |         |
 
 ## Customize the existing locale
 
diff --git a/demo/pages/docs/i18n/zhCN/index.md b/demo/pages/docs/i18n/zhCN/index.md
index 2031530047b..95ccf61c2d2 100644
--- a/demo/pages/docs/i18n/zhCN/index.md
+++ b/demo/pages/docs/i18n/zhCN/index.md
@@ -44,39 +44,39 @@ Naive-ui 通过使用 `n-config-provider` 调整语言，默认情况下所有
 
 以下列表依据“配置”列排序。
 
-| 语言               | 配置 | 日期配置 | 版本         |
-| ------------------ | ---- | -------- | ------------ |
-| 阿拉伯语           | arDZ | dateArDZ | 2.34.0       |
-| 阿塞拜疆语         | azAZ | dateAzAZ | 2.39.0       |
-| 捷克语（捷克）     | csCZ | dateCsCz | 2.38.2       |
-| 德语               | deDE | dateDeDE |              |
-| 英国英语           | enGB | dateEnGB | 2.25.1       |
-| 英语               | enUS | dateEnUS |              |
-| 世界语             | eo   | dateEo   | 2.25.2       |
-| 西班牙语（阿根廷） | esAR | dateEsAR | 2.24.2       |
-| 爱沙尼亚语         | etEE | dateEtEE | 2.38.0       |
-| 波斯语             | faIR | dateFaIR | 2.34.4       |
-| 法语               | frFR | dateFrFR |              |
-| 印度尼西亚语       | idID | dateIdID |              |
-| 意大利语           | itIT | dateItIT | 2.24.2       |
-| 日语               | jaJP | dateJaJP |              |
-| 高棉语（柬埔寨）   | kmKH | dateKmKH | NEXT_VERSION |
-| 韩语               | koKR | dateKoKR | 2.28.1       |
-| 书面挪威语         | nbNO | dateNbNO |              |
-| 荷兰语（荷兰）     | nlNL | dateNlNL | 2.29.0       |
-| 波兰语（波兰）     | plPL | datePlPL | 2.25.2       |
-| 葡萄牙语 (巴西)    | ptBR | datePtBR | 2.28.1       |
-| 俄罗斯语           | ruRU | dateRuRU |              |
-| 斯洛伐克语         | skSK | dateSkSK | 2.25.3       |
-| 瑞典語             | svSE | dateSvSE | 2.35.0       |
-| 泰语（泰国）       | thTH | dateThTH | 2.27.0       |
-| 土耳其语           | trTR | dateTrTR | 2.34.0       |
-| 维吾尔语           | ugCN | dateUgCN | NEXT_VERSION |
-| 乌克兰语           | ukUA | dateUkUA |              |
-| 乌兹别克语         | uzUZ | dateUzUZ | 2.39.0       |
-| 越南语（越南）     | viVN | dateViVN | 2.30.7       |
-| 简体中文           | zhCN | dateZhCN |              |
-| 繁体中文           | zhTW | dateZhTW |              |
+| 语言               | 配置 | 日期配置 | 版本   |
+| ------------------ | ---- | -------- | ------ |
+| 阿拉伯语           | arDZ | dateArDZ | 2.34.0 |
+| 阿塞拜疆语         | azAZ | dateAzAZ | 2.39.0 |
+| 捷克语（捷克）     | csCZ | dateCsCz | 2.38.2 |
+| 德语               | deDE | dateDeDE |        |
+| 英国英语           | enGB | dateEnGB | 2.25.1 |
+| 英语               | enUS | dateEnUS |        |
+| 世界语             | eo   | dateEo   | 2.25.2 |
+| 西班牙语（阿根廷） | esAR | dateEsAR | 2.24.2 |
+| 爱沙尼亚语         | etEE | dateEtEE | 2.38.0 |
+| 波斯语             | faIR | dateFaIR | 2.34.4 |
+| 法语               | frFR | dateFrFR |        |
+| 印度尼西亚语       | idID | dateIdID |        |
+| 意大利语           | itIT | dateItIT | 2.24.2 |
+| 日语               | jaJP | dateJaJP |        |
+| 高棉语（柬埔寨）   | kmKH | dateKmKH | 2.41.0 |
+| 韩语               | koKR | dateKoKR | 2.28.1 |
+| 书面挪威语         | nbNO | dateNbNO |        |
+| 荷兰语（荷兰）     | nlNL | dateNlNL | 2.29.0 |
+| 波兰语（波兰）     | plPL | datePlPL | 2.25.2 |
+| 葡萄牙语 (巴西)    | ptBR | datePtBR | 2.28.1 |
+| 俄罗斯语           | ruRU | dateRuRU |        |
+| 斯洛伐克语         | skSK | dateSkSK | 2.25.3 |
+| 瑞典語             | svSE | dateSvSE | 2.35.0 |
+| 泰语（泰国）       | thTH | dateThTH | 2.27.0 |
+| 土耳其语           | trTR | dateTrTR | 2.34.0 |
+| 维吾尔语           | ugCN | dateUgCN | 2.41.0 |
+| 乌克兰语           | ukUA | dateUkUA |        |
+| 乌兹别克语         | uzUZ | dateUzUZ | 2.39.0 |
+| 越南语（越南）     | viVN | dateViVN | 2.30.7 |
+| 简体中文           | zhCN | dateZhCN |        |
+| 繁体中文           | zhTW | dateZhTW |        |
 
 ## 在现有国际化基础上调整
 
diff --git a/package.json b/package.json
index 82a4066a248..937bf3eec17 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "naive-ui",
-  "version": "2.40.4",
+  "version": "2.41.0",
   "packageManager": "pnpm@9.5.0",
   "description": "A Vue 3 Component Library. Fairly Complete, Theme Customizable, Uses TypeScript, Fast",
   "author": "07akioni",
diff --git a/src/dialog/demos/enUS/index.demo-entry.md b/src/dialog/demos/enUS/index.demo-entry.md
index 43c07334add..7ac9f3bb7a0 100644
--- a/src/dialog/demos/enUS/index.demo-entry.md
+++ b/src/dialog/demos/enUS/index.demo-entry.md
@@ -76,7 +76,7 @@ use-dialog-reactive-list.vue
 | content | `string \| (() => VNodeChild)` | `undefined` | Content, can be a render function. |  |
 | contentClass | `string` | `undefined` | The class name of the content. | 2.38.2 |
 | contentStyle | `Object \| string` | `undefined` | The style of the content. | 2.38.2 |
-| draggable | `boolean \| { bounds?: 'none' }` | `false` | Whether it is draggable. | NEXT_VERSION |
+| draggable | `boolean \| { bounds?: 'none' }` | `false` | Whether it is draggable. | 2.41.0 |
 | iconPlacement | `'left' \| 'top'` | `'left'` | Icon placement. |  |
 | icon | `() => VNodeChild` | `undefined` | `Render` function of `icon`. |  |
 | loading | `boolean` | `false` | Whether to display `loading` status. |  |
diff --git a/src/dialog/demos/zhCN/index.demo-entry.md b/src/dialog/demos/zhCN/index.demo-entry.md
index a37754a9555..a2a675f4690 100644
--- a/src/dialog/demos/zhCN/index.demo-entry.md
+++ b/src/dialog/demos/zhCN/index.demo-entry.md
@@ -78,7 +78,7 @@ rtl-debug.vue
 | content | `string \| (() => VNodeChild)` | `undefined` | 对话框内容，可以是渲染函数 |  |
 | contentClass | `string` | `undefined` | 内容的类名 | 2.38.2 |
 | contentStyle | `Object \| string` | `undefined` | 内容的样式 | 2.38.2 |
-| draggable | `boolean \| { bounds?: 'none' }` | `false` | 是否可拖拽 | NEXT_VERSION |
+| draggable | `boolean \| { bounds?: 'none' }` | `false` | 是否可拖拽 | 2.41.0 |
 | iconPlacement | `'left' \| 'top'` | `'left'` | 图标的位置 |  |
 | icon | `() => VNodeChild` | `undefined` | 对话框 `icon`, 需要是渲染函数 |  |
 | loading | `boolean` | `false` | 是否显示 `loading` 状态 |  |
diff --git a/src/modal/demos/enUS/index.demo-entry.md b/src/modal/demos/enUS/index.demo-entry.md
index baaebe3b368..17982469c3a 100644
--- a/src/modal/demos/enUS/index.demo-entry.md
+++ b/src/modal/demos/enUS/index.demo-entry.md
@@ -59,7 +59,7 @@ Provided since `2.38.0`.
 | block-scroll | `boolean` | `true` | Whether to disabled body scrolling when it's active. | 2.28.3 |
 | close-on-esc | `boolean` | `true` | Whether to close modal on Esc is pressed. | 2.24.2 |
 | display-directive | `'if' \| 'show'` | `'if'` | Use which directive to control the rendering of modal body. |  |
-| draggable | `boolean \| { bounds?: 'window' }` | `false` | Whether the modal is draggable. Make its position not bound inside window using `bounds === 'none'`. | NEXT_VERSION |
+| draggable | `boolean \| { bounds?: 'window' }` | `false` | Whether the modal is draggable. Make its position not bound inside window using `bounds === 'none'`. | 2.41.0 |
 | mask-closable | `boolean` | `true` | Whether to emit `hide` event when click mask. |  |
 | preset | `'dialog' \| 'card'` | `undefined` | The preset of `n-modal`. |  |
 | show | `boolean` | `false` | Whether to show modal. |  |
diff --git a/src/modal/demos/zhCN/index.demo-entry.md b/src/modal/demos/zhCN/index.demo-entry.md
index 4d195265d61..a12443ca797 100644
--- a/src/modal/demos/zhCN/index.demo-entry.md
+++ b/src/modal/demos/zhCN/index.demo-entry.md
@@ -74,7 +74,7 @@ mask-click-debug.vue
 | block-scroll | `boolean` | `true` | 是否在打开时禁用 body 滚动 | 2.28.3 |
 | close-on-esc | `boolean` | `true` | 是否在摁下 Esc 键的时候关闭 Modal | 2.24.2 |
 | display-directive | `'if' \| 'show'` | `'if'` | 使用何种指令控制模态框主体的条件渲染 |  |
-| draggable | `boolean \| { bounds?: 'none' }` | `false` | 是否可拖拽，`bounds === 'none'` 时拖拽可超出视口 | NEXT_VERSION |
+| draggable | `boolean \| { bounds?: 'none' }` | `false` | 是否可拖拽，`bounds === 'none'` 时拖拽可超出视口 | 2.41.0 |
 | mask-closable | `boolean` | `true` | 点击遮罩时是否发出 `update:show` 事件 |  |
 | preset | `'dialog' \| 'card'` | `undefined` | 模态框使用何种预设 |  |
 | show | `boolean` | `false` | 是否展示 Modal |  |
diff --git a/src/version.ts b/src/version.ts
index cb39e3fae16..4b54002a318 100644
--- a/src/version.ts
+++ b/src/version.ts
@@ -1 +1 @@
-export default '2.40.4'
+export default '2.41.0'

From b0bef7729e47179547ef7b19efd2ef81779f6b4e Mon Sep 17 00:00:00 2001
From: Artea <sepush@outlook.com>
Date: Mon, 13 Jan 2025 14:33:24 +0800
Subject: [PATCH 15/15] fix: lint

Signed-off-by: Artea <sepush@outlook.com>
---
 src/_utils/env/is-jsdom.ts                     |  2 +-
 src/avatar/src/Avatar.tsx                      |  8 ++++----
 src/back-top/src/BackTop.tsx                   |  4 ++--
 src/carousel/src/utils/index.ts                |  8 ++++----
 src/data-table/tests/DataTable.spec.tsx        | 14 +++++++-------
 src/date-picker/src/panel/use-dual-calendar.ts |  6 +++---
 src/date-picker/src/utils.ts                   | 16 ++++++++--------
 src/ellipsis/src/Ellipsis.tsx                  |  2 +-
 src/mention/src/Mention.tsx                    |  4 ++--
 src/mention/src/utils.ts                       | 10 +++++-----
 src/popover/src/PopoverBody.tsx                |  4 ++--
 src/qr-code/src/qrcodegen.ts                   | 12 ++++++------
 src/tree/src/Tree.tsx                          |  6 +++---
 src/watermark/src/Watermark.tsx                | 12 ++++++------
 14 files changed, 54 insertions(+), 54 deletions(-)

diff --git a/src/_utils/env/is-jsdom.ts b/src/_utils/env/is-jsdom.ts
index 7a4dfa43b52..09336d83a0f 100644
--- a/src/_utils/env/is-jsdom.ts
+++ b/src/_utils/env/is-jsdom.ts
@@ -4,7 +4,7 @@ export function isJsdom(): boolean {
   if (_isJsdom === undefined) {
     _isJsdom
       = navigator.userAgent.includes('Node.js')
-      || navigator.userAgent.includes('jsdom')
+        || navigator.userAgent.includes('jsdom')
   }
   return _isJsdom
 }
diff --git a/src/avatar/src/Avatar.tsx b/src/avatar/src/Avatar.tsx
index 84473833e02..67f36919549 100644
--- a/src/avatar/src/Avatar.tsx
+++ b/src/avatar/src/Avatar.tsx
@@ -281,10 +281,10 @@ export default defineComponent({
     let img: VNodeChild
     const placeholderNode
       = !loaded
-      && !hasLoadError
-      && (this.renderPlaceholder
-        ? this.renderPlaceholder()
-        : this.$slots.placeholder?.())
+        && !hasLoadError
+        && (this.renderPlaceholder
+          ? this.renderPlaceholder()
+          : this.$slots.placeholder?.())
 
     if (this.hasLoadError) {
       img = this.renderFallback
diff --git a/src/back-top/src/BackTop.tsx b/src/back-top/src/BackTop.tsx
index 225d28bbeda..5bc074eb88a 100644
--- a/src/back-top/src/BackTop.tsx
+++ b/src/back-top/src/BackTop.tsx
@@ -158,8 +158,8 @@ export default defineComponent({
       scrollListenerRegistered = true
       const scrollEl
         = props.target?.()
-        || unwrapElement(props.listenTo)
-        || getScrollParent(placeholderRef.value)
+          || unwrapElement(props.listenTo)
+          || getScrollParent(placeholderRef.value)
       if (!scrollEl) {
         if (__DEV__) {
           warn(
diff --git a/src/carousel/src/utils/index.ts b/src/carousel/src/utils/index.ts
index c377eac5574..204fd166d61 100644
--- a/src/carousel/src/utils/index.ts
+++ b/src/carousel/src/utils/index.ts
@@ -9,12 +9,12 @@ export function calculateSize(element: HTMLElement, innerOnly?: boolean): Size {
     const style = getComputedStyle(element)
     width
       = width
-      - Number.parseFloat(style.getPropertyValue('padding-left'))
-      - Number.parseFloat(style.getPropertyValue('padding-right'))
+        - Number.parseFloat(style.getPropertyValue('padding-left'))
+        - Number.parseFloat(style.getPropertyValue('padding-right'))
     height
       = height
-      - Number.parseFloat(style.getPropertyValue('padding-top'))
-      - Number.parseFloat(style.getPropertyValue('padding-bottom'))
+        - Number.parseFloat(style.getPropertyValue('padding-top'))
+        - Number.parseFloat(style.getPropertyValue('padding-bottom'))
   }
   return { width, height }
 }
diff --git a/src/data-table/tests/DataTable.spec.tsx b/src/data-table/tests/DataTable.spec.tsx
index fea293061db..3f4d490ce48 100644
--- a/src/data-table/tests/DataTable.spec.tsx
+++ b/src/data-table/tests/DataTable.spec.tsx
@@ -388,8 +388,8 @@ describe('n-data-table', () => {
     ): Promise<boolean> => {
       const matchResult
         = (await checkIsMatched('.chinese-col', targets[0]))
-        && (await checkIsMatched('.math-col', targets[1]))
-        && (await checkIsMatched('.english-col', targets[2]))
+          && (await checkIsMatched('.math-col', targets[1]))
+          && (await checkIsMatched('.english-col', targets[2]))
 
       return matchResult
     }
@@ -517,11 +517,11 @@ describe('n-data-table', () => {
       await nextTick()
       const result
         = (await checkIsMatched('.age-col', [42, 32, 32, 32]))
-        && (await checkScoreIsMatched([
-          [98, 98, 98, 88],
-          [66, 60, 66, 99],
-          [89, 70, 89, 89]
-        ]))
+          && (await checkScoreIsMatched([
+            [98, 98, 98, 88],
+            [66, 60, 66, 99],
+            [89, 70, 89, 89]
+          ]))
       expect(result).toEqual(true)
     })
   })
diff --git a/src/date-picker/src/panel/use-dual-calendar.ts b/src/date-picker/src/panel/use-dual-calendar.ts
index 1d8c84ec9c2..6fb5974e170 100644
--- a/src/date-picker/src/panel/use-dual-calendar.ts
+++ b/src/date-picker/src/panel/use-dual-calendar.ts
@@ -112,9 +112,9 @@ function useDualCalendar(
   const { value } = props
   const defaultCalendarStartTime
     = props.defaultCalendarStartTime
-    ?? (Array.isArray(value) && typeof value[0] === 'number'
-      ? value[0]
-      : Date.now())
+      ?? (Array.isArray(value) && typeof value[0] === 'number'
+        ? value[0]
+        : Date.now())
   const startCalendarDateTimeRef = ref(defaultCalendarStartTime)
   const endCalendarDateTimeRef = ref(
     props.defaultCalendarEndTime
diff --git a/src/date-picker/src/utils.ts b/src/date-picker/src/utils.ts
index 12f90f2192b..b3d31797026 100644
--- a/src/date-picker/src/utils.ts
+++ b/src/date-picker/src/utils.ts
@@ -173,10 +173,10 @@ function dateItem(
   }
   const selected
     = valueTs !== null
-    && (Array.isArray(valueTs)
-      ? matchDate(valueTs[0], time, 'date')
-      || matchDate(valueTs[1], time, 'date')
-      : matchDate(valueTs, time, 'date'))
+      && (Array.isArray(valueTs)
+        ? matchDate(valueTs[0], time, 'date')
+        || matchDate(valueTs[1], time, 'date')
+        : matchDate(valueTs, time, 'date'))
   return {
     type: 'date',
     dateObject: {
@@ -243,10 +243,10 @@ function weekItem(
   }
   const inSelectedWeek
     = valueTs !== null
-    && (Array.isArray(valueTs)
-      ? matchDate(valueTs[0], time, 'week', firstDayOfWeek)
-      || matchDate(valueTs[1], time, 'week', firstDayOfWeek)
-      : matchDate(valueTs, time, 'week', firstDayOfWeek))
+      && (Array.isArray(valueTs)
+        ? matchDate(valueTs[0], time, 'week', firstDayOfWeek)
+        || matchDate(valueTs[1], time, 'week', firstDayOfWeek)
+        : matchDate(valueTs, time, 'week', firstDayOfWeek))
   return {
     type: 'date',
     dateObject: {
diff --git a/src/ellipsis/src/Ellipsis.tsx b/src/ellipsis/src/Ellipsis.tsx
index abb937530e3..efc12dc7501 100644
--- a/src/ellipsis/src/Ellipsis.tsx
+++ b/src/ellipsis/src/Ellipsis.tsx
@@ -99,7 +99,7 @@ export default defineComponent({
           if (triggerInner) {
             tooltipDisabled
               = triggerInner.getBoundingClientRect().width
-              <= trigger.getBoundingClientRect().width
+                <= trigger.getBoundingClientRect().width
           }
         }
         syncCursorStyle(trigger, tooltipDisabled)
diff --git a/src/mention/src/Mention.tsx b/src/mention/src/Mention.tsx
index 85656890176..780dc611a2b 100644
--- a/src/mention/src/Mention.tsx
+++ b/src/mention/src/Mention.tsx
@@ -404,8 +404,8 @@ export default defineComponent({
       props.onSelect?.(tmNode.rawNode as MentionOption, cachedPrefix)
       const nextSelectionEnd
         = cachedPartialPatternStart
-        + nextMiddlePart.length
-        + (alreadySeparated ? 1 : 0)
+          + nextMiddlePart.length
+          + (alreadySeparated ? 1 : 0)
       void nextTick().then(() => {
         // input value is updated
         inputEl.selectionStart = nextSelectionEnd
diff --git a/src/mention/src/utils.ts b/src/mention/src/utils.ts
index 42e12dc3a22..a9b7eda746d 100644
--- a/src/mention/src/utils.ts
+++ b/src/mention/src/utils.ts
@@ -168,9 +168,9 @@ export function getRelativePosition(
         const height = Number.parseInt(computed.height as string)
         const outerHeight
           = Number.parseInt(computed.paddingTop as string)
-          + Number.parseInt(computed.paddingBottom as string)
-          + Number.parseInt(computed.borderTopWidth as string)
-          + Number.parseInt(computed.borderBottomWidth as string)
+            + Number.parseInt(computed.paddingBottom as string)
+            + Number.parseInt(computed.borderTopWidth as string)
+            + Number.parseInt(computed.borderBottomWidth as string)
         const targetHeight
           = outerHeight + Number.parseInt(computed.lineHeight as string)
         if (height > targetHeight) {
@@ -263,13 +263,13 @@ export function setElementPositionBasedOnCaret(
   if (detectBoundary) {
     pos.left
       = pos.left + (element.clientWidth + margin) + offset.left
-      > window.scrollX + window.innerWidth
+        > window.scrollX + window.innerWidth
         ? (pos.left
             = window.scrollX + window.innerWidth - (element.clientWidth + margin))
         : (pos.left += offset.left)
     pos.top
       = pos.top + (element.clientWidth + margin) + offset.top
-      > window.scrollY + window.innerHeight
+        > window.scrollY + window.innerHeight
         ? (pos.top -= element.clientWidth + margin)
         : (pos.top += offset.top)
   }
diff --git a/src/popover/src/PopoverBody.tsx b/src/popover/src/PopoverBody.tsx
index cb7229dc5e3..16779600d89 100644
--- a/src/popover/src/PopoverBody.tsx
+++ b/src/popover/src/PopoverBody.tsx
@@ -298,8 +298,8 @@ export default defineComponent({
       themeClassHandle?.onRender()
       const shouldRenderDom
         = props.displayDirective === 'show'
-        || props.show
-        || (props.animated && displayedRef.value)
+          || props.show
+          || (props.animated && displayedRef.value)
       if (!shouldRenderDom) {
         return null
       }
diff --git a/src/qr-code/src/qrcodegen.ts b/src/qr-code/src/qrcodegen.ts
index d7e0c39bee5..1da2577ccc0 100644
--- a/src/qr-code/src/qrcodegen.ts
+++ b/src/qr-code/src/qrcodegen.ts
@@ -560,7 +560,7 @@ namespace qrcodegen {
         }
         result
           += this.finderPenaltyTerminateAndCount(runColor, runX, runHistory)
-          * QrCode.PENALTY_N3
+            * QrCode.PENALTY_N3
       }
       // Adjacent modules in column having same color, and finder-like patterns
       for (let x = 0; x < this.size; x++) {
@@ -589,7 +589,7 @@ namespace qrcodegen {
         }
         result
           += this.finderPenaltyTerminateAndCount(runColor, runY, runHistory)
-          * QrCode.PENALTY_N3
+            * QrCode.PENALTY_N3
       }
 
       // 2*2 blocks of modules having same color
@@ -739,10 +739,10 @@ namespace qrcodegen {
       const n: int = runHistory[1]
       const core: boolean
         = n > 0
-        && runHistory[2] === n
-        && runHistory[3] === n * 3
-        && runHistory[4] === n
-        && runHistory[5] === n
+          && runHistory[2] === n
+          && runHistory[3] === n * 3
+          && runHistory[4] === n
+          && runHistory[5] === n
       return (
         (core && runHistory[0] >= n * 4 && runHistory[6] >= n ? 1 : 0)
         + (core && runHistory[6] >= n * 4 && runHistory[0] >= n ? 1 : 0)
diff --git a/src/tree/src/Tree.tsx b/src/tree/src/Tree.tsx
index 8ee3cafb78f..56e1bc3e994 100644
--- a/src/tree/src/Tree.tsx
+++ b/src/tree/src/Tree.tsx
@@ -86,9 +86,9 @@ export function createTreeMateOptions<T>(
 ): TreeMateOptions<T, T, T> {
   const settledGetChildren: GetChildren
     = getChildren
-    || ((node: T) => {
-      return (node as any)[childrenField]
-    })
+      || ((node: T) => {
+        return (node as any)[childrenField]
+      })
   return {
     getIsGroup() {
       return false
diff --git a/src/watermark/src/Watermark.tsx b/src/watermark/src/Watermark.tsx
index a4495677b83..01306ea606b 100644
--- a/src/watermark/src/Watermark.tsx
+++ b/src/watermark/src/Watermark.tsx
@@ -12,12 +12,12 @@ function getRatio(context: any): number {
   }
   const backingStore
     = context.backingStorePixelRatio
-    || context.webkitBackingStorePixelRatio
-    || context.mozBackingStorePixelRatio
-    || context.msBackingStorePixelRatio
-    || context.oBackingStorePixelRatio
-    || context.backingStorePixelRatio
-    || 1
+      || context.webkitBackingStorePixelRatio
+      || context.mozBackingStorePixelRatio
+      || context.msBackingStorePixelRatio
+      || context.oBackingStorePixelRatio
+      || context.backingStorePixelRatio
+      || 1
   return (window.devicePixelRatio || 1) / backingStore
 }