advanced

Custom components

Generate your own card and column header Blade components and render actions inside them.

A board is drawn from two components: column headers and cards. Generate your own copies and edit them like any other Blade view.

Generate the components

bash

php artisan make:kanban-components --resource=YourResource

Two files land in resources/views/components/kanban/your-resource/:

column-header.blade.php — the column heading
card.blade.php — the record card

Use them

php

<?php

namespace App\Filament\Pages;

use Asmit\AdvancedKanban\Pages\KanbanPage;

class TasksKanban extends KanbanPage
{
    protected static string $columnHeaderComponent = 'kanban.tasks.column-header';
    protected static string $cardComponent = 'kanban.tasks.card';

    public function kanban(Kanban $kanban): Kanban
    {
        return $kanban
            ->model(Task::class)
            ->statusField('status')
            ->columns([
                // Your columns here
            ]);
    }
}

Render an action inside a component

Define the action on the Kanban page:

php

use Filament\Actions\Action;
use Filament\Forms\Components\TextInput;

public function addDocsAction(): Action
{
    return Action::make('docs')
        ->schema(function (array $arguments): array {
            return [
                TextInput::make('title')->default($arguments['recordId']),
            ];
        });
}

Then evaluate it from the Blade view, passing whatever the action needs:

blade

{{ $this->evaluateAction($this->addDocsAction(), ['recordId' => $record->getKey()]) }}

Render hooks

Two render hooks let you drop extra views onto the board without touching its components:

KanbanRenderHook::KANBAN_SEARCH_BEFORE — content above the search bar
KanbanRenderHook::KANBAN_PAGE_FOOTER — content at the bottom of the page