PHPackages invaders-xx/filament-gridstack-dashboard - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. invaders-xx/filament-gridstack-dashboard ActiveLibrary[Utility & Helpers](/categories/utility) invaders-xx/filament-gridstack-dashboard ======================================== Create and manage filament Dashboards using gridstack js v1.9(1y ago)81.5k↓37.5%6[1 issues](https://github.com/invaders-xx/filament-gridstack-dashboard/issues)[1 PRs](https://github.com/invaders-xx/filament-gridstack-dashboard/pulls)MITPHPPHP ^8.2 Since May 13Pushed 1y ago2 watchersCompare [ Source](https://github.com/invaders-xx/filament-gridstack-dashboard)[ Packagist](https://packagist.org/packages/invaders-xx/filament-gridstack-dashboard)[ Docs](https://github.com/invaders-xx/filament-gridstack-dashboard)[ GitHub Sponsors](https://github.com/invaders-xx)[ RSS](/packages/invaders-xx-filament-gridstack-dashboard/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (10)Dependencies (10)Versions (15)Used By (0) [![invaders-xx-gridstack-dashboard](https://private-user-images.githubusercontent.com/604907/332573149-7b94f470-9e83-4cc5-95af-e5794db76feb.jpeg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzQ4NTc0NzksIm5iZiI6MTc3NDg1NzE3OSwicGF0aCI6Ii82MDQ5MDcvMzMyNTczMTQ5LTdiOTRmNDcwLTllODMtNGNjNS05NWFmLWU1Nzk0ZGI3NmZlYi5qcGVnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDMzMCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjAzMzBUMDc1MjU5WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YjMzODA4MmQ3MzQwMjI3MDhmYmNkM2JiMjlmM2FhMTc0MGQwMmM2Y2IxZTBhOTExNmY1NWY1ZTNiMTA1MjY4NiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.2hFr_LSzRX6BuB9zX7WxPnEmFVfh8opi7o-Rs2cN86w)](https://private-user-images.githubusercontent.com/604907/332573149-7b94f470-9e83-4cc5-95af-e5794db76feb.jpeg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzQ4NTc0NzksIm5iZiI6MTc3NDg1NzE3OSwicGF0aCI6Ii82MDQ5MDcvMzMyNTczMTQ5LTdiOTRmNDcwLTllODMtNGNjNS05NWFmLWU1Nzk0ZGI3NmZlYi5qcGVnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDMzMCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjAzMzBUMDc1MjU5WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YjMzODA4MmQ3MzQwMjI3MDhmYmNkM2JiMjlmM2FhMTc0MGQwMmM2Y2IxZTBhOTExNmY1NWY1ZTNiMTA1MjY4NiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.2hFr_LSzRX6BuB9zX7WxPnEmFVfh8opi7o-Rs2cN86w) Create and manage filament Dashboards using gridstack js ======================================================== [](#create-and-manage-filament-dashboards-using-gridstack-js) [![image](https://private-user-images.githubusercontent.com/604907/330077556-cadb4346-d3fe-4749-ba6e-0e4eed2c9576.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzQ4NTc0NzksIm5iZiI6MTc3NDg1NzE3OSwicGF0aCI6Ii82MDQ5MDcvMzMwMDc3NTU2LWNhZGI0MzQ2LWQzZmUtNDc0OS1iYTZlLTBlNGVlZDJjOTU3Ni5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwMzMwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDMzMFQwNzUyNTlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1iYWQyYmRkZGJlYzQzYTEyNWEzYzZmYmE0NTcxNGI0NjQ1NGFhMzA1Mzg2NjZlNDliYjlhZDEyNTU5YTE4ZDFkJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.v5QtEXqkBXs6px6WOWWAwlfNE1OZ4F-1PBpQTkXEFm4)](https://private-user-images.githubusercontent.com/604907/330077556-cadb4346-d3fe-4749-ba6e-0e4eed2c9576.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzQ4NTc0NzksIm5iZiI6MTc3NDg1NzE3OSwicGF0aCI6Ii82MDQ5MDcvMzMwMDc3NTU2LWNhZGI0MzQ2LWQzZmUtNDc0OS1iYTZlLTBlNGVlZDJjOTU3Ni5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwMzMwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDMzMFQwNzUyNTlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1iYWQyYmRkZGJlYzQzYTEyNWEzYzZmYmE0NTcxNGI0NjQ1NGFhMzA1Mzg2NjZlNDliYjlhZDEyNTU5YTE4ZDFkJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.v5QtEXqkBXs6px6WOWWAwlfNE1OZ4F-1PBpQTkXEFm4)[![image](https://private-user-images.githubusercontent.com/604907/330077684-f41809b0-3ef0-4dd9-a894-ff199050ca2d.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzQ4NTc0NzksIm5iZiI6MTc3NDg1NzE3OSwicGF0aCI6Ii82MDQ5MDcvMzMwMDc3Njg0LWY0MTgwOWIwLTNlZjAtNGRkOS1hODk0LWZmMTk5MDUwY2EyZC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwMzMwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDMzMFQwNzUyNTlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT02MTFmOGU5ZTQzODVlZjhkODgyYjZiNDQwMTI3MjQwODBjYzEzZTc4OWU4MTFkYjI4ZjdiYzgyMDlhOWQyYTJiJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.9tI1BON9RtgS-ZyHyspC4wgYm4YxwliVWJZgAFejyrI)](https://private-user-images.githubusercontent.com/604907/330077684-f41809b0-3ef0-4dd9-a894-ff199050ca2d.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzQ4NTc0NzksIm5iZiI6MTc3NDg1NzE3OSwicGF0aCI6Ii82MDQ5MDcvMzMwMDc3Njg0LWY0MTgwOWIwLTNlZjAtNGRkOS1hODk0LWZmMTk5MDUwY2EyZC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwMzMwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDMzMFQwNzUyNTlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT02MTFmOGU5ZTQzODVlZjhkODgyYjZiNDQwMTI3MjQwODBjYzEzZTc4OWU4MTFkYjI4ZjdiYzgyMDlhOWQyYTJiJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.9tI1BON9RtgS-ZyHyspC4wgYm4YxwliVWJZgAFejyrI)[![Latest Version on Packagist](https://camo.githubusercontent.com/ff7b303ee2af27b23166ea7bd4bb2d262506543991d228abc0450c89bc57632e/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f696e7661646572732d78782f66696c616d656e742d67726964737461636b2d64617368626f6172642e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/invaders-xx/filament-gridstack-dashboard)[![GitHub Tests Action Status](https://camo.githubusercontent.com/8da62264aeee86b39e50da86f5a49fef20939e64c4f8fb7bb06ec48e75f67f66/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f696e7661646572732d78782f66696c616d656e742d67726964737461636b2d64617368626f6172642f72756e2d74657374732e796d6c3f6272616e63683d6d61696e266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/invaders-xx/filament-gridstack-dashboard/actions?query=workflow%3Arun-tests+branch%3Amain)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/bc189f2b62f195ee2370c86925657acf28d75972206e9a469772d3140cecba70/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f696e7661646572732d78782f66696c616d656e742d67726964737461636b2d64617368626f6172642f6669782d7068702d636f64652d7374796c696e672e796d6c3f6272616e63683d6d61696e266c6162656c3d636f64652532307374796c65267374796c653d666c61742d737175617265)](https://github.com/invaders-xx/filament-gridstack-dashboard/actions?query=workflow%3A%22Fix+PHP+code+styling%22+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/7ffe03a18b4cce4c0a9b9abe6aa1d583ae43b31611aa08fdf52936dd193ff71d/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f696e7661646572732d78782f66696c616d656e742d67726964737461636b2d64617368626f6172642e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/invaders-xx/filament-gridstack-dashboard) 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](https://github.com/glorand/laravel-model-settings) package to ensure persistence of data in the database. Installation ------------ [](#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](https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme) on the Filament website. Add the plugin's views to your `tailwind.config.js` file. ``` content: [ '/invaders-xx/filament-gridstack-dashboard/resources/**/*.blade.php', ] ``` Please visit [Laravel model settings](https://github.com/glorand/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 ----- [](#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 ------- [](#testing) ``` composer test ``` Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. Contributing ------------ [](#contributing) Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details. Security Vulnerabilities ------------------------ [](#security-vulnerabilities) Please review [our security policy](../../security/policy) on how to report security vulnerabilities. Credits ------- [](#credits) - [David Vincent](https://github.com/invaders-xx) - [All Contributors](../../contributors) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 36 — LowBetter than 81% of packages Maintenance31 Infrequent updates — may be unmaintained Popularity29 Limited adoption so far Community13 Small or concentrated contributor base Maturity60 Established project with proven stability Bus Factor1 Top contributor holds 96.6% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~1 days Total 12 Last Release 709d ago Major Versions v0.1-beta → v1.02024-05-13 PHP version history (2 changes)v0.1-betaPHP ^8.1 v1.2PHP ^8.2 ### Community Maintainers ![](https://www.gravatar.com/avatar/cd84d991d619a7b8cafe026320fcb9a7b7b76b5fefe1738fd1f1e41fd0db0c64?d=identicon)[invaders-xx](/maintainers/invaders-xx) --- Top Contributors [![invaders-xx](https://avatars.githubusercontent.com/u/604907?v=4)](https://github.com/invaders-xx "invaders-xx (28 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (1 commits)") --- Tags laravelinvaders-xxfilament-gridstack-dashboard ### Code Quality TestsPest Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/invaders-xx-filament-gridstack-dashboard/health.svg) ``` [![Health](https://phpackages.com/badges/invaders-xx-filament-gridstack-dashboard/health.svg)](https://phpackages.com/packages/invaders-xx-filament-gridstack-dashboard) ``` ### Alternatives [guava/calendar Adds support for vkurko/calendar to Filament PHP. 298241.0k3](/packages/guava-calendar)[bezhansalleh/filament-google-analytics Google Analytics integration for FilamentPHP 205144.8k5](/packages/bezhansalleh-filament-google-analytics)[jibaymcs/filament-tour Bring the power of DriverJs to your Filament panels and start a tour ! 12247.8k](/packages/jibaymcs-filament-tour)[marcelweidum/filament-expiration-notice Customize the livewire expiration notice 9169.0k4](/packages/marcelweidum-filament-expiration-notice)[hydrat/filament-table-layout-toggle Filament plugin adding a toggle button to tables, allowing user to switch between Grid and Table layouts. 6292.3k1](/packages/hydrat-filament-table-layout-toggle)[outerweb/filament-settings Filament integration for the outerweb/settings package 3690.9k4](/packages/outerweb-filament-settings) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)