Guides

Installation Upgrade guide Principles Patterns Theming Dark mode Customization Help

Layouts

Components

Accordion Autocomplete Avatar Badge Brand Button Breadcrumbs Calendar Callout Card Chart Checkbox Command Context Date picker Dropdown Editor Field File upload

New

Heading Icon Input Modal Navbar Pagination Pillbox

New

Popover Profile Radio Select Separator Switch Table Tabs Text Textarea Time picker

New

Toast Tooltip

Flux Pro component

This component is only available in the Pro version of Flux.

Upgrade to Pro -> Upgrade to Pro ->

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
Kaylynn Schleifer	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

<!-- $orders = \App\Models\Order::paginate(5) --><flux:table :paginate="$orders">    <!-- ... --></flux:table>

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
Kaylynn Schleifer	Jul 31, 11:15 AM	$29.00

Copy to clipboard

<flux:table>    <flux:table.columns>        <flux:table.column>Customer</flux:table.column>        <flux:table.column sortable sorted direction="desc">Date</flux:table.column>        <flux:table.column sortable>Amount</flux:table.column>    </flux:table.columns>    <!-- ... --></flux:table>

Sticky header

Keep the header visible during vertical scrolling by adding the sticky prop to the table.columns component.

Make sure to set a background color on the header row to prevent content overlap.

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	Paid	$132.00
Gustavo Geidt	Jul 27, 9:30 AM	Paid	$31.00
Nolan George	Jul 26, 7:55 PM	Paid	$313.00
Desirae George	Jul 31, 12:08 PM	Paid	$32.00
Jackson Bothman	Jul 30, 3:45 PM	Refunded	$94.00
Hanna Lipshutz	Jul 29, 11:30 AM	Paid	$22.00
Alfredo Levin	Jul 25, 10:10 AM	Paid	$12.00
Zain Lubin	Jul 28, 9:20 AM	Paid	$91.00

Copy to clipboard

<!-- Set the height of the table container... --><flux:table container:class="max-h-80">    <flux:table.columns sticky class="bg-white dark:bg-zinc-900">         <!-- ... -->    </flux:table.columns>    <!-- ... --></flux:table>

Sticky columns

Keep important info visible during horizontal scrolling by adding the sticky prop to table.column and table.cell components.

Make sure to set a background color on columns and cells to prevent content overlap.

ID	Customer	Email	Date	Status	Amount
#428	Lindsey Aminoff	[email protected]	Jul 29, 10:45 AM	Paid	$49.00
#427	Hanna Lubin	[email protected]	Jul 28, 2:15 PM	Paid	$312.00
#426	Kianna Bushevi	[email protected]	Jul 30, 4:05 PM	Paid	$132.00
#424	Gustavo Geidt	[email protected]	Jul 27, 9:30 AM	Paid	$31.00
#423	Nolan George	[email protected]	Jul 26, 7:55 PM	Paid	$313.00
#421	Desirae George	[email protected]	Jul 31, 12:08 PM	Paid	$32.00
#420	Jackson Bothman	[email protected]	Jul 30, 3:45 PM	Refunded	$94.00
#419	Hanna Lipshutz	[email protected]	Jul 29, 11:30 AM	Paid	$22.00
#418	Alfredo Levin	[email protected]	Jul 25, 10:10 AM	Paid	$12.00
#417	Zain Lubin	[email protected]	Jul 28, 9:20 AM	Paid	$91.00

Copy to clipboard

<flux:table container:class="max-h-80">    <flux:table.columns sticky class="bg-white dark:bg-zinc-900">        <flux:table.column sticky class="bg-white dark:bg-zinc-900">ID</flux:table.column>        <!-- ... -->    </flux:table.columns>    <flux:table.rows>        @foreach ($this->orders as $order)            <flux:table.row :key="$order->id">                <flux:table.cell sticky class="bg-white dark:bg-zinc-900">{{ $order->id }}</flux:table.cell>                <!-- ... -->            </flux:table.row>        @endforeach    </flux:table.rows></flux:table>

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.
container:class	Additional CSS classes applied to the container. Useful for setting height constraints like max-h-80.

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

flux:table.columns

Prop	Description
sticky	When present, makes the header row sticky when scrolling.

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.
sticky	When present, makes the column sticky when scrolling.

flux:table.rows

Slot	Description
default	The table rows.

flux:table.row

Slot	Description
default	The table cells for this row.

Prop	Description
key	An alias for wire:key: the unique identifier for the row.
sticky	When present, makes the row sticky when scrolling.

flux:table.cell

Prop	Description
align	Alignment of the cell content. Options: start, center, end.
variant	Visual style of the cell. Options: default, strong.
sticky	When present, makes the cell sticky when scrolling.

Built with by
Caleb Porzio and Hugo Sainte-Marie