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