nyoncode/wire-sortable

Drag & drop row reordering plugin for wire-table.

1.2.0 2026-06-11 04:55 UTC

Requires

• php: ^8.2
• illuminate/database: ^10.0|^11.0|^12.0|^13.0
• illuminate/support: ^10.0|^11.0|^12.0|^13.0
• livewire/livewire: ^3.0
• nyoncode/laravel-package-toolkit: ^2.0.1
• nyoncode/wire-core: ^0.1|dev-main|@dev
• nyoncode/wire-table: ^0.1|dev-main|@dev

Requires (Dev)

• laravel/pint: ^1.29
• orchestra/testbench: ^8.0|^9.0|^10.0|^11.0
• pestphp/pest: ^2.0|^3.0|^4.0

MIT

• Ondrej Nyklicek

README

Drag and drop row and column reordering for Wire Table.

Requirements

• PHP 8.2+
• Laravel 10, 11, or 12
• Livewire 3.x
• Tailwind CSS 3.x
• nyoncode/wire-table

Installation

composer require nyoncode/wire-sortable

Service providers register automatically through Laravel package discovery.

Publish the config file when you need to change the order column, SortableJS loading, animation, or user model:

php artisan vendor:publish --tag=wire-sortable-config

Run the package migration when you use persistent per-user column ordering:

php artisan vendor:publish --tag=wire-sortable-migrations
php artisan migrate

Tailwind CSS

Add the package views to your Tailwind content paths.

export default {
    content: [
        './vendor/nyoncode/wire-core/resources/views/**/*.blade.php',
        './vendor/nyoncode/wire-table/resources/views/**/*.blade.php',
        './vendor/nyoncode/wire-sortable/resources/views/**/*.blade.php',
    ],
}

Quick Start

use Livewire\Component;
use NyonCode\WireSortable\Concerns\WithSortable;
use NyonCode\WireTable\Columns\TextColumn;
use NyonCode\WireTable\Concerns\WithTable;
use NyonCode\WireTable\Table;

class TaskTable extends Component
{
    use WithTable, WithSortable;

    public function table(Table $table): Table
    {
        return $table
            ->model(Task::class)
            ->reorderable('sort_order')
            ->columns([
                TextColumn::make('title')->sortable()->searchable(),
                TextColumn::make('status')->sortable(),
            ]);
    }
}

<div>
    {{ $this->table }}
</div>

Configuration

return [
    'order_column' => 'sort_order',
    'sortablejs_cdn' => 'https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js',
    'animation' => 150,
    'user_model' => 'App\\Models\\User',
];

Set sortablejs_cdn to null when your application bundles SortableJS itself.

Documentation

Document	Description
Sortable Overview	Row and column reordering
Installation	Setup and frontend requirements
Row Reordering	Persistent row order
Column Reordering	Per-user column order
API Reference	Sortable table and trait API
Configuration	Package config reference

License

MIT