yousefaman/filament-modal-repeater

Filament Modal Repeater

A Filament form component that displays repeater items in a compact table with modal-based editing. Perfect for forms with many fields where inline editing becomes cluttered.

If this package saves you time, a star on GitHub helps other Filament developers find it.

Requirements

• PHP 8.2+
• Filament v4 or v5

Tested combinations

Installation

You can install the package via composer:

composer require yousefaman/filament-modal-repeater

Then run the install command:

php artisan modal-repeater:install

Setup

Register the plugin in your panel provider (optional but recommended):

use YousefAman\ModalRepeater\ModalRepeaterPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugin(ModalRepeaterPlugin::make());
}

Usage

use YousefAman\ModalRepeater\ModalRepeater;
use YousefAman\ModalRepeater\Column;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\Select;
use Filament\Forms\Components\Toggle;

ModalRepeater::make('items')
    ->tableColumns([
        Column::make('name')->label('Name'),
        Column::make('price')->money('USD'),
        Column::make('active')->boolean(),
    ])
    ->schema([
        TextInput::make('name')->required(),
        TextInput::make('price')->numeric()->required(),
        Toggle::make('active'),
    ])

Items are listed in a table. Clicking the edit button opens a modal with the full form schema. Adding a new item also opens the same modal.

Column Types

Columns define how each field is displayed in the summary table.

// Custom label
Column::make('name')->label('Product Name'),

// Boolean — renders a checkmark/cross icon
Column::make('active')->boolean(),

// Badge — renders a colored badge using the value
Column::make('status')->badge('success'),

// Money — formats the value as a currency amount
Column::make('price')->money('USD'),

// Custom formatter
Column::make('created_at')->formatUsing(fn ($value) => $value->diffForHumans()),

// Fixed column width
Column::make('name')->width('200px'),

Modal Configuration

Control the modal layout independently from the table:

ModalRepeater::make('items')
    ->modalColumns(3)     // Number of columns in the modal form grid
    ->modalWidth('4xl')   // Tailwind modal max-width (e.g. 'sm', 'lg', '4xl', '7xl')

Relationships

Use relationship() to bind the repeater to an Eloquent relationship. Filament handles loading, saving, and deleting related records automatically.

ModalRepeater::make('addresses')
    ->relationship('addresses')
    ->tableColumns([
        Column::make('street')->label('Street'),
        Column::make('city')->label('City'),
        Column::make('postcode')->label('Postcode'),
    ])
    ->schema([
        TextInput::make('street')->required(),
        TextInput::make('city')->required(),
        TextInput::make('postcode'),
    ])

Customizing Actions

The component inherits Filament's standard repeater action API.

ModalRepeater::make('items')
    // Change the label on the "Add" button
    ->addActionLabel('Add Item')

    // Customize the edit action
    ->editAction(
        fn (Action $action) => $action->label('Edit')->icon('heroicon-o-pencil')
    )

    // Append additional per-row actions
    ->extraItemActions([
        Action::make('duplicate')->action(fn ($arguments) => ...),
    ])

    // Text shown when the list is empty
    ->emptyLabel('No items added yet.')

    // Allow rows to be reordered via drag-and-drop
    ->reorderable()

    // Allow rows to be cloned
    ->cloneable()

    // Prevent deletion
    ->deletable(false)

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please do not report security vulnerabilities through public GitHub issues. Report them privately through GitHub's private vulnerability reporting instead. See SECURITY.md for details.

Credits

• Yousef Aman
• All Contributors

License

The MIT License (MIT). Please see License File for more information.