Group moderation table sorting

src/components/dialogs/GroupDialog/groupMemberModerationJoinRequestsColumns.jsx

@@ -1,8 +1,29 @@
 import { Checkbox } from '@/components/ui/checkbox';
 import { i18n } from '@/plugin';
+import { ArrowUpDown } from 'lucide-vue-next';
+import { Button } from '@/components/ui/button';
 
 const { t } = i18n.global;
 
+const sortButton = ({ column, label, descFirst = false }) => (
+    <Button
+        variant="ghost"
+        size="sm"
+        class="-ml-2 h-8 px-2"
+        onClick={() => {
+            const sorted = column.getIsSorted();
+            if (!sorted && descFirst) {
+                column.toggleSorting(true);
+                return;
+            }
+            column.toggleSorting(sorted === 'asc');
+        }}
+    >
+        {label}
+        <ArrowUpDown class="ml-1 h-4 w-4" />
+    </Button>
+);
+
 export const createColumns = ({
     randomUserColours,
     userImage,
@@ -62,7 +83,11 @@ export const createColumns = ({
     {
         id: 'displayName',
         accessorFn: (row) => row?.user?.displayName ?? row?.$displayName ?? '',
-        header: () => t('dialog.group_member_moderation.display_name'),
+        header: ({ column }) =>
+            sortButton({
+                column,
+                label: t('dialog.group_member_moderation.display_name')
+            }),
         size: 160,
         cell: ({ row }) => {
             const original = row.original;
@@ -88,7 +113,11 @@ export const createColumns = ({
     },
     {
         accessorKey: 'managerNotes',
-        header: () => t('dialog.group_member_moderation.notes'),
+        header: ({ column }) =>
+            sortButton({
+                column,
+                label: t('dialog.group_member_moderation.notes')
+            }),
         cell: ({ row }) => (
             <span onClick={(e) => e.stopPropagation()}>
                 {row.original?.managerNotes}