Implementing Grid View in Filament Admin Panel

Implementing Grid View in Filament Admin Panel

Learn how to customize your Filament admin panel to display data in a grid view instead of the default table view.

Introduction

Filament provides a powerful admin panel for Laravel applications. By default, it displays data in a table view, but you can easily customize it to show data in a grid view using Filament's built-in components.

Prerequisites

  • Laravel application with Filament installed
  • Basic understanding of Filament's resource structure
  • Familiarity with PHP and Laravel

1 Configure the Table View

In your Filament resource, modify the `table()` method to use a grid layout:

public static function table(Table $table): Table
{
    return $table
        ->contentGrid([
            'md' => 2,
            'xl' => 3,
        ])
        ->columns([
            Stack::make([
                TextColumn::make('name')
                    ->searchable()
                    ->sortable(),
                TextColumn::make('description')
                    ->limit(50)
                    ->searchable(),
            ]),
            Split::make([
                TextColumn::make('price')
                    ->money('usd')
                    ->sortable(),
                TextColumn::make('stock')
                    ->sortable(),
            ]),
        ]);
}

2 Understanding the Components

The key components used in this implementation are:

  • contentGrid() - Configures the grid layout with responsive breakpoints
  • Stack::make() - Stacks multiple columns vertically
  • Split::make() - Places columns side by side

Key Features

  • Responsive grid layout
  • Flexible column arrangement
  • Maintains sorting and searching functionality
  • Clean and modern appearance

Best Practices

  • Use appropriate grid breakpoints for different screen sizes
  • Keep grid items concise and well-organized
  • Consider the amount of data being displayed
  • Maintain consistent spacing and alignment

Additional Resources