Sticky Columns

• Features
• Requirements
• Installation
  • Install from Packagist
  • Recommended (Vite) — no filament:assets, no hard refresh
  • Publish config
  • Publish assets (Filament assets pipeline)
• Usage
  • Option A — StickyColumn drop-in
  • Option B — Sticky any column with ->sticky() / ->stickyRight()
  • Option C — Manual offsets
• API reference
  • StickyColumn
  • Column macros
• Configuration
• Manual refresh
• Troubleshooting
  • Sticky columns not applying
  • Offsets look wrong
• Changelog
• License

Sticky (frozen) table columns for Filament v3, v4, and v5.

Pin one or more columns to the left or right edge while the rest of the table scrolls horizontally — just like Excel or Google Sheets.

#Features

• 📌 Stick columns to the left or right
• 🌗 Dark-mode aware — inherits Filament panel surface colours automatically
• 🔢 Multiple sticky columns with auto-computed offsets
• 🌊 Scroll shadow indicator so users know content is scrolled beneath
• ⚡️ Works with Livewire v3 and v4 (Filament v3–v5)
• 🧩 Use StickyColumn drop-in, or add stickiness to any column using ->sticky()
• 🔧 Zero config required; publish only when you need to override defaults

#Requirements

#Installation

#Install from Packagist

composer require zeeshantariq/filament-sticky-columns

#Recommended (Vite) — no filament:assets, no hard refresh

If your Filament panel uses a Vite theme (->viteTheme(...)), import the package CSS/JS into your theme build. This gives you automatic cache-busting (hashed filenames) and avoids running php artisan filament:assets.

Add to your Filament theme CSS (example: resources/css/filament/admin/theme.css):

@import "../../../../vendor/zeeshantariq/filament-sticky-columns/resources/css/filament-sticky-columns.css";

Import the JS in a file that is loaded by your panel (example: a Filament theme JS entry, or your panel JS bundle):

import '../../../../vendor/zeeshantariq/filament-sticky-columns/resources/js/filament-sticky-columns.js'

Then rebuild your assets:

npm run dev
# or
npm run build

#Publish config

php artisan vendor:publish --tag="filament-sticky-columns-config"

#Publish assets (Filament assets pipeline)

This package also registers JS/CSS via Filament assets.

Filament v3/v4 publish all registered assets with this command:

php artisan filament:assets

Cache busting (no hard refresh): asset filenames include your installed package version and the built files’ last-modified time, so after composer update or a fresh install, run php artisan filament:assets (or rely on filament:upgrade in your app’s Composer scripts) and do a normal page reload — the browser should request new CSS/JS URLs automatically.

#Usage

#Option A — StickyColumn drop-in

StickyColumn is a drop-in replacement for Filament’s TextColumn. It is sticky left by default.

use Filament\Tables\Table;
use Filament\Tables\Columns\TextColumn;
use ZeeshanTariq\FilamentStickyColumns\Columns\StickyColumn;

public function table(Table $table): Table
{
    return $table->columns([

        // Sticky LEFT (default)
        StickyColumn::make('id')->sortable(),
        StickyColumn::make('name')->searchable(),

        // Regular scrollable columns
        TextColumn::make('email'),
        TextColumn::make('phone'),
        TextColumn::make('department'),

        // Sticky RIGHT
        StickyColumn::make('status')->right()->badge(),

    ]);
}

#Option B — Sticky any column with ->sticky() / ->stickyRight()

This package registers macros on Filament\Tables\Columns\Column, so you can pin any column type without switching to StickyColumn.

use Filament\Tables\Table;
use Filament\Tables\Columns\IconColumn;
use Filament\Tables\Columns\ImageColumn;
use Filament\Tables\Columns\TextColumn;

public function table(Table $table): Table
{
    return $table->columns([
        TextColumn::make('id')->label('ID')->sticky(),
        ImageColumn::make('avatar')->circular()->sticky(),
        TextColumn::make('name')->searchable()->sticky(),

        TextColumn::make('email'),
        TextColumn::make('phone'),

        IconColumn::make('active')->boolean()->stickyRight(),
    ]);
}

#Option C — Manual offsets

When auto-compute isn't accurate (e.g. beside a checkbox column):

StickyColumn::make('id')->sticky(offset: 0),    // starts at 0
StickyColumn::make('name')->sticky(offset: 60), // after a 60 px ID column

#API reference

#StickyColumn

StickyColumn::make('name')                 // sticky left
StickyColumn::make('name')->right()        // sticky right
StickyColumn::make('name')->sticky()       // sticky left (explicit)
StickyColumn::make('name')->stickyRight()  // sticky right
StickyColumn::make('name')->sticky(offset: 120)

#Column macros

TextColumn::make('name')->sticky(condition: true, offset: null, zIndex: null)
TextColumn::make('actions')->stickyRight(condition: true, offset: null, zIndex: null)

#Configuration

// config/filament-sticky-columns.php
return [
    'z_index'      => 10,                        // z-index for sticky cells
    'background'   => 'auto',                    // 'auto' = Filament surface colour
    'shadow'       => true,                      // directional scroll shadow
    'shadow_color' => 'rgba(0, 0, 0, 0.12)',     // shadow CSS colour
];

#Manual refresh

If you dynamically add columns or swap table content outside of normal Livewire updates:

window.FilamentStickyColumns.refresh();

#Troubleshooting

#Sticky columns not applying

Checklist:

• Make sure the assets are published:

php artisan filament:assets

• Filament v4 note (important):

  • Filament v4 renders table cells using extraHeaderAttributes() (<th>) and extraCellAttributes() (<td>).
  • extraAttributes() is applied to inner column markup (e.g. TextColumn’s wrapper), which is not always enough for sticky positioning.
  • When debugging, ensure you can see data-sticky="left" / data-sticky="right" on the actual <th> / <td> elements in your table (not only on a nested <div>).

• If you use the Filament assets pipeline, refresh once after publishing.

• If you use Vite (recommended), you should not need hard refresh because Vite cache-busts.

• Inspect the table DOM and confirm your sticky columns have data-sticky="left" / data-sticky="right" somewhere inside the cell.

#Offsets look wrong

If you use selection/checkbox columns or very dynamic columns, auto offsets can be off. Use manual offsets:

TextColumn::make('id')->sticky(offset: 0)
TextColumn::make('name')->sticky(offset: 80)

#Changelog

See CHANGELOG.md.

#License

MIT — see LICENSE.md.