namespace App\\Http\\Controllers;\n\nuse App\\Models\\User;\nuse Illuminate\\Http\\Request;\n\nclass UserController extends Controller\n{\n public function index(Request $request)\n {\n $sortBy = $request->query('sort_by', 'name'); \/\/ Default sort by name\n $sortDirection = $request->query('direction', 'asc'); \/\/ Default ascending\n\n \/\/ Validate sort_by to prevent SQL injection\n $validColumns = ['name', 'email', 'created_at'];\n if (!in_array($sortBy, $validColumns)) {\n $sortBy = 'name';\n }\n\n \/\/ Toggle sort direction for the next click\n $direction = $sortDirection === 'asc' ? 'desc' : 'asc';\n\n \/\/ Fetch sorted and paginated data\n $users = User::orderBy($sortBy, $sortDirection)->paginate(10);\n\n return view('users.index', compact('users', 'sortBy', 'sortDirection', 'direction'));\n }\n}<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\nExplanation<\/h3>\n\n\n\n\n- Query Parameters: sort_by determines the column to sort, and direction sets the sort order (asc or desc).<\/li>\n\n\n\n
- Validation: Only allow specific columns to prevent SQL injection.<\/li>\n\n\n\n
- Toggle Direction: The $direction variable is set to the opposite of the current sort direction for the next click.<\/li>\n\n\n\n
- Pagination: Use paginate to limit results per page.<\/li>\n<\/ul>\n\n\n\n
Step 2: Define the Route<\/h2>\n\n\n\n
In routes\/web.php<\/code>, add a route for the controller:<\/p>\n\n\n\n\n\nuse App\\Http\\Controllers\\UserController;\n\nRoute::get('\/users', [UserController::class, 'index'])->name('users.index');<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\nStep 3: Create the View with Toggle Arrows<\/h2>\n\n\n\n
Create a Blade view at resources\/views\/users\/index.blade.php<\/code>:<\/p>\n\n\n\n\n\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Sortable User Table<\/title>\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.1.3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\n <style>\n .sort-icon::after {\n content: '';\n display: inline-block;\n width: 0;\n height: 0;\n margin-left: 5px;\n vertical-align: middle;\n border-left: 4px solid transparent;\n border-right: 4px solid transparent;\n }\n .sort-asc::after {\n border-bottom: 4px solid #000;\n }\n .sort-desc::after {\n border-top: 4px solid #000;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container mt-5\">\n <h2>Sortable User Table<\/h2>\n <table class=\"table table-bordered\">\n <thead>\n <tr>\n <th>\n <a href=\"{{ route('users.index', ['sort_by' => 'name', 'direction' => ($sortBy == 'name' ? $direction : 'asc')]) }}\"\n class=\"sort-link {{ $sortBy == 'name' ? ($sortDirection == 'asc' ? 'sort-asc' : 'sort-desc') : '' }}\">\n Name\n <\/a>\n <\/th>\n <th>\n <a href=\"{{ route('users.index', ['sort_by' => 'email', 'direction' => ($sortBy == 'email' ? $direction : 'asc')]) }}\"\n class=\"sort-link {{ $sortBy == 'email' ? ($sortDirection == 'asc' ? 'sort-asc' : 'sort-desc') : '' }}\">\n Email\n <\/a>\n <\/th>\n <th>\n <a href=\"{{ route('users.index', ['sort_by' => 'created_at', 'direction' => ($sortBy == 'created_at' ? $direction : 'asc')]) }}\"\n class=\"sort-link {{ $sortBy == 'created_at' ? ($sortDirection == 'asc' ? 'sort-asc' : 'sort-desc') : '' }}\">\n Created At\n <\/a>\n <\/th>\n <\/tr>\n <\/thead>\n <tbody>\n @foreach ($users as $user)\n <tr>\n <td>{{ $user->name }}<\/td>\n <td>{{ $user->email }}<\/td>\n <td>{{ $user->created_at }}<\/td>\n <\/tr>\n @endforeach\n <\/tbody>\n <\/table>\n {{ $users->appends(['sort_by' => $sortBy, 'direction' => $sortDirection])->links() }}\n <\/div>\n<\/body>\n<\/html>\n<\/code><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\nExplanation<\/h3>\n\n\n\n
![\"\"](\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-29-at-3.52.15-PM.png\")
<\/a><\/figure>\n\n\n\n