diff --git a/apps/www/src/routes/examples/tasks/(components)/data-table-column-header.svelte b/apps/www/src/routes/examples/tasks/(components)/data-table-column-header.svelte
index e8268cc2d..d244efcca 100644
--- a/apps/www/src/routes/examples/tasks/(components)/data-table-column-header.svelte
+++ b/apps/www/src/routes/examples/tasks/(components)/data-table-column-header.svelte
@@ -37,7 +37,11 @@
 		if (props.sort.order === "desc") {
 			return;
 		}
-		props.sort.toggle(e);
+		if (props.sort.order === undefined) {
+			// We can only toggle, so we toggle from undefined to 'asc' first
+			props.sort.toggle(e);
+		}
+		props.sort.toggle(e); // Then we toggle from 'asc' to 'desc'
 	}
 
 	function handleHide() {