The Changelog

What's new around here?

Succinct and informative updates about Flux.

October 8, 2025

Sticky table headers + columns

Version ^2.5.1

Flux tables now support sticky headers and sticky columns, making it easy to keep important information visible while users scroll through large datasets.

Let's take a look.

Sticky headers

Keep column headers visible during vertical scrolling by adding the sticky prop to your table.columns component:

Copy to clipboard

<flux:table container:class="max-h-80">    <flux:table.columns sticky class="bg-white dark:bg-zinc-900">        <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>

The background color on the header row prevents content overlap as rows scroll underneath. The container:class prop lets you set a maximum height for your table, creating a scrollable area while keeping the headers locked in place.

Sticky columns

Table with sticky ID column during horizontal scrolling

Keep important columns visible during horizontal scrolling by adding the sticky prop to individual table.column and table.cell components. Combine it with sticky headers for a spreadsheet-like experience:

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.column>Customer</flux:table.column>        <flux:table.column>Email</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.cell>{{ $order->customer }}</flux:table.cell>                <flux:table.cell>{{ $order->email }}</flux:table.cell>                <!-- ... -->            </flux:table.row>        @endforeach    </flux:table.rows></flux:table>

Apply sticky to both the column header and the corresponding cells in each row. Add background colors to prevent content overlap, and we'll automatically add a subtle shadow when scrolling to help users see that the column is overlaying content underneath.

Learn more about sticky columns →

Check out the Table documentation for complete examples and API reference.