https://github.com/octopyid/filamenttabify
Transform your Filament dashboard with elegant Tabbed Widgets
https://github.com/octopyid/filamenttabify
Last synced: about 2 months ago
JSON representation
Transform your Filament dashboard with elegant Tabbed Widgets
- Host: GitHub
- URL: https://github.com/octopyid/filamenttabify
- Owner: OctopyID
- License: mit
- Created: 2026-01-22T05:08:25.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2026-01-23T05:09:31.000Z (2 months ago)
- Last Synced: 2026-01-23T09:56:54.297Z (2 months ago)
- Language: PHP
- Homepage:
- Size: 43.9 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Filament Tabify
Transform your Filament dashboard with elegant Tabbed Widgets. Group multiple widgets into a single, organized view to save space and improve clarity.
## Installation
You can install the package via composer:
```bash
composer require octopyid/filament-tabify
```
## Usage
To 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.
```php
use Octopy\Filament\Tabify\Tab;
use Octopy\Filament\Tabify\TabsWidget;
class DashboardTabsWidget extends TabsWidget
{
protected int|string|array $columnSpan = 'full';
public function getTabs() : array
{
return [
Tab::make('Foo')
->icon('lucide-chart-line')
->badge(100)
->schema([
Foo::class,
Bar::class,
Baz::class,
]),
Tab::make('Bar')->schema([
Qux::class,
]),
];
}
}
```
### Registering the Widget
You can register the widget in your Filament Pages or Resources just like any other widget.
```php
use App\Filament\Widgets\DashboardTabsWidget;
class Dashboard extends \Filament\Pages\Dashboard
{
public function getWidgets(): array
{
return [
DashboardTabsWidget::class,
];
}
}
```
Or in a Resource Page:
```php
use App\Filament\Widgets\DashboardTabsWidget;
class ListOrders extends \Filament\Resources\Pages\ListRecords
{
protected function getHeaderWidgets(): array
{
return [
DashboardTabsWidget::class,
];
}
}
```
### Customizing the Widget's Grid
You can customize the number of columns in the widget's grid by overriding the `getColumns()` method.
```php
public function getColumns(): int | array
{
return 2;
}
```
You can also specify different column counts for different breakpoints:
```php
public function getColumns(): int | array
{
return [
'md' => 4,
'xl' => 5,
];
}
```
### Customizing the Widget's Width
You can customize the width of the widget by overriding the `$columnSpan` property.
```php
protected int | string | array $columnSpan = 'full';
```
You can also specify different column spans for different breakpoints:
```php
protected int | string | array $columnSpan = [
'md' => 2,
'xl' => 3,
];
```
## Changelog
Please see [releases](https://github.com/OctopyID/FilamentTabify/releases) for more information on what has changed recently.
## Security Vulnerabilities
If you discover a security vulnerability within this package, please send an e-mail to Supian M via [supianidz@octopy.dev](mailto:supianidz@octopy.dev). All security
vulnerabilities will be promptly addressed.
## Credits
- [Supian M](https://github.com/SupianIDz)
- [All Contributors](https://github.com/OctopyID/FilamentTabify/contributors)
## License
The MIT License (MIT). Please see [License File](LICENSE) for more information.