Data Table

Advanced table with sorting, filtering, and pagination. Powered by AlpineJS.

Examples

The Data Table component can handle both local JSON data and server-side fetching. It provides a consistent interface for searching, sorting, and pagination.

Client-side Data

Passing a JSON array to the component for instant sorting and filtering.

Loading...
Showing to of results
blade 
<x-plume::card class="p-0 overflow-hidden w-full">
    @php
        $users = [
            ['id' => 1, 'name' => 'John Doe', 'email' => 'john@example.com', 'role' => 'Admin'],
            ['id' => 2, 'name' => 'Jane Smith', 'email' => 'jane@example.com', 'role' => 'Editor'],
            ['id' => 3, 'name' => 'Bob Johnson', 'email' => 'bob@example.com', 'role' => 'User'],
            [
                'id' => 4,
                'name' => 'Alice Williams',
                'email' => 'alice@example.com',
                'role' => 'User',
            ],
            [
                'id' => 5,
                'name' => 'Charlie Brown',
                'email' => 'charlie@example.com',
                'role' => 'Editor',
            ],
        ];
        $cols = [
            ['key' => 'id', 'label' => 'ID', 'sortable' => true],
            ['key' => 'name', 'label' => 'Name', 'sortable' => true],
            ['key' => 'email', 'label' => 'Email', 'sortable' => true],
            ['key' => 'role', 'label' => 'Role', 'sortable' => true],
        ];
    @endphp
    <x-plume::data-table :data="$users" :columns="$cols" searchable paginated :per-page="5"
        hoverable fixed-height />
</x-plume::card>

JS-driven Data

Binding data from an existing Alpine.js store or parent component state.

Loading...
blade 
<x-plume::card class="p-0 overflow-hidden w-full" x-data="{
    myUsers: [
        { id: 1, name: 'Active User', status: 'Online' },
        { id: 2, name: 'Offline User', status: 'Away' }
    ],
    myCols: [
        { key: 'id', label: 'ID' },
        { key: 'name', label: 'Name' },
        { key: 'status', label: 'Status' }
    ]
}">
    <x-plume::data-table ::data="JSON.stringify(myUsers)" ::columns="JSON.stringify(myCols)" hoverable />
</x-plume::card>
Prop Type Default Description
data array|string [] Array of objects to display (client-side data).
columns array [] Column definitions: [{key: 'name', label: 'Name', sortable: true, cellClass: '...', headerClass: '...', constructed: '...'}].
searchable bool false Whether to show a search input for filtering.
paginated bool false Whether to enable pagination.
perPage int 10 Number of items per page.
sortable bool true Whether to enable column sorting globally.
url string null API endpoint URL for server-side fetching.
fixedHeight bool false If true, maintains a minimum height based on perPage to prevent layout shifts.
onSort string null Callback expression for when the table is sorted.
onFilter string null Callback expression for when the data is filtered.
onPageChange string null Callback expression for when the page is changed.
onLoad string null Callback expression for when data is loaded.

Usage

blade 
Error: Segment [usage] not found in {/var/www/resources/views/docs/samples/data-table.blade.php}