[Feature Request] Add Unsort for Sortable Feature

[imnash21]

Add unsort for sortable feature, like after the 3rd click in column header, the sortStatus will become undefined to unsort the data table.

Example:

1st click in column header:

• sortStatus: columnAccessor = name
• sortStatus: direction = asc

2nd click in column header:

• sortStatus: columnAccessor = name
• sortStatus: direction = desc

3rd click in column header:

• sortStatus: undefined (to unsort the data table)

[AbrahamXTS]

You can implement it yourself with the help of a hook:

import getValueByPath from "lodash.get";
import orderByIteratees from "lodash.orderby";
import type { DataTableSortStatus } from "mantine-datatable";
import { useCallback, useMemo, useState } from "react";

const UNSORTED_STATUS = {
	columnAccessor: "",
	direction: "asc",
} as const;

export function useSortedRecords<T>(
	sourceRecords: T[],
	initialSortStatus?: DataTableSortStatus<T>,
) {
	const [currentSortStatus, updateSortStatus] = useState<
		DataTableSortStatus<T>
	>(initialSortStatus ?? (UNSORTED_STATUS as DataTableSortStatus<T>));

	const handleSortStatusChange = useCallback(
		(nextSortStatus: DataTableSortStatus<T>) => {
			updateSortStatus((previousSortStatus) => {
				const isSameColumn =
					previousSortStatus.columnAccessor === nextSortStatus.columnAccessor;

				const hasCycledBackToAscending =
					isSameColumn &&
					previousSortStatus.direction === "desc" &&
					nextSortStatus.direction === "asc";

				if (hasCycledBackToAscending) {
					return UNSORTED_STATUS as DataTableSortStatus<T>;
				}

				return nextSortStatus;
			});
		},
		[],
	);

	const sortedRecords = useMemo(() => {
		const sortColumnAccessor = currentSortStatus.columnAccessor as string;

		if (!sortColumnAccessor) return sourceRecords;

		return orderByIteratees(
			sourceRecords,
			[(record) => getValueByPath(record, sortColumnAccessor)],
			[currentSortStatus.direction],
		);
	}, [sourceRecords, currentSortStatus]);

	return {
		sortedRecords,
		currentSortStatus,
		handleSortStatusChange,
	};
}

I used Lodash to keep the example concise, but these functions can easily be replaced with standard JavaScript.