Widgets

#Getting started

Filament allows you to display widgets inside pages, below the header and above the footer.

You can use an existing dashboard widget, or create one specifically for the resource.

#Creating a resource widget

To get started building a resource widget:

php artisan make:filament-widget CustomerOverview --resource=CustomerResource
php artisan make:filament-widget CustomerOverview --resource=CustomerResource

This command will create two files - a widget class in the app/Filament/Resources/CustomerResource/Widgets directory, and a view in the resources/views/filament/resources/customer-resource/widgets directory.

You must register the new widget in your resource's getWidgets() method:

public static function getWidgets(): array
{
    return [
        CustomerResource\Widgets\CustomerOverview::class,
    ];
}
public static function getWidgets(): array
{
    return [
        CustomerResource\Widgets\CustomerOverview::class,
    ];
}

If you'd like to learn how to build and customize widgets, check out the Dashboard documentation section.

#Displaying a widget on a resource page

To display a widget on a resource page, use the getHeaderWidgets() or getFooterWidgets() methods for that page:

<?php
 
namespace App\Filament\Resources\CustomerResource\Pages;
 
use App\Filament\Resources\CustomerResource;
 
class ListCustomers extends ListRecords
{
    public static string $resource = CustomerResource::class;
 
    protected function getHeaderWidgets(): array
    {
        return [
            CustomerResource\Widgets\CustomerOverview::class,
        ];
    }
}
<?php
 
namespace App\Filament\Resources\CustomerResource\Pages;

use App\Filament\Resources\CustomerResource;

class ListCustomers extends ListRecords
{
    public static string $resource = CustomerResource::class;

    protected function getHeaderWidgets(): array
    {
        return [
            CustomerResource\Widgets\CustomerOverview::class,
        ];
    }
}

getHeaderWidgets() returns an array of widgets to display above the page content, whereas getFooterWidgets() are displayed below.

If you'd like to customize the number of grid columns used to arrange widgets, check out the Pages documentation.

#Accessing the current record

If you're using a widget on an Edit or View page, you may access the current record by defining a $record property on the widget class:

use Illuminate\Database\Eloquent\Model;
 
public ?Model $record = null;
use Illuminate\Database\Eloquent\Model;

public ?Model $record = null;

Edit on GitHub

Still need help? Join our Discord community or open a GitHub discussion