Download the PHP package devletes/filament-timeline-view without Composer

Filament Timeline View

Render Filament Tables as a chronological timeline. Adds two table macros (->asTimeline() and ->asDoubleSidedTimeline()) plus a TimelineEntry layout column that turns any table query into a feed of date-grouped cards with avatars, time stamps, collapsible day groups, a kebab actions dropdown, and a Load-more button — all wired through Filament's standard query, grouping, action, and pagination APIs.

Requirements

• PHP ^8.2
• Filament Tables ^5.0 (the package only requires filament/tables; filament/filament is not needed unless you embed the timeline in a panel)

Installation

No plugin registration needed — the service provider auto-loads, registers the Table macros, and registers the CSS asset with Filament's asset system. Publish the asset once after install:

Usage

The package adds two macros to Filament\Tables\Table:

You compose the timeline using Filament's standard table API: ->query(), ->columns(), ->groups(), ->actions(), ->paginated(). Just swap ->columns() for TimelineEntry::make() and call one of the timeline macros at the end.

Resource list page

Dashboard widget

TimelineEntry is a Tables column, so anywhere you can build a Filament\Widgets\TableWidget, you can render a timeline:

Embed in a custom Dashboard page via Filament\Schemas\Components\Livewire:

Double-sided variant

Swap ->asTimeline() for ->asDoubleSidedTimeline(). Cards alternate per date — the first item of every date always lands on the left, so single-item days stay consistent. Below 768px the layout collapses to a single chronological column.

The TimelineEntry column

TimelineEntry::make() is a layout column (extends Filament\Tables\Columns\Layout\Component). It produces the inner content of one card. The .ftv-card chrome — border, padding, dot, caret, and the actions kebab — is provided by the package blade and applied to every record regardless of which layout column you use.

Field setters

Each setter accepts either a string field path (resolved via data_get($record, $path)) or a Closure receiving the record:

For time(), a closure may return a Carbon instance (formatted via translatedFormat($format)) or a pre-formatted string (used as-is).

Custom layouts

TimelineEntry is opinionated. If you need a different inner structure, drop it for Stack::make([...]) (or any other column-layout component) and the timeline will still render the dot, caret, card chrome, and actions kebab around it:

Date grouping

Use Filament's standard Group API. When the group is a date (->date()), the package renders a date header above each group with this resolution:

• Today → Today (translated)
• Otherwise → the weekday name (Wednesday, Tuesday, …)
• A second line under the weekday shows M j (e.g. Apr 8), with the year appended for dates outside the current year.

Pass the Group instance straight to ->defaultGroup(...) — no need for a separate ->groups([...]) array unless you want the group selector in the toolbar (which a timeline rarely does, since the grouping is the whole point).

Newest-first ordering. Filament's date grouping orders ascending by default, which puts Today at the bottom. For a typical chronological feed you'll want to flip it on the Group:

Day-group collapse (opt-in)

Day groups are not collapsible by default. To make them collapsible, call ->collapsible() on the Group:

When enabled, each date header gets a chevron toggle that hides/shows the day's cards via Alpine.js (no Livewire round-trip). Collapsed groups show a translated "N posts hidden" pill (collapsed_summary translation key) in place of the cards.

Per-card actions

Every record gets a single kebab dropdown in the top-right of the card. The package consumes the table's recordActions(...) config and always renders exactly one ActionGroup per card:

• If you pass a single ActionGroup → it's used as-is, preserving your ->color(), ->dropdownPlacement(), and other settings.
• If you pass a flat array of actions, multiple action groups, or a mix → the package extracts every underlying action via getFlatActions() and wraps them in one fresh ActionGroup::make([...])->color('gray').

Either way the visual is one kebab. Hidden actions (->hidden() / ->visible()) are filtered per record before rendering.

Action click handlers use Filament's standard mountAction(...) flow, so ->action(fn ($record) => ...), modals, notifications, and forms all work as they would on any normal table.

Pagination → Load more

->paginated([N]) enables pagination. The package replaces Filament's prev/next page links with a single Load more button that bumps tableRecordsPerPage by N on each click. paginated([5]) shows 5 rows initially and adds 5 more per click.

The package renders only the Load more button — Filament's stock per-page selector and prev/next links don't appear. Pass a single-value array like [5] rather than the multi-value form ([5, 10, 25]) — only the first integer is used as the increment, the rest are ignored.

The button hides automatically when the underlying paginator's hasMorePages() returns false. It briefly disables and shows a loading spinner during the request.

If you want vanilla page-link pagination, leave ->paginated(...) set but skip the timeline macro — you'll get Filament's default rendering.

Theming

The package's geometry — line position, card surface, dot colours, caret accent — is driven by a small set of CSS custom properties you can override without forking the stylesheet.

Root-level (.ftv-shell):

Per-group (.ftv-group-body):

Dark mode automatically picks up adjusted values via .dark .ftv-shell.

To override per panel, add a rule to your panel's theme CSS:

Translations

All user-facing strings go through trans('filament-timeline-view::timeline.*'). Weekday and month names use Carbon's translatedFormat() which respects the app's locale.

To customize strings or add locales, publish the language files:

Then edit or add files under lang/vendor/filament-timeline-view/.

Keys:

• today — "Today" label shown when the group's date is today.
• load_more — Load more button label.
• toggle_day — aria-label template for the collapse toggle (:day placeholder).
• collapsed_summary — pluralized "N posts hidden" shown in the collapsed state.
• empty_state.heading / empty_state.description — default empty-state copy. Override per-table via ->emptyStateHeading(...) / ->emptyStateDescription(...).

Ships with en and de out of the box.

Need something custom?

We build production Filament panels and plugins for teams that want to ship fast without compromising on polish. If you need a custom feature, an extended variant of this package, or a fully bespoke component built for your stack, we can help.

• Browse the rest of our Filament work: filament.devletes.com
• Get in touch: [email protected]

Typical engagements: new Filament plugins, custom resources/widgets/actions, theme + UX work, integrations with your existing services, and one-off tailored forks of our open-source packages.

Credits

• Salman Hijazi

License

MIT. See LICENSE.md.