# Sticky table headers + columns

Published: October 8, 2025

Version: ^2.5.1

<img loading="lazy" class="rounded-2xl border dark:border-zinc-700" src="/img/blog/2_5_1_sticky_tables_hero.png" alt="Table with sticky headers and columns" />

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:

```blade
<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.

[Read more about sticky headers →](/components/table#sticky-header)

## Sticky columns

<img loading="lazy" class="rounded-2xl border dark:border-zinc-700" src="/img/blog/2_5_1_sticky_tables_columns.png" alt="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:

```blade
<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 →](/components/table#sticky-columns)

---

Check out the [Table documentation](https://fluxui.dev/components/table) for complete examples and API reference.