grid-view.md

Grid view

This view creates a dynamic grid view using card data, same as a TableView this view has features like filters, pagination and a search input, you can also customize the card data as you need

• Laravel views
• Grid view
  • Create new grid view
  • Defining initial data
  • Defining card data
  • Customizing card data
  • More features

Grid view example

Create new table view

php artisan make:grid-view ExampleGridView

With this artisan command a ExampleGridView.php file will be created inside app/Http/Livewire directory, with this class you can customize the behavior of the grid view.

Defining initial data

Return an Eloquent query with the initial data to be displayed on the grid view, it is important to return the query, not the data collection.

use App\User;

public function repository(): Builder
{
    return User::query();
}

Defining card data

You have to define a public function returning an array with the data which will be displayed on each card, this array has to include photo, title, subtitle and the description.

public function card($item)
{
    return [
        'image' => $item->photo,
        'title' => $item->name,
        'subtitle' => $item->email,
        'description' => $item->description
    ];
}

These are the fields by default but you can add more if you want to customize your card.

Customizing card data

The grid view has a card component by default with some data but you can either create your own card and use as much data as you need in the card mthod and just use your own card implementation, you just need to specify a blade file.

public $cardComponent = 'components.my-card';

More features

This grid view is based on a table view, so you could use some of the table view features as:

• Searching data
• Pagination
• Filters
• Actions