Filament Hover Scroll Column Laravel Package

Getting Started

This package adds a hover-activated marquee column to Filament tables: text that overflows its cell scrolls horizontally while the pointer is over the cell. Start with the smallest possible integration.

1. Install

   composer require <vendor>/<package>
   

   Check composer.json in the package for the Filament constraint (filament/filament: ^3.0 vs ^4.0) before installing — v0.1.0 packages lag or lead Filament majors, and a mismatch will surface as a container/Column resolution error rather than a clear message.

2. Register assets if required. If the package ships CSS/JS via a service provider, run php artisan filament:assets (Filament v3.2+) or php artisan vendor:publish --tag=<package>-assets. If the README doesn't mention it, inspect the provider's boot() for FilamentAsset::register().

3. Where to look first

   • README.md — the only reliable source of the column class name at v0.1.0.
   • src/ — the column class (typically extending Filament\Tables\Columns\TextColumn); scan its public methods to see what is configurable beyond the base column.
   • resources/css/ + resources/js/ — the scroll behaviour itself; this is where the overflow detection and animation live, and it dictates most of the gotchas below.

4. First use case. Swap one noisy column — a long title, description excerpt, URL, or file path — from TextColumn to the package's column:

   use Vendor\Package\Columns\MarqueeColumn;
   
   MarqueeColumn::make('title')
       ->searchable()
       ->sortable(),
   

   Verify on a resource with genuinely long values before rolling it out; short values should render identically to a normal TextColumn.

Implementation Patterns

Drop-in replacement, not a wrapper. Because the column extends Filament's TextColumn, keep every modifier you already use — searchable(), sortable(), toggleable(), limit(), formatStateUsing(), badge(), color(), wrap(). Treat it as TextColumn plus an animation, and only reach for package-specific methods when you need to tune the scroll.

Apply it selectively, not globally. The effect is only useful where truncation actually hides information. A practical pattern is one or two columns per table — usually the primary label — while everything else stays a plain TextColumn. Tables where every column moves on hover read as broken.

Beware the interaction with limit() and wrap(). If you truncate with limit(50), the rendered text may no longer overflow, so the marquee never triggers and you have quietly removed information. Prefer dropping limit() on marquee columns and letting the cell width do the clipping. Similarly, wrap() and a horizontal-scroll behaviour are in tension — pick one per column.

Centralise it. If the same column type appears across many resources, add a small factory or a custom base column in your app:

// app/Filament/Columns/ScrollingTextColumn.php
class ScrollingTextColumn extends MarqueeColumn
{
    protected function setUp(): void
    {
        parent::setUp();
        $this->tooltip(fn ($state) => $state); // keyboard/mobile fallback
    }
}

This keeps the package name in one place, which matters a lot at v0.1.0 when the API may move.

Pair with a tooltip for accessibility and touch. Hover-triggered motion is invisible to touch users and to anyone navigating by keyboard. Set a tooltip (or keep the tooltip the default Filament column gives you) so the full value remains reachable without hovering. Also consider Filament's built-in ->wrap() or a TextColumn::make(...)->tooltip(...) for columns where the content is genuinely long rather than just wide.

Panel-wide consistency. If you adopt it, adopt it deliberately: document in the team's Filament conventions which column types get the marquee, so future resources don't accrete a random mix of plain and scrolling columns.

Gotchas and Tips

It is v0.1.0 — pin it. Expect class names, method signatures, and asset tags to change. Use an explicit constraint ("vendor/package": "0.1.*") rather than ^0.1 assumptions, and re-read the README on every bump. Do not build a shared internal package on top of it yet without an abstraction layer.

Assets are the most likely first failure. If the column renders but nothing scrolls, the CSS/JS almost certainly didn't load. Check, in order: php artisan filament:assets was run, the published files exist under public/css/<vendor>/ or public/js/<vendor>/, and the browser network tab shows them with a 200. In production, remember asset publishing is a deploy step — forgetting it after composer update yields a working dev environment and a dead prod one.

Overflow detection is measurement-dependent. The scroll only starts when the text exceeds the cell. That means responsive breakpoints, ->grow(), column width(), and the table's ->stackedOnMobile() all change which cells animate. Resize the browser while testing; a column can scroll on desktop and not on tablet. Long tables with ->deferLoading() or pagination also re-measure on each Livewire render.

Livewire re-renders can reset or strand the animation. Sorting, searching, or paginating replaces the table DOM. If the animation is driven by inline styles or event listeners attached at load, hovering a cell after a re-render may do nothing until a full page refresh. Test the interaction after a search and a page change, not just on first load. If you see this, check whether the package ships Alpine components (which survive Livewire morphs) versus plain querySelectorAll JS (which does not).

Respect prefers-reduced-motion. Horizontal auto-scrolling is exactly the kind of motion that triggers vestibular discomfort. Check whether the package guards the animation with a media query; if it doesn't, add your own in a panel theme CSS file:

@media (prefers-reduced-motion: reduce) {
    .fi-ta-cell .your-marquee-class { animation: none !important; transform: none !important; }
}

Inspect the rendered cell in devtools to get the actual class name — it is often more specific than the README suggests.

Hover does not exist on touch. On mobile, the column is effectively a truncated TextColumn with no way to see the rest. Always pair it with a tooltip, an ->url() click-through, or a modal/detail view — otherwise you have made mobile strictly worse than the column you replaced.

Debugging checklist. (1) Does a plain TextColumn on the same field render the full value? (2) Is the value actually wider than the cell — force a long string to confirm. (3) Do you see the package's class on the <td>/inner <span> in devtools? (4) Are the CSS/JS files in the network panel? (5) Does it survive a Livewire search re-render? That sequence isolates asset, measurement, and morph issues in about two minutes.

Extension points to prefer. Rather than editing vendor files or overriding package views, subclass the column and override setUp(), or apply your own CSS through a custom Filament theme (->viteTheme()), which is the sanctioned path for styling overrides across the panel.