Sorting issue in examples/tasks

[renja-g]

Change Type

Correction

Bug Description

When sorting a column for the first time, it always sorts Asc even if you clicked Descs

1. Click [Desc] -> Sorts Asc
2. Click [Desc] -> Sorts Desc
3. from here everything works as expected.

https://www.shadcn-svelte.com/examples/tasks

[DarkIntaqt]

Ok so the problem here is that we only have a toggle in a situation that is a select, which results in not accurate results as long as "order" is undefined (which it is by default, as long as no sorting was set). I don't really know if this is an implementation issue in this specific example or an actual issue (or missing function) in the underlying library.

[nateesh]

My understanding from the svelte-headless-table docs is that it is toggle follows an order: "asc" | "desc" | undefined; (see example).

Adding an extra toggle to handle the props.sort.order case of undefined seems to create the desired behaviour. It's hacky, but maintains the dropdown option for asc/desc sort. It also seems to log the opposite props.sort.order so the ArrowDown/ArrowUp icons are reversed.

data-table-column-header.svelte

	function handleDescSort(e: Event) {
		if (props.sort.order === "desc") {
			return;
		}
		if (props.sort.order === undefined) {
			props.sort.toggle(e);
                        props.sort.toggle(e);
			return;
		}
		props.sort.toggle(e);
	}

I couldn't find any examples where asc/desc drop down has been implemented. I'd like to help, haven't been able get past anything further than the above.

[huntabyte]

Closed by: #925