Support sorting in data-tables

Author: saeedvaziry

.ai/guidelines/core.blade.php

@@ -1,5 +1,7 @@
 # Core Guidelines
 
+**This is the core guidelines. These are very important and high prio and have precedence over other guidelines in this file.**
+
 ## General Rules
 
 - If you find yourself in a loop of failing, ask the user before continuing.

.gitignore

@@ -33,3 +33,4 @@ AGENTS.md
 .cursor
 .github/copilot-instructions.md
 boost.json
+opencode.json

app/Helpers/QueryBuilder.php

@@ -9,6 +9,10 @@ class QueryBuilder
 {
     protected array $searchableFields = [];
 
+    protected ?string $sortBy = null;
+
+    protected ?string $sortDir = null;
+
     public function __construct(public Builder|Relation $query) {}
 
     public static function for(Builder|Relation $query): self
@@ -23,9 +27,27 @@ public function searchableFields(array $fields): self
         return $this;
     }
 
+    public function sortable(?string $defaultSortBy, ?string $defaultSortDir): self
+    {
+        if (request()->has('sort_by') && request()->has('sort_dir')) {
+            $sortBy = request('sort_by');
+            $sortDir = request('sort_dir');
+
+            $dir = strtolower($sortDir) === 'asc' ? 'asc' : 'desc';
+
+            $this->sortBy = $sortBy;
+            $this->sortDir = $dir;
+        } elseif ($defaultSortBy && $defaultSortDir) {
+            $this->sortBy = $defaultSortBy;
+            $this->sortDir = strtolower($defaultSortDir) === 'asc' ? 'asc' : 'desc';
+        }
+
+        return $this;
+    }
+
     public function query(): Builder|Relation
     {
-        return $this->query->where(function ($query) {
+        $this->query->where(function ($query) {
             if (request()->has('search') && ! empty(request('search'))) {
                 $search = request('search');
                 $query->where(function ($q) use ($search) {
@@ -34,6 +56,13 @@ public function query(): Builder|Relation
                     }
                 });
             }
+
         });
+
+        if ($this->sortBy && $this->sortDir) {
+            $this->query->orderBy($this->sortBy, $this->sortDir);
+        }
+
+        return $this->query;
     }
 }

app/Http/Controllers/ServerLogController.php

@@ -32,8 +32,9 @@ public function index(Server $server): Response
     {
         $this->authorize('viewAny', [ServerLog::class, $server]);
 
-        $logs = QueryBuilder::for($server->logs()->where('is_remote', 0)->latest())
+        $logs = QueryBuilder::for($server->logs()->where('is_remote', 0))
             ->searchableFields(['name'])
+            ->sortable('created_at', 'desc')
             ->query()
             ->simplePaginate(config('web.pagination_size'));
 

resources/js/components/data-table.tsx

@@ -9,6 +9,22 @@ import { PaginatedData } from '@/types';
 import { Input } from './ui/input';
 import { useEffect, useState } from 'react';
 
+function SortIndicator({ sortKey }: { sortKey: string }) {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
+  const params = new URLSearchParams(window.location.search);
+  const current = params.get('sort_by');
+  const dir = params.get('sort_dir') || 'desc';
+
+  if (current !== sortKey) {
+    return <span className="text-muted-foreground">↕</span>;
+  }
+
+  return <span className="text-muted-foreground">{dir === 'asc' ? '↑' : '↓'}</span>;
+}
+
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
   paginatedData?: PaginatedData<TData>;
@@ -19,6 +35,7 @@ interface DataTableProps<TData, TValue> {
   isFetching?: boolean;
   isLoading?: boolean;
   searchable?: boolean;
+  sortable?: boolean;
   onRowClick?: (row: TData) => void;
 }
 
@@ -32,6 +49,7 @@ export function DataTable<TData, TValue>({
   isFetching,
   isLoading,
   searchable,
+  sortable = false,
   onRowClick,
 }: DataTableProps<TData, TValue>) {
   // Use paginatedData.data if available, otherwise fall back to data prop
@@ -76,6 +94,18 @@ export function DataTable<TData, TValue>({
         urlObj.searchParams.set('search', searchQuery);
       }
 
+      // Preserve the current sort parameters
+      const currentParams = new URLSearchParams(window.location.search);
+      const sortBy = currentParams.get('sort_by');
+      const sortDir = currentParams.get('sort_dir');
+
+      if (sortBy) {
+        urlObj.searchParams.set('sort_by', sortBy);
+      }
+      if (sortDir) {
+        urlObj.searchParams.set('sort_dir', sortDir);
+      }
+
       router.get(urlObj.toString(), {}, { preserveState: true, preserveScroll: true });
     }
   };
@@ -98,6 +128,19 @@ export function DataTable<TData, TValue>({
       if (searchQuery.length > 0) {
         url.searchParams.set('search', searchQuery);
       }
+
+      // Preserve the current sort parameters
+      const currentParams = new URLSearchParams(window.location.search);
+      const sortBy = currentParams.get('sort_by');
+      const sortDir = currentParams.get('sort_dir');
+
+      if (sortBy) {
+        url.searchParams.set('sort_by', sortBy);
+      }
+      if (sortDir) {
+        url.searchParams.set('sort_dir', sortDir);
+      }
+
       router.get(
         url.toString(),
         {},
@@ -141,9 +184,41 @@ export function DataTable<TData, TValue>({
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
                 {headerGroup.headers.map((header) => {
+                  const canSort = sortable && header.column.getCanSort();
+
+                  // determine unique key to use for sorting: use the column id provided by the table
+                  const sortKey = header.id;
+
                   return (
                     <TableHead key={header.id}>
-                      {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                      {header.isPlaceholder ? null : canSort ? (
+                        <button
+                          type="button"
+                          className="flex cursor-pointer items-center gap-2"
+                          onClick={() => {
+                            // Build new URL preserving all existing params
+                            const url = new URL(window.location.href);
+                            const params = url.searchParams;
+
+                            const current = params.get('sort_by');
+                            const currentDir = params.get('sort_dir') || 'desc';
+
+                            if (current !== sortKey) {
+                              params.set('sort_by', sortKey);
+                              params.set('sort_dir', 'asc');
+                            } else {
+                              params.set('sort_dir', currentDir === 'asc' ? 'desc' : 'asc');
+                            }
+
+                            router.get(url.toString(), {}, { preserveState: true, preserveScroll: true });
+                          }}
+                        >
+                          {flexRender(header.column.columnDef.header, header.getContext())}
+                          <SortIndicator sortKey={sortKey} />
+                        </button>
+                      ) : (
+                        flexRender(header.column.columnDef.header, header.getContext())
+                      )}
                     </TableHead>
                   );
                 })}

resources/js/pages/server-logs/index.tsx

@@ -45,7 +45,7 @@ export default function ServerLogs() {
           </div>
         </HeaderContainer>
 
-        <DataTable columns={columns} paginatedData={page.props.logs} searchable />
+        <DataTable columns={columns} paginatedData={page.props.logs} searchable sortable />
       </Container>
     </ServerLayout>
   );