Documentation

• Grid Layout Plugin
  • Installation
  • Usage
  • License

#Grid Layout Plugin

This is a grid layout plugin for Filament Admin We want to build a fixed layout, easy to define rows and columns. like this

$content->row(function (Row $row) {
    $row->column(4, 'xxx');
    $row->column(8, function (Column $column) {
        $column->row('111');
        $column->row('222');
        $column->row(function(Row $row) {
            $row->column(6, '444');
            $row->column(6, '555');
        });
    });
});
----------------------------------
|xxx       |111                  |
|          |---------------------|
|          |222                  |
|          |---------------------|
|          |444      |555        |
|          |         |           |
----------------------------------

#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,
    ];
}

#License

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