Filament Table Repeater

When upgrading from version 2.x to 3.x, perform the following steps:

1. Update all use statements from Awcodes\FilamentTableRepeater to Awcodes\TableRepeater.
2. Run npm run build to update your theme files.
3. Review the headers() method implementation, as there were breaking changes to how headers are defined.

To align with Filament's theming methodology, you must use a custom theme. Follow these two steps:

1. Import the stylesheet: Add the plugin's CSS to your theme's CSS file.

@import '<path-to-vendor>/awcodes/filament-table-repeater/resources/css/plugin.css';

2. Update Tailwind configuration: Add the plugin's views to your tailwind.config.js content array so Tailwind can scan the Blade templates.

content: [
    '<path-to-vendor>/awcodes/filament-table-repeater/resources/**/*.blade.php',
]

Install the package via Composer:

composer require awcodes/filament-table-repeater

Note: This package is deprecated. If you are using Filament v4, use the native Table Repeaters built into the core instead.

The TableRepeater field functions similarly to the standard Filament Forms Repeater, with the exception that it cannot be collapsed. Use headers() to define the table columns and schema() to define the fields within those columns.

use Awcodes\
TableRepeater\Components\TableRepeater;
use Awcodes\TableRepeater\Header;

TableRepeater::make('users')
     ->headers([
        Header::make('name')->width('150px'),
    ])
     ->schema([
        // ... your fields here
     ])
     ->columnSpan('full');

You can add actions to the TableRepeater using two methods:

1. extraItemActions(): Supported natively (same as Filament's standard repeater) to add actions to individual items.
2. extraActions(): Adds actions below the table, appearing next to or in place of the 'Add' button.

use Awcodes\TableRepeater\Components\TableRepeater;
use Filament\Forms\Components\Actions\Action;
use Filament\Notifications\Notification;

TableRepeater::make('users')
    ->extraActions([
        Action::make('exportData')
            ->icon('heroicon-m-inbox-arrow-down')
            ->action(function (TableRepeater $component): void {
                Notification::make('export_data')
                    ->success()
                    ->title('Data exported.')
                    ->send();
            }),
    ])

Use the headers() method on a TableRepeater instance to pass an array of Header components.

Header Configuration Options:

• align(Alignment $alignment): Align header text using Filament Alignment enums (e.g., Alignment::Center).
• width(string $width): Set a specific width for the column (e.g., '150px').
• markAsRequired(): Visually mark the column as required.
• renderHeader(bool $render): Hide the header row while maintaining accessibility (use false to hide).

use Awcodes\TableRepeater\Header;
use Filament\Support\Enums\Alignment;

TableRepeater::make('users')
    ->headers([
        Header::make('name')
            ->align(Alignment::Center)
            ->width('150px')
            ->markAsRequired(),
        Header::make('email'),
    ])
    ->renderHeader(false) // Hides the header row

Use the following methods to adjust how the TableRepeater looks and behaves:

• showLabels(): By default, form component labels are hidden in the table view. Call this to show them.
• emptyLabel(string|false $label): Customize the text shown when the table is empty, or pass false to hide it.
• stackAt(MaxWidth $breakpoint): Define the breakpoint at which the table switches from a table layout to a stacked panel layout for mobile devices (default is MaxWidth::Medium).
• streamlined(): Changes the appearance to be more inline with the table layout.

use Filament\Support\Enums\MaxWidth;

TableRepeater::make('users')
    ->showLabels()
    ->emptyLabel('There are no users registered.')
    ->stackAt(MaxWidth::Medium)
    ->streamlined();

When defining a Header, you can use the following methods to customize the column:

• label(string | Htmlable | Closure $label): Sets the display text for the header. If not set, it defaults to the title-cased version of the column name.
• align(string | Closure | Alignment $align): Sets the text alignment. Defaults to Alignment::Start.
• width(string | Closure $width): Sets the CSS width of the column. Defaults to 'auto'.
• markAsRequired(bool | Closure | null $condition): Determines if the column is marked as required. Defaults to false.

The Header class is used to define the configuration for individual columns within a TableRepeater. You can create a header instance using the make() method and then chain configuration methods to customize its label, alignment, width, and requirement status.

Most configuration methods accept a value or a Closure for dynamic evaluation.

use Awcodes\TableRepeater\Header;
use Filament\Support\Enums\Alignment;

Header::make('product_name')
    ->label('Product Name')
    ->align(Alignment::Center)
    ->width('25%')
    ->markAsRequired();

By default, TableRepeater may show or hide labels for child components depending on the internal state. You can explicitly control whether child component labels are visible using the showLabels() method. If set to false, the component will attempt to call hiddenLabel() on child components (provided they support it and are not Placeholder components) to create a cleaner table appearance.

TableRepeater::make('items')
    ->schema([
        TextInput::make('name'),
    ])
    ->showLabels(false)

The TableRepeater component is a specialized version of the standard Filament Repeater that renders its items in a table layout. It extends the base Repeater functionality, meaning it supports all standard repeater features while adding table-specific styling and layout controls like headers, labels, and breakpoints.

use Awcodes\TableRepeater\Components\TableRepeater;
use Filament\Forms\Components\TextInput;

TableRepeater::make('items')
    ->schema([
        TextInput::make('name'),
        TextInput::make('quantity'),
    ])