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
289 kcal
Pasta
R$Β 78,43
🌱 Suitable for Vegans
In Stock
09/05/2024
2
Albacore Tuna Melt
446 kcal
Pie
R$Β 89,90
🍽️ All diets
In Stock
29/04/2024
3
Π±ΠΎΡ€Ρ‰
619 kcal
Soup
Dan
R$Β 100,19
🌱 Suitable for Vegans
In Stock
24/04/2024
4
Bacalhau com natas
342 kcal
Dessert
Dan
R$Β 213,37
🍽️ All diets
In Stock
10/05/2024
5
Baba Ghanoush
872 kcal
Pasta
Dan
R$Β 263,16
🌱 Suitable for Vegans
Out of Stock
18/03/2024
6
Bacon Cheeseburger
279 kcal
Pasta
R$Β 61,67
πŸ₯œ Suitable for Celiacs
Out of Stock
09/04/2024
7
Baked potato
639 kcal
Meat
R$Β 148,63
🌱 Suitable for Vegans
Out of Stock
26/03/2024
8
Baklava
355 kcal
Pie
R$Β 127,07
πŸ₯œ Suitable for Celiacs
Out of Stock
12/04/2024
9
Bangers and mash
619 kcal
Meat
Dan
R$Β 181,73
πŸ₯œ Suitable for Celiacs
In Stock
04/05/2024
10
Black Pudding
660 kcal
Pie
R$Β 133,18
🍽️ All diets
In Stock
01/04/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.
πŸ”Ž View on GitHub
<?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'),
 
Column::make('Chef', 'chef_name')
->searchable(),
 
Column::add()
->title('Price')
->field('price_BRL'),
 
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.4.12
A front-end framework for Laravel.
openspout/openspout
v4.24.0
PHP Library to read and write spreadsheet files (CSV, XLSX and ODS), in a fast and scalable way
power-components/livewire-powergrid
v5.6.3
PowerGrid generates Advanced Datatables using Laravel Livewire.