Acciones

DataTable

Acciones por fila con dropdown, acciones masivas con selección de filas y diálogos de confirmación.

Demo en vivo

DataTable con ActionColumn (dropdown por fila), bulk actions y selección de filas.

Por página


AirPods Max	Audio	$549.00	active
AirPods Pro 3	Audio	$249.00	draft
AirTag 4-Pack	Accesorios	$99.00	active
Apple Pencil Pro	Accesorios	$129.00	active
Apple TV 4K	Streaming	$129.00	active
Apple Watch Ultra	Wearables	$899.00	active
Beats Solo 4	Audio	$199.00	active
HomePod mini	Audio	$99.00	active
Mac Mini M4	Desktops	$699.00	draft
Mac Pro M4 Ultra	Desktops	$6,999.00	archived
Mac Studio M4 Ultra	Desktops	$3,999.00	draft
MacBook Air 13"	Laptops	$1,099.00	active
MacBook Pro 14"	Laptops	$1,999.00	active
MacBook Pro 16"	Laptops	$2,499.00	active
MagSafe Charger	Accesorios	$39.00	active
Magic Keyboard	Accesorios	$299.00	active
Magic Mouse	Accesorios	$99.00	active
Pro Display XDR	Monitores	$4,999.00	archived
Studio Display	Monitores	$1,599.00	active
Vision Pro	Wearables	$3,499.00	active
iPad Air M2	Tablets	$799.00	active
iPad Pro 13" M4	Tablets	$1,299.00	active
iPad mini 7	Tablets	$499.00	active
iPhone 15 Pro	Smartphones	$1,199.00	active
iPhone SE 4	Smartphones	$429.00	active

ActionColumn

Columna especial que renderiza un dropdown con acciones por fila.

ActionColumn con RowActions

use KoreUi\DataTable\Columns\ActionColumn;
use KoreUi\DataTable\Actions\RowAction;

ActionColumn::make()
    ->actions([
        RowAction::make('view', 'Ver')
            ->icon('eye')
            ->urlPattern('/products/{id}'),

        RowAction::make('edit', 'Editar')
            ->icon('pencil')
            ->wireMethod('editProduct'),

        RowAction::make('delete', 'Eliminar')
            ->icon('trash')
            ->color('destructive')
            ->wireMethod('deleteProduct')
            ->confirm('¿Eliminar este producto?')
            ->separator(),
    ])

use KoreUi\DataTable\Columns\ActionColumn;
use KoreUi\DataTable\Actions\RowAction;

ActionColumn::make()
    ->actions([
        RowAction::make('view', 'Ver')
            ->icon('eye')
            ->urlPattern('/products/{id}'),

        RowAction::make('edit', 'Editar')
            ->icon('pencil')
            ->wireMethod('editProduct'),

        RowAction::make('delete', 'Eliminar')
            ->icon('trash')
            ->color('destructive')
            ->wireMethod('deleteProduct')
            ->confirm('¿Eliminar este producto?')
            ->separator(),
    ])

RowAction

Cada acción soporta navegación URL, llamadas Livewire, dispatch de eventos y overlays.

Tipos de acción

// Navegación por URL
RowAction::make('view', 'Ver')
    ->icon('eye')
    ->urlPattern('/users/{id}')  // Reemplaza {field} con el valor
    ->openInNewTab()

// Llamada a método Livewire
RowAction::make('edit', 'Editar')
    ->icon('pencil')
    ->wireMethod('editUser')  // Llama $this->editUser($id)

// Dispatch de evento
RowAction::make('notify', 'Notificar')
    ->icon('bell')
    ->dispatch('user-selected', ['id' => 'dynamic'])

// Abrir overlay
RowAction::make('configure', 'Configurar')
    ->icon('settings')
    ->openOverlay('overlays.edit-user', fn ($row) => ['userId' => $row->id])

// Visibilidad condicional
RowAction::make('delete', 'Eliminar')
    ->hidden(fn ($row) => ! $row->can_delete)

// Navegación por URL
RowAction::make('view', 'Ver')
    ->icon('eye')
    ->urlPattern('/users/{id}')  // Reemplaza {field} con el valor
    ->openInNewTab()

// Llamada a método Livewire
RowAction::make('edit', 'Editar')
    ->icon('pencil')
    ->wireMethod('editUser')  // Llama $this->editUser($id)

// Dispatch de evento
RowAction::make('notify', 'Notificar')
    ->icon('bell')
    ->dispatch('user-selected', ['id' => 'dynamic'])

// Abrir overlay
RowAction::make('configure', 'Configurar')
    ->icon('settings')
    ->openOverlay('overlays.edit-user', fn ($row) => ['userId' => $row->id])

// Visibilidad condicional
RowAction::make('delete', 'Eliminar')
    ->hidden(fn ($row) => ! $row->can_delete)

Bulk Actions

Acciones masivas sobre las filas seleccionadas. Se muestran en un dropdown cuando hay selección activa.

Definir e implementar bulk actions

use KoreUi\DataTable\Actions\BulkAction;

public function bulkActions(): array
{
    return [
        BulkAction::make('activate', 'Activar seleccionados')
            ->icon('check-circle')
            ->color('success'),

        BulkAction::make('delete', 'Eliminar seleccionados')
            ->icon('trash')
            ->color('destructive')
            ->confirm('¿Eliminar :count registro(s)?', 'Esta acción no se puede deshacer.')
            ->separator(),
    ];
}

// Implementar el método con el mismo nombre del BulkAction
public function activate(array $ids): void
{
    Product::whereIn('id', $ids)->update(['status' => 'active']);
    $this->toast()->success(count($ids) . ' producto(s) activados.')->send();
}

public function delete(array $ids): void
{
    Product::whereIn('id', $ids)->delete();
    $this->toast()->success(count($ids) . ' producto(s) eliminados.')->send();
}

use KoreUi\DataTable\Actions\BulkAction;

public function bulkActions(): array
{
    return [
        BulkAction::make('activate', 'Activar seleccionados')
            ->icon('check-circle')
            ->color('success'),

        BulkAction::make('delete', 'Eliminar seleccionados')
            ->icon('trash')
            ->color('destructive')
            ->confirm('¿Eliminar :count registro(s)?', 'Esta acción no se puede deshacer.')
            ->separator(),
    ];
}

// Implementar el método con el mismo nombre del BulkAction
public function activate(array $ids): void
{
    Product::whereIn('id', $ids)->update(['status' => 'active']);
    $this->toast()->success(count($ids) . ' producto(s) activados.')->send();
}

public function delete(array $ids): void
{
    Product::whereIn('id', $ids)->delete();
    $this->toast()->success(count($ids) . ' producto(s) eliminados.')->send();
}

Confirmación

Tanto RowAction como BulkAction soportan diálogos de confirmación.

Confirm en acciones

// Row action con confirmación
RowAction::make('delete', 'Eliminar')
    ->confirm('¿Eliminar este registro?')

// Con descripción adicional
RowAction::make('delete', 'Eliminar')
    ->confirm(
        '¿Eliminar este registro?',
        'Esta acción no se puede deshacer.'
    )

// Bulk action con placeholder :count
BulkAction::make('delete', 'Eliminar')
    ->confirm('¿Eliminar :count producto(s)?')

// Row action con confirmación
RowAction::make('delete', 'Eliminar')
    ->confirm('¿Eliminar este registro?')

// Con descripción adicional
RowAction::make('delete', 'Eliminar')
    ->confirm(
        '¿Eliminar este registro?',
        'Esta acción no se puede deshacer.'
    )

// Bulk action con placeholder :count
BulkAction::make('delete', 'Eliminar')
    ->confirm('¿Eliminar :count producto(s)?')

dispatch vs wireMethod: Usa dispatch / openOverlay para acciones client-side (sin parpadeo en la tabla). Usa wireMethod cuando necesitas lógica en el servidor.

Selección de filas

Se habilita automáticamente cuando hay bulk actions.

Configurar selección

public function configure(): void
{
    $this->setPrimaryKey('uuid');       // default: 'id'
    $this->setSelectionEnabled(false);  // deshabilita checkboxes
}

public function configure(): void
{
    $this->setPrimaryKey('uuid');       // default: 'id'
    $this->setSelectionEnabled(false);  // deshabilita checkboxes
}

Checkbox header: Selecciona/deselecciona todos los registros de la página actual.

Estado indeterminado: Se muestra si hay selección parcial.

Persistencia entre páginas: La selección se mantiene al cambiar de página.

Clear automático: Al ejecutar una bulk action, la selección se limpia.

En esta página

Demo en vivo ActionColumn RowAction Bulk Actions Confirmación Selección de filas