[WIP]docs(data-table): ts demo

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
@@ -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
@@ -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

src/data-table/demos/enUS/merge-cell.demo.md → 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 RowData {
+  key: number
+  name: string
+  age: number
+  address: string
+  tags: string[]
+}
+
+interface SendMail {
+  (rowData: RowData): void
+}
+
+function createColumns({
+  sendMail
+}: {
+  sendMail: SendMail
+}): DataTableColumns<RowData> {
   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(): RowData[] {
   return [
     {
       key: 0,
@@ -101,17 +113,25 @@ function createData() {
 export default defineComponent({
   setup() {
     const message = useMessage()
+    function sendMail(rowData: RowData) {
+      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>

src/data-table/demos/enUS/render-header.demo.md → 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>

src/data-table/demos/enUS/switchable-editable.demo.md → 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,24 +109,24 @@ 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)
               }
             })
           }
         },
         {
           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>

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
@@ -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
@@ -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