Skip to main content
Version: 2.x

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

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 [
        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,
        ];
    }
}

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;