README

A fast, simple Kanban board for Filament: a drop lands at once, the server checks every rule, and your Filament actions work on every card.

Features

Instant drag and drop: a drop lands at once; if the server refuses, the card slides back with the reason.
Rules on the server: columns from an enum, per-user columns, drop rules, read-only columns, locked cards and WIP limits.
Filament actions on cards and columns: edit in a slide-over, delete or run your own actions, create in a column, act on a whole column.
Column summaries: a sum or an average under each column title, kept current after every move.
Light on big boards: cards are drawn in the browser from JSON, so hundreds of them stay fast.
Search, filters and paging: instant search, select, multi-select and toggle filters kept in the URL, infinite scroll per column.
Swimlanes: rows by assignee, priority or any attribute, derived from the data or defined.
Bulk selection: select cards with Ctrl/⌘- or Shift-click, move them together or run a bulk action.
Shared boards: realtime with Laravel Echo or polling, a CardMoved event, browser events, and an Undo on every move.
Keyboard, screen readers and phones: cards reachable and movable without a mouse, moves announced, one column at a time with tabs on narrow screens, a compact density.
Dark mode and translations: English, Romanian, Russian and German included.

Compatibility

Plugin	Filament	Laravel	PHP
0.x	4.x, 5.x	12.x, 13.x	8.3+

Installation

composer require packstub/filament-kanban
php artisan filament:assets

No config, no migrations. The board uses the SortableJS that Filament already ships and plain CSS on your panel's palette, so there is nothing to add to your theme.

Add a board page next to a resource (or a standalone KanbanPage) and describe the board in one method:

use App\Enums\DealStage;
use App\Models\Deal;
use Packstub\Kanban\Board;
use Packstub\Kanban\Card;
use Packstub\Kanban\Pages\KanbanResourcePage;

class DealBoard extends KanbanResourcePage
{
    protected static string $resource = DealResource::class;

    public function kanban(Board $board): Board
    {
        return $board
            ->query(fn () => Deal::query()->with('owner'))
            ->columnAttribute('stage')
            ->columns(DealStage::class)
            ->card(fn (Deal $deal) => Card::make()
                ->eyebrow($deal->reference)
                ->title($deal->company)
                ->aside(Number::currency($deal->amount, 'USD'))
                ->meta([$deal->title, $deal->close_at?->format('M j')])
                ->avatar($deal->owner?->avatar_url, $deal->owner?->name));
    }
}

Register it in the resource's getPages(): 'kanban' => DealBoard::route('/board'). Under a resource the query() is optional (the board shows the resource's records, tenant and scopes included), KanbanAction::make() in the list page's header gives a Table / Board switch, and the HasKanbanNavigationBadge trait on the resource puts the number of cards in the navigation.

Read more: Installation, including a board inside any Livewire component.

Instant moves

A drop moves the card in the browser at once and asks the server with a small renderless call. The server loads the record through the board's query() and checks the column rules; your move logic runs; the card flashes when it is saved, or slides back with the reason when it is refused. Give your own logic to moveUsing() and throw to refuse:

->moveUsing(function (Deal $deal, string $to, string $from) {
    if ($to === 'won' && ! $deal->contract_signed) {
        throw new \RuntimeException('Attach the signed contract first.');
    }

    $deal->update(['stage' => $to]);
})

Scope the query (tenant, team, date window) and every read, move and action goes through it.

Columns and rules

Build the columns from an enum, or list them. Every rule takes a closure and is evaluated once per request, never per card:

->columns([
    Column::make('todo')->label('To do')->color('sky'),
    Column::make('doing')->color('amber')->accepts(['todo'])->limit(5),
    Column::make('review')->color('violet')
        ->accepts(['doing'])
        ->visible(fn () => auth()->user()->isReviewer()),
    Column::make('done')->color('emerald')
        ->accepts(['review'])
        ->droppable(fn () => auth()->user()->can('ship'))
        ->collapsed(),
])

Method	What it does
`visible()` / `hidden()`	Leave the column out for this user: its cards are not loaded and nothing moves into or out of it.
`accepts([...])`	The columns a card may come from. `null` (default) means anywhere.
`droppable()`, `draggable()`, `readOnly()`	Who may drop in and drag out.
`limit()`	A WIP limit: `3/5` in the header, and a full column refuses moves and new cards.
`creatable()`	Whether the column offers "+" for the create action.
`collapsed()`, `sortBy()`	Start folded; this column's order.

Card actions

Your Filament actions work on cards, with their forms, modals, slide-overs and confirmations. The card's record is the action's record, loaded through the board's query, and the board refreshes once an action has run. cardAction() picks the one a click on the card runs:

->cardActions([
    EditAction::make()->schema(DealResource::fields())->slideOver(),
    Action::make('hot')->icon(Heroicon::OutlinedFire)->action(fn (Deal $record) => $record->update(['is_hot' => true])),
    DeleteAction::make(),
])
->cardAction('edit')

Create in a column

createAction() puts a "+" in each droppable column's header. The form opens, and the new record gets that column:

->createAction(CreateAction::make()->label('New deal')->schema([...])->slideOver())

Hidden, read-only, full and creatable(false) columns get no "+", and the server refuses a create into them.

Summaries and limits

A line under each column title, from the column's query with the current search and filters, refreshed after every move:

->summarize(fn (Builder $query) => Number::currency($query->sum('amount'), 'USD'))

Cards

Card::make() with eyebrow() (small monospaced line), title(), aside() (right-aligned: an amount, a date), description() (two muted lines), badge($label, $color, $condition, icon: ...), meta([...]) (empty parts dropped), due($date) (red once past, amber on the day), progress($done, $total) (a thin bar), avatar($url, $name) (initials without a picture), accent($color) (a coloured left edge), url(), searchText(), actions([...]) and locked() (one card that stays put, refused by the server too).

Search, filters and paging

->searchable(['reference', 'company', 'owner.name'])
->filters([
    Filter::make('owner_id')->label('Owners')->multiple()->options(fn () => User::pluck('name', 'id')->all()),
    Filter::make('mine')->label('Assigned to me')->toggle()->query(fn (Builder $query) => $query->where('owner_id', auth()->id())),
])
->perColumn(50)

Typing filters the loaded cards at once, then the server brings the matching cards of every column. A Filter is a select, a popover of checkboxes with multiple(), or an on/off chip with toggle(). The search and the active filters stay in the URL, so a filtered board can be bookmarked and shared. Each column loads its cards in pages as you scroll.

Configuration

$board
    ->reorderable('sort')   // users order cards inside a column
    ->sortBy('due_at')      // default order (a column can override it)
    ->poll('30s')           // pick up other people's changes
    ->focusMode(false)      // keep the panel's sidebar on the board page
    ->key('deals');         // where the browser remembers folded and hidden columns

The stylesheet is plain CSS on Filament's colour variables and follows dark mode. Restyle it with the --pk-* variables on .pk (--pk-ring, --pk-col-width, --pk-card-bg, --pk-radius, …) from your theme, prefixed so they win over the plugin's stylesheet (.fi-body .pk { … }).

Read more: Configuration, the full fluent API.

Documentation

The same pages live in the docs/ directory of this repository.

Testing

composer test

Changelog

See the changelog.

Security vulnerabilities

Please e-mail support@packstub.dev rather than opening a public issue.

Credits

License

MIT. See the license file.

packstub / filament-kanban

Package info

Security

Fund package maintenance!

Statistics