Merge pull request #82 from bryanmylee:feat/sort-toggle-order

Customize sort order

Author: bryanmylee

docs/src/routes/docs/[...3]plugins/[...2]add-sort-by.md

@@ -45,6 +45,12 @@ Takes an [Event](https://developer.mozilla.org/en-US/docs/Web/API/Event) and ret
 
 _Defaults to multi-sort on shift-click_.
 
+### `toggleOrder?: ()[]`
+
+Allows customization of the toggling order. This cannot contain duplicate values. Set this to `['asc', 'desc']` to disable toggling to an unsorted column.
+
+_Defaults to `['asc', 'desc', undefined]`_.
+
 ## Column Options
 
 :::callout

package-lock.json

@@ -1,7 +1,7 @@
 {
 	"name": "svelte-headless-table",
 	"description": "Unopinionated and extensible data tables for Svelte",
-	"version": "0.15.2",
+	"version": "0.15.3",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",

package.json

@@ -9,8 +9,11 @@ export interface SortByConfig {
 	initialSortKeys?: SortKey[];
 	disableMultiSort?: boolean;
 	isMultiSortEvent?: (event: Event) => boolean;
+	toggleOrder?: ('asc' | 'desc' | undefined)[];
 }
 
+const DEFAULT_TOGGLE_ORDER: ('asc' | 'desc' | undefined)[] = ['asc', 'desc', undefined];
+
 export interface SortByState<Item> {
 	sortKeys: WritableSortKeys;
 	preSortedRows: Readable<BodyRow<Item>[]>;
@@ -42,31 +45,34 @@ export interface SortKey {
 
 export const createSortKeysStore = (initKeys: SortKey[]): WritableSortKeys => {
 	const { subscribe, update, set } = writable(initKeys);
-	const toggleId = (id: string, { multiSort = true }: ToggleOptions = {}) => {
+	const toggleId = (
+		id: string,
+		{ multiSort = true, toggleOrder = DEFAULT_TOGGLE_ORDER }: ToggleOptions = {}
+	) => {
 		update(($sortKeys) => {
 			const keyIdx = $sortKeys.findIndex((key) => key.id === id);
+			const key = $sortKeys[keyIdx];
+			const order = key?.order;
+			const orderIdx = toggleOrder.findIndex((o) => o === order);
+			const nextOrderIdx = (orderIdx + 1) % toggleOrder.length;
+			const nextOrder = toggleOrder[nextOrderIdx];
 			if (!multiSort) {
-				if (keyIdx === -1) {
-					return [{ id, order: 'asc' }];
-				}
-				const key = $sortKeys[keyIdx];
-				if (key.order === 'asc') {
-					return [{ id, order: 'desc' }];
+				if (nextOrder === undefined) {
+					return [];
 				}
-				return [];
+				return [{ id, order: nextOrder }];
 			}
-			if (keyIdx === -1) {
-				return [...$sortKeys, { id, order: 'asc' }];
+			if (keyIdx === -1 && nextOrder !== undefined) {
+				return [...$sortKeys, { id, order: nextOrder }];
 			}
-			const key = $sortKeys[keyIdx];
-			if (key.order === 'asc') {
-				return [
-					...$sortKeys.slice(0, keyIdx),
-					{ id, order: 'desc' },
-					...$sortKeys.slice(keyIdx + 1),
-				];
+			if (nextOrder === undefined) {
+				return [...$sortKeys.slice(0, keyIdx), ...$sortKeys.slice(keyIdx + 1)];
 			}
-			return [...$sortKeys.slice(0, keyIdx), ...$sortKeys.slice(keyIdx + 1)];
+			return [
+				...$sortKeys.slice(0, keyIdx),
+				{ id, order: nextOrder },
+				...$sortKeys.slice(keyIdx + 1),
+			];
 		});
 	};
 	const clearId = (id: string) => {
@@ -89,6 +95,7 @@ export const createSortKeysStore = (initKeys: SortKey[]): WritableSortKeys => {
 
 interface ToggleOptions {
 	multiSort?: boolean;
+	toggleOrder?: ('asc' | 'desc' | undefined)[];
 }
 
 export type WritableSortKeys = Writable<SortKey[]> & {
@@ -160,6 +167,7 @@ export const addSortBy =
 		initialSortKeys = [],
 		disableMultiSort = false,
 		isMultiSortEvent = isShiftClick,
+		toggleOrder,
 	}: SortByConfig = {}): TablePlugin<Item, SortByState<Item>, SortByColumnOptions, SortByPropSet> =>
 	({ columnOptions }) => {
 		const disabledSortIds = Object.entries(columnOptions)
@@ -198,6 +206,7 @@ export const addSortBy =
 							if (disabled) return;
 							sortKeys.toggleId(cell.id, {
 								multiSort: disableMultiSort ? false : isMultiSortEvent(event),
+								toggleOrder,
 							});
 						};
 						const clear = () => {

src/lib/plugins/addSortBy.ts

@@ -44,7 +44,9 @@
 		group: addGroupBy({
 			initialGroupByIds: [],
 		}),
-		sort: addSortBy(),
+		sort: addSortBy({
+			toggleOrder: ['asc', 'desc'],
+		}),
 		expand: addExpandedRows({
 			initialExpandedIds: { 1: true },
 		}),