PHPackages                             itul/livewire-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. itul/livewire-kanban-board

ActiveLibrary

itul/livewire-kanban-board
==========================

Livewire component to show models/data according to its current status on a Kanban board

v1.0(1y ago)0411MITPHPPHP >=8.1

Since Mar 11Pushed 1y agoCompare

[ Source](https://github.com/bmooreitul/livewire-kanban-board)[ Packagist](https://packagist.org/packages/itul/livewire-kanban-board)[ Docs](https://github.com/mantix/livewire-kanban-board)[ RSS](/packages/itul-livewire-kanban-board/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (1)Dependencies (5)Versions (2)Used By (1)

Livewire Status Board
=====================

[](#livewire-status-board)

Livewire component to show records/data according to their current status on a Kanban board.

### Preview

[](#preview)

[![preview](https://github.com/mantix/livewire-kanban-board/raw/master/preview.gif)](https://github.com/mantix/livewire-kanban-board/raw/master/preview.gif)

### Installation

[](#installation)

You can install the package via composer:

```
composer require mantix/livewire-kanban-board
```

### Requirements

[](#requirements)

This package uses `laravel/laravel` () and `livewire/livewire` () under the hood.

It also uses Bootstrap CSS () for base styling.

Please make sure you include both of this dependencies before using this component.

### Usage

[](#usage)

In order to use this component, you must create a new Livewire component that extends from `LivewireKanbanBoard`

You can use `make:livewire` to create a new component. For example.

```
php artisan make:livewire SalesOrdersKanbanBoard
```

In the `SalesOrdersKanbanBoard` class, instead of extending from the base Livewire `Component` class, extend from `LivewireKanbanBoard`. Also, remove the `render` method. You'll have a class similar to this snippet.

```
class SalesOrdersKanbanBoard extends LivewireKanbanBoard
{
    //
}
```

In this class, you must override the following methods to display data

```
public function statuses() : Collection
{
    //
}

public function swimlanes() : Collection
{
    //
}

public function records() : Collection
{
    //
}
```

As you may have noticed, both methods return a Collection. `statuses()` refers to all the different status values your data may have in different points of time. `swimlanes()` refers to the different swimlane values your data may have. `records()` on the other hand, stand for the data you want to show that could be in any of those previously defined `statuses()` collection.

To show how these two methods work together, let's discuss an example of Sales Orders and their different status along the sales process: Registered, Awaiting Confirmation, Confirmed, Delivered. Each Sales Order might be in a different status at specific times. For this example, we might define the following collection for `statuses()`

```
public 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`.

And the following collection for `swimlanes()`

```
public function swimlanes() : Collection
{
    return collect([
        [
            'id' => 'high',
            'title' => 'High Priority',
        ],
        [
            'id' => 'medium',
            'title' => 'Medium Priority',
        ],
        [
            'id' => 'low',
            'title' => 'Low Priority',
        ],
    ]);
}
```

For each `swimlane` 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 our project

```
public function records() : Collection
{
    return SalesOrder::query()
        ->map(function (SalesOrder $salesOrder) {
            return [
                'id' => $salesOrder->id,
                'title' => $salesOrder->client,
                'status' => $salesOrder->status,
                'swimlane' => $salesOrder->swimlane,
            ];
        });
}
```

As you might see in the above snippet, we must return a collection of array items where each item must have at least 4 keys: `id`, `title` and `status` and `swimlane`. The last two are 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`, `swimlane` and `records` with the following comparison

```
$status['id'] == $record['status'] && $swimlane['id'] == $record['swimlane'];
```

To render the component in a view, just use the Livewire tag or include syntax

```

```

Populate the Sales Order model and you should have something similar to the following screenshot

[![basic](https://github.com/mantix/livewire-kanban-board/raw/master/basic.jpg)](https://github.com/mantix/livewire-kanban-board/raw/master/basic.jpg)

You can render any render and statuses of your project using this approach 👍

### Sorting and Dragging

[](#sorting-and-dragging)

By default, sorting and dragging between statuses is disabled. To enable it, you must include the following props when using the view: `sortable` and `sortable-between-statuses`

```

```

`sortable` enables sorting withing each status and `sortable-between-statuses` allow drag and drop from one status to the other. Adding these two properties, allow you to have drag and drop in place.

You must also install the following JS dependencies in your project to enable sorting and dragging.

```
npm install sortablejs
```

Once installed, make them available globally in the window object. This can be done in the `bootstrap.js` file that ships with your Laravel app.

```
window.Sortable = require('sortablejs').default;
```

### 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` you must specify this behavior when rendering the component through the `record-click-enabled` parameter

```

```

### Styling

[](#styling)

To modify the look and feel of the component, you can override the `styles` method and modify the base styles returned by this method to the view. `styles()` returns a keyed array with Tailwind CSS classes used to render each one of the components. These base keys and styles are:

```
return [
    'wrapper' => 'd-flex flex-nowrap overflow-x-auto rounded', // component wrapper
    'statusWrapper' => 'flex-shrink-0', // statuses wrapper
    'statusWidth' => 272, // statuses column width
    'status' => 'flex-column rounded bg-primary fw-bold mx-1 px-2', // status column wrapper
    'statusHeader' => 'py-2 fs-5', // status header
    'statusFooter' => '', // status footer
    'statusRecords' => '', // status records wrapper
    'record' => 'bg-white shadow rounded border fw-normal p-2 my-2', // record wrapper
    'recordContent' => '', // record content
];
```

An example of overriding the `styles()` method can be seen below

```
public function styles()
{
    $baseStyles = parent::styles();

    $baseStyles['wrapper'] = 'd-flex flex-nowrap overflow-x-auto rounded';

    $baseStyles['statusWrapper'] = 'flex-shrink-0';

    $baseStyles['statusWidth'] = 300;

    $baseStyles['status'] = 'flex-column rounded bg-primary fw-bold mx-1 px-2';

    $baseStyles['statusHeader'] = 'py-2 fs-5';

    $baseStyles['statusRecords'] = 'overflow-y-auto';

    $baseStyles['record'] = 'bg-white shadow rounded border fw-normal p-2 my-2';

    return $baseStyles;
}
```

With these new styles, your component should look like the screenshot below

[![basic](https://github.com/mantix/livewire-kanban-board/raw/master/styles.jpg)](https://github.com/mantix/livewire-kanban-board/raw/master/styles.jpg)

Looks like Trello, right? 😅

### Advanced Styling and Behavior

[](#advanced-styling-and-behavior)

Base views of the component can be customized as needed by exporting them to your project. To do this, run the `php artisan vendor:publish` command and export the `livewire-kanban-board-views` tag. The command will publish the base views under `/resources/views/vendor/livewire-kanban-board`. You can modify these base components as needed keeping in mind to maintain the `data` attributes and `ids` along the way.

Another approach is copying the base view files into your own view files and pass them directly to your component

```

```

Note: Using this approach also let's you add extra behavior to your component like click events on header, footers, such as filters or any other actions

### Adding Extra Views

[](#adding-extra-views)

The component let's you add a view before and/or after the status board has been rendered. These two placeholders can be used to add extra functionality to your component like a search input or toolbar of actions. To use them, just pass along the views you want to use in the `before-kanban-board-view` and `after-kanban-board-view` props when displaying the component.

```

```

Note: These views are optional.

In the following example, a `before-kanban-board-view` has been specified to add a search text box and a button

[![extra-views](https://github.com/mantix/livewire-kanban-board/raw/master/extra-views.jpg)](https://github.com/mantix/livewire-kanban-board/raw/master/extra-views.jpg)

### Testing

[](#testing)

```
composer test
```

### Changelog

[](#changelog)

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

Contributing
------------

[](#contributing)

Please see [CONTRIBUTING](CONTRIBUTING.md) for details.

### Security

[](#security)

If you discover any security related issues, please email  instead of using the issue tracker.

Credits
-------

[](#credits)

- [Pieter Naber](https://github.com/mantix)
- [Mantix BV](https://mantix.nl)
- [Andrés Santibáñez](https://github.com/asantibanez)
- [All Contributors](../../contributors)

License
-------

[](#license)

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

###  Health Score

29

—

LowBetter than 60% of packages

Maintenance45

Moderate activity, may be stable

Popularity8

Limited adoption so far

Community13

Small or concentrated contributor base

Maturity46

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 65.9% 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

Unknown

Total

1

Last Release

425d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/ef2f0faf239ffc922ea97bab8a15d5a68cc0d5c922ddac14de7b1c9083c9a96d?d=identicon)[Seedling](/maintainers/Seedling)

---

Top Contributors

[![asantibanez](https://avatars.githubusercontent.com/u/5126648?v=4)](https://github.com/asantibanez "asantibanez (27 commits)")[![Mantix](https://avatars.githubusercontent.com/u/5512138?v=4)](https://github.com/Mantix "Mantix (11 commits)")[![aanorbel](https://avatars.githubusercontent.com/u/17911892?v=4)](https://github.com/aanorbel "aanorbel (1 commits)")[![messerli90](https://avatars.githubusercontent.com/u/3306651?v=4)](https://github.com/messerli90 "messerli90 (1 commits)")[![wilburpowery](https://avatars.githubusercontent.com/u/15817188?v=4)](https://github.com/wilburpowery "wilburpowery (1 commits)")

---

Tags

mantixlivewire-kanban-board

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/itul-livewire-kanban-board/health.svg)

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

###  Alternatives

[livewire/volt

An elegantly crafted functional API for Laravel Livewire.

4195.3M84](/packages/livewire-volt)[namu/wirechat

A Laravel Livewire messaging app for teams with private chats and group conversations.

54324.5k](/packages/namu-wirechat)[calebdw/larastan-livewire

A Larastan / PHPStan extension for Livewire.

43482.4k3](/packages/calebdw-larastan-livewire)[api-platform/laravel

API Platform support for Laravel

59126.4k6](/packages/api-platform-laravel)[tomshaw/electricgrid

A feature-rich Livewire package designed for projects that require dynamic, interactive data tables.

116.6k](/packages/tomshaw-electricgrid)

PHPackages © 2026

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