13. Cómo ordenar columnas en Filament 5 – Organiza tus datos con un clic

Hoy vas a darle superpoderes a tu columna de nombre. Imagina que tienes cientos de clientes y quieres verlos ordenados alfabéticamente de A-Z o de Z-A. Con solo un clic en el encabezado, la tabla se reordena mágicamente. ¡Tus usuarios adorarán esta funcionalidad!

🎯 Objetivo de hoy

Hacer la columna de nombre ordenable usando ->sortable() en CustomersTable.php.

🖥️ Antes / Después

Antes: Los clientes aparecen en el orden en que fueron creados. Si quieres verlos alfabéticamente, no hay forma de hacerlo desde la interfaz.

Después: El encabezado «Name» ahora es un botón clickeable. Al hacer clic, aparece una flecha ↑ indicando orden ascendente (A-Z). Otro clic y cambia a ↓ descendente (Z-A). Un tercer clic vuelve al orden original.

📁 Estructura de carpetas (mapa de hoy)

app/Filament/Resources/
└── Customers/                    ⚪ Carpeta del Resource
    ├── CustomerResource.php      ⚪ No lo tocamos hoy
    ├── Pages/                    ⚪ No lo tocamos hoy
    |   ├── CreateCustomer.php   ⚪ No lo tocamos hoy
    |   ├── EditCustomer.php     ⚪ No lo tocamos hoy
    |   └── ListCustomers.php    ⚪ No lo tocamos hoy
    ├── Schemas/
    |   └── CustomerForm.php      ⚪ No lo tocamos hoy
    └── Tables/
        └── CustomersTable.php   🟡 🎯 AQUÍ TRABAJAMOS HOY

Hoy modificamos solo el archivo marcado con 🟡. Los demás archivos existen pero no los tocaremos.

📋 Paso 1: Tu código de ayer

📄 Ruta: app/Filament/Resources/Customers/Tables/CustomersTable.php

<?php

namespace App\Filament\Resources\Customers\Tables;

use Filament\Tables\Table;
use Filament\Tables\Columns\TextColumn;

class CustomersTable
{
    public static function configure(Table $table): Table
    {
        return $table
            ->columns([
                TextColumn::make('name')
                    ->searchable(),
            ]);
    }
}

➕ Paso 2: Tu ladrillo de hoy (1 línea)

📄 Ruta: app/Filament/Resources/Customers/Tables/CustomersTable.php

// 🔧 Implementamos: Ordenamiento en la columna name
// Agregamos ->sortable() para permitir ordenar alfabéticamente
TextColumn::make('name')
    ->searchable()
    ->sortable(),

El método ->sortable() convierte el encabezado en un botón interactivo. Filament genera automáticamente las consultas ORDER BY y maneja los estados de ordenamiento (ascendente/descendente).

✅ Paso 3: Código completo con tu ladrillo

📄 Archivo modificado

Ruta completa: app/Filament/Resources/Customers/Tables/CustomersTable.php

<?php

namespace App\Filament\Resources\Customers\Tables;

use Filament\Tables\Table;
use Filament\Tables\Columns\TextColumn;

class CustomersTable
{
    public static function configure(Table $table): Table
    {
        return $table
            ->columns([
                TextColumn::make('name')
                    ->searchable()
                    ->sortable(),
            ]);
    }
}

🎉 Verifica tu magia

Abre tu navegador en /admin/customers y deberías ver:

• El encabezado «Name» ahora tiene un aspecto de botón (hover effect al pasar el mouse)
• Primer clic en «Name» → Aparece flecha ↑ y los nombres se ordenan A-Z
• Segundo clic en «Name» → La flecha cambia a ↓ y los nombres se ordenan Z-A
• Tercer clic → La flecha desaparece y vuelve al orden original (por fecha de creación)
• La búsqueda sigue funcionando: puedes buscar «juan» y luego ordenar los resultados

¿No ves la flecha de ordenamiento? Revisa que hayas agregado ->sortable() después de ->searchable(). Asegúrate de tener al menos 2 registros para ver el efecto del ordenamiento.

---

💬 ¿Viste esas flechas aparecer? Tu tabla ahora es profesional: busca y ordena. Con solo dos métodos encadenados, tienes funcionalidad que normalmente requeriría horas de programación manual.

Mañana agregaremos más columnas (email, teléfono) y les daremos formato especial. ¿Te animas a seguir construyendo?

📖 Fuente: Filament Column Sorting

➡️ Próximo paso: Agregar columna de email con TextColumn::make('email').