Essentials

API Reference

Complete reference for Flowforge configuration methods.

Board Configuration

Method	Description	Required
`query(Builder)`	Set the Eloquent query as data source	Yes
`columnIdentifier(string)`	Field name for column status	Yes
`positionIdentifier(string)`	Field name for drag-drop ordering	Yes
`columns(array)`	Define board columns	Yes
`recordTitleAttribute(string)`	Field name for card titles
`cardSchema(Closure)`	Rich card content using Schema
`cardActions(array)`	Actions available on each card
`columnActions(array)`	Actions available on column headers
`searchable(array)`	Enable search on specified fields
`filters(array)`	Add filtering capabilities
`cardAction(string)`	Make cards clickable with action
`cardsPerColumn(int)`	Cards to load per column (pagination)
`filtersFormWidth(Width)`	Filter panel width
`filtersFormColumns(int)`	Columns in filter form
`filtersLayout(FiltersLayout)`	Filter display layout (Dropdown, AboveContent, etc.)

Board Methods

Essential Configuration

public function board(Board $board): Board
{
    return $board
        ->query(Task::query())                    // Required: Data source
        ->columnIdentifier('status')              // Required: Column field
        ->positionIdentifier('position')          // Required: Position field
        ->columns([                               // Required: Column definitions
            Column::make('todo')->label('To Do')->color('gray'),
            Column::make('done')->label('Done')->color('green'),
        ]);
}

Content Configuration

->recordTitleAttribute('title')                   // Card title field
->cardSchema(fn(Schema $schema) => $schema        // Rich card content
    ->components([
        TextEntry::make('description'),
        TextEntry::make('due_date')->date(),
    ])
)

Actions Configuration

->cardActions([                                   // Card-level actions
    EditAction::make()->model(Task::class),
    DeleteAction::make()->model(Task::class),
])
->columnActions([                                 // Column-level actions
    CreateAction::make()->model(Task::class),
])
->cardAction('edit')                              // Make cards clickable

Search & Filtering

use Filament\Tables\Enums\FiltersLayout;
use Filament\Support\Enums\Width;

->searchable(['title', 'description'])            // Enable search
->filters([                                       // Add filters
    SelectFilter::make('priority'),
    Filter::make('overdue')->query(fn($q) =>
        $q->where('due_date', '<', now())
    ),
])
->filtersLayout(FiltersLayout::AboveContent)      // Display filters above board
->filtersFormWidth(Width::Large)                  // Filter panel width
->filtersFormColumns(3)                           // Columns in filter form

Column Configuration

Column::make('identifier')
    ->label('Display Name')                       // Column header text
    ->color('blue')                              // Column color theme
    ->icon('heroicon-o-flag')                    // Column header icon

Available Colors

gray - Neutral/default
blue - Primary/in-progress
green - Success/completed
red - Error/urgent
amber - Warning/review
purple - Custom status
pink - Custom status

Livewire Methods

These methods are available in your board components for programmatic control:

Card Management

// Move card between columns
$this->moveCard(string $cardId, string $targetColumnId, ?string $afterCardId = null, ?string $beforeCardId = null)

Pagination Control

// Load more cards for pagination
$this->loadMoreItems(string $columnId, ?int $count = null)

// Load all cards to enable reordering
$this->loadAllItems(string $columnId)

// Check if all cards are loaded
$this->isColumnFullyLoaded(string $columnId): bool

// Get position for new card in column
$this->getBoardPositionInColumn(string $columnId): string

Performance Features

Intelligent Pagination: Efficiently handles 100+ cards per column
Infinite Scroll: Smooth loading with 80% scroll threshold
Optimistic UI: Immediate feedback with rollback on errors
Fractional Ranking: Prevents database locks during reordering
Query Optimization: Cursor-based pagination with eager loading

Livewire Events

Flowforge dispatches these events for frontend integration and custom logic:

Event	Payload	When Fired
`kanban-card-moved`	`cardId`, `columnId`, `position`	After a card is moved
`kanban-items-loaded`	`columnId`, `loadedCount`, `totalCount`, `isFullyLoaded`	After pagination loads more cards
`kanban-all-items-loaded`	`columnId`, `totalCount`	After "Load All" completes

Listening to Events

use Livewire\Attributes\On;

#[On('kanban-card-moved')]
public function onCardMoved(string $cardId, string $columnId, string $position): void
{
    // Custom logic when a card moves (e.g., send notification, update analytics)
}

#[On('kanban-items-loaded')]
public function onItemsLoaded(string $columnId, int $loadedCount, int $totalCount, bool $isFullyLoaded): void
{
    // Track loading progress
}

JavaScript Listeners

document.addEventListener('livewire:init', () => {
    Livewire.on('kanban-card-moved', ({ cardId, columnId }) => {
        console.log(`Card ${cardId} moved to ${columnId}`);
    });
});

Edit this pageorReport an issue

Database Schema

Set up your database for drag-and-drop Kanban functionality.

Troubleshooting

Common issues and solutions for Flowforge implementation.