Drag and drop row and column reordering for Wire Table.
- PHP 8.2+
- Laravel 10, 11, or 12
- Livewire 3.x
- Tailwind CSS 3.x
nyoncode/wire-table
composer require nyoncode/wire-sortableService 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-configRun the package migration when you use persistent per-user column ordering:
php artisan vendor:publish --tag=wire-sortable-migrations
php artisan migrateAdd 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',
],
}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>return [
'order_column' => 'sort_order',
'sortablejs_cdn' => null,
'animation' => 150,
'user_model' => 'App\\Models\\User',
];SortableJS is compiled into the package's own asset (dist/wire-sortable.js,
served from /wire-sortable/assets/sortable.js), so reordering needs no build
step, no vendor:publish and no CDN request — it works offline and under a
strict CSP. sortablejs_cdn defaults to null for that reason; set it only if
your application needs a global window.Sortable of its own, in which case that
script is loaded in addition to the bundle. Applications that already set the
key keep working unchanged.
As with every Wire package, @wireStackScripts in the layout <head> puts the
bundle in the initial document — the placement that survives a wire:navigate
visit; the sortable view's own include remains a fallback. See
JavaScript Assets.
| 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 |
MIT