filament-kanban

To create a kanban board in Filament, you must create a new class that extends Mokhosh\FilamentKanban\Pages\KanbanBoard. You are required to define the model being used and the Enum that represents the statuses. You can also customize which attributes are used for the record title and the status field.

Required properties to define in your class:

• static string $model: The Eloquent model class name.
• static string $statusEnum: The Enum class name used for statuses.

Optional properties:

• static string $recordTitleAttribute: The attribute on the model used for the title (defaults to 'title').
• static string $recordStatusAttribute: The attribute on the model used for the status (defaults to 'status').

namespace App\Filament\Pages;

use App\Models\Task;
use App\Enums\TaskStatus;
use Mokhosh\FilamentKanban\Pages\KanbanBoard;

class TaskKanbanBoard extends KanbanBoard
{
    protected static string $model = Task::class;
    protected static string $statusEnum = TaskStatus::class;

    // Optional customizations
    protected static string $recordTitleAttribute = 'name';
    protected static string $recordStatusAttribute = 'state';
}

Model Attribute Mapping

If your database columns differ from the defaults, override these properties:

• $recordTitleAttribute: The column used for the card title (default: 'title').
• $recordStatusAttribute: The column used for the status (default: 'status').
• $navigationIcon: The Heroicon used in the Filament navigation.

Customizing Views

To change the look of the board, you can either publish all views globally or override specific views per board class:

Global Publish:

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

Per-Board Overrides:

• $view: The main board view.
• $headerView: The header view.
• $recordView: The individual card view.
• $statusView: The column/status view.
• $scriptsView: The scripts view.

protected static string $recordTitleAttribute = 'title';
protected static string $recordStatusAttribute = 'status';
protected static ?string $navigationIcon = 'heroicon-o-document-text';

protected static string $view = 'filament-kanban::kanban-board';
protected static string $recordView = 'filament-kanban::kanban-record';

The edit modal is enabled by default. You can customize its behavior, appearance, and logic.

Disabling the Modal

Set $disableEditModal to true to prevent records from opening an edit view when clicked.

Form Schema

Override getEditModalFormSchema(int|string|null $recordId) to define the Filament form fields used in the modal.

Submit Action

Override editRecord(int|string $recordId, array $data, array $state) to define how the form data is saved to the model. $data contains the form inputs, and $state contains the full record data.

Appearance

Use the following properties to customize the modal:

• $editModalTitle: The title of the modal.
• $editModalWidth: The width (e.g., '2xl').
• $editModalSaveButtonLabel: Label for the save button.
• $editModalCancelButtonLabel: Label for the cancel button.
• $editModalSlideOver: Set to true to use a slide-over instead of a centered modal.

public bool $disableEditModal = false;

protected function getEditModalFormSchema(int|string|null $recordId): array
{
    return [
        TextInput::make('title'),
    ];
}

protected function editRecord(int|string $recordId, array $data, array $state): void
{
    User::find($recordId)->update([
        'phone' => $data['phone']
    ]);
}

protected string $editModalTitle = 'Edit Record';
protected string $editModalWidth = '2xl';
protected bool $editModalSlideOver = true;

You can override several methods to control how data is fetched and how the board reacts to user interactions.

Data Retrieval

• records(): Override this to return a Collection of records. This allows for custom filtering (e.g., only showing active users).
• statuses(): If you are not using an Enum, override this to return a Collection of arrays containing id and title.

Drag and Drop Logic

• onStatusChanged(int|string $recordId, string $status, array $fromOrderedIds, array $toOrderedIds): Define what happens when a record is moved to a different status column.
• onSortChanged(int|string $recordId, string $status, array $orderedIds): Define what happens when a record is reordered within the same status column.

protected function records(): Collection
{
    return User::where('role', 'admin')->get();
}

public function onStatusChanged(int|string $recordId, string $status, array $fromOrderedIds, array $toOrderedIds): void
{
    User::find($recordId)->update(['status' => $status]);
    User::setNewOrder($toOrderedIds);
}

public function onSortChanged(int|string $recordId, string $status, array $orderedIds): void
{
    User::setNewOrder($orderedIds);
}

When extending KanbanBoard, you can control how the board interacts with your Eloquent models using these static properties:

protected static string $model = Task::class;
protected static string $statusEnum = TaskStatus::class;
protected static string $recordTitleAttribute = 'title';
protected static string $recordStatusAttribute = 'status';