🎯 Piensa en esto: Imagina que tienes una hoja de Excel con todos tus productos. Cada fila es un producto, cada columna es un dato: nombre, precio, stock. Puedes ordenar por precio, buscar por nombre, filtrar por categoría. Es súper útil.
El método table() hace eso mismo, pero con superpoderes. Tú decides qué columnas mostrar, cuáles son buscables, cuáles se pueden ordenar, qué botones aparecen… Es como diseñar una hoja de Excel perfecta para tu negocio, sin límites.
1
¿Qué es table() exactamente?Es el método que le dice a Filament: «Cuando alguien entre a ver los productos, muéstrale ESTAS columnas, en ESTE orden, con ESTAS opciones». Sin este método, no verías nada en el listado.
¿Qué es table() exactamente?Es el método que le dice a Filament: «Cuando alguien entre a ver los productos, muéstrale ESTAS columnas, en ESTE orden, con ESTAS opciones». Sin este método, no verías nada en el listado.
💡 Aquí está el truco: cada columna puede tener sus propias reglas. Algunas se pueden buscar, otras se pueden ordenar, otras muestran iconos en vez de texto…
2
Conocer los tipos de columnasTienes
Conocer los tipos de columnasTienes
TextColumn para texto normal, IconColumn para mostrar iconos (como un check verde o una X roja), ImageColumn para imágenes… Cada tipo tiene sus propias opciones.
3
Ver el código que vamos a escribirAquí viene lo bueno: vas a crear columnas que se pueden buscar, ordenar, y hasta cambiar de color según el valor. Todo encadenado, como en el formulario.
Ver el código que vamos a escribirAquí viene lo bueno: vas a crear columnas que se pueden buscar, ordenar, y hasta cambiar de color según el valor. Todo encadenado, como en el formulario.
📝 ESTE ES EL CÓDIGO QUE VAMOS A APRENDER:
📍 Archivo: app/Filament/Resources/Productos/Tables/ProductosTable.php
TextColumn::make('nombre')->searchable(),
TextColumn::make('precio')->money('USD')->sortable(),
IconColumn::make('activo')->boolean();🔍 Vamos a entender línea por línea:
TextColumn::make('nombre') → Creas una columna de texto que muestra el campo «nombre» de cada producto. Simple y directo.->searchable() → Esta columna se puede buscar. Si el usuario escribe «laptop» en la barra de búsqueda, Filament busca en esta columna. ¡Muy útil!TextColumn::make('precio') → Otra columna de texto, pero esta muestra el precio.->money('USD') → Formatea el número como dinero. En lugar de mostrar «999», muestra «$999.00». ¡Se ve mucho más profesional!->sortable() → El usuario puede hacer clic en el encabezado para ordenar de menor a mayor (o viceversa). Como en Excel.IconColumn::make('activo') → Una columna que muestra un ICONO en lugar de texto. Para cosas como «sí/no», «activo/inactivo».->boolean() → Si el valor es true, muestra un check verde. Si es false, muestra una X roja. ¡Super visual y fácil de entender!📊 Así se ve tu tabla en el panel:
| Nombre | Precio | Activo |
|---|---|---|
| Laptop Dell | $999.00 | ✅ |
| Mouse Logitech | $79.00 | ✅ |
| Teclado Viejo | $15.00 | ❌ |
👆 Fíjate: el precio tiene símbolo $ y el activo muestra iconos, no texto
4
Un truco avanzado: colores según el valorImagina que quieres que el stock se vea rojo si hay poco, amarillo si está medio, y verde si hay mucho. Se puede hacer con una sola función:
Un truco avanzado: colores según el valorImagina que quieres que el stock se vea rojo si hay poco, amarillo si está medio, y verde si hay mucho. Se puede hacer con una sola función:
TextColumn::make('stock')
->color(fn (int $state): string => match (true) {
$state <= 5 => 'danger', // Rojo: ¡Urgente reponer!
$state <= 20 => 'warning', // Amarillo: Ojo
default => 'success', // Verde: Todo bien
})💡 Esto hace que tu tabla sea visualmente intuitiva. Con un vistazo ya sabes qué necesita atención.
📁 ¿Quieres ver el código completo del archivo? (opcional)
Esto es solo para que veas cómo se ve todo junto:
📍 Archivo: app/Filament/Resources/Productos/Tables/ProductosTable.php
<?php
namespace App\Filament\Resources\Productos\Tables;
use Filament\Actions\BulkActionGroup;
use Filament\Actions\DeleteBulkAction;
use Filament\Actions\EditAction;
use Filament\Tables\Columns\IconColumn;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Table;
class ProductosTable
{
public static function configure(Table $table): Table
{
return $table
->columns([
TextColumn::make('nombre')->searchable(),
TextColumn::make('precio')->money('USD')->sortable(),
TextColumn::make('stock')->numeric()->sortable(),
IconColumn::make('activo')->boolean(),
])
->recordActions([
EditAction::make(),
])
->toolbarActions([
BulkActionGroup::make([
DeleteBulkAction::make(),
]),
]);
}
}5
¡Pruébalo!Guarda los cambios, ve a tu panel y entra a «Productos». ¿Ves las columnas que definiste? Haz clic en el encabezado «Precio» para ordenar. Escribe algo en la barra de búsqueda. ¿Funciona? ¡Excelente!
¡Pruébalo!Guarda los cambios, ve a tu panel y entra a «Productos». ¿Ves las columnas que definiste? Haz clic en el encabezado «Precio» para ordenar. Escribe algo en la barra de búsqueda. ¿Funciona? ¡Excelente!
🎉 ¿Qué aprendimos hoy?
table()es donde diseñas el listado de registros: qué columnas, qué opcionesTextColumnmuestra texto,IconColumnmuestra iconos visuales->searchable()hace que se pueda buscar en esa columna->sortable()permite ordenar haciendo clic en el encabezado->money('USD')formatea como moneda automáticamente- Puedes agregar colores condicionales para destacar información importante
En la siguiente lección vamos a ver los resources simples con --simple, que usan ventanas emergentes en lugar de páginas separadas. ¡Ideal para cosas rápidas como categorías! Nos vemos. 🚀