docs(data-table): controlled-sorter ts demo&export DataTableSortOrder (…

…#6676) Signed-off-by: Artea <[email protected]>
tusen-ai · Jan 4, 2025 · d7ca2e4 · d7ca2e4
1 parent 9f539df
commit d7ca2e4
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 80 deletions.
diff --git a/...able/demos/enUS/controlled-sorter.demo.md → ...ble/demos/enUS/controlled-sorter.demo.vue b/...able/demos/enUS/controlled-sorter.demo.md → ...ble/demos/enUS/controlled-sorter.demo.vue
@@ -1,34 +1,32 @@
+<markdown>
 # Controlled sorter
 
 If one of the column objects' `sortOrder` is set to `'ascend'`, `'descend'` or `false`. The sorting behavior the table will be in a controlled manner. If multiple columns' `sortOrder` are set to `'ascend'` or `'descend'`, only first column of them will be applied.
+</markdown>
 
-```html
-<n-space vertical :size="12">
-  <n-space>
-    <n-button @click="sortName('ascend')">Sort By Name (Ascend)</n-button>
-    <n-button @click="sortName('descend')">Sort By Name (Descend)</n-button>
-    <n-button @click="clearSorter">Clear Sorter</n-button>
-  </n-space>
-  <n-data-table
-    :columns="columns"
-    :data="data"
-    :pagination="pagination"
-    @update:sorter="handleSorterChange"
-  />
-</n-space>
-```
-
-```js
+<script lang="ts">
+import type {
+  DataTableBaseColumn,
+  DataTableSortOrder,
+  DataTableSortState
+} from 'naive-ui'
 import { defineComponent, reactive, ref } from 'vue'
 
-const nameColumn = {
+interface RowData {
+  key: number
+  name: string
+  age: number
+  address: string
+}
+
+const nameColumn: DataTableBaseColumn<RowData> = {
   title: 'Name',
   key: 'name',
   sortOrder: false,
   sorter: 'default'
 }
 
-const ageColumn = {
+const ageColumn: DataTableBaseColumn<RowData> = {
   title: 'Age',
   key: 'age',
   sortOrder: false,
@@ -37,13 +35,13 @@ const ageColumn = {
   }
 }
 
-const columns = [
+const columns: DataTableBaseColumn<RowData>[] = [
   nameColumn,
   ageColumn,
   {
     title: 'Address',
     key: 'address',
-    defaultFilter: ['London', 'New York'],
+    defaultFilterOptionValues: ['London', 'New York'],
     filterOptions: [
       {
         label: 'London',
@@ -55,7 +53,7 @@ const columns = [
       }
     ],
     filter(value, row) {
-      return row.address.includes(value)
+      return row.address.includes(value as string)
     }
   }
 ]
@@ -91,36 +89,60 @@ export default defineComponent({
   setup() {
     const nameColumnReactive = reactive(nameColumn)
     const ageColumnReactive = reactive(ageColumn)
-    const columnsRef = ref(columns)
+    const columnsRef = ref<DataTableBaseColumn<RowData>[]>(columns)
+
+    function handleSorterChange(sorter: DataTableSortState) {
+      columnsRef.value.forEach((column: DataTableBaseColumn<RowData>) => {
+        /** column.sortOrder !== undefined means it is uncontrolled */
+        if (column.sortOrder === undefined)
+          return
+        if (!sorter) {
+          column.sortOrder = false
+          return
+        }
+        if (column.key === sorter.columnKey)
+          column.sortOrder = sorter.order
+        else column.sortOrder = false
+      })
+    }
 
     return {
       data,
       columns: columnsRef,
       nameColumn: nameColumnReactive,
       ageColumn: ageColumnReactive,
       pagination: { pageSize: 5 },
-      sortName(order) {
+      sortName(order: DataTableSortOrder) {
         nameColumnReactive.sortOrder = order
       },
       clearSorter() {
         nameColumnReactive.sortOrder = false
         ageColumnReactive.sortOrder = false
       },
-      handleSorterChange(sorter) {
-        columnsRef.value.forEach((column) => {
-          /** column.sortOrder !== undefined means it is uncontrolled */
-          if (column.sortOrder === undefined)
-            return
-          if (!sorter) {
-            column.sortOrder = false
-            return
-          }
-          if (column.key === sorter.columnKey)
-            column.sortOrder = sorter.order
-          else column.sortOrder = false
-        })
-      }
+      handleSorterChange
     }
   }
 })
-```
+</script>
+
+<template>
+  <n-space vertical :size="12">
+    <n-space>
+      <n-button @click="sortName('ascend')">
+        Sort By Name (Ascend)
+      </n-button>
+      <n-button @click="sortName('descend')">
+        Sort By Name (Descend)
+      </n-button>
+      <n-button @click="clearSorter">
+        Clear Sorter
+      </n-button>
+    </n-space>
+    <n-data-table
+      :columns="columns"
+      :data="data"
+      :pagination="pagination"
+      @update:sorter="handleSorterChange"
+    />
+  </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
@@ -37,7 +37,7 @@ custom-select.vue
 group-header.vue
 controlled-page.vue
 controlled-filter.vue
-controlled-sorter
+controlled-sorter.vue
 controlled-multiple-sorter
 fixed-header.vue
 fixed-header-column.vue

diff --git a/...able/demos/zhCN/controlled-sorter.demo.md → ...ble/demos/zhCN/controlled-sorter.demo.vue b/...able/demos/zhCN/controlled-sorter.demo.md → ...ble/demos/zhCN/controlled-sorter.demo.vue
@@ -1,34 +1,32 @@
+<markdown>
 # 受控的排序
 
 如果列对象的 `sortOrder` 属性被设为 `'ascend'`、`'descend'` 或者 `false`，表格的排序将为受控状态。如果很多列的 `sortOrder` 都被设定了，那么只有他们之中的第一列会生效。
+</markdown>
 
-```html
-<n-space vertical :size="12">
-  <n-space>
-    <n-button @click="sortName('ascend')">Sort By Name (Ascend)</n-button>
-    <n-button @click="sortName('descend')">Sort By Name (Descend)</n-button>
-    <n-button @click="clearSorter">Clear Sorter</n-button>
-  </n-space>
-  <n-data-table
-    :columns="columns"
-    :data="data"
-    :pagination="pagination"
-    @update:sorter="handleSorterChange"
-  />
-</n-space>
-```
-
-```js
+<script lang="ts">
+import type {
+  DataTableBaseColumn,
+  DataTableSortOrder,
+  DataTableSortState
+} from 'naive-ui'
 import { defineComponent, reactive, ref } from 'vue'
 
-const nameColumn = {
+interface RowData {
+  key: number
+  name: string
+  age: number
+  address: string
+}
+
+const nameColumn: DataTableBaseColumn<RowData> = {
   title: 'Name',
   key: 'name',
   sortOrder: false,
   sorter: 'default'
 }
 
-const ageColumn = {
+const ageColumn: DataTableBaseColumn<RowData> = {
   title: 'Age',
   key: 'age',
   sortOrder: false,
@@ -37,13 +35,13 @@ const ageColumn = {
   }
 }
 
-const columns = [
+const columns: DataTableBaseColumn<RowData>[] = [
   nameColumn,
   ageColumn,
   {
     title: 'Address',
     key: 'address',
-    defaultFilter: ['London', 'New York'],
+    defaultFilterOptionValues: ['London', 'New York'],
     filterOptions: [
       {
         label: 'London',
@@ -55,7 +53,7 @@ const columns = [
       }
     ],
     filter(value, row) {
-      return row.address.includes(value)
+      return row.address.includes(value as string)
     }
   }
 ]
@@ -91,36 +89,60 @@ export default defineComponent({
   setup() {
     const nameColumnReactive = reactive(nameColumn)
     const ageColumnReactive = reactive(ageColumn)
-    const columnsRef = ref(columns)
+    const columnsRef = ref<DataTableBaseColumn<RowData>[]>(columns)
+
+    function handleSorterChange(sorter: DataTableSortState) {
+      columnsRef.value.forEach((column: DataTableBaseColumn<RowData>) => {
+        /** column.sortOrder !== undefined means it is uncontrolled */
+        if (column.sortOrder === undefined)
+          return
+        if (!sorter) {
+          column.sortOrder = false
+          return
+        }
+        if (column.key === sorter.columnKey)
+          column.sortOrder = sorter.order
+        else column.sortOrder = false
+      })
+    }
 
     return {
       data,
       columns: columnsRef,
       nameColumn: nameColumnReactive,
       ageColumn: ageColumnReactive,
       pagination: { pageSize: 5 },
-      sortName(order) {
+      sortName(order: DataTableSortOrder) {
         nameColumnReactive.sortOrder = order
       },
       clearSorter() {
         nameColumnReactive.sortOrder = false
         ageColumnReactive.sortOrder = false
       },
-      handleSorterChange(sorter) {
-        columnsRef.value.forEach((column) => {
-          /** column.sortOrder !== undefined means it is uncontrolled */
-          if (column.sortOrder === undefined)
-            return
-          if (!sorter) {
-            column.sortOrder = false
-            return
-          }
-          if (column.key === sorter.columnKey)
-            column.sortOrder = sorter.order
-          else column.sortOrder = false
-        })
-      }
+      handleSorterChange
     }
   }
 })
-```
+</script>
+
+<template>
+  <n-space vertical :size="12">
+    <n-space>
+      <n-button @click="sortName('ascend')">
+        Sort By Name (Ascend)
+      </n-button>
+      <n-button @click="sortName('descend')">
+        Sort By Name (Descend)
+      </n-button>
+      <n-button @click="clearSorter">
+        Clear Sorter
+      </n-button>
+    </n-space>
+    <n-data-table
+      :columns="columns"
+      :data="data"
+      :pagination="pagination"
+      @update:sorter="handleSorterChange"
+    />
+  </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
@@ -39,7 +39,7 @@ custom-select.vue
 group-header.vue
 controlled-page.vue
 controlled-filter.vue
-controlled-sorter
+controlled-sorter.vue
 controlled-multiple-sorter
 fixed-header.vue
 fixed-header-column.vue

diff --git a/src/data-table/index.ts b/src/data-table/index.ts
@@ -22,6 +22,7 @@ export type {
   RowKey as DataTableRowKey,
   TableSelectionColumn as DataTableSelectionColumn,
   DataTableSlots,
+  SortOrder as DataTableSortOrder,
   SortState as DataTableSortState
 } from './src/interface'
 export * from './src/publicTypes'