Sortable

Wire Sortable

Reorderable rows and columns for wire-table. Row reordering persists to a database column. Column reordering persists per user, per model, and per table component to the database.

Reorder Detail

Closer view of row ordering and drag handles.

Reorderable rows and columns for wire-table. Row reordering persists to a database column. Column reordering persists per user, per model, and per table component to the database.

Built on SortableJS and Alpine.js.

Features

• Row reordering -- toggle button switches the table into reorder mode; drag rows to change their position, persisted to a database column
• Always-on reorder mode -- optionally skip the toggle and keep drag handles visible at all times
• Column reordering -- drag column headers to rearrange; order is stored per user, per model, and per table component in the database
• Reorder mode -- in reorder mode, pagination, sorting, search and filters are disabled so the user can drag freely across the full dataset
• Paginated while reordering -- optionally keep pagination enabled during reorder mode
• Lifecycle hooks -- beforeReorder() / afterReorder() for authorization, caching, events
• Multi-table support -- multiple table components over the same model get independent column orders
• Dark mode -- all drag indicators support light and dark themes
• Livewire 3 compatible -- survives morphs, pagination, and filter changes

Typical Setup

Add WithSortable beside WithTable, then enable row or column reordering on the table.

use NyonCode\WireSortable\Concerns\WithSortable;
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')
            ->columnReorderable()
            ->columns([
                // ...
            ]);
    }
}
use NyonCode\WireSortable\Concerns\WithSortable;
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')
            ->columnReorderable()
            ->columns([
                // ...
            ]);
    }
}

Requirements

Pages