Add a Kanban page to filament

0.2.6 2022-07-17 08:00 UTC

This package is auto-updated.

Last update: 2022-07-17 08:02:11 UTC


Latest Version on Packagist GitHub Tests Action Status GitHub Code Style Action Status Total Downloads

Define a Kanban page within your Filament's application. It can be a page or a resource's page. image


You can install the package via composer:

composer require invaders-xx/filament-kanban-board

You can publish the config file with:

php artisan vendor:publish --tag="filament-kanban-board-config"

This is the contents of the published config file:

return [

Optionally, you can publish the views using

php artisan vendor:publish --tag="filament-kanban-board-views"

You can also specify your own view for record content to change the behaviour:

public string $recordContentView = 'filament-kanban-board::record-content';

in your class to add more content to your kanban's boxes.

You can define your own styles for each element of the Kanban:

protected function styles(): array
    return [
        'wrapper' => 'w-full h-full flex space-x-4 overflow-x-auto',
        'kanbanWrapper' => 'h-full flex-1',
        'kanban' => 'bg-primary-200 rounded px-2 flex flex-col h-full',
        'kanbanHeader' => 'p-2 text-sm text-gray-900',
        'kanbanFooter' => '',
        'kanbanRecords' => 'space-y-2 p-2 flex-1 overflow-y-auto',
        'record' => 'shadow bg-white dark:bg-gray-800 p-2 rounded border',
        'recordContent' => 'w-full',


In order to use this component, you must create a new Filament Page that extends from FilamentKanbanBoard

class KanbanOrders extends FilamentKanbanBoard
    protected function statuses() : Collection
        return collect([
                'id' => 'registered',
                'title' => 'Registered',
                'id' => 'awaiting_confirmation',
                'title' => 'Awaiting Confirmation',
                'id' => 'confirmed',
                'title' => 'Confirmed',
                'id' => 'delivered',
                'title' => 'Delivered',

For each status we define, we must return an array with at least 2 keys: id and title.

Now, for records() we may define a list of Sales Orders that come from an Eloquent model in your project.

protected function records() : Collection
    return SalesOrder::all()
        ->map(function (SalesOrder $item) {
            return [
                'id' => $item->id,
                'title' => $item->customer->name,
                'status' => $item->status,

As you might see in the above snippet, we must return a collection of array items where each item must have at least 3 keys: id, title and status. The last one is of most importance since it is going to be used to match to which status the record belongs to. For this matter, the component matches status and records with the following comparison.

$status['id'] == $record['status'];

if you need to use this page within a Filament's resource, add the route function definition to the class:

public static function route(string $path): array
    return [
        'class' => static::class,
        'route' => $path,

Sorting and Dragging

By default, sorting and dragging between statuses is disabled. To enable it, set in your class:

public bool $sortable = true;
public bool $sortableBetweenStatuses = true;

Behavior and Interactions

When sorting and dragging is enabled, your component can be notified when any of these events occur. The callbacks triggered by these two events are onStatusSorted and onStatusChanged

On onStatusSorted you are notified about which record has changed position within it's status. You are also given a $orderedIds array which holds the ids of the records after being sorted. You must override the following method to get notified on this change.

public function onStatusSorted($recordId, $statusId, $orderedIds)

On onStatusChanged gets triggered when a record is moved to another status. In this scenario, you get notified about the record that was changed, the new status, the ordered ids from the previous status and the ordered ids of the new status the record in entering. To be notified about this event, you must override the following method:

public function onStatusChanged($recordId, $statusId, $fromOrderedIds, $toOrderedIds)

onStatusSorted and onStatusChanged are never triggered simultaneously. You'll get notified of one or the other when an interaction occurs.

You can also get notified when a record in the status board is clicked via the onRecordClick event

public function onRecordClick($recordId)

To enable onRecordClick set it in the class:

public bool $recordClickEnabled = true;


composer test


Please see CHANGELOG for more information on what has changed recently.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.



The MIT License (MIT). Please see License File for more information.