12. Cómo hacer una columna buscable en Filament 5 – Encuentra clientes al instante

Hoy vas a agregar magia a tu tabla. Imagina tener 500 clientes y tener que buscar manualmente a «Juan Pérez» entre todas las páginas. Hoy agregarás una barra de búsqueda que filtra resultados al instante mientras escribes. ¡Tus usuarios te lo agradecerán!

🎯 Objetivo de hoy

Hacer la columna de nombre buscable usando ->searchable() en CustomersTable.php.

🖥️ Antes / Después

Antes: Para encontrar a un cliente específico, debes navegar página por página manualmente. Con muchos registros, es imposible encontrar algo rápido.

Después: Una barra de búsqueda aparece en la parte superior derecha de la tabla. Escribe «juan» y la tabla filtra instantáneamente mostrando solo «Juan Pérez», «Juan García», etc. La búsqueda funciona en tiempo real.

📁 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'),
            ]);
    }
}

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

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

// 🔧 Implementamos: Búsqueda en la columna name
// Agregamos ->searchable() para permitir buscar por este campo
TextColumn::make('name')
    ->searchable(),

El método ->searchable() activa la búsqueda global para esta columna. Filament agrega automáticamente una barra de búsqueda y genera las consultas SQL necesarias.

✅ 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(),
            ]);
    }
}

🎉 Verifica tu magia

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

• Un campo de búsqueda en la parte superior derecha con placeholder «Search» y un ícono de lupa
• Escribe las primeras letras de un nombre existente → La tabla se filtra automáticamente
• Escribe «xyz» (algo que no existe) → Aparece «No records found»
• Borra el texto de búsqueda → Vuelven a aparecer todos los registros
• La búsqueda funciona sin necesidad de presionar Enter (busca en tiempo real)

¿No ves la barra de búsqueda? Revisa que hayas agregado ->searchable() exactamente como se muestra, con los paréntesis y la coma al final. Asegúrate de tener al menos un registro en la base de datos.

---

💬 ¿Viste cómo filtra la tabla? Es casi mágico: escribes y los resultados aparecen instantáneamente. Con una sola línea, transformaste una tabla estática en una herramienta de búsqueda profesional.

Mañana agregaremos ordenamiento a la columna para que puedas ordenar alfabéticamente. ¿Te animas a seguir construyendo?

📖 Fuente: Filament Column Searching

➡️ Próximo paso: Hacer la columna ordenable con ->sortable().