invaders-xx / filament-gridstack-dashboard
Create and manage filament Dashboards using gridstack js
Fund package maintenance!
invaders-xx
Requires
- php: ^8.2
- filament/filament: ^3.0
- glorand/laravel-model-settings: ^7.0
- spatie/laravel-package-tools: ^1.15.0
Requires (Dev)
- laravel/pint: ^1.0
- nunomaduro/collision: ^7.9
- orchestra/testbench: ^8.0
- pestphp/pest: ^2.1
- pestphp/pest-plugin-arch: ^2.0
- pestphp/pest-plugin-laravel: ^2.0
- spatie/laravel-ray: ^1.26
README
Create and manage filament Dashboards using gridstack js
This package allows to add widgets and define the layout of the dashboard page on a per-user basic. This package uses Laravel model settings package to ensure persistence of data in the database.
Installation
You can install the package via composer:
composer require invaders-xx/filament-gridstack-dashboard
php artisan filament:assets
Note: Add plugin Blade files to your custom theme
tailwind.config.js
for dark mode.To set up your own custom theme, you can visit the official instruction page on the Filament website.
Add the plugin's views to your tailwind.config.js
file.
content: [ '<path-to-vendor>/invaders-xx/filament-gridstack-dashboard/resources/**/*.blade.php', ]
Please visit Laravel model settings to configure your User model to use this package.
You can publish the config file with:
php artisan vendor:publish --tag="filament-gridstack-dashboard-config"
This is the contents of the published config file:
return [
];
There is no option at the moment.
Optionally, you can publish the views using
php artisan vendor:publish --tag="filament-gridstack-dashboard-views"
Usage
All functions used to configure the plugin can have a closure as argument.
use InvadersXX\FilamentGridstackDashboard\GridstackDashboardPlugin; public function panel(Panel $panel): Panel { return $panel ->plugins([ GridstackDashboardPlugin::make() ]) }
You can configure the number of columns of the grid. Default is 12.
use InvadersXX\FilamentGridstackDashboard\GridstackDashboardPlugin; public function panel(Panel $panel): Panel { return $panel ->plugins([ GridstackDashboardPlugin::make() ->columns(3), ]) }
You can configure the number of rows of the grid. Default is 0 (no constraint).
use InvadersXX\FilamentGridstackDashboard\GridstackDashboardPlugin; public function panel(Panel $panel): Panel { return $panel ->plugins([ GridstackDashboardPlugin::make() ->rows(3), ]) }
You can configure the settings path (string in dotted format where to store in the settings) By default the path is 'dashboard.layout'
use InvadersXX\FilamentGridstackDashboard\GridstackDashboardPlugin; public function panel(Panel $panel): Panel { return $panel ->plugins([ GridstackDashboardPlugin::make() ->settingsPath('dashboard.settings'), ]) }
You can enable/disable floating widgets (default: true).
use InvadersXX\FilamentGridstackDashboard\GridstackDashboardPlugin; public function panel(Panel $panel): Panel { return $panel ->plugins([ GridstackDashboardPlugin::make() ->float(false), ]) }
You can enable/disable dragging widgets (default: false).
use InvadersXX\FilamentGridstackDashboard\GridstackDashboardPlugin; public function panel(Panel $panel): Panel { return $panel ->plugins([ GridstackDashboardPlugin::make() ->disableDrag(true), ]) }
You can enable/disable resizing widgets (default: false).
use InvadersXX\FilamentGridstackDashboard\GridstackDashboardPlugin; public function panel(Panel $panel): Panel { return $panel ->plugins([ GridstackDashboardPlugin::make() ->disableResize(true), ]) }
You can specify resizing handles position of widgets. It can be any combination of n,ne,e,se,s,sw,w,nw or all ( default: 'se').
use InvadersXX\FilamentGridstackDashboard\GridstackDashboardPlugin; public function panel(Panel $panel): Panel { return $panel ->plugins([ GridstackDashboardPlugin::make() ->resizable('all'), ]) }
You can configure the navigationIcon, the navigationGroup, the navigationLabel, the navigationSort, canAccess and shouldRegisterNavigation
use InvadersXX\FilamentGridstackDashboard\GridstackDashboardPlugin; public function panel(Panel $panel): Panel { return $panel ->plugins([ GridstackDashboardPlugin::make() ->navigationIcon('heroicon-o-chart-bar') ->navigationGroup('Admin') ->shouldRegisterNavigation(false) ->canAccess(fn() => auth()->id()===1) ->navigationLabel('Dashboard') ->navigationSort(1), ]) }
You can configure a default grid using defaultGrid() function. This function has an array as parameter. This array should have the following format:
[ 'widget' => AccountWidget::class, // Widget class 'x' => 0, // starting column on the grid 'y' => 0, // row on the grid 'w' => 12, // number of columns on the grid ]
FYI, a 12 columns grid, x goes from 0 to 11
use InvadersXX\FilamentGridstackDashboard\GridstackDashboardPlugin; use Filament\Widgets\AccountWidget; public function panel(Panel $panel): Panel { return $panel ->plugins([ GridstackDashboardPlugin::make() ->defaultGrid([ [ 'widget' => AccountWidget::class, 'x' => 0, 'y' => 0, 'w' => 12, ], ]), ]) }
Testing
composer test
Changelog
Please see CHANGELOG for more information on what has changed recently.
Contributing
Please see CONTRIBUTING for details.
Security Vulnerabilities
Please review our security policy on how to report security vulnerabilities.
Credits
License
The MIT License (MIT). Please see License File for more information.