Workflow
Dishes
ID
Dish
Diet
Category
Price
Calories
In Stock
Production date
Action
ID
Dish
Diet
Category
Price
Calories
In Stock
Production date
Action
1
Arkansas Possum Pie
πŸ₯œ Suitable for Celiacs
Pie
849 kcal
28/03/2024
2
Albacore Tuna Melt
πŸ₯œ Suitable for Celiacs
Dessert
244 kcal
15/03/2024
3
Π±ΠΎΡ€Ρ‰
🌱 Suitable for Vegans
Fish
799 kcal
17/03/2024
4
Bacalhau com natas
πŸ₯œ Suitable for Celiacs
Garnish
749 kcal
01/04/2024
5
Baba Ghanoush
🌱 Suitable for Vegans
Pasta
692 kcal
01/04/2024
6
Bacon Cheeseburger
🌱 Suitable for Vegans
Pie
657 kcal
02/04/2024
7
Baked potato
🌱 Suitable for Vegans
Fish
764 kcal
06/03/2024
8
Baklava
🌱 Suitable for Vegans
Dessert
768 kcal
30/03/2024
9
Bangers and mash
🍽️ All diets
Meat
664 kcal
10/03/2024
10
Black Pudding
πŸ₯œ Suitable for Celiacs
Dessert
475 kcal
13/03/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.
open in GitHub
<?php
 
use App\Models\Dish;
use Illuminate\Database\Query\Builder;
use Illuminate\Support\Carbon;
use Livewire\Attributes\On;
use PowerComponents\LivewirePowerGrid\Button;
use PowerComponents\LivewirePowerGrid\Column;
use PowerComponents\LivewirePowerGrid\Facades\Rule;
use PowerComponents\LivewirePowerGrid\Footer;
use PowerComponents\LivewirePowerGrid\Header;
use PowerComponents\LivewirePowerGrid\PowerGrid;
use PowerComponents\LivewirePowerGrid\PowerGridComponent;
use PowerComponents\LivewirePowerGrid\PowerGridFields;
 
class DishesTable extends PowerGridComponent
{
public bool $filtersOutside = false;
 
public string $sortField = 'dishes.id';
 
public bool $ableToLoad = false;
 
public string $loadingComponent = 'components.my-custom-loading';
 
public function onUpdatedToggleable($id, $field, $value): void
{
Dish::query()->where('id', $id)->update([
$field => $value,
]);
 
$this->skipRender();
}
 
#[On('openModal')]
public function openModal(string $component, array $arguments)
{
dd(get_defined_vars());
}
 
#[On('bulkDelete')]
public function bulkDelete(): void
{
dd([
'dishIds' => $this->checkboxValues,
'confirmationTitle' => 'Delete dish',
'confirmationDescription' => 'Are you sure you want to delete this dish?',
]);
}
 
public function setUp(): array
{
$this->showCheckBox();
 
return [
Header::make()
->showToggleColumns()
->showSearchInput(),
 
Footer::make()
->showPerPage()
->showRecordCount(),
];
}
 
public function datasource(): ?Builder
{
return Dish::query()
->join('categories as newCategories', function ($categories) {
$categories->on('dishes.category_id', '=', 'newCategories.id');
})
->select('dishes.*', 'newCategories.name as category_name')
->toBase();
}
 
public function relationSearch(): array
{
return [
'category' => [
'name',
],
];
}
 
public function fields(): PowerGridFields
{
return PowerGrid::fields()
->add('id')
->add('serving_at')
->add('chef_name')
->add('dish_name', fn ($dish) => $dish->name)
->add('calories', fn ($dish) => $dish->calories.' kcal')
->add('category_id')
->add('category_name')
->add('price')
->add('in_stock')
->add('in_stock_label', fn ($dish) => $dish->in_stock ? 'sim' : 'nΓ£o')
->add('diet', fn ($dish) => \App\Enums\Diet::from($dish->diet)->labels())
->add('produced_at')
->add('produced_at_formatted', fn ($dish) => Carbon::parse($dish->produced_at)->format('d/m/Y'));
}
 
public function columns(): array
{
return [
Column::add()
->title(__('ID'))
->field('id', 'dishes.id')
->searchable()
->sortable(),
 
Column::add()
->title(__('Dish'))
->field('dish_name', 'dishes.name')
->searchable()
->contentClasses('!whitespace-normal')
->placeholder('placeholder')
->sortable(),
 
Column::add()
->field('diet', 'dishes.diet')
->title(__('Diet')),
 
Column::add()
->title(__('Category'))
->field('category_name', 'categories.name')
->placeholder('Category placeholder'),
 
Column::add()
->title(__('Price'))
->field('price')
->editOnClick(true),
 
Column::add()
->title(__('Calories'))
->field('calories')
->sortable(),
 
Column::add()
->title(__('In Stock'))
->field('in_stock')
->toggleable(true, 'yes', 'no')
->sortable(),
 
Column::add()
->title(__('Production date'))
->field('produced_at_formatted'),
 
Column::action('Action')
->fixedOnResponsive(),
];
}
 
public function header(): array
{
return [
Button::add('bulk-delete')
->slot(__('Bulk delete'))
->class('pg-btn-white dark:ring-pg-primary-600 dark:border-pg-primary-600 dark:hover:bg-pg-primary-700 dark:ring-offset-pg-primary-800 dark:text-pg-primary-300 dark:bg-pg-primary-700')
->dispatch('bulkDelete', []),
];
}
 
public function actions($dish): array
{
return [
Button::add('edit-stock')
->slot('edit')
->openModal('edit-stock', ['dishId' => $dish->id]),
];
}
 
public function actionRules(): array
{
return [
Rule::button('edit')
->when(fn ($dish) => $dish->id == 2)
->setAttribute('class', 'bg-green-200')
->setAttribute('wire:click', ['test', ['param1' => 1, 'dishId' => 'id']]),
 
Rule::button('destroy')
->when(fn ($dish) => $dish->id == 1)
->slot('Delete #1'),
 
Rule::checkbox()
->when(fn ($dish) => $dish->id == 2)
->hide(),
 
Rule::rows()
->when(fn ($dish) => (bool) $dish->in_stock === false)
->setAttribute('class', 'bg-yellow-50 hover:bg-yellow-100'),
];
}
}

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

Name
Version
Description
laravel/framework
v10
The Laravel Framework.
openspout/openspout
v4.23.0
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.