docs(data-table): async ts demo&export DataTableFilterOptionValue

Signed-off-by: Artea <sepush@outlook.com>
tusen-ai · Jan 12, 2025 · 13659f9 · 13659f9
1 parent 148e46d
commit 13659f9
Show file tree

Hide file tree

Showing 5 changed files with 184 additions and 109 deletions.
diff --git a/src/data-table/demos/enUS/ajax-usage.demo.md → ...data-table/demos/enUS/ajax-usage.demo.vue b/src/data-table/demos/enUS/ajax-usage.demo.md → ...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
@@ -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