Skip to content

NyonCode/wire-sortable

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Wire Sortable

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

About

READ ONLY

Resources

Stars

0 stars

Watchers

0 watching

Forks

Packages

 
 
 

Contributors