Important

We will archive this project since filament3 supports Grid now. https://beta.filamentphp.com/docs/3.x/infolists/layout/grid

Grid Layout Plugin

This is a grid layout plugin for Filament Admin

Installation

You can install the package via composer:

composer require solution-forest/grid-layout-plugin

Optionally, you can publish the views using

php artisan vendor:publish --tag="grid-layout-plugin-views"

Usage

To create grid layout page :

php artisan make:filament-grid-page

The getGridSchema() method is used to define the structure of grid layout. It is an array of fields, in the order they should appear in the layout.

The following components are available for grid layout:

• \SolutionForest\GridLayoutPlugin\Components\Grid\Row
• \Livewire\Component
• \Illuminate\View\Component
• \Illuminate\Support\HtmlString

use SolutionForest\GridLayoutPlugin\Pages\Grid as BasePage;
use SolutionForest\GridLayoutPlugin\Components\Grid;
use SolutionForest\GridLayoutPlugin\Components\Grid\Row;
use SolutionForest\GridLayoutPlugin\Components\Grid\Column;

protected function getGridSchema(): array
{
    return [
        Components\Grid\Row::make([
            Components\Grid\Column::make(
                6,
                \Filament\Widgets\StatsOverviewWidget\Card::make('Revenue', '$192.1k')
                    ->description('32k increase')
                    ->descriptionIcon('heroicon-s-trending-up')
                    ->chart([7, 2, 10, 3, 15, 4, 17])
                    ->color('success'),
            ),
            Components\Grid\Column::make(
                6,
                \Filament\Widgets\StatsOverviewWidget\Card::make('Revenue', '$192.1k')
                    ->description('3% decrease')
                    ->descriptionIcon('heroicon-s-trending-down')
                    ->chart([17, 16, 14, 15, 14, 13, 12])
                    ->color('danger')
            ),
        ]),
        \Filament\Widgets\StatsOverviewWidget\Card::make('Revenue', '$192.1k')
            ->description('7% increase')
            ->descriptionIcon('heroicon-s-trending-up')
            ->chart([15, 4, 10, 2, 12, 4, 12])
            ->color('success'),
        new \Illuminate\Support\HtmlString("<div>Dummy Html Element</div>"),
        view('welcome'),
    ];
}

Or you can create grid layout which only support widgets similar with \Filament\Pages\Dashboard:

php artisan make:filament-grid-page --type=widget

protected function getWidgets(): array
{
    return [
        \Filament\Widgets\AccountWidget::class,
        \Filament\Widgets\FilamentInfoWidget::class,
    ];
}

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

• Carly
• All Contributors

License

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