• Grid Widget

Grid Widget

Plugin information

by alan lam

Admin panel Widget

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

Support

#grid-widget on Discord

Views

2902

License

MIT

Documentation

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.