Transform your Filament dashboard with elegant Tabbed Widgets. Group multiple widgets into a single, organized view to save space and improve clarity.
You can install the package via composer:
composer require octopyid/filament-tabifyTo create a tabbed widget, extend the TabsWidget class and define your tabs using the getTabs() method. Each tab can contain a schema of other widgets.
useOctopy\Filament\Tabify\Tab;
useOctopy\Filament\Tabify\TabsWidget;
class DashboardTabsWidget extends TabsWidget
{
protectedint|string|array$columnSpan = 'full';
publicfunctiongetTabs() : array
{
return [
Tab::make('Foo')
->icon('lucide-chart-line')
->badge(100)
->schema([
Foo::class,
Bar::class,
Baz::class,
]),
Tab::make('Bar')->schema([
Qux::class,
]),
];
}
}You can register the widget in your Filament Pages or Resources just like any other widget.
useApp\Filament\Widgets\DashboardTabsWidget;
class Dashboard extends \Filament\Pages\Dashboard
{
publicfunctiongetWidgets(): array
{
return [
DashboardTabsWidget::class,
];
}
}Or in a Resource Page:
useApp\Filament\Widgets\DashboardTabsWidget;
class ListOrders extends \Filament\Resources\Pages\ListRecords
{
protectedfunctiongetHeaderWidgets(): array
{
return [
DashboardTabsWidget::class,
];
}
}If you need to interact with all widgets within the tabs, for example to dispatch an event to them, you can use the getAllWidgets() method.
publicfunctionupdatedYear()
{
foreach ($this->getAllWidgets() as$widget) {
$this->dispatch('updateYear', $this->year)->to($widget);
}
}You can customize the number of columns in the widget's grid by overriding the getColumns() method.
publicfunctiongetColumns(): int | array
{
return2;
}You can also specify different column counts for different breakpoints:
publicfunctiongetColumns(): int | array
{
return [
'md' => 4,
'xl' => 5,
];
}You can customize the width of the widget by overriding the $columnSpan property.
protected int | string | array $columnSpan = 'full';You can also specify different column spans for different breakpoints:
protected int | string | array $columnSpan = [
'md' => 2,
'xl' => 3,
];Please see releases for more information on what has changed recently.
If you discover a security vulnerability within this package, please send an e-mail to Supian M via bug@octopy.dev. All security vulnerabilities will be promptly addressed.
The MIT License (MIT). Please see License File for more information.