> ## Documentation Index
> Fetch the complete documentation index at: https://filamentphp.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Widgets
export const LaracastsBanner = ({title, description, url, series}) => {
const instructors = {
'building-advanced-components': {
name: 'Dan Harrin',
avatar: 'https://avatars.githubusercontent.com/u/41773797?v=4',
twitter: 'https://twitter.com/danjharrin',
website: 'https://danharrin.com',
github: 'https://github.com/danharrin'
},
'rapid-laravel-development': {
name: 'Kevin McKee',
avatar: 'https://avatars.githubusercontent.com/u/4503765?v=4',
twitter: 'https://twitter.com/iAmKevinMcKee',
website: 'https://kevinmckee.me',
github: 'https://github.com/iAmKevinMcKee'
}
};
const instructor = instructors[series] || instructors['building-advanced-components'];
return
{instructor.name}
Instructor
;
};
export const EditOnGitHub = ({version, path}) => {
const url = `https://github.com/filamentphp/filament/edit/${version}/${path}`;
return ;
};
export const Footer = () => {
const sponsorsByTier = JSON.parse(`{
"agency_partner": [
{
"name": "Kirschbaum",
"url": "https://kirschbaumdevelopment.com/solutions/filament-development",
"filename": "kirschbaum.svg"
}
],
"gold": [
{
"name": "Agiledrop",
"url": "https://www.agiledrop.com/laravel?utm_source=filament",
"filename": "agiledrop.svg"
},
{
"name": "Baiz.ai",
"url": "https://baiz.ai",
"filename": "baiz-ai.svg"
},
{
"name": "CMS Max",
"url": "https://cmsmax.com?ref=filamentphp.com",
"filename": "cms-max.svg"
},
{
"name": "Mailtrap",
"url": "https://mailtrap.io/email-sending?utm_source=community&utm_medium=referral&utm_campaign=filament",
"filename": "mailtrap.svg"
},
{
"name": "SerpApi",
"url": "https://serpapi.com/?utm_source=filamentphp",
"filename": "serpapi.svg"
}
]
}`);
function shuffleArray(items) {
const result = [...items];
for (let index = result.length - 1; index > 0; index--) {
const randomIndex = Math.floor(Math.random() * (index + 1));
[result[index], result[randomIndex]] = [result[randomIndex], result[index]];
}
return result;
}
const sponsors = Object.entries(sponsorsByTier).flatMap(([, sponsors]) => shuffleArray(sponsors));
return ;
};
You are currently viewing the documentation for Filament 3.x, which is a previous version of Filament.
Looking for the current stable version? Visit the [5.x documentation](/5.x).
## Overview
Filament allows you to display widgets inside pages, below the header and above the footer.
You can use an existing [dashboard widget](../dashboard), or create one specifically for the resource.
## Creating a resource widget
To get started building a resource widget:
```bash theme={"theme":"gruvbox-dark-hard"}
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:
```php theme={"theme":"gruvbox-dark-hard"}
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](../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 theme={"theme":"gruvbox-dark-hard"}
getPageTableQuery()` method:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Widgets\StatsOverviewWidget\Stat;
Stat::make('Total Products', $this->getPageTableQuery()->count()),
```
Alternatively, you can access a collection of the records on the current page using the `$this->getPageTableRecords()` method:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Widgets\StatsOverviewWidget\Stat;
Stat::make('Total Products', $this->getPageTableRecords()->count()),
```
## Passing properties to widgets on resource pages
When registering a widget on a resource page, you can use the `make()` method to pass an array of [Livewire properties](https://livewire.laravel.com/docs/properties) to it:
```php theme={"theme":"gruvbox-dark-hard"}
protected function getHeaderWidgets(): array
{
return [
CustomerResource\Widgets\CustomerOverview::make([
'status' => 'active',
]),
];
}
```
This array of properties gets mapped to [public Livewire properties](https://livewire.laravel.com/docs/properties) on the widget class:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Widgets\Widget;
class CustomerOverview extends Widget
{
public string $status;
// ...
}
```
Now, you can access the `status` in the widget class using `$this->status`.
)}
Your logo here