Workflow
Filters Inline

This example enables Filters.

XLSX
Csv
ID
Dish
Calories
Category
Chef
Price
Diet
In Stock
Created At
ID
Dish
Calories
Category
Chef
Price
Diet
In Stock
Created At
1
Arkansas Possum Pie
419 kcal
Garnish
R$ 243,39
🍽️ All diets
Out of Stock
06/07/2024
2
Albacore Tuna Melt
530 kcal
Pie
Vitor
R$ 63,11
🍽️ All diets
In Stock
03/07/2024
3
борщ
835 kcal
Soup
Dan
R$ 100,19
🍽️ All diets
In Stock
26/06/2024
4
Bacalhau com natas
560 kcal
Garnish
Dan
R$ 238,11
🍽️ All diets
In Stock
02/06/2024
5
Baba Ghanoush
750 kcal
Pasta
Vitor
R$ 143,09
🌱 Suitable for Vegans
Out of Stock
30/05/2024
6
Bacon Cheeseburger
579 kcal
Fish
R$ 257,39
🍽️ All diets
In Stock
13/06/2024
7
Baked potato
747 kcal
Garnish
R$ 171,89
🌱 Suitable for Vegans
Out of Stock
05/07/2024
8
Baklava
120 kcal
Dessert
R$ 143,46
🥜 Suitable for Celiacs
Out of Stock
14/07/2024
9
Bangers and mash
138 kcal
Dessert
Luan
R$ 253,72
🌱 Suitable for Vegans
Out of Stock
26/05/2024
10
Black Pudding
660 kcal
Pasta
Dan
R$ 248,73
🥜 Suitable for Celiacs
Out of Stock
10/07/2024
Disclaimer: Table data is randomly generated for illustrative purposes only. The information here is not a reflection of the actual market and does not constitute business, financial, or medical advice.
<?php
 
namespace App\Livewire\Examples\FiltersInlineTable;
 
use App\Enums\Diet;
use App\Models\Category;
use App\Models\Dish;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Support\Carbon;
use Illuminate\Support\Number;
use PowerComponents\LivewirePowerGrid\Column;
use PowerComponents\LivewirePowerGrid\Exportable;
use PowerComponents\LivewirePowerGrid\Facades\Filter;
use PowerComponents\LivewirePowerGrid\Footer;
use PowerComponents\LivewirePowerGrid\Header;
use PowerComponents\LivewirePowerGrid\PowerGrid;
use PowerComponents\LivewirePowerGrid\PowerGridComponent;
use PowerComponents\LivewirePowerGrid\PowerGridFields;
use PowerComponents\LivewirePowerGrid\Traits\WithExport;
 
class FiltersInlineTable extends PowerGridComponent
{
use WithExport;
 
public int $categoryId = 0;
 
protected function queryString()
{
return $this->powerGridQueryString();
}
 
public function setUp(): array
{
$this->showCheckBox('id');
 
return [
Exportable::make('export')
->striped()
->columnWidth([
2 => 30,
])
->type(Exportable::TYPE_XLS, Exportable::TYPE_CSV),
 
Header::make()
->showToggleColumns()
->withoutLoading()
->showSearchInput(),
 
Footer::make()
->showPerPage()
->showRecordCount(),
];
}
 
public function datasource(): Builder
{
return Dish::query()
->when(
$this->categoryId,
fn ($builder) => $builder->whereHas(
'category',
fn ($builder) => $builder->where('category_id', $this->categoryId)
)
->with(['category', 'kitchen'])
);
}
 
public function relationSearch(): array
{
return [
'category' => [
'name',
],
 
'chef' => [
'name',
],
];
}
 
public function fields(): PowerGridFields
{
return PowerGrid::fields()
->add('id')
->add('name')
->add('storage_room')
->add('calories_formatted', fn ($dish) => $dish->calories . ' kcal')
->add('chef_name', fn ($dish) => e($dish->chef?->name))
->add('category_id', fn ($dish) => intval($dish->category_id))
->add('category_name', fn ($dish) => e($dish->category->name))
->add('price')
->add('price_in_eur', fn ($dish) => Number::currency($dish->price, in: 'EUR', locale: 'pt_PT'))
->add('diet', fn ($dish) => Diet::from($dish->diet)->labels())
->add('price_BRL', fn ($dish) => Number::currency($dish->price, in: 'BRL', locale: 'pt-BR'))
->add('in_stock')
->add('in_stock_label', fn ($entry) => $entry->in_stock ? 'In Stock' : 'Out of Stock')
->add('produced_at_formatted', fn ($dish) => Carbon::parse($dish->produced_at))
->add('created_at_formatted', fn ($dish) => Carbon::parse($dish->created_at)->timezone('America/Sao_Paulo')->format('d/m/Y'));
}
 
public function columns(): array
{
return [
Column::make('ID', 'id')
->searchable()
->sortable(),
 
Column::make('Dish', 'name')
->searchable()
->sortable(),
 
Column::add()
->title('Calories')
->field('calories_formatted', 'calories')
->sortable(),
 
Column::make('Category', 'category_name', 'category_id'),
 
Column::make('Chef', 'chef_name')
->searchable(),
 
Column::add()
->title('Price')
->field('price_BRL', 'price'),
 
Column::make('Diet', 'diet', 'dishes.diet'),
 
Column::make('In Stock', 'in_stock_label', 'in_stock'),
 
Column::make('Created At', 'created_at_formatted', 'created_at')
->sortable(),
];
}
 
public function filters(): array
{
return [
Filter::inputText('name')->placeholder('Dish Name'),
 
Filter::boolean('in_stock', 'in_stock')
->label('In Stock', 'Out of Stock'),
 
Filter::boolean('calories')
->label('🔥 Caloric', '🪶 Light')
->builder(function (Builder $query, string $value) {
$q = match ($value) {
default => ['operator' => '>=', 'calories' => 0],
'true' => ['operator' => '>=', 'calories' => 300],
'false' => ['operator' => '<', 'calories' => 300],
};
 
return $query->where('calories', $q['operator'], $q['calories']);
}),
 
Filter::enumSelect('diet', 'dishes.diet')
->dataSource(Diet::cases())
->optionLabel('dishes.diet'),
 
Filter::select('category_name', 'category_id')
->dataSource(Category::all())
->optionLabel('name')
->optionValue('id'),
 
Filter::number('price_BRL', 'price')
->thousands('.')
->decimal(',')
->placeholder('lowest', 'highest'),
 
Filter::datetimepicker('created_at_formatted', 'created_at')
->params([
'timezone' => 'America/Sao_Paulo',
]),
];
}
}
Code highlighting provided by Torchlight.dev

Here you can find all relevant packages installed on this demo.

Name
Version
Description
laravel/framework
v11
The Laravel Framework.
livewire/livewire
v3.5.4
A front-end framework for Laravel.
openspout/openspout
v4.24.3
PHP Library to read and write spreadsheet files (CSV, XLSX and ODS), in a fast and scalable way
power-components/livewire-powergrid
5.x-dev
PowerGrid generates Advanced Datatables using Laravel Livewire.