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
718 kcal
Pasta
R$ 279,94
🥜 Suitable for Celiacs
Out of Stock
03/04/2024
2
Albacore Tuna Melt
285 kcal
Soup
R$ 97,76
🥜 Suitable for Celiacs
In Stock
18/05/2024
3
борщ
393 kcal
Soup
Dan
R$ 100,19
🌱 Suitable for Vegans
In Stock
30/04/2024
4
Bacalhau com natas
709 kcal
Fish
Dan
R$ 257,80
🌱 Suitable for Vegans
Out of Stock
21/04/2024
5
Baba Ghanoush
304 kcal
Meat
R$ 234,59
🌱 Suitable for Vegans
Out of Stock
01/05/2024
6
Bacon Cheeseburger
291 kcal
Fish
R$ 118,06
🌱 Suitable for Vegans
Out of Stock
17/05/2024
7
Baked potato
222 kcal
Fish
R$ 156,36
🌱 Suitable for Vegans
Out of Stock
13/04/2024
8
Baklava
847 kcal
Garnish
R$ 174,31
🥜 Suitable for Celiacs
In Stock
21/04/2024
9
Bangers and mash
434 kcal
Meat
R$ 193,81
🥜 Suitable for Celiacs
Out of Stock
03/04/2024
10
Black Pudding
600 kcal
Meat
Luan
R$ 108,28
🍽️ All diets
In Stock
18/05/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.0
A front-end framework for Laravel.
openspout/openspout
v4.24.1
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.