majid-shafik / filament-table-sticky-header
Keep Filament table headers visible while scrolling long tables.
Package info
github.com/Majid-Shafik/filament-table-sticky-header
Language:JavaScript
pkg:composer/majid-shafik/filament-table-sticky-header
Requires
- php: ^8.2
- filament/filament: ^3.0 | ^4.0 | ^5.0
- spatie/laravel-package-tools: ^1.15
Requires (Dev)
- larastan/larastan: ^3.0
- laravel/pint: ^1.0
- orchestra/testbench: ^9.0|^10.0|^11.0
- pestphp/pest: ^3.7|^4.0
- pestphp/pest-plugin-laravel: ^3.0|^4.0
Suggests
None
Provides
None
Conflicts
None
Replaces
None
README
Keep Filament table headers visible while scrolling long tables. The package moves the original table header, so sorting, selection, tooltips, Livewire actions, and horizontal scrolling continue to work without cloned controls.
Features
- Applies automatically to Filament tables across the panel.
- Keeps the original interactive
<thead>in the DOM. - Stops the header at the end of its table.
- Detects Filament's topbar height automatically.
- Supports nested scroll containers and modal headers.
- Supports grouped columns, RTL layouts, dark mode, Livewire updates, and SPA navigation.
- Avoids the stacked mobile card layout automatically.
- Works alongside
majid-shafik/filament-table-drag-scroll. - Requires no JavaScript build step and does not modify Filament vendor files.
Requirements
- PHP 8.2 or newer.
- Filament 4.x or 5.x.
- A modern browser with
ResizeObserversupport.
Installation
Install the package through Composer:
composer require majid-shafik/filament-table-sticky-header
Publish Filament assets, then refresh the browser:
php artisan filament:assets
No panel provider changes are required. Laravel package discovery enables the package automatically.
Configuration
Publish the config file:
php artisan vendor:publish --tag="filament-table-sticky-header-config"
The package has one global on/off switch. Leave top_offset as null to detect Filament's topbar automatically:
return [ 'enabled' => true, 'top_offset' => null, ];
Set enabled to false to disable sticky headers across the system. When a panel has an additional fixed header, set top_offset to its total height in pixels:
'top_offset' => 96,
Rebuild the application's configuration cache after changing a cached production configuration.
How it works
Filament's table content container uses horizontal overflow, which makes a CSS-only viewport-sticky header unreliable. This package calculates the correct vertical offset in a throttled animation frame and translates the original <thead>. A ResizeObserver and a DOM observer keep measurements current after responsive changes and Livewire morphs.
Testing
composer test
composer test:lint
composer analyse
node --check resources/js/table-sticky-header.js
Changelog
See CHANGELOG.md for release history.
Security
Please report security issues privately as described in SECURITY.md.
License
The MIT License. See LICENSE.md.
