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.
Still need help? Join our Discord community or open a GitHub discussion