From b1dc58ddb7b420caeefe6ec066666dc1fb407d8e Mon Sep 17 00:00:00 2001
From: Classic298 <27028174+Classic298@users.noreply.github.com>
Date: Sat, 21 Feb 2026 21:18:37 +0100
Subject: [PATCH] feat: add sortable columns to groups admin panel (#21692)

* feat: add sortable columns to groups admin panel

Make the Group and Users column headers in the admin groups list clickable to sort groups alphabetically by name or numerically by member count. Clicking a column toggles ascending/descending order, indicated by a chevron icon. When no sort is active, the default API order (by updated_at) is preserved.

* Update Groups.svelte

* Update Groups.svelte
---
 src/lib/components/admin/Users/Groups.svelte | 73 ++++++++++++++++----
 1 file changed, 61 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/admin/Users/Groups.svelte b/src/lib/components/admin/Users/Groups.svelte
index fe0f7477eb..39304e4430 100644
--- a/src/lib/components/admin/Users/Groups.svelte
+++ b/src/lib/components/admin/Users/Groups.svelte
@@ -21,6 +21,8 @@
 	import UserCircleSolid from '$lib/components/icons/UserCircleSolid.svelte';
 	import EditGroupModal from './Groups/EditGroupModal.svelte';
 	import Pencil from '$lib/components/icons/Pencil.svelte';
+	import ChevronUp from '$lib/components/icons/ChevronUp.svelte';
+	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
 	import GroupItem from './Groups/GroupItem.svelte';
 	import { createNewGroup, getGroups } from '$lib/apis/groups';
 	import {
@@ -34,19 +36,42 @@
 	let loaded = false;
 
 	let groups = [];
-	let filteredGroups;
 
-	$: filteredGroups = groups.filter((user) => {
-		if (search === '') {
-			return true;
+	let query = '';
+	let orderBy = '';
+	let direction = 'asc';
+
+	const setSortKey = (key) => {
+		if (orderBy === key) {
+			direction = direction === 'asc' ? 'desc' : 'asc';
 		} else {
-			let name = user.name.toLowerCase();
-			const query = search.toLowerCase();
-			return name.includes(query);
+			orderBy = key;
+			direction = 'asc';
 		}
-	});
+	};
+
+	$: filteredGroups = groups
+		.filter((group) => {
+			if (query === '') {
+				return true;
+			} else {
+				let name = group.name.toLowerCase();
+				const q = query.toLowerCase();
+				return name.includes(q);
+			}
+		})
+		.sort((a, b) => {
+			if (orderBy === 'name') {
+				const cmp = a.name.localeCompare(b.name);
+				return direction === 'asc' ? cmp : -cmp;
+			} else if (orderBy === 'members') {
+				const cmp = (a.member_count ?? 0) - (b.member_count ?? 0);
+				return direction === 'asc' ? cmp : -cmp;
+			}
+			return 0;
+		});
+
 
-	let search = '';
 	let defaultPermissions = {};
 
 	let showAddGroupModal = false;
@@ -124,7 +149,7 @@
 					</div>
 					<input
 						class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-hidden bg-transparent"
-						bind:value={search}
+						bind:value={query}
 						placeholder={$i18n.t('Search')}
 					/>
 				</div>
@@ -171,9 +196,33 @@
 		{:else}
 			<div>
 				<div class=" flex items-center gap-3 justify-between text-xs uppercase px-1 font-medium">
-					<div class="w-full basis-3/5">{$i18n.t('Group')}</div>
+					<button
+						class="w-full basis-3/5 flex items-center gap-1 hover:text-gray-900 dark:hover:text-gray-100 transition cursor-pointer"
+						on:click={() => setSortKey('name')}
+					>
+						{$i18n.t('Group')}
+						{#if orderBy === 'name'}
+							{#if direction === 'asc'}
+								<ChevronUp className="size-3" strokeWidth="2.5" />
+							{:else}
+								<ChevronDown className="size-3" strokeWidth="2.5" />
+							{/if}
+						{/if}
+					</button>
 
-					<div class="w-full basis-2/5 text-right">{$i18n.t('Users')}</div>
+					<button
+						class="w-full basis-2/5 flex items-center gap-1 justify-end hover:text-gray-900 dark:hover:text-gray-100 transition cursor-pointer"
+						on:click={() => setSortKey('members')}
+					>
+						{$i18n.t('Users')}
+						{#if orderBy === 'members'}
+							{#if direction === 'asc'}
+								<ChevronUp className="size-3" strokeWidth="2.5" />
+							{:else}
+								<ChevronDown className="size-3" strokeWidth="2.5" />
+							{/if}
+						{/if}
+					</button>
 				</div>
 
 				<hr class="mt-1.5 border-gray-100/30 dark:border-gray-850/30" />