add type declaration UpdateSortArgument

Author: HC200ok

src/hooks/useHeaders.ts

@@ -2,7 +2,9 @@ import {
   ref, Ref, computed, ComputedRef, WritableComputedRef,
 } from 'vue';
 import type { Header, SortType } from '../types/main';
-import type { ServerOptionsComputed, HeaderForRender, ClientSortOptions, EmitsEventName } from '../types/internal';
+import type {
+  ServerOptionsComputed, HeaderForRender, ClientSortOptions, EmitsEventName,
+} from '../types/internal';
 
 export default function useHeaders(
   checkboxColumnWidth: Ref<number>,
@@ -114,7 +116,10 @@ export default function useHeaders(
         sortDesc: newSortType === 'desc',
       };
     }
-    emits("updateSort", newSortType, newSortBy)
+    emits('updateSort', {
+      sortType: newSortType,
+      sortBy: newSortBy,
+    });
   };
 
   return {

src/modes/Client.vue

@@ -21,8 +21,8 @@
       :body-row-class-name="bodyRowClassNameFunction"
       :header-item-class-name="headerItemClassNameFunction"
       :body-item-class-name="bodyItemClassNameFunction"
-      must-sort
       @click-row="showItem"
+      @update-sort="updateSort"
     >
       <template #expand="item">
         <div style="padding: 15px">
@@ -88,7 +88,7 @@ import {
   computed, ref, reactive, toRefs,
 } from 'vue';
 import type {
-  Header, Item, FilterOption, ClickRowArgument, HeaderItemClassNameFunction, BodyItemClassNameFunction, BodyRowClassNameFunction,
+  Header, Item, FilterOption, ClickRowArgument, UpdateSortArgument, HeaderItemClassNameFunction, BodyItemClassNameFunction, BodyRowClassNameFunction,
 } from '../types/main';
 import DataTable from '../components/DataTable.vue';
 import { mockClientNestedItems, mockClientItems, mockDuplicateClientNestedItems } from '../mock';
@@ -136,6 +136,10 @@ const showItem = (item: ClickRowArgument) => {
   console.log('item');
   console.log(JSON.stringify(item));
 };
+
+const updateSort = (sortOption: UpdateSortArgument) => {
+  console.log(sortOption);
+};
 // filtering
 
 const ageCriteria = ref<[number, number]>([1, 15]);

src/modes/ServerSide.vue

@@ -24,6 +24,7 @@
       table-class-name="hc-table"
       theme-color="#1d90ff"
       border-cell
+      @update-sort="updateSort"
     >
       <template #address="{ address }">
         <a :href="address">{{ address }}</a>
@@ -84,7 +85,7 @@ import {
   defineComponent, ref, computed, watch, onMounted, Ref,
 } from 'vue';
 import {
-  Header, Item, ServerOptions, BodyItemClassNameFunction, BodyRowClassNameFunction, HeaderItemClassNameFunction,
+  Header, Item, ServerOptions, UpdateSortArgument, BodyItemClassNameFunction, BodyRowClassNameFunction, HeaderItemClassNameFunction,
 } from '../types/main';
 import DataTable from '../components/DataTable.vue';
 import { mockClientItems, mockServerItems } from '../mock';
@@ -159,6 +160,9 @@ export default defineComponent({
     const currentPageLastIndex = computed(() => dataTable.value?.currentPageLastIndex);
     const clientItemsLength = computed(() => dataTable.value?.clientItemsLength);
 
+    const updateSort = (sortOption: UpdateSortArgument) => {
+      console.log(sortOption);
+    };
     console.log('dataTable');
     console.log(dataTable.value);
 
@@ -201,6 +205,7 @@ export default defineComponent({
       prevPage,
       updatePage,
       bodyRowClassName,
+      updateSort,
     };
   },
 

src/types/main.d.ts

@@ -42,6 +42,11 @@ export type ClickRowArgument = Item & {
   indexInCurrentPage?: number
 }
 
+export type UpdateSortArgument = {
+  sortType: SortType | null
+  sortBy: string
+}
+
 export type HeaderItemClassNameFunction = (header: Header, index: number) => string
 export type BodyRowClassNameFunction = (item: Item, index: number) => string
 export type BodyItemClassNameFunction = (column: string, index: number) => string

types/main.d.ts

@@ -42,6 +42,11 @@ export type ClickRowArgument = Item & {
   indexInCurrentPage?: number
 }
 
+export type UpdateSortArgument = {
+  sortType: SortType | null
+  sortBy: string
+}
+
 export type HeaderItemClassNameFunction = (header: Header, index: number) => string
 export type BodyRowClassNameFunction = (item: Item, index: number) => string
 export type BodyItemClassNameFunction = (column: string, index: number) => string