Creado filtrado por nombre, displayname, cantidadposts y fechacreacion en panel admin

src/lib/components/TablaUsuarios.svelte

@@ -34,15 +34,66 @@
 	let usuarioModificar: UserResponseDto | null = $state(null);
 
 	let search = $state("");
+
+	type SortKey = 'username' | 'displayName' | 'postsCount' | 'createdAt';
+    let sortBy = $state<SortKey | null>(null);
+    let sortDirection = $state<'asc' | 'desc'>('asc');
+
+	function ordenarPor(campo: SortKey) {
+		if (sortBy === campo) {
+			sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
+		} else {
+			sortBy = campo;
+			sortDirection = 'asc';
+		}
+	}
+
 	let usuariosFiltrados = $derived(
-    usuarios.filter((u) =>
+    usuarios
-        u.username.toLowerCase().startsWith(search.toLowerCase()) ||
+        .filter((u) =>
-        u.displayName.toLowerCase().startsWith(search.toLowerCase())
+            u.username.toLowerCase().startsWith(search.toLowerCase()) ||
-    	)
+            u.displayName.toLowerCase().startsWith(search.toLowerCase())
+        )
+        .toSorted((a, b) => {
+            if (!sortBy) return 0;
+
+            const key: SortKey = sortBy;
+
+            if (key === 'createdAt') {
+                const ta = new Date(a.createdAt).getTime();
+                const tb = new Date(b.createdAt).getTime();
+                return sortDirection === 'asc' ? ta - tb : tb - ta;
+            }
+
+            if (key === 'postsCount') {
+                return sortDirection === 'asc'
+                    ? a.postsCount - b.postsCount
+                    : b.postsCount - a.postsCount;
+            }
+
+            const sa = a[key].toString().toLowerCase();
+            const sb = b[key].toString().toLowerCase();
+            return sortDirection === 'asc'
+                ? sa.localeCompare(sb)
+                : sb.localeCompare(sa);
+        })
 	);
-	//let usuariosFiltrados = $derived(() => usuarios.filter((u) => u.username.toLowerCase().includes(search.toLowerCase()) || u.displayName.toLowerCase().includes(search.toLowerCase())));
+
-	//let usuariosFiltrados = $derived(usuarios.filter(u => u.username.toLowerCase().includes(search.toLowerCase()) || u.displayName.toLowerCase().includes(search.toLowerCase())));
+	function getSortIcon(campo: SortKey) {
-	//$: usuariosFiltrados = usuarios.filter(u => u.username.toLowerCase().includes(search.toLowerCase()) || u.displayName.toLowerCase().includes(search.toLowerCase()));
+    	if (sortBy !== campo) return "";             // no ícono si no está ordenando por esa columna
+    	return sortDirection === "asc" ? "↑" : "↓";  // ascendente / descendente
+	}
+
+	
+	//let usuariosFiltrados = $derived(
+    //usuarios.filter((u) =>
+    //    u.username.toLowerCase().startsWith(search.toLowerCase()) ||
+    //    u.displayName.toLowerCase().startsWith(search.toLowerCase())
+    //	)
+	//);
+
+	
+
 
 	$effect(() => {
 		if (!open) {
@@ -72,10 +123,18 @@
 <Table>
 	<TableHeader>
 		<TableRow>
-			<TableHead>Usuario</TableHead>
+			<TableHead onclick={() => ordenarPor("username")} class="cursor-pointer select-none">
-			<TableHead>Nombre</TableHead>
+				Usuario {getSortIcon("username")}
-			<TableHead>Cantidad de posts</TableHead>
+			</TableHead>
-			<TableHead>Fecha de Creacion</TableHead>
+			<TableHead onclick={() => ordenarPor("displayName")} class="cursor-pointer select-none">
+				Nombre {getSortIcon("displayName")}
+			</TableHead>
+			<TableHead onclick={() => ordenarPor("postsCount")} class="cursor-pointer select-none">
+				Cantidad de posts {getSortIcon("postsCount")}
+			</TableHead>
+			<TableHead onclick={() => ordenarPor("createdAt")} class="cursor-pointer select-none">
+				Fecha de Creacion {getSortIcon("createdAt")}
+			</TableHead>
 			<TableHead>Acciones</TableHead>
 		</TableRow>
 	</TableHeader>