feat(sort): add props for custom sorting

src/components/DataTable.vue

@@ -369,7 +369,9 @@ const {
   themeColor,
   rowsOfPageSeparatorMessage,
   showIndexSymbol,
-  preventContextMenuRow
+  preventContextMenuRow,
+  sortFunction,
+  multiSortFunction,
 } = toRefs(props);
 
 // style related computed variables
@@ -484,6 +486,8 @@ const {
   searchValue,
   serverItemsLength,
   multiSort,
+  sortFunction,
+  multiSortFunction,
   emits,
 );
 

src/hooks/useTotalItems.ts

@@ -1,7 +1,7 @@
 import {
   Ref, computed, ComputedRef, watch,
 } from 'vue';
-import type { Item, FilterOption } from '../types/main';
+import type {Item, FilterOption, MultiSortFunction, SortFunction} from '../types/main';
 import type { ClientSortOptions, EmitsEventName } from '../types/internal';
 import { getItemValue } from '../utils';
 
@@ -15,6 +15,8 @@ export default function useTotalItems(
   searchValue: Ref<string>,
   serverItemsLength: Ref<number>,
   multiSort: Ref<boolean>,
+  sortFn: Ref<SortFunction | null>,
+  multiSortFunction: Ref<MultiSortFunction | null>,
   emits: (event: EmitsEventName, ...args: any[]) => void,
 ) {
   const generateSearchingTarget = (item: Item): string => {
@@ -111,17 +113,20 @@ export default function useTotalItems(
     if (clientSortOptions.value === null) return itemsFiltering.value;
     const { sortBy, sortDesc } = clientSortOptions.value;
     const itemsFilteringSorted = [...itemsFiltering.value];
+
     // multi sort
-    if (multiSort && Array.isArray(sortBy) && Array.isArray(sortDesc)) {
+    if (multiSort.value && Array.isArray(sortBy) && Array.isArray(sortDesc)) {
       if (sortBy.length === 0) return itemsFilteringSorted;
-      return recursionMuiltSort(sortBy, sortDesc, itemsFilteringSorted, sortBy.length - 1);
+      return (multiSortFunction.value ?? recursionMuiltSort)(sortBy, sortDesc, itemsFilteringSorted, sortBy.length - 1);
     }
-    // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-    return itemsFilteringSorted.sort((a, b) => {
+
+    const defaultSortFn = (a: Item, b: Item): -1 | 0 | 1 => {
       if (getItemValue(sortBy as string, a) < getItemValue(sortBy as string, b)) return sortDesc ? 1 : -1;
       if (getItemValue(sortBy as string, a) > getItemValue(sortBy as string, b)) return sortDesc ? -1 : 1;
       return 0;
-    });
+    }
+    // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+    return itemsFilteringSorted.sort((a, b) => sortFn.value?.(a, b, sortBy as string, sortDesc as boolean, getItemValue, defaultSortFn) ?? defaultSortFn(a, b));
   });
 
   // eslint-disable-next-line max-len

src/propsWithDefault.ts

@@ -2,9 +2,9 @@ import { PropType } from 'vue';
 import type {
   SortType, Item, ServerOptions, FilterOption,
   HeaderItemClassNameFunction, BodyItemClassNameFunction, BodyRowClassNameFunction,
-  TextDirection,
+  TextDirection, MultiSortFunction, SortFunction
 } from './types/main';
-import type { ClickEventType } from './types/internal';
+import type {ClickEventType} from './types/internal';
 
 export default {
   alternating: {
@@ -127,6 +127,14 @@ export default {
     type: Boolean,
     default: false,
   },
+  sortFunction: {
+    type: Function as PropType<SortFunction> | null,
+    default: null
+  },
+  multiSortFunction: {
+    type: Function as PropType<MultiSortFunction> | null,
+    default: null
+  },
   tableMinHeight: {
     type: Number,
     default: 180,

src/types/main.d.ts

@@ -1,3 +1,5 @@
+import {getItemValue as getItemValueFn} from "../utils";
+
 export type SortType = 'asc' | 'desc'
 
 export type FilterComparison = '=' | '!=' | '>' | '>=' | '<' | '<=' | 'between' | 'in';
@@ -51,6 +53,9 @@ export type UpdateSortArgument = {
   sortBy: string
 }
 
+export type SortFunction = (a: Item, b: Item, sortBy: string, sortDesc: boolean, getItemValue: typeof getItemValueFn, defaultSortFunction: (a: Item, b: Item) => number) => number;
+export type MultiSortFunction = (sortByArr: string[], sortDescArr: boolean[], itemsToSort: Item[], index: number) => Item[];
+
 export type HeaderItemClassNameFunction = (header: Header, columnNumber: number) => string
 export type BodyRowClassNameFunction = (item: Item, rowNumber: number) => string
 export type BodyItemClassNameFunction = (column: string, rowNumber: number) => string