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.
|