Workflow
Responsive

This example enables Responsive Table.

(This Table is a variation of the "Dish" example.)

ID
Dish
Diet
Category
Price
Calories
Production date
In Stock
Action
ID
Dish
Diet
Category
Price
Calories
Production date
In Stock
Action
1
Arkansas Possum Pie
🍽️ All diets
419 kcal
29/06/2024
2
Albacore Tuna Melt
🍽️ All diets
530 kcal
05/07/2024
3
борщ
🍽️ All diets
835 kcal
10/07/2024
4
Bacalhau com natas
🍽️ All diets
560 kcal
07/07/2024
5
Baba Ghanoush
🌱 Suitable for Vegans
Pasta
750 kcal
01/07/2024
6
Bacon Cheeseburger
🍽️ All diets
579 kcal
17/06/2024
7
Baked potato
🌱 Suitable for Vegans
Garnish
747 kcal
01/07/2024
8
Baklava
🥜 Suitable for Celiacs
Dessert
120 kcal
08/07/2024
9
Bangers and mash
🌱 Suitable for Vegans
Dessert
138 kcal
21/06/2024
10
Black Pudding
🥜 Suitable for Celiacs
Pasta
660 kcal
19/06/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\ResponsiveTable;
 
use App\Livewire\Examples\DemoDishTable\DemoDishTable;
use PowerComponents\LivewirePowerGrid\Footer;
use PowerComponents\LivewirePowerGrid\Header;
use PowerComponents\LivewirePowerGrid\Responsive;
 
final class ResponsiveTable extends DemoDishTable
{
public function setUp(): array
{
return [
Header::make()
->showToggleColumns()
->showSearchInput(),
 
Footer::make()
->showPerPage()
->showRecordCount(),
 
Responsive::make()
->fixedColumns('dishes.name', Responsive::ACTIONS_COLUMN_NAME),
];
}
}
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.4
A front-end framework for Laravel.
openspout/openspout
v4.24.3
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.