Essentials
Customization
Customize your Kanban boards with rich content, actions, and filtering.
Rich Card Content
Use Filament's Schema components to create rich card layouts:
use Filament\Infolists\Components\TextEntry;
use Filament\Schemas\Schema;
public function board(Board $board): Board
{
return $board
->cardSchema(fn (Schema $schema) => $schema->components([
TextEntry::make('priority')->badge()->color(fn ($state) => match($state) {
'high' => 'danger',
'medium' => 'warning',
'low' => 'success',
default => 'gray'
}),
TextEntry::make('due_date')->date()->icon('heroicon-o-calendar'),
TextEntry::make('assignee.name')->icon('heroicon-o-user'),
]));
}
Column Actions
Add actions to column headers for creating new cards or bulk operations:
use Filament\Actions\CreateAction;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\Select;
public function board(Board $board): Board
{
return $board
->columnActions([
CreateAction::make()
->label('Add Task')
->model(Task::class)
->form([
TextInput::make('title')->required(),
Select::make('priority')
->options(['low' => 'Low', 'medium' => 'Medium', 'high' => 'High'])
->default('medium'),
])
->mutateFormDataUsing(function (array $data, array $arguments): array {
if (isset($arguments['column'])) {
$data['status'] = $arguments['column'];
$data['position'] = $this->getBoardPositionInColumn($arguments['column']);
}
return $data;
}),
]);
}
Card Actions
Add actions to individual cards for editing, deleting, or custom operations:
use Filament\Actions\EditAction;
use Filament\Actions\DeleteAction;
public function board(Board $board): Board
{
return $board
->cardActions([
EditAction::make()->model(Task::class),
DeleteAction::make()->model(Task::class),
])
->cardAction('edit'); // Makes cards clickable
}
Search and Filtering
Enable powerful search and filtering capabilities:
use Filament\Tables\Filters\SelectFilter;
use Filament\Tables\Filters\Filter;
public function board(Board $board): Board
{
return $board
->searchable(['title', 'description', 'assignee.name'])
->filters([
SelectFilter::make('priority')
->options(['low' => 'Low', 'medium' => 'Medium', 'high' => 'High'])
->multiple(),
SelectFilter::make('assigned_to')
->relationship('assignee', 'name')
->searchable()
->preload(),
Filter::make('overdue')
->label('Overdue')
->query(fn (Builder $query) => $query->where('due_date', '<', now()))
->toggle(),
]);
}
Column Configuration
Customize column appearance and behavior:
Column::make('todo')
->label('To Do')
->color('gray') // gray, blue, red, green, amber, purple, pink
->icon('heroicon-o-queue-list')
Available colors: gray
, blue
, red
, green
, amber
, purple
, pink