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

Copy to clipboard

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

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

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

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

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

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

<flux:table.cell>
                    <flux:button variant="ghost" size="sm" icon="ellipsis-horizontal" inset="top bottom"></flux:button>
                </flux:table.cell>
            </flux:table.row>
        @endforeach
    </flux:table.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

Copy to clipboard

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

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

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

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

<flux:table.row>
            <flux:table.cell>Gustavo Geidt</flux:table.cell>
            <flux:table.cell>Jul 27, 9:30 AM</flux:table.cell>
            <flux:table.cell><flux:badge color="green" size="sm" inset="top bottom">Paid</flux:badge></flux:table.cell>
            <flux:table.cell variant="strong">$31.00</flux:table.cell>
        </flux:table.row>
    </flux:table.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

Copy to clipboard

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

Copy to clipboard

Related components

Avatar

Display user profile images or fallback initials

Badge

Display small counts, status indicators, or labels

Dropdown

Display expandable menus for row actions

Reference

flux:table

Prop	Description
paginate	A Laravel paginator instance to enable pagination.

Attribute	Description
data-flux-table	Applied to the root element for styling and identification.

flux:table.columns

Slot	Description
default	The table columns.

flux:table.column

Prop	Description
align	Alignment of the column content. Options: start, center, end.
sortable	Enables sorting functionality for the column.
sorted	Indicates this column is currently being sorted.
direction	Sort direction when column is sorted. Options: asc, desc.

flux:table.rows

Slot	Description
default	The table rows.

flux:table.row

Prop	Description
key	An alias for wire:key: the unique identifier for the row.

Slot	Description
default	The table cells for this row.

flux:table.cell

Prop	Description
align	Alignment of the cell content. Options: start, center, end.
variant	Visual style of the cell. Options: default, strong.

Built with by
Caleb Porzio and Hugo Sainte-Marie