feat: add server-side table sorting

src/components/data-table/TableHeader.tsx

@@ -2,6 +2,8 @@
 import { flexRender } from '@tanstack/react-table';
 import { TableHead, TableHeader as ShadTableHeader, TableRow } from '@/components/ui/table';
 import { Table } from '@tanstack/react-table';
+import { ArrowDownWideNarrow, ArrowUpDown, ArrowUpNarrowWide } from 'lucide-react';
+import { cn } from '@/lib/utils';
 
 const TableHeader = <TData, _>({ table }: { table: Table<TData> }) => {
   return (
@@ -9,14 +11,38 @@ const TableHeader = <TData, _>({ table }: { table: Table<TData> }) => {
       {table.getHeaderGroups().map((headerGroup) => (
         <TableRow key={headerGroup.id}>
           {headerGroup.headers.map((header) => {
+            const canSort = header.column.getCanSort();
+            const sortDirection = header.column.getIsSorted();
+            const SortIcon =
+              sortDirection === 'asc'
+                ? ArrowUpNarrowWide
+                : sortDirection === 'desc'
+                  ? ArrowDownWideNarrow
+                  : ArrowUpDown;
+
             return (
               <TableHead
                 key={header.id}
-                className="h-10 bg-card/80 px-2 text-foreground backdrop-blur-xl"
+                onClick={canSort ? header.column.getToggleSortingHandler() : undefined}
+                className={cn(
+                  'h-10 bg-card/80 px-2 text-foreground backdrop-blur-xl transition-colors',
+                  canSort && 'cursor-pointer select-none hover:bg-muted/60',
+                  sortDirection && 'bg-muted/70',
+                )}
               >
                 {header.isPlaceholder ? null : (
-                  <div className="flex items-center gap-2">
-                    {flexRender(header.column.columnDef.header, header.getContext())}
+                  <div className="flex min-h-8 w-full items-center justify-between gap-2">
+                    <span className="truncate">
+                      {flexRender(header.column.columnDef.header, header.getContext())}
+                    </span>
+                    {canSort ? (
+                      <SortIcon
+                        className={cn(
+                          'size-3.5 shrink-0 transition-colors',
+                          sortDirection ? 'text-foreground' : 'text-muted-foreground/60',
+                        )}
+                      />
+                    ) : null}
                   </div>
                 )}
               </TableHead>