DEV3 Technologies home

Filament kanban board page with drag and drop

A custom Filament 4 page that renders stage columns and moves cards between them with Alpine drag and drop and a validated Livewire method.

FilamentLayoutsfilamentkanbanlivewirealpine

Code

<?php

namespace App\Filament\Pages;

use App\Models\Candidate;
use BackedEnum;
use Filament\Notifications\Notification;
use Filament\Pages\Page;
use Filament\Support\Icons\Heroicon;

class PipelineBoard extends Page
{
    protected static string|BackedEnum|null $navigationIcon = Heroicon::OutlinedViewColumns;

    protected static ?string $title = 'Pipeline';

    protected string $view = 'filament.pages.pipeline-board';

    /** Column key => label. The keys are the only stages a card may move to. */
    public const STAGES = [
        'applied' => 'Applied',
        'screening' => 'Screening',
        'interview' => 'Interview',
        'offer' => 'Offer',
    ];

    protected function getViewData(): array
    {
        return [
            'stages' => self::STAGES,
            'cards' => Candidate::query()
                ->whereIn('stage', array_keys(self::STAGES))
                ->orderBy('position')
                ->limit(300)
                ->get()
                ->groupBy('stage'),
        ];
    }

    /** Called from the browser after a drop. Never trust the client: validate the stage. */
    public function moveCard(int $id, string $stage): void
    {
        if (! array_key_exists($stage, self::STAGES)) {
            return;
        }

        $card = Candidate::findOrFail($id);
        $this->authorize('update', $card);

        if ($card->stage === $stage) {
            return;
        }

        $card->update([
            'stage' => $stage,
            'position' => (Candidate::where('stage', $stage)->max('position') ?? 0) + 1,
        ]);

        Notification::make()->title("{$card->name} moved to ".self::STAGES[$stage])->success()->send();
    }
}

Needs: filament/filament@^4.0

How it works

What it solves

Pipelines such as hiring, sales or support are easiest to understand as columns of cards. Filament has no built-in board, but a custom page with a little Alpine is enough, and it keeps all the usual panel chrome, navigation and authorisation.

How it works

PipelineBoard is a regular Page pointing at a Blade view. getViewData() loads cards once, ordered by position, capped at 300, and groups them by stage so the view can loop over STAGES. That constant is the single source of truth for the columns.

In the view, each card is draggable and stores its id in an Alpine dragging variable on dragstart. Each column listens for dragover.prevent (required for a drop to be allowed), highlights itself, and on drop calls $wire.moveCard(id, stage), a public Livewire method.

moveCard() treats the browser as untrusted: it ignores unknown stages, authorises the update through the model policy, skips no-op moves and appends the card at the end of the target column. Livewire then re-renders from the database, so a refused move simply snaps back.

Adapting it

Add wire:key values to every loop so DOM diffing stays correct. For ordering within a column, send the sorted ids to moveCard and write positions in a transaction. For touch devices swap the native events for a sortable library.

Pitfalls

  • Native drag events do not fire on most touch screens.
  • Filament does not compile your own Tailwind classes for custom views unless you register a theme, so the example uses inline styles.
  • Keep the card limit, a huge board makes every Livewire round trip heavy.

How to use it

  1. Add stage (string) and position (integer) columns to your model and adjust STAGES.
  2. Place the page class in app/Filament/Pages/ and the view in resources/views/filament/pages/.
  3. Create an update policy on the model; moveCard() calls it.
  4. Open the Pipeline page and drag a card to another column.
  5. Style cards with your own theme classes if you have a custom Filament theme.

Licence: DEV3 Snippet Licence. Free to use, change and ship in personal and commercial projects. Attribution is appreciated, not required. Please do not redistribute snippets as a collection.

Related snippets

Tailwind CSS · LayoutsRoadmap status columnsA public product roadmap laid out as Planned, In progress and Shipped columns that stack on phones, using semantic sections and lists.roadmapcolumnsgrid React / Next.js · LayoutsPrint stylesheet for a resume pageA small React resume component with print CSS that sets A4 page margins, hides controls and avoids awkward page breaks.printcssresume Tailwind CSS · LayoutsIcon feature gridA responsive grid of feature cards, each with an inline SVG icon tile, a heading and a short description.featuresgridicons Flutter · LayoutsMulti-service home gridResponsive grid of service tiles with icons, optional badges and a data-driven list that adapts column count to width.fluttergridhome