From 5533fe3d4b8c32dffe7faa88aafe5c8ee249847d Mon Sep 17 00:00:00 2001 From: jan Date: Fri, 8 Sep 2023 16:59:43 +0200 Subject: [PATCH 1/2] feat(sort): add props for custom sorting this adresses https://github.com/HC200ok/vue3-easy-data-table/issues/177 --- package-lock.json | 4 ++-- src/components/DataTable.vue | 6 +++++- src/hooks/useTotalItems.ts | 18 ++++++++++++------ src/propsWithDefault.ts | 12 ++++++++++-- src/types/main.d.ts | 5 +++++ 5 files changed, 34 insertions(+), 11 deletions(-) diff --git a/package-lock.json b/package-lock.json index e811890..62deec6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "vue3-easy-data-table", - "version": "1.5.44", + "version": "1.5.47", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "vue3-easy-data-table", - "version": "1.5.44", + "version": "1.5.47", "license": "MIT", "dependencies": { "vue": "^3.2.45" diff --git a/src/components/DataTable.vue b/src/components/DataTable.vue index e51b2ab..a804bde 100644 --- a/src/components/DataTable.vue +++ b/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, ); diff --git a/src/hooks/useTotalItems.ts b/src/hooks/useTotalItems.ts index 5c2cc41..34aa02a 100644 --- a/src/hooks/useTotalItems.ts +++ b/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, serverItemsLength: Ref, multiSort: Ref, + sortFn: Ref, + multiSortFunction: Ref, emits: (event: EmitsEventName, ...args: any[]) => void, ) { const generateSearchingTarget = (item: Item): string => { @@ -111,17 +113,21 @@ export default function useTotalItems( if (clientSortOptions.value === null) return itemsFiltering.value; const { sortBy, sortDesc } = clientSortOptions.value; const itemsFilteringSorted = [...itemsFiltering.value]; + console.log(multiSort.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 diff --git a/src/propsWithDefault.ts b/src/propsWithDefault.ts index 947441d..7a0adb0 100644 --- a/src/propsWithDefault.ts +++ b/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 | null, + default: null + }, + multiSortFunction: { + type: Function as PropType | null, + default: null + }, tableMinHeight: { type: Number, default: 180, diff --git a/src/types/main.d.ts b/src/types/main.d.ts index 880ab5f..741a344 100644 --- a/src/types/main.d.ts +++ b/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 From 96205cae11708777feb5f32f792e1f0869f87138 Mon Sep 17 00:00:00 2001 From: jan Date: Fri, 8 Sep 2023 17:06:37 +0200 Subject: [PATCH 2/2] refactor: remove accidentally kept console.log --- src/hooks/useTotalItems.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/hooks/useTotalItems.ts b/src/hooks/useTotalItems.ts index 34aa02a..edadf52 100644 --- a/src/hooks/useTotalItems.ts +++ b/src/hooks/useTotalItems.ts @@ -113,7 +113,6 @@ export default function useTotalItems( if (clientSortOptions.value === null) return itemsFiltering.value; const { sortBy, sortDesc } = clientSortOptions.value; const itemsFilteringSorted = [...itemsFiltering.value]; - console.log(multiSort.value) // multi sort if (multiSort.value && Array.isArray(sortBy) && Array.isArray(sortDesc)) {