K
KoreUI

Table

Data

Componente Blade estático para tablas simples. Recibe arrays o collections y renderiza headers, filas, slots por celda, estado vacío y paginación.

Uso básico

Pasa un array de headers y un array de filas para renderizar una tabla.

Nombre Email Ciudad
Ana García ana@example.com Madrid
Carlos López carlos@example.com Barcelona
María Torres maria@example.com Sevilla
Pedro Martínez pedro@example.com Valencia 
<x-kore::table
    :headers="[
        ['key' => 'name', 'label' => 'Nombre'],
        ['key' => 'email', 'label' => 'Email'],
        ['key' => 'city', 'label' => 'Ciudad'],
    ]"
    :rows="[
        ['name' => 'Ana García', 'email' => 'ana@example.com', 'city' => 'Madrid'],
        ['name' => 'Carlos López', 'email' => 'carlos@example.com', 'city' => 'Barcelona'],
        ['name' => 'María Torres', 'email' => 'maria@example.com', 'city' => 'Sevilla'],
        ['name' => 'Pedro Martínez', 'email' => 'pedro@example.com', 'city' => 'Valencia'],
    ]"
/>
<x-kore::table
    :headers="[
        ['key' => 'name', 'label' => 'Nombre'],
        ['key' => 'email', 'label' => 'Email'],
        ['key' => 'city', 'label' => 'Ciudad'],
    ]"
    :rows="[
        ['name' => 'Ana García', 'email' => 'ana@example.com', 'city' => 'Madrid'],
        ['name' => 'Carlos López', 'email' => 'carlos@example.com', 'city' => 'Barcelona'],
        ['name' => 'María Torres', 'email' => 'maria@example.com', 'city' => 'Sevilla'],
        ['name' => 'Pedro Martínez', 'email' => 'pedro@example.com', 'city' => 'Valencia'],
    ]"
/>

Striped

Filas con fondo alterno para mejor legibilidad.

Nombre Email Ciudad
Ana García ana@example.com Madrid
Carlos López carlos@example.com Barcelona
María Torres maria@example.com Sevilla
Pedro Martínez pedro@example.com Valencia
Laura Sánchez laura@example.com Bilbao 
<x-kore::table
    :headers="[
        ['key' => 'name', 'label' => 'Nombre'],
        ['key' => 'email', 'label' => 'Email'],
        ['key' => 'city', 'label' => 'Ciudad'],
    ]"
    :rows="$rows"
    striped
/>
<x-kore::table
    :headers="[
        ['key' => 'name', 'label' => 'Nombre'],
        ['key' => 'email', 'label' => 'Email'],
        ['key' => 'city', 'label' => 'Ciudad'],
    ]"
    :rows="$rows"
    striped
/>

Density

Tres niveles de densidad visual: compact, normal y relaxed.

compact

Nombre Email
Ana García ana@example.com
Carlos López carlos@example.com

normal

Nombre Email
Ana García ana@example.com
Carlos López carlos@example.com

relaxed

Nombre Email
Ana García ana@example.com
Carlos López carlos@example.com 
<x-kore::table :headers="$headers" :rows="$rows" density="compact" />
<x-kore::table :headers="$headers" :rows="$rows" />
<x-kore::table :headers="$headers" :rows="$rows" density="relaxed" />
<x-kore::table :headers="$headers" :rows="$rows" density="compact" />
<x-kore::table :headers="$headers" :rows="$rows" />
<x-kore::table :headers="$headers" :rows="$rows" density="relaxed" />

Alineación

Alineación por columna: left (default), center, right.

Producto Cantidad Precio
Widget A 15 $49.99
Widget B 8 $129.50
Widget C 42 $9.99 
<x-kore::table
    :headers="[
        ['key' => 'product', 'label' => 'Producto'],
        ['key' => 'qty', 'label' => 'Cantidad', 'align' => 'center'],
        ['key' => 'price', 'label' => 'Precio', 'align' => 'right'],
    ]"
    :rows="$rows"
/>
<x-kore::table
    :headers="[
        ['key' => 'product', 'label' => 'Producto'],
        ['key' => 'qty', 'label' => 'Cantidad', 'align' => 'center'],
        ['key' => 'price', 'label' => 'Precio', 'align' => 'right'],
    ]"
    :rows="$rows"
/>

Slots por celda

Personaliza el contenido de una celda usando un slot con nombre cell-{key}.

Nombre Rol Estado
Ana García Admin Activo
Carlos López Editor Activo
María Torres User Activo

Convención: cell- + key con puntos reemplazados por guiones, convertido a camelCase. Ejemplo: key user.name → slot cellUserName.

<x-kore::table
    :headers="[
        ['key' => 'name', 'label' => 'Nombre'],
        ['key' => 'role', 'label' => 'Rol'],
        ['key' => 'status', 'label' => 'Estado'],
    ]"
    :rows="$users"
>
    <x-slot:cell-status>
        <x-kore::badge label="Activo" color="success" size="sm" />
    </x-slot:cell-status>
</x-kore::table>
<x-kore::table
    :headers="[
        ['key' => 'name', 'label' => 'Nombre'],
        ['key' => 'role', 'label' => 'Rol'],
        ['key' => 'status', 'label' => 'Estado'],
    ]"
    :rows="$users"
>
    <x-slot:cell-status>
        <x-kore::badge label="Activo" color="success" size="sm" />
    </x-slot:cell-status>
</x-kore::table>

Sin header

Oculta la fila de headers con la prop headerless.

Ana García ana@example.com
Carlos López carlos@example.com 
<x-kore::table
    :headers="$headers"
    :rows="$rows"
    headerless
/>
<x-kore::table
    :headers="$headers"
    :rows="$rows"
    headerless
/>

Estado vacío

Cuando rows está vacío, se muestra un empty state automáticamente.

Nombre Email

No se encontraron resultados
Nombre Email

No hay usuarios registrados

 
{{-- Default --}}
<x-kore::table :headers="$headers" :rows="[]" />

{{-- Personalizado --}}
<x-kore::table
    :headers="$headers"
    :rows="[]"
    empty-text="No hay usuarios registrados"
    empty-icon="users"
/>
{{-- Default --}}
<x-kore::table :headers="$headers" :rows="[]" />

{{-- Personalizado --}}
<x-kore::table
    :headers="$headers"
    :rows="[]"
    empty-text="No hay usuarios registrados"
    empty-icon="users"
/>

Paginación

La tabla soporta paginación vía el sub-componente table.pagination.

Tabla con paginación 
<x-kore::table :headers="$headers" :rows="$paginator->items()">
    <x-slot:footer>
        <tr>
            <td colspan="{{ count($headers) }}">
                <x-kore::table.pagination :paginator="$paginator" />
            </td>
        </tr>
    </x-slot:footer>
</x-kore::table>
<x-kore::table :headers="$headers" :rows="$paginator->items()">
    <x-slot:footer>
        <tr>
            <td colspan="{{ count($headers) }}">
                <x-kore::table.pagination :paginator="$paginator" />
            </td>
        </tr>
    </x-slot:footer>
</x-kore::table>

Sub-componentes

Sub-componentes disponibles para composición manual de tablas.

Componente Descripción
<x-kore::table.header>Celda de header con sorting opcional
<x-kore::table.row>Fila con striped/hoverable
<x-kore::table.cell>Celda con align y density
<x-kore::table.empty>Fila de estado vacío
<x-kore::table.pagination>Barra de paginación

Props

Prop Tipo Default Descripción
headers array [] Headers de la tabla (strings o arrays asociativos)
rows array|Collection [] Filas de datos
striped bool false Filas alternas con fondo
hoverable bool true Highlight al hover
bordered bool false Borde visible
headerless bool false Oculta el header
compact bool false Shortcut para density=compact
responsive bool true Scroll horizontal en pantallas pequeñas
density string|null config(normal) Densidad: compact, normal, relaxed
emptyText string|null config Texto cuando no hay filas
emptyIcon string|null config(inbox) Icono del estado vacío (Lucide)

Configuración

Personaliza los defaults en config/kore-ui.php.

config/kore-ui.php 
'datatable' => [
    'per_page'         => 25,
    'per_page_options' => [10, 25, 50, 100],
    'density'          => 'normal',      // compact|normal|relaxed
    'empty_text'       => 'No se encontraron resultados',
    'empty_icon'       => 'inbox',
],
'datatable' => [
    'per_page'         => 25,
    'per_page_options' => [10, 25, 50, 100],
    'density'          => 'normal',      // compact|normal|relaxed
    'empty_text'       => 'No se encontraron resultados',
    'empty_icon'       => 'inbox',
],