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' => '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.
| 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