Merge pull request #90 from bgfxc4/main

added updateSort emit and its type declaration

Author: HC200ok

src/components/DataTable.vue

@@ -314,6 +314,7 @@ onMounted(() => {
 const emits = defineEmits([
   'clickRow',
   'expandRow',
+  'updateSort',
   'update:itemsSelected',
   'update:serverOptions',
 ]);
@@ -353,6 +354,7 @@ const {
   sortBy,
   sortType,
   updateServerOptionsSort,
+  emits
 );
 
 const {

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 } from '../types/internal';
+import type {
+  ServerOptionsComputed, HeaderForRender, ClientSortOptions, EmitsEventName,
+} from '../types/internal';
 
 export default function useHeaders(
   checkboxColumnWidth: Ref<number>,
@@ -21,6 +23,7 @@ export default function useHeaders(
   sortBy: Ref<string>,
   sortType: Ref<SortType>,
   updateServerOptionsSort: (newSortBy: string, newSortType: SortType | null) => void,
+  emits: (event: EmitsEventName, ...args: any[]) => void,
 ) {
   const hasFixedColumnsFromUser = computed(() => headers.value.findIndex((header) => header.fixed) !== -1);
   const fixedHeadersFromUser = computed(() => {
@@ -113,6 +116,10 @@ export default function useHeaders(
         sortDesc: newSortType === 'desc',
       };
     }
+    emits('updateSort', {
+      sortType: newSortType,
+      sortBy: newSortBy,
+    });
   };
 
   return {

src/modes/Client.vue

@@ -31,8 +31,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">
@@ -98,7 +98,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';
@@ -146,6 +146,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 #expand="item">
         <div style="padding: 15px">
@@ -89,7 +90,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';
@@ -164,6 +165,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);
 
@@ -206,6 +210,7 @@ export default defineComponent({
       prevPage,
       updatePage,
       bodyRowClassName,
+      updateSort,
     };
   },
 

src/types/internal.d.ts

@@ -23,4 +23,4 @@ export type ClientSortOptions = {
 
 export type MultipleSelectStatus = 'allSelected' | 'noneSelected' | 'partSelected'
 
-export type EmitsEventName = 'clickRow' | 'expandRow' | 'update:itemsSelected' | 'update:serverOptions'
+export type EmitsEventName = 'clickRow' | 'expandRow' | 'updateSort' | 'update:itemsSelected' | 'update:serverOptions'

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