Reorderable Columns Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require bostos/reorderable-columns
   php artisan vendor:publish --provider="Bostos\ReorderableColumns\ReorderableColumnsServiceProvider" --tag="migrations"
   php artisan migrate
   

2. Enable in Filament Table: Add the trait to your table class:

   use Bostos\ReorderableColumns\Concerns\ReorderableColumns;
   
   class MyTable extends Table
   {
       use ReorderableColumns;
   
       // ...
   }
   

3. First Use Case:

   protected function getTableColumns(): array
   {
       return [
           Tables\Columns\TextColumn::make('name'),
           Tables\Columns\TextColumn::make('email'),
           Tables\Columns\TextColumn::make('created_at'),
       ];
   }
   

   The drag-and-drop UI appears automatically in the table header.

Implementation Patterns

Core Workflow

1. Define Columns:

   protected function getTableColumns(): array
   {
       return collect($this->columns)->mapWithKeys(fn ($column) => [
           $column->getName() => $column,
       ]);
   }
   

2. Configure Storage Driver:

   protected static ?string $reorderableColumnsDriver = 'database'; // or 'session'
   

3. Customize Persistence:

   protected static ?string $reorderableColumnsModel = \App\Models\User::class;
   protected static ?string $reorderableColumnsAttribute = 'column_order';
   

Integration Tips

• Dynamic Columns: Use getTableColumns() to dynamically adjust columns based on user roles or permissions.
• Column Visibility: Combine with Filament’s visibleOn() to ensure only visible columns are reorderable.
• Default Order: Set a default order via booted():

  public static function booted(): void
  {
      static::defaultReorderableColumns(['name', 'email', 'created_at']);
  }
  

Advanced Usage

• Multi-Table Sync: Share column orders across tables using a shared model/attribute.
• Admin Overrides: Disable reordering for admin users:

  protected static bool $reorderableColumnsEnabled = false;
  

Gotchas and Tips

Common Pitfalls

1. Migration Issues:

   • Ensure the reorderable_columns_orders table exists. Run php artisan migrate if missing.
   • If using a custom model, verify the column_order JSON column exists.

2. Column Name Conflicts:

   • Column names must be unique. Use getName() to debug:

     dd($this->getTableColumns()->keys());
     

3. Session Driver Quirks:

   • Session-based orders reset on logout or cache clearing. Test thoroughly in staging.

Debugging

• Check Saved Orders:

  $user = auth()->user();
  dd($user->column_order); // For database driver
  

• Clear Cached Orders:

  php artisan cache:clear
  php artisan view:clear
  

Extension Points

1. Custom Storage Logic: Override getReorderableColumnsOrder() to fetch orders from a non-standard location:

   protected function getReorderableColumnsOrder(): ?array
   {
       return Cache::get('custom_column_order_' . auth()->id());
   }
   

2. Event Hooks: Listen for order changes via ReorderableColumnsSaved event:

   event(new ReorderableColumnsSaved($table, $newOrder));
   

3. UI Customization: Modify the drag handle via Blade:

   {{ $column->getReorderableHandle() }}
   

   Or override the default handle in your table’s configure():

   $this->configureUsing(new class {
       public function configureReorderableColumns(): void
       {
           ReorderableColumns::make()
               ->handleIcon('heroicon-o-drag')
               ->handleWidth(40);
       }
   });
   

Performance Tips

• Database Driver: Use ->remember() on the model to avoid querying on every request.
• Session Driver: For high-traffic apps, consider a cache-backed session driver to reduce load.