K
KoreUI

Columnas

DataTable

Column 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.

Por página
Progreso Color
AirPods Max active $549.00
100%
hace 3 semanas
AirPods Pro 3 draft $249.00
55%
hace 1 semana
AirTag 4-Pack active $99.00
100%
hace 2 semanas
Apple Pencil Pro active $129.00
100%
hace 1 semana
Apple TV 4K active $129.00
100%
hace 6 días
Apple Watch Ultra active $899.00
72%
hace 3 semanas
Beats Solo 4 active $199.00
100%
hace 2 días
HomePod mini active $99.00
100%
hace 2 semanas
Mac Mini M4 draft $699.00
45%
hace 2 semanas
Mac Pro M4 Ultra archived $6,999.00
100%
hace 6 días
Mac Studio M4 Ultra draft $3,999.00
25%
hace 1 semana
MacBook Air 13" active $1,099.00
90%
hace 2 semanas
MacBook Pro 14" active $1,999.00
85%
hace 4 días
MacBook Pro 16" active $2,499.00
100%
hace 3 semanas
MagSafe Charger active $39.00
100%
hace 1 semana
Magic Keyboard active $299.00
100%
hace 2 semanas
Magic Mouse active $99.00
100%
hace 4 días
Pro Display XDR archived $4,999.00
100%
hace 1 semana
Studio Display active $1,599.00
60%
hace 2 semanas
Vision Pro active $3,499.00
30%
hace 2 semanas
iPad Air M2 active $799.00
88%
hace 3 semanas
iPad Pro 13" M4 active $1,299.00
70%
hace 1 semana
iPad mini 7 active $499.00
65%
hace 1 día
iPhone 15 Pro active $1,199.00
95%
hace 3 semanas
iPhone SE 4 active $429.00
80%
hace 1 semana

Column API

Cada columna se crea con Column::make(label, field). Los métodos son encadenables.

Métodos fluidos de Column
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 valor
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 valor

Tipos de columna

Columnas especializadas que renderizan contenido visual sin necesidad de format() + html().

Tipo Clase Componente UI
textColumnTexto plano (default)
booleanBooleanColumn<x-kore::boolean>
badgeBadgeColumn<x-kore::badge>
dateDateColumnCarbon + <x-kore::tooltip>
imageImageColumn<x-kore::avatar> o <img>
linkLinkColumn<a> con estilos kore
numberNumberColumnnumber_format / NumberFormatter
progressProgressColumn<x-kore::progress>
colorColorColumnSwatch div + clipboard
componentComponentColumn<x-dynamic-component>
actionActionColumn<x-kore::dropdown> + RowActions

BadgeColumn

Renderiza valores como badges con colores e iconos por valor.

BadgeColumn
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
BooleanColumn::make('Activo', 'is_active')
    ->trueIcon('check')
    ->falseIcon('x')
    ->trueColor('success')
    ->falseColor('destructive')
    ->size('md')
    ->editable()  // Auto-toggle al hacer click
BooleanColumn::make('Activo', 'is_active')
    ->trueIcon('check')
    ->falseIcon('x')
    ->trueColor('success')
    ->falseColor('destructive')
    ->size('md')
    ->editable()  // Auto-toggle al hacer click

NumberColumn

Formatea números con soporte de moneda, locale y agregaciones.

NumberColumn
// 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, miles

ProgressColumn

Renderiza barras o círculos de progreso.

ProgressColumn
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 striped
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 striped

ColorColumn

Muestra un swatch de color desde un valor hexadecimal.

ColorColumn
ColorColumn::make('Color', 'hex_color')
    ->showLabel()             // Muestra el valor hex
    ->swatchSize('md')        // sm, md, lg
    ->swatchShape('circle')   // circle, rounded
    ->copyable()              // Click para copiar
ColorColumn::make('Color', 'hex_color')
    ->showLabel()             // Muestra el valor hex
    ->swatchSize('md')        // sm, md, lg
    ->swatchShape('circle')   // circle, rounded
    ->copyable()              // Click para copiar

DateColumn

Formatea fechas con Carbon, timezone y formato relativo.

DateColumn
// 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
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 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 iniciales

LinkColumn

Renderiza enlaces clickeables con patrón de URL o callback.

LinkColumn
// 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
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')