Filament: Table with Reorderable Positions

Demonstrates how to reorder positions with drag'n'drop, also handling the situations of auto-assigning the new position to a new record and auto-reorder when any record is deleted.

Screenshot 2023-10-05 at 20.56.03

Get the Source Code:

How it works


The main ordering functionality is defined in table method using defaultSort and reordable functions with an argument of column name to order by.



namespace App\Filament\Resources;
use App\Filament\Resources\CategoryResource\Pages;
use App\Filament\Resources\CategoryResource\RelationManagers;
use App\Models\Category;
use Filament\Forms;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Form;
use Filament\Resources\Resource;
use Filament\Tables;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Table;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Database\Eloquent\SoftDeletingScope;
class CategoryResource extends Resource
protected static ?string $model = Category::class;
protected static ?string $navigationIcon = 'heroicon-o-rectangle-stack';
public static function form(Form $form): Form
return $form
public static function table(Table $table): Table
return $table
public static function getRelations(): array
return [
public static function getPages(): array
return [
'index' => Pages\ListCategories::route('/'),
'create' => Pages\CreateCategory::route('/create'),
'edit' => Pages\EditCategory::route('/{record}/edit'),

Usually position of the categories is saved after you reorder them in the table. By default this value is null.

To have position value assigned when creating a new category we have observer with creating listener. It gets maximum value of the position column on the table and...

The FULL tutorial is available after the purchase: in the Readme file of the official repository you would get invited to.
Get the Source Code: All 50 Premium Examples for $99 Only Table Examples for $39