Columnas
DataTableColumn API fluida y 10+ tipos de columna especializados para renderizar contenido visual rico.
Demo en vivo
DataTable con BadgeColumn, BooleanColumn, NumberColumn, ProgressColumn, ColorColumn y DateColumn.
| Progreso | Color | |||||
|---|---|---|---|---|---|---|
| AirPods Max | active | $549.00 |
100%
|
hace 3 semanas | ||
| AirPods Pro 3 | draft | $249.00 |
55%
|
#14B8A6
|
hace 1 semana | |
| AirTag 4-Pack | active | $99.00 |
100%
|
#3B82F6
|
hace 2 semanas | |
| Apple Pencil Pro | active | $129.00 |
100%
|
#F59E0B
|
hace 1 semana | |
| Apple TV 4K | active | $129.00 |
100%
|
#3B82F6
|
hace 6 días | |
| Apple Watch Ultra | active | $899.00 |
72%
|
#8B5CF6
|
hace 3 semanas | |
| Beats Solo 4 | active | $199.00 |
100%
|
#F59E0B
|
hace 2 días | |
| HomePod mini | active | $99.00 |
100%
|
#F97316
|
hace 2 semanas | |
| Mac Mini M4 | draft | $699.00 |
45%
|
#14B8A6
|
hace 2 semanas | |
| Mac Pro M4 Ultra | archived | $6,999.00 |
100%
|
#6366F1
|
hace 6 días | |
| Mac Studio M4 Ultra | draft | $3,999.00 |
25%
|
#8B5CF6
|
hace 1 semana | |
| MacBook Air 13" | active | $1,099.00 |
90%
|
#EF4444
|
hace 2 semanas | |
| MacBook Pro 14" | active | $1,999.00 |
85%
|
#10B981
|
hace 4 días | |
| MacBook Pro 16" | active | $2,499.00 |
100%
|
#3B82F6
|
hace 3 semanas | |
| MagSafe Charger | active | $39.00 |
100%
|
#F97316
|
hace 1 semana | |
| Magic Keyboard | active | $299.00 |
100%
|
#EC4899
|
hace 2 semanas | |
| Magic Mouse | active | $99.00 |
100%
|
#EF4444
|
hace 4 días | |
| Pro Display XDR | archived | $4,999.00 |
100%
|
#10B981
|
hace 1 semana | |
| Studio Display | active | $1,599.00 |
60%
|
#06B6D4
|
hace 2 semanas | |
| Vision Pro | active | $3,499.00 |
30%
|
#6366F1
|
hace 2 semanas | |
| iPad Air M2 | active | $799.00 |
88%
|
#F59E0B
|
hace 3 semanas | |
| iPad Pro 13" M4 | active | $1,299.00 |
70%
|
#06B6D4
|
hace 1 semana | |
| iPad mini 7 | active | $499.00 |
65%
|
#8B5CF6
|
hace 1 día | |
| iPhone 15 Pro | active | $1,199.00 |
95%
|
#EF4444
|
hace 3 semanas | |
| iPhone SE 4 | active | $429.00 |
80%
|
#EC4899
|
hace 1 semana |
Column API
Cada columna se crea con Column::make(label, field). Los métodos son encadenables.
Column::make('Nombre', 'name')
->sortable() // Habilita sorting
->sortableAs('users.name') // Sorting con campo diferente
->searchable() // Habilita búsqueda
->searchableAs('name') // Búsqueda con campo diferente
->searchCallback(fn (Builder $q, string $term) => ...)
->hidden() // Oculta la columna
->hiddenIf(fn () => ! auth()->user()->isAdmin())
->width(200) // Ancho en px
->minWidth(150) // Ancho mínimo en px
->align('right') // left, center, right
->wrap(false) // Deshabilita wrap del texto
->html() // Renderiza como HTML
->default('N/A') // Valor por defecto si null
->format(fn ($value, $row) => ...) // Formatear valorColumn::make('Nombre', 'name')
->sortable() // Habilita sorting
->sortableAs('users.name') // Sorting con campo diferente
->searchable() // Habilita búsqueda
->searchableAs('name') // Búsqueda con campo diferente
->searchCallback(fn (Builder $q, string $term) => ...)
->hidden() // Oculta la columna
->hiddenIf(fn () => ! auth()->user()->isAdmin())
->width(200) // Ancho en px
->minWidth(150) // Ancho mínimo en px
->align('right') // left, center, right
->wrap(false) // Deshabilita wrap del texto
->html() // Renderiza como HTML
->default('N/A') // Valor por defecto si null
->format(fn ($value, $row) => ...) // Formatear valorTipos de columna
Columnas especializadas que renderizan contenido visual sin necesidad de format() + html().
| Tipo | Clase | Componente UI |
|---|---|---|
text | Column | Texto plano (default) |
boolean | BooleanColumn | <x-kore::boolean> |
badge | BadgeColumn | <x-kore::badge> |
date | DateColumn | Carbon + <x-kore::tooltip> |
image | ImageColumn | <x-kore::avatar> o <img> |
link | LinkColumn | <a> con estilos kore |
number | NumberColumn | number_format / NumberFormatter |
progress | ProgressColumn | <x-kore::progress> |
color | ColorColumn | Swatch div + clipboard |
component | ComponentColumn | <x-dynamic-component> |
action | ActionColumn | <x-kore::dropdown> + RowActions |
BadgeColumn
Renderiza valores como badges con colores e iconos por valor.
BadgeColumn::make('Estado', 'status')
->colors([
'active' => 'success',
'draft' => 'warning',
'archived' => 'muted',
])
->icons([
'active' => 'check-circle',
'draft' => 'pencil',
'archived' => 'archive',
])
->variant('soft') // soft, outline, solid
->size('sm')BadgeColumn::make('Estado', 'status')
->colors([
'active' => 'success',
'draft' => 'warning',
'archived' => 'muted',
])
->icons([
'active' => 'check-circle',
'draft' => 'pencil',
'archived' => 'archive',
])
->variant('soft') // soft, outline, solid
->size('sm')BooleanColumn
Muestra valores booleanos como iconos con colores.
BooleanColumn::make('Activo', 'is_active')
->trueIcon('check')
->falseIcon('x')
->trueColor('success')
->falseColor('destructive')
->size('md')
->editable() // Auto-toggle al hacer clickBooleanColumn::make('Activo', 'is_active')
->trueIcon('check')
->falseIcon('x')
->trueColor('success')
->falseColor('destructive')
->size('md')
->editable() // Auto-toggle al hacer clickNumberColumn
Formatea números con soporte de moneda, locale y agregaciones.
// Moneda completa
NumberColumn::make('Salario', 'salary')
->money('USD', 'en_US')
->sum('Total') // Agregación en footer
// Formato manual
NumberColumn::make('Precio', 'price')
->decimals(2)
->prefix('$')
->suffix(' MXN')
->separators('.', ',') // decimal, miles// Moneda completa
NumberColumn::make('Salario', 'salary')
->money('USD', 'en_US')
->sum('Total') // Agregación en footer
// Formato manual
NumberColumn::make('Precio', 'price')
->decimals(2)
->prefix('$')
->suffix(' MXN')
->separators('.', ',') // decimal, milesProgressColumn
Renderiza barras o círculos de progreso.
ProgressColumn::make('Progreso', 'completion')
->max(100)
->size('sm') // sm, md, lg
->color('auto') // auto cambia color según valor
->showValue() // Muestra el porcentaje
->circle() // Usa circle en vez de barra
->striped() // Barra con patrón stripedProgressColumn::make('Progreso', 'completion')
->max(100)
->size('sm') // sm, md, lg
->color('auto') // auto cambia color según valor
->showValue() // Muestra el porcentaje
->circle() // Usa circle en vez de barra
->striped() // Barra con patrón stripedColorColumn
Muestra un swatch de color desde un valor hexadecimal.
ColorColumn::make('Color', 'hex_color')
->showLabel() // Muestra el valor hex
->swatchSize('md') // sm, md, lg
->swatchShape('circle') // circle, rounded
->copyable() // Click para copiarColorColumn::make('Color', 'hex_color')
->showLabel() // Muestra el valor hex
->swatchSize('md') // sm, md, lg
->swatchShape('circle') // circle, rounded
->copyable() // Click para copiarDateColumn
Formatea fechas con Carbon, timezone y formato relativo.
// Formato específico
DateColumn::make('Creado', 'created_at')
->dateFormat('d M Y')
->timezone('America/Mexico_City')
->tooltipFormat('l, d F Y H:i:s')
// Formato relativo
DateColumn::make('Última actividad', 'last_login_at')
->diffForHumans() // "hace 5 días"// Formato específico
DateColumn::make('Creado', 'created_at')
->dateFormat('d M Y')
->timezone('America/Mexico_City')
->tooltipFormat('l, d F Y H:i:s')
// Formato relativo
DateColumn::make('Última actividad', 'last_login_at')
->diffForHumans() // "hace 5 días"ImageColumn
Renderiza imágenes o avatares con fallback a iniciales.
ImageColumn::make('Avatar', 'avatar_url')
->size('sm') // sm, md, lg
->shape('circle') // circle, square
->isAvatar() // Usa avatar component con iniciales
->nameField('name') // Campo para generar inicialesImageColumn::make('Avatar', 'avatar_url')
->size('sm') // sm, md, lg
->shape('circle') // circle, square
->isAvatar() // Usa avatar component con iniciales
->nameField('name') // Campo para generar inicialesLinkColumn
Renderiza enlaces clickeables con patrón de URL o callback.
// Con patrón (reemplaza {field} con el valor del campo)
LinkColumn::make('Nombre', 'name')
->urlPattern('/users/{id}/edit')
->icon('external-link')
->openInNewTab()
// Con callback
LinkColumn::make('Nombre', 'name')
->url(fn ($row) => route('users.show', $row->id))
->color('primary')// Con patrón (reemplaza {field} con el valor del campo)
LinkColumn::make('Nombre', 'name')
->urlPattern('/users/{id}/edit')
->icon('external-link')
->openInNewTab()
// Con callback
LinkColumn::make('Nombre', 'name')
->url(fn ($row) => route('users.show', $row->id))
->color('primary')ComponentColumn
Renderiza un componente Blade o Livewire arbitrario.
ComponentColumn::make('Detalle', 'id')
->component('components.user-card')
->props(fn ($value, $row) => [
'status' => $row->status,
'icon' => 'user',
])
// O con vista Blade
ComponentColumn::make('Detalle', 'id')
->view('partials.custom-cell')ComponentColumn::make('Detalle', 'id')
->component('components.user-card')
->props(fn ($value, $row) => [
'status' => $row->status,
'icon' => 'user',
])
// O con vista Blade
ComponentColumn::make('Detalle', 'id')
->view('partials.custom-cell')