Filament Table Repeater Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require awcodes/filament-table-repeater
   

   Publish the config (if needed):

   php artisan vendor:publish --provider="Awcodes\TableRepeater\TableRepeaterServiceProvider"
   

2. Register the Plugin: Add to app/Providers/Filament/AdminPanelProvider.php:

   public function panel(Panel $panel): Panel
   {
       return $panel
           ->plugins([
               \Awcodes\TableRepeater\TableRepeaterPlugin::make(),
           ]);
   }
   

3. First Use Case: Replace a standard Repeater with TableRepeater in a form:

   use Awcodes\TableRepeater\Forms\Components\TableRepeater;
   
   TableRepeater::make('items')
       ->columns(3) // Optional: Adjust column count
       ->schema([
           TextInput::make('name'),
           Select::make('status')->options(['active', 'inactive']),
       ])
       ->columnSpanFull(), // Optional: Full-width on small screens
   

Implementation Patterns

Workflows

1. Form Integration:

   • Replace Repeater with TableRepeater in Filament forms for tabular data entry.
   • Example: Inventory items, survey questions, or multi-step configurations.

   TableRepeater::make('features')
       ->columns(2)
       ->schema([
           Toggle::make('enabled'),
           TextInput::make('description'),
       ])
       ->columnSpanFull(),
   

2. Dynamic Columns:

   • Use columns() to adjust responsiveness (e.g., columns(1) for mobile).
   • Combine with columnSpanFull() for full-width on small screens.

3. Nested Repeaters:

   • Embed TableRepeater inside another Repeater for hierarchical data:

   Repeater::make('categories')
       ->schema([
           TableRepeater::make('subcategories')
               ->columns(1)
               ->schema([...]),
       ]),
   

4. Conditional Rendering:

   • Use visible() or rules() to show/hide based on logic:

   TableRepeater::make('pricing')
       ->columns(2)
       ->visible(fn ($record) => $record->is_subscription()),
   

Integration Tips

• Theming: Ensure your resources/css/filament/app.css includes:

  @import 'filament-table-repeater/dist/table-repeater.css';
  

  Run npm run dev after updates.

• Validation: Leverage rules() for row-level validation:

  TableRepeater::make('tasks')
      ->schema([
          TextInput::make('title')
              ->required()
              ->maxLength(50),
      ]),
  

• Livewire Sync: Works seamlessly with Filament’s Livewire integration—no extra setup.

Gotchas and Tips

Pitfalls

1. Deprecation Warning:

   • Avoid: This package is deprecated for Filament v4+. Use native TableRepeater instead:

     Repeater::make('items')
         ->table()
         ->columns(3)
         ->schema([...]),
     

2. CSS Conflicts:

   • Fix: If styles break, reset Filament’s CSS cache:

     npm run dev
     

   • Target the repeater’s container in your custom CSS:

     .filament-table-repeater { /* Overrides */ }
     

3. Performance:

   • Tip: For large datasets, use livewire:ignore on the repeater to avoid re-rendering:

     TableRepeater::make('logs')
         ->livewireIgnore()
         ->columns(1),
     

4. Column Alignment:

   • Quirk: Headers may misalign if columnSpanFull() is used without proper padding. Add:

     .filament-table-repeater .filament-table-repeater-item {
         padding: 0.5rem;
     }
     

Debugging

• Console Errors:

  • Check filament-table-repeater.js for missing dependencies. Ensure:

    npm install
    

    is run after composer install.

• Data Binding:

  • If rows disappear, verify the name attribute matches the model’s fillable fields:

    // Model must have:
    protected $fillable = ['items']; // Array of repeater data
    

Extension Points

1. Custom Headers:

   • Override headers in headers():

     TableRepeater::make('users')
         ->columns(2)
         ->headers([
             'Name' => 'name',
             'Role' => 'role',
         ]),
     

2. Row Actions:

   • Add buttons per row using actions():

     TableRepeater::make('orders')
         ->columns(1)
         ->actions([
             Action::make('edit')
                 ->icon('heroicon-o-pencil')
                 ->url(fn ($record) => route('orders.edit', $record)),
         ]),
     

3. Server-Side Processing:

   • For large datasets, pair with Filament’s Table component for pagination:

     use Filament\Tables\Table;
     
     Table::make()
         ->columns([
             TableColumn::make('items')
                 ->badge()
                 ->counts(),
         ]),