Filters Outside
This example shows Filters "Outside".
(This Table is a variation of the "Filter Inline" example.)
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
|
178 kcal
|
Pie
|
R$Β 188,03
|
π½οΈ All diets
|
In Stock
|
03/11/2024
|
|
2
|
Albacore Tuna Melt
|
855 kcal
|
Soup
|
Vitor
|
R$Β 145,93
|
π± Suitable for Vegans
|
Out of Stock
|
01/12/2024
|
3
|
Π±ΠΎΡΡ
|
184 kcal
|
Soup
|
Dan
|
R$Β 100,19
|
π± Suitable for Vegans
|
Out of Stock
|
02/12/2024
|
4
|
Bacalhau com natas
|
444 kcal
|
Garnish
|
R$Β 115,28
|
π½οΈ All diets
|
Out of Stock
|
22/11/2024
|
|
5
|
Baba Ghanoush
|
118 kcal
|
Soup
|
R$Β 127,86
|
π½οΈ All diets
|
Out of Stock
|
01/11/2024
|
|
6
|
Bacon Cheeseburger
|
233 kcal
|
Pasta
|
R$Β 220,97
|
π₯ Suitable for Celiacs
|
In Stock
|
04/11/2024
|
|
7
|
Baked potato
|
843 kcal
|
Dessert
|
Dan
|
R$Β 195,18
|
π± Suitable for Vegans
|
In Stock
|
28/10/2024
|
8
|
Baklava
|
731 kcal
|
Pasta
|
R$Β 254,15
|
π± Suitable for Vegans
|
In Stock
|
06/12/2024
|
|
9
|
Bangers and mash
|
734 kcal
|
Soup
|
R$Β 172,21
|
π± Suitable for Vegans
|
In Stock
|
11/12/2024
|
|
10
|
Black Pudding
|
360 kcal
|
Meat
|
Claudio
|
R$Β 230,45
|
π± Suitable for Vegans
|
In Stock
|
18/12/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\FiltersOutsideTable;
use App\Livewire\Examples\FiltersInlineTable\FiltersInlineTable;
use App\Models\Dish;
use Illuminate\Database\Eloquent\Builder;
use PowerComponents\LivewirePowerGrid\Facades\PowerGrid;
final class FiltersOutsideTable extends FiltersInlineTable
{
public string $tableName = 'filters-outside-table';
public bool $showFilters = true;
public function boot(): void
{
config(['livewire-powergrid.filter' => 'outside']);
}
public function setUp(): array
{
return [
PowerGrid::header()
->showToggleColumns()
->withoutLoading()
->showSearchInput(),
PowerGrid::footer()
->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'])
);
}
}