PHPackages                             invaders-xx/filament-kanban-board - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. invaders-xx/filament-kanban-board

ActiveLibrary[Utility & Helpers](/categories/utility)

invaders-xx/filament-kanban-board
=================================

Add a Kanban page to filament

4.1.1(1y ago)7617.1k↓33.3%15[1 issues](https://github.com/invaders-xx/filament-kanban-board/issues)[1 PRs](https://github.com/invaders-xx/filament-kanban-board/pulls)MITPHPPHP ^8.0

Since Jun 8Pushed 1y ago1 watchersCompare

[ Source](https://github.com/invaders-xx/filament-kanban-board)[ Packagist](https://packagist.org/packages/invaders-xx/filament-kanban-board)[ Docs](https://github.com/invaders-xx/filament-kanban-board)[ RSS](/packages/invaders-xx-filament-kanban-board/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (10)Dependencies (14)Versions (20)Used By (0)

Add a Kanban page to filament
=============================

[](#add-a-kanban-page-to-filament)

[![Latest Version on Packagist](https://camo.githubusercontent.com/1e1f54d1b361a40adb3c65d6069e1ac1c1f88b16b020cd6e803edd6e6d72d729/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f696e7661646572732d78782f66696c616d656e742d6b616e62616e2d626f6172642e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/invaders-xx/filament-kanban-board)[![GitHub Tests Action Status](https://camo.githubusercontent.com/55d9b15a8adb83820cd008516fc36a406ffa43e7c8443827e2593960186f830e/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f776f726b666c6f772f7374617475732f696e7661646572732d78782f66696c616d656e742d6b616e62616e2d626f6172642f72756e2d74657374733f6c6162656c3d7465737473)](https://github.com/invaders-xx/filament-kanban-board/actions?query=workflow%3Arun-tests+branch%3Amain)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/f296a966a2a53fa905eb682325152f2852cb6a93f5866fc3660e7d1753ad87d6/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f776f726b666c6f772f7374617475732f696e7661646572732d78782f66696c616d656e742d6b616e62616e2d626f6172642f436865636b253230262532306669782532307374796c696e673f6c6162656c3d636f64652532307374796c65)](https://github.com/invaders-xx/filament-kanban-board/actions?query=workflow%3A%22Check+%26+fix+styling%22+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/c79d9def37334d0b3d8840ac4c22ea117981e0a286ead58fc28b85f3fbc56590/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f696e7661646572732d78782f66696c616d656e742d6b616e62616e2d626f6172642e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/invaders-xx/filament-kanban-board)

Define a Kanban page within your Filament's application. It can be a page or a resource's page. [![image](https://user-images.githubusercontent.com/604907/172618602-d1bf4377-109c-4316-8a75-ac78a0a70e9b.png)](https://user-images.githubusercontent.com/604907/172618602-d1bf4377-109c-4316-8a75-ac78a0a70e9b.png)

Installation
------------

[](#installation)

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',
    ];
}
```

Usage
-----

[](#usage)

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

[](#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

[](#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;
```

Editing records in Modal window
-------------------------------

[](#editing-records-in-modal-window)

You can enable Modal window to edit records:

Make sure to have `$recordClickEnabled` set to `true` and `$modalRecordClickEnabled` set to `true`:

```
public bool $recordClickEnabled = true;
public bool $modalRecordClickEnabled = true;
```

You can set modal title, width, save / cancel button labels:

```
protected string $editModalRecordTitle = 'Edit modal record title';
protected string $editModalRecordWidth = '2xl';
public string $editModalSaveButtonLabel = "Save";
public string $editModalCancelButtonLabel = "Cancel";
```

You can set Form components by overriding function `getEditModalRecordSchema()`:

```
protected static function getEditModalRecordSchema(): array
    {
        return [
            TextInput::make('title'),
            TextInput::make('status'),
        ];
    }
```

To call Modal with Form override `onRecordClick()` function and add the following:

```
public function onRecordClick($recordId, $data): void
    {
        $this->editModalRecord->fill($data);
        $this->dispatchBrowserEvent('open-modal', ['id' => 'kanban--edit-modal-record']);
    }
```

To manipulate with data from the Modal Form override `editRecord()` function:

```
public function editRecord(array $data): void
    {

    }
```

Testing
-------

[](#testing)

```
composer test
```

Changelog
---------

[](#changelog)

Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.

Security Vulnerabilities
------------------------

[](#security-vulnerabilities)

Please review [our security policy](../../security/policy) on how to report security vulnerabilities.

Credits
-------

[](#credits)

- [David Vincent](https://github.com/invaders-xx)
- [All Contributors](../../contributors)

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

###  Health Score

41

—

FairBetter than 89% of packages

Maintenance32

Infrequent updates — may be unmaintained

Popularity39

Limited adoption so far

Community20

Small or concentrated contributor base

Maturity61

Established project with proven stability

 Bus Factor1

Top contributor holds 64.2% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~42 days

Recently: every ~56 days

Total

18

Last Release

712d ago

Major Versions

0.2.6 → v2.x-dev2022-10-03

0.4 → 3.02023-09-12

3.1.1 → 4.02024-04-03

### Community

Maintainers

![](https://www.gravatar.com/avatar/cd84d991d619a7b8cafe026320fcb9a7b7b76b5fefe1738fd1f1e41fd0db0c64?d=identicon)[invaders-xx](/maintainers/invaders-xx)

---

Top Contributors

[![invaders-xx](https://avatars.githubusercontent.com/u/604907?v=4)](https://github.com/invaders-xx "invaders-xx (43 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (8 commits)")[![wilfredchen](https://avatars.githubusercontent.com/u/46327334?v=4)](https://github.com/wilfredchen "wilfredchen (5 commits)")[![mokhosh](https://avatars.githubusercontent.com/u/6499685?v=4)](https://github.com/mokhosh "mokhosh (3 commits)")[![ziming](https://avatars.githubusercontent.com/u/679513?v=4)](https://github.com/ziming "ziming (2 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (2 commits)")[![stephanus-tantiono](https://avatars.githubusercontent.com/u/52034225?v=4)](https://github.com/stephanus-tantiono "stephanus-tantiono (1 commits)")[![mustafa-online](https://avatars.githubusercontent.com/u/5323832?v=4)](https://github.com/mustafa-online "mustafa-online (1 commits)")[![zayedadel](https://avatars.githubusercontent.com/u/7737506?v=4)](https://github.com/zayedadel "zayedadel (1 commits)")[![ModestasV](https://avatars.githubusercontent.com/u/3809773?v=4)](https://github.com/ModestasV "ModestasV (1 commits)")

---

Tags

laravelfilamentinvaders-xxfilament-kanban-board

###  Code Quality

TestsPest

Code StylePHP CS Fixer

### Embed Badge

![Health badge](/badges/invaders-xx-filament-kanban-board/health.svg)

```
[![Health](https://phpackages.com/badges/invaders-xx-filament-kanban-board/health.svg)](https://phpackages.com/packages/invaders-xx-filament-kanban-board)
```

###  Alternatives

[pboivin/filament-peek

Full-screen page preview modal for Filament

253319.6k12](/packages/pboivin-filament-peek)[dotswan/filament-map-picker

Easily pick and retrieve geo-coordinates using a map-based interface in your Filament applications.

124139.3k2](/packages/dotswan-filament-map-picker)[creagia/filament-code-field

A Filamentphp input field to edit or view code data.

58289.3k3](/packages/creagia-filament-code-field)[swisnl/filament-backgrounds

Beautiful backgrounds for Filament auth pages

54149.2k6](/packages/swisnl-filament-backgrounds)[guava/calendar

Adds support for vkurko/calendar to Filament PHP.

298241.0k3](/packages/guava-calendar)[tapp/filament-google-autocomplete-field

Filament plugin that provides a Google Autocomplete field

3098.1k](/packages/tapp-filament-google-autocomplete-field)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)