Eigene Filament-Komponenten erstellen: Fortgeschrittene Techniken

Extending Filament with Custom Components

While Filament provides an extensive set of built-in components, sometimes you need something specific to your application. This guide will show you how to create custom components that seamlessly integrate with Filament.

Understanding Filament's Architecture

Before diving into custom components, it's essential to understand Filament's component architecture:

• Form Components: Handle data input and validation

• Table Columns: Display data in various formats

• Widgets: Provide dashboard functionality and statistics

• Actions: Handle user interactions and workflows

Creating a Custom Form Field

Let's create a custom color palette picker field. First, generate the component class:

php artisan make:filament-field ColorPalette

Now, implement the component logic:

class ColorPalette extends Field
{
    protected string $view = 'filament.forms.components.color-palette';

    public function getPalette(): array
    {
        return $this->evaluate($this->palette) ?? [];
    }
}

Custom Table Columns

Creating custom table columns allows you to display data in unique ways. For example, a progress bar column:

ProgressColumn::make('completion')
    ->getStateUsing(fn ($record) => $record->completed_tasks / $record->total_tasks * 100)
    ->color(fn ($state) => match(true) {
        $state < 30 => 'danger',
        $state < 70 => 'warning',
        default => 'success',
    })

Building Custom Widgets

Widgets are perfect for dashboards and overview pages. Here's how to create a custom stats widget:

class UserStatsWidget extends Widget
{
    protected static string $view = 'filament.widgets.user-stats';

    protected function getStats(): array
    {
        return [
            Stat::make('Total Users', User::count()),
            Stat::make('Active Today', User::whereDate('last_active', today())->count()),
            Stat::make('New This Week', User::where('created_at', '>=', now()->startOfWeek())->count()),
        ];
    }
}

Advanced Techniques

Take your custom components to the next level with these techniques:

• Alpine.js Integration: Add interactive JavaScript behavior

• Livewire Properties: Manage component state effectively

• Custom Validation Rules: Implement complex validation logic

• Blade Components: Create reusable UI elements

Performance Considerations

When building custom components, keep performance in mind:

• Use eager loading for relationships

• Implement caching where appropriate

• Optimize database queries

• Minimize JavaScript payload

Conclusion

Custom components unlock the full potential of Filament, allowing you to create tailored admin experiences that perfectly match your application's requirements. With these techniques, you can extend Filament far beyond its default capabilities.