11. Cómo mostrar tu primera columna en la tabla de Filament 5 – De datos invisibles a información visible

Hoy comienza la FASE 2: ¡Tablas que se ven bien! Durante 10 ladrillos has construido un formulario hermoso, pero tu tabla sigue vacía o mostrando datos sin estructura. Hoy vas a agregar tu primera columna para que los nombres de tus clientes aparezcan organizados en la lista.

🎯 Objetivo de hoy

Agregar la primera columna de texto que muestre el nombre del cliente usando TextColumn::make('name') en CustomersTable.php.

🖥️ Antes / Después

Antes: La tabla de clientes está vacía o muestra solo IDs sin sentido. No puedes ver quiénes son tus clientes sin entrar a editar cada registro.

Después: Una columna clara que muestra «Juan Pérez», «María García», etc. Cada nombre aparece como texto plano en su propia celda, organizado en filas. ¡Finalmente ves tus datos!

📁 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([
                // Aquí irán las columnas
            ]);
    }
}

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

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

// 🔧 Implementamos: Primera columna de texto
// Agregamos TextColumn para mostrar el nombre del cliente
TextColumn::make('name'),

El componente TextColumn muestra texto plano de la base de datos. make('name') indica que debe mostrar el valor de la columna «name» del modelo Customer.

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

🎉 Verifica tu magia

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

• Una tabla con encabezado «Name» en la primera columna
• Cada fila muestra el nombre del cliente que guardaste anteriormente
• Si creaste «Juan Pérez» y «María García», ambos aparecen listados
• La columna ocupa todo el ancho disponible
• Si no hay registros, aparece el mensaje «No records found»

¿No ves los nombres? Asegúrate de haber creado al menos un cliente antes en /admin/customers/create. Revisa que el campo en la base de datos se llame exactamente «name».

---

💬 ¡Tu primera columna vive! Ya no es una tabla vacía, ahora muestra datos reales. Es el primer paso para tener un panel administrativo profesional donde puedas ver toda tu información de un vistazo.

Mañana haremos esta columna buscable para que puedas encontrar clientes por nombre rápidamente. ¿Te animas a seguir construyendo?

📖 Fuente: Filament Text Column

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