Actions & AJAX

Interacting with table rows and refreshing data.

Row Actions

Buttons with a method prop automatically use AJAX for submission. You can place these within slot-based columns to provide per-row actions.

AJAX Callbacks

You can combine AJAX actions with onSuccess to provide feedback (like a toast) and refresh the table data by calling the component's fetch() method.

Delete with Confirmation

A common use case: deleting a record from a table row with a confirmation dialog and immediate UI refresh.

Loading...
blade 
<x-plume::card class="p-0 overflow-hidden w-full">
    @php
        $users = [
            ['id' => 1, 'name' => 'John Doe', 'email' => 'john@example.com'],
            ['id' => 2, 'name' => 'Jane Smith', 'email' => 'jane@example.com'],
        ];
        $cols = [
            ['key' => 'name', 'label' => 'Name'],
            ['key' => 'email', 'label' => 'Email'],
            ['key' => 'actions', 'label' => 'Actions', 'constructed' => '{slot:actions}'],
        ];
    @endphp
    <x-plume::data-table :data="$users" :columns="$cols" hoverable>
        <x-slot:actions>
            <x-plume::button style="error" size="sm" icon="icon-[fluent--delete-24-regular]"
                @click="$toast('Action triggered for ID: {id}')">
                Delete
            </x-plume::button>
        </x-slot:actions>
    </x-plume::data-table>
</x-plume::card>