blatui

Components

Data Table

An interactive table with search, sortable columns, row selection and pagination.

php artisan blatui:add data-table
Select
No results.

of row(s) selected.

Page of 
@php($rows = [
    ['name' => 'Olivia Martin', 'email' => '[email protected]', 'role' => 'Owner', 'amount' => '$1,200'],
    ['name' => 'Jackson Lee', 'email' => '[email protected]', 'role' => 'Member', 'amount' => '$840'],
    ['name' => 'Isabella Nguyen', 'email' => '[email protected]', 'role' => 'Member', 'amount' => '$2,100'],
    ['name' => 'William Kim', 'email' => '[email protected]', 'role' => 'Admin', 'amount' => '$640'],
    ['name' => 'Sofia Davis', 'email' => '[email protected]', 'role' => 'Member', 'amount' => '$1,950'],
    ['name' => 'Liam Johnson', 'email' => '[email protected]', 'role' => 'Member', 'amount' => '$320'],
    ['name' => 'Emma Brown', 'email' => '[email protected]', 'role' => 'Admin', 'amount' => '$5,400'],
    ['name' => 'Noah Wilson', 'email' => '[email protected]', 'role' => 'Member', 'amount' => '$1,100'],
    ['name' => 'Ava Garcia', 'email' => '[email protected]', 'role' => 'Member', 'amount' => '$760'],
    ['name' => 'Mason Lopez', 'email' => '[email protected]', 'role' => 'Owner', 'amount' => '$3,300'],
    ['name' => 'Mia Hernandez', 'email' => '[email protected]', 'role' => 'Member', 'amount' => '$220'],
    ['name' => 'Lucas Young', 'email' => '[email protected]', 'role' => 'Member', 'amount' => '$1,480'],
])

<x-ui.data-table
    class="w-full max-w-2xl"
    :columns="[
        ['key' => 'name', 'label' => 'Name'],
        ['key' => 'email', 'label' => 'Email'],
        ['key' => 'role', 'label' => 'Role'],
        ['key' => 'amount', 'label' => 'Amount', 'class' => 'text-right'],
    ]"
    :rows="$rows"
    search-key="name"
    search-placeholder="Filter names..."
    :page-size="5"
/>