14. Cómo agregar la columna de email en Filament 5 – Mostrando más datos en tu tabla

Hoy vas a enriquecer tu tabla con más información útil. Después de tener el nombre buscable y ordenable, es hora de mostrar el email de cada cliente. Así podrás ver de un vistazo tanto el nombre como el correo sin entrar a editar cada registro.

🎯 Objetivo de hoy

Agregar una segunda columna que muestre el email del cliente usando TextColumn::make('email') en CustomersTable.php.

🖥️ Antes / Después

Antes: La tabla solo muestra el nombre del cliente. Para ver el email, debes hacer clic en «Edit» y entrar al formulario de cada cliente.

Después: La tabla ahora tiene dos columnas: «Name» y «Email». Puedes ver de un vistazo que «Juan Pérez» tiene el correo «juan@empresa.com». La tabla se ve más completa y profesional.

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

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

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

// 🔧 Implementamos: Segunda columna para email
// Agregamos TextColumn para mostrar el correo del cliente
TextColumn::make('email'),

El componente TextColumn::make('email') crea una nueva columna que muestra el valor del campo email de la base de datos. Por defecto, las columnas nuevas aparecen a la derecha de las existentes.

✅ 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(),
                TextColumn::make('email'),
            ]);
    }
}

🎉 Verifica tu magia

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

• Dos columnas ahora: «Name» (izquierda) y «Email» (derecha)
• Cada fila muestra el nombre y debajo/el lado su email correspondiente
• La columna «Name» conserva sus superpoderes: sigue siendo buscable y ordenable
• La columna «Email» es estática por ahora (sin búsqueda ni ordenamiento)
• Si un cliente no tiene email, la celda aparece vacía

¿No ves la columna de email? Asegúrate de haber guardado clientes con email en la base de datos. Revisa que el campo en la base de datos se llame exactamente «email». Verifica que hayas agregado la coma después de ->sortable() en la columna anterior.

---

💬 ¿Viste tu tabla crecer? Ahora muestra el nombre y el email. Es el inicio de un dashboard completo donde tendrás toda la información importante visible de un vistazo.

Mañana haremos la columna de email también buscable, para que puedas encontrar clientes por su correo. ¿Te animas a seguir construyendo?

📖 Fuente: Filament Text Column

➡️ Próximo paso: Hacer la columna de email buscable con ->searchable().