Table

Display structured data in a condensed, searchable format.

Customer
Gustavo Mango	Jul 31, 9:50 AM	Paid	$162.00
Desirae George	Jul 31, 12:08 PM	Paid	$32.00
Emery Madsen	Jul 31, 11:50 AM	Paid	$163.00
[email protected]	Jul 31, 11:15 AM	Incomplete	$29.00
Kaiya Bator	Jul 31, 11:08 AM	Failed	$72.00

Showing 1 to 5 of 24 results

<flux:table :paginate="$this->orders">
    <flux:columns>
        <flux:column>Customer</flux:column>
        <flux:column sortable :sorted="$sortBy === 'date'" :direction="$sortDirection" wire:click="sort('date')">Date</flux:column>
        <flux:column sortable :sorted="$sortBy === 'status'" :direction="$sortDirection" wire:click="sort('status')">Status</flux:column>
        <flux:column sortable :sorted="$sortBy === 'amount'" :direction="$sortDirection" wire:click="sort('amount')">Amount</flux:column>
    </flux:columns>

<flux:rows>
        @foreach ($this->orders as $order)
            <flux:row :key="$order->id">
                <flux:cell class="flex items-center gap-3">
                    <flux:avatar size="xs" src="{{ $order->customer_avatar }}" />

{{ $order->customer }}
                </flux:cell>

<flux:cell class="whitespace-nowrap">{{ $order->date }}</flux:cell>

<flux:cell>
                    <flux:badge size="sm" :color="$order->status_color" inset="top bottom">{{ $order->status }}</flux:badge>
                </flux:cell>

<flux:cell variant="strong">{{ $order->amount }}</flux:cell>

<flux:cell>
                    <flux:button variant="ghost" size="sm" icon="ellipsis-horizontal" inset="top bottom"></flux:button>
                </flux:cell>
            </flux:row>
        @endforeach
    </flux:rows>
</flux:table>

<!-- Livewire component example code...
    use \Livewire\WithPagination;

public $sortBy = 'date';
    public $sortDirection = 'desc';

public function sort($column) {
        if ($this->sortBy === $column) {
            $this->sortDirection = $this->sortDirection === 'asc' ? 'desc' : 'asc';
        } else {
            $this->sortBy = $column;
            $this->sortDirection = 'asc';
        }
    }

#[\Livewire\Attributes\Computed]
    public function orders()
    {
        return \App\Models\Order::query()
            ->tap(fn ($query) => $this->sortBy ? $query->orderBy($this->sortBy, $this->sortDirection) : $query)
            ->paginate(5);
    }
-->

Simple

The primary table example above is a full-featured table with sorting, pagination, etc. Here's a clean example of a simple data table that you can use as a simpler starting point.

Customer	Date	Status	Amount
Lindsey Aminoff	Jul 29, 10:45 AM	Paid	$49.00
Hanna Lubin	Jul 28, 2:15 PM	Paid	$312.00
Kianna Bushevi	Jul 30, 4:05 PM	Refunded	$132.00
Gustavo Geidt	Jul 27, 9:30 AM	Paid	$31.00

<flux:table>
    <flux:columns>
        <flux:column>Customer</flux:column>
        <flux:column>Date</flux:column>
        <flux:column>Status</flux:column>
        <flux:column>Amount</flux:column>
    </flux:columns>

<flux:rows>
        <flux:row>
            <flux:cell>Lindsey Aminoff</flux:cell>
            <flux:cell>Jul 29, 10:45 AM</flux:cell>
            <flux:cell><flux:badge color="green" size="sm" inset="top bottom">Paid</flux:badge></flux:cell>
            <flux:cell variant="strong">$49.00</flux:cell>
        </flux:row>

<flux:row>
            <flux:cell>Hanna Lubin</flux:cell>
            <flux:cell>Jul 28, 2:15 PM</flux:cell>
            <flux:cell><flux:badge color="green" size="sm" inset="top bottom">Paid</flux:badge></flux:cell>
            <flux:cell variant="strong">$312.00</flux:cell>
        </flux:row>

<flux:row>
            <flux:cell>Kianna Bushevi</flux:cell>
            <flux:cell>Jul 30, 4:05 PM</flux:cell>
            <flux:cell><flux:badge color="zinc" size="sm" inset="top bottom">Refunded</flux:badge></flux:cell>
            <flux:cell variant="strong">$132.00</flux:cell>
        </flux:row>

<flux:row>
            <flux:cell>Gustavo Geidt</flux:cell>
            <flux:cell>Jul 27, 9:30 AM</flux:cell>
            <flux:cell><flux:badge color="green" size="sm" inset="top bottom">Paid</flux:badge></flux:cell>
            <flux:cell variant="strong">$31.00</flux:cell>
        </flux:row>
    </flux:rows>
</flux:table>

Pagination

Allow users to navigate through different pages of data by passing in any model paginator to the paginate prop.

Showing 1 to 5 of 24 results

Sortable

Allow users to sort rows by specific columns using a combination of the sortable, sorted, and direction props.

Customer
Gustavo Mango	Jul 31, 9:50 AM	$162.00
Desirae George	Jul 31, 12:08 PM	$32.00
Emery Madsen	Jul 31, 11:50 AM	$163.00
[email protected]	Jul 31, 11:15 AM	$29.00

Built with by
Caleb Porzio and Hugo Sainte-Marie