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

• David Vincent
• All Contributors

License

The MIT License (MIT). Please see License File for more information.