Getting Started

• Sorting widgets
• Customizing widget width
• Conditionally hiding widgets
• Disabling the default widgets
• Custom widgets

Filament allows you to build dynamic dashboards, comprised of "widget" cards, very easily.

Widgets are pure Livewire components, so may use any features of that package.

Widgets may also be used on resource pages or other custom pages.

Filament ships with a few pre-built widgets, as well as the ability to create custom widgets:

• Stats widgets display any data, often numeric data, within cards in a row.
• Chart widgets display numeric data in a visual chart.
• Table widgets render data in a table, which supports sorting, searching, filtering, actions, and everything else included within the table builder.

#Sorting widgets

Each widget class contains a $sort property that may be used to change its order on the page, relative to other widgets:

protected static ?int $sort = 2;

#Customizing widget width

You may customize the width of a widget using the $columnSpan property. You may use a number between 1 and 12 to indicate how many columns the widget should span, or full to make it occupy the full width of the page:

protected int | string | array $columnSpan = 'full';

#Conditionally hiding widgets

You may override the static canView() method on widgets to conditionally hide them:

public static function canView(): bool
{
    return auth()->user()->isAdmin();
}

#Disabling the default widgets

By default, two widgets are displayed on the dashboard. These widgets can be disabled by updating the widgets.register property of the configuration file:

'widgets' => [
    // ...
    'register' => [],
],

#Custom widgets

To get started building a BlogPostsOverview widget:

php artisan make:filament-widget BlogPostsOverview

This command will create two files - a widget class in the /Widgets directory of the Filament directory, and a view in the /widgets directory of the Filament views directory.