Sortable

Wire Sortable

Reorderable rows and columns for wire-table — where each order is persisted, and who it belongs to.

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 4 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([
                // ...
            ]);
    }
}

Requirements

Pages