Filament PHP

website·Indexed 35 days ago

https://filamentphp.com/docs

A collection of TALL stack components for Laravel, featuring a comprehensive forms package with diverse input types, a robust actions system for Eloquent record management (Create, Edit, Delete, Import, Export), and tools for building dynamic admin interfaces.

Tokens
228K
Snippets
1.4K
Records
1.5K
Agent score
70%

What's inside Filament

  1. Overview of Filament's color system

    Filament uses CSS variables to define its color palette, which are mapped to Tailwind classes. This allows the framework to pass color palettes from PHP via a <style> element. A registered 'color' is not a single shade, but a palette of 11 shades (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950). Filament automatically selects the appropriate shade based on the component's context (e.g., background, hover, border) and whether dark mode is enabled to ensure accessibility.
  2. Overview of Filament Clusters

    Clusters provide a hierarchical structure in Filament panels to group resources and custom pages into logical sections. This helps organize the panel and reduce sidebar clutter. When a cluster is used:

    • A new navigation item is created (linking to the first resource/page in the cluster).
    • Individual resources/pages are removed from the main navigation and moved to a cluster-specific sub-navigation UI.
    • URLs for resources and pages are prefixed with the cluster name.
    • The cluster name is added to the breadcrumbs of all contained items.
  3. Overview of Filament Class Generators

    Filament uses nette/php-generator to programmatically generate PHP classes for its CLI commands instead of using static template files. Each type of generated file is handled by a specific ClassGenerator class. To customize a generated file, you must identify the corresponding generator class and replace it in the service container.
  4. Overview of Filament Prime components

    Prime components are the basic, indivisible building blocks used to insert arbitrary content (like text and images) into Filament schemas. Unlike infolist text entries, which are designed for label-value pairs of an entity, prime components are intended for general content. All prime component classes are located in the Filament\Schemas\Components namespace.

    Built-in prime components include:

    • Text
    • Icon
    • Image
    • Unordered list
  5. Overview of Filament Server-Driven UI framework

    Filament is a Server-Driven UI (SDUI) framework for Laravel built on Livewire, Alpine.js, and Tailwind CSS. Unlike traditional server-rendered UI that relies on static templates (like Blade views), Filament allows developers to define user interfaces declaratively in PHP using structured configuration objects. This enables the server to dynamically generate the UI based on real-time configurations and business logic. It is commonly used to build admin panels, dashboards, CRMs, and user portals, but can also be integrated as individual components into existing Blade views.
  6. Manage Eloquent models using Filament Resources

    Resources are the primary way to build CRUD (Create, Read, Update, Delete) interfaces for Eloquent models within a Filament panel. By default, a resource generates three pages:

    • List: A paginated table of all records.
    • Create: A form to create new records.
    • Edit: A form to modify existing records.

    Additionally, a read-only View page can be generated. Resources are automatically registered in the panel's sidebar upon creation.

  7. Understand Filament plugin types

    Filament plugins fall into two primary categories, though a single plugin can implement both:

    1. Panel Plugins: Used with Panel Builders. These typically add functionality inside a Panel (e.g., Dashboard Widgets) or provide a complete Panel (e.g., a Blog or User Management feature).
    2. Standalone Plugins: Used outside of Panel Builders. These typically add reusable components to other builders, such as custom fields for Form Builders or custom columns/filters for Table Builders.
  8. Create a Filament widget

    Use the make:filament-widget Artisan command to generate a new widget. You will be prompted to choose a widget type: Custom, Chart, Stats overview, or Table.
    php artisan make:filament-widget MyWidget
  9. Build dashboards with Filament Widgets

    Widgets are used to display statistical data or interactive elements on a dashboard. Supported types include charts, numbers, tables, and custom widgets.

    Technically, each widget consists of a PHP class (which is a Livewire component) and a Blade view, allowing for full server-rendered interactivity using Livewire.

  10. Use Filament core packages outside of a panel

    Filament provides several core packages that can be used independently of a Filament panel to build consistent and maintainable interfaces. These packages include: Action, Form, Infolist, Notifications, Schema, Table, and Widget.
  11. Configure polling and lazy loading for Stats widgets

    Stats overview widgets refresh every 5 seconds by default. This can be customized or disabled using the $pollingInterval property. Additionally, lazy loading (loading only when visible) can be disabled using the $isLazy property.
    class StatsOverview extends BaseWidget
    {
        // Change polling to 10 seconds
        protected ?string $pollingInterval = '10s';
    
        // Disable polling entirely
        // protected ?string $pollingInterval = null;
    
        // Disable lazy loading
        protected static bool $isLazy = false;
    }
  12. Implement Date, Time, and Date-Time pickers in Filament forms

    Filament provides three primary components for handling date and time inputs: DatePicker for dates only, TimePicker for times only, and DateTimePicker for a combination of both.
    use Filament	Forms	Components	DatePicker;
    use Filament	Forms	Components	DateTimePicker;
    use Filament	Forms	Components	TimePicker;
    
    DateTimePicker::make('published_at')
    DatePicker::make('date_of_birth')
    TimePicker::make('alarm_at')