Widgets

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

To add a widget to a page, use the getHeaderWidgets() or getFooterWidgets() methods:

use App/Filament/Widgets/StatsOverviewWidget;
 
protected function getHeaderWidgets(): array
{
    return [
        StatsOverviewWidget::class
    ];
}
use App/Filament/Widgets/StatsOverviewWidget;

protected function getHeaderWidgets(): array
{
    return [
        StatsOverviewWidget::class
    ];
}

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

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

#Customizing the widgets grid

You may change how many grid columns are used to display widgets.

You may override the getHeaderWidgetsColumns() or getFooterWidgetsColumns() methods to return a number of grid columns to use:

protected function getHeaderWidgetsColumns(): int | array
{
    return 3;
}
protected function getHeaderWidgetsColumns(): int | array
{
    return 3;
}

#Responsive widgets grid

You may wish to change the number of widget grid columns based on the responsive breakpoint of the browser. You can do this using an array that contains the number of columns that should be used at each breakpoint:

protected function getHeaderWidgetsColumns(): int | array
{
    return [
        'md' => 4,
        'xl' => 5,
    ];
}
protected function getHeaderWidgetsColumns(): int | array
{
    return [
        'md' => 4,
        'xl' => 5,
    ];
}

This pairs well with responsive widget widths.

Edit on GitHub

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