K
KoreUI

DataTable

Livewire

Clase abstracta Livewire para tablas interactivas con sorting, búsqueda, paginación, filtros y más.

Demo en vivo

DataTable funcional con sorting multi-columna, búsqueda y paginación.

Por página
AirPods Max APM-01-003 Audio $549.00 28 06/08/2026
AirPods Pro 3 APP-03-019 Audio $249.00 40 22/08/2026
AirTag 4-Pack ATG-04-011 Accesorios $99.00 100 14/08/2026
Apple Pencil Pro APC-02-014 Accesorios $129.00 60 17/08/2026
Apple TV 4K ATV-4K-021 Streaming $129.00 35 24/08/2026
Apple Watch Ultra AWU-02-005 Wearables $899.00 15 08/08/2026
Beats Solo 4 BSO-04-024 Audio $199.00 30 27/08/2026
HomePod mini HPM-01-008 Audio $99.00 72 11/08/2026
Mac Mini M4 MMN-M4-009 Desktops $699.00 20 13/08/2026
Mac Pro M4 Ultra MPR-M4-020 Desktops $6,999.00 2 24/08/2026
Mac Studio M4 Ultra MST-M4-015 Desktops $3,999.00 6 19/08/2026
MacBook Air 13" MBA-13-012 Laptops $1,099.00 38 15/08/2026
MacBook Pro 14" MBP-14-023 Laptops $1,999.00 22 26/08/2026
MacBook Pro 16" MBP-16-001 Laptops $2,499.00 12 05/08/2026
MagSafe Charger MGS-01-018 Accesorios $39.00 200 21/08/2026
Magic Keyboard MKB-01-006 Accesorios $299.00 50 09/08/2026
Magic Mouse MMO-01-022 Accesorios $99.00 45 25/08/2026
Pro Display XDR PDX-32-013 Monitores $4,999.00 3 16/08/2026
Studio Display STD-27-007 Monitores $1,599.00 8 10/08/2026
Vision Pro AVP-01-010 Wearables $3,499.00 5 13/08/2026
iPad Air M2 IPA-M2-004 Tablets $799.00 33 07/08/2026
iPad Pro 13" M4 IPP-13-017 Tablets $1,299.00 18 20/08/2026
iPad mini 7 IPM-07-025 Tablets $499.00 25 28/08/2026
iPhone 15 Pro IPH-15-002 Smartphones $1,199.00 45 05/08/2026
iPhone SE 4 ISE-04-016 Smartphones $429.00 55 19/08/2026
Mostrando 1 a 25 de 25 resultados

Crear tu DataTable

Extiende KoreDataTable, define query() y columns().

app/Livewire/UsersTable.php 
<?php

namespace App\Livewire;

use App\Models\User;
use Illuminate\Database\Eloquent\Builder;
use KoreUi\DataTable\Columns\Column;
use KoreUi\DataTable\Columns\DateColumn;
use KoreUi\DataTable\Columns\NumberColumn;
use KoreUi\DataTable\KoreDataTable;

class UsersTable extends KoreDataTable
{
    public function configure(): void
    {
        $this->setDefaultSort('name', 'asc');
    }

    public function query(): Builder
    {
        return User::query();
    }

    public function columns(): array
    {
        return [
            Column::make('Nombre', 'name')
                ->sortable()
                ->searchable(),

            Column::make('Email', 'email')
                ->sortable()
                ->searchable(),

            Column::make('Rol', 'role')
                ->sortable(),

            NumberColumn::make('Salario', 'salary')
                ->sortable()
                ->money('USD', 'en_US'),

            DateColumn::make('Creado', 'created_at')
                ->sortable()
                ->dateFormat('d/m/Y'),
        ];
    }
}
<?php

namespace App\Livewire;

use App\Models\User;
use Illuminate\Database\Eloquent\Builder;
use KoreUi\DataTable\Columns\Column;
use KoreUi\DataTable\Columns\DateColumn;
use KoreUi\DataTable\Columns\NumberColumn;
use KoreUi\DataTable\KoreDataTable;

class UsersTable extends KoreDataTable
{
    public function configure(): void
    {
        $this->setDefaultSort('name', 'asc');
    }

    public function query(): Builder
    {
        return User::query();
    }

    public function columns(): array
    {
        return [
            Column::make('Nombre', 'name')
                ->sortable()
                ->searchable(),

            Column::make('Email', 'email')
                ->sortable()
                ->searchable(),

            Column::make('Rol', 'role')
                ->sortable(),

            NumberColumn::make('Salario', 'salary')
                ->sortable()
                ->money('USD', 'en_US'),

            DateColumn::make('Creado', 'created_at')
                ->sortable()
                ->dateFormat('d/m/Y'),
        ];
    }
}

Uso en Blade

Usa el componente Livewire directamente en tu vista.

resources/views/users/index.blade.php 
<livewire:users-table />
<livewire:users-table />

Nota: El componente renderiza automáticamente el toolbar (búsqueda, filtros), la tabla y la paginación. No necesitas HTML adicional.

Configuración

El método configure() se ejecuta en mount(). Aquí defines los defaults.

Opciones de configure() 
public function configure(): void
{
    // Sort por defecto
    $this->setDefaultSort('created_at', 'desc');
    $this->addDefaultSort('id', 'asc'); // tiebreaker

    // Paginación
    $this->setPaginationType('standard'); // standard|simple|cursor

    // Densidad visual
    $this->setDensity('compact'); // compact|normal|relaxed
}
public function configure(): void
{
    // Sort por defecto
    $this->setDefaultSort('created_at', 'desc');
    $this->addDefaultSort('id', 'asc'); // tiebreaker

    // Paginación
    $this->setPaginationType('standard'); // standard|simple|cursor

    // Densidad visual
    $this->setDensity('compact'); // compact|normal|relaxed
}

Props

Prop Tipo Default Descripción
query() Builder — Query base de Eloquent (obligatorio)
columns() Column[] — Definición de columnas (obligatorio)
configure() void — Configuración ejecutada en mount()
filters() Filter[] [] Definición de filtros
bulkActions() BulkAction[] [] Acciones masivas
filterPresets() FilterPreset[] [] Presets de filtros
$perPage int config(25) Registros por página
$search string '' Término de búsqueda
Cargando