We all faced datatables when building an app. Sometimes the datatables tend to become complex and you end up spending lots of time and energy on building and debugging them. Livewire PowerGrid comes to solve this problem by providing a complex yet ready to use and customizable datatable build with Livewire.
PowerGrid is a component for Laravel Livewire used to generate dynamic tableshttps://github.com/Power-Components/livewire-powergrid
PowerGrid comes with a variety of out-of-the-box features:
✅ Searching & Filters
✅ Column Sorting
✅ Action checkboxes
✅ Action buttons
✅ Toggle button
✅ Click to edit
✅ Click to copy
✅ Link inside a table cell
✅ Data Export to XLSX/CSV
✅ Works with Bootstrap or Tailwind CSS
✅ Translations available for 🇺🇸 🇧🇷 🇪🇸 🇩🇪 and more to come…
To install the package you can use Composer like so:
composer require power-components/livewire-powergrid
Publish the Livewire PowerGrid configuration file with the following command:
php artisan vendor:publish --tag=livewire-powergrid-config
If you want to customize the way PowerGrid looks or you want to change the language files you can publish the following:
php artisan vendor:publish --tag=livewire-powergrid-views
php artisan vendor:publish --tag=livewire-powergrid-lang
By default, PowerGrid uses Tailwind.
This configuration can be changed in the file
// For Bootstrap 5 use: 'theme' => 'bootstrap' // For Tailwind use: 'theme' => 'tailwind'
Alpine JS is not mandatory but it is required by features like “Click to edit” and “Toggable”.
To activate it, open the file
config/livewire-powergrid.php and modify the ‘js_framework’ setting replacing
//... 'js_framework' => 'alpinejs',
The CDN for Alpine JS is configured by default, in the same file:
//... 'js_framework_cdn' => [ 'alpinejs' => 'https://firstname.lastname@example.org/dist/alpine.min.js' ]
Include the Livewire and the PowerGrid styles and scripts:
... <!-- Styles --> @livewireStyles @powerGridStyles </head> <body> <!-- Scripts --> @livewireScripts @powerGridScripts </body>
To create a Table Component run
powergrid:create informing your table
name and your
model. (It’s advisable to use “” around your
php artisan powergrid:create ProductTable --model="App\Models\Product"
If your Model has the fillable property specified, use
--fillable option to create columns based on its value.
php artisan powergrid:create ProductTable --model="App\Models\Product" --fillable
If everything was successful, you will find your new table component inside the
For a full list of methods that you can use in your project or customization options make sure you check out PowerGrid’s Github repo here: https://github.com/Power-Components/livewire-powergrid
Also there’s an demo app built if you want to give it a go before using it in your project which we recommend: https://github.com/Power-Components/powergrid-demo
We tested the package and we can say it is a well thought and well-written software worth using in your app. Unlike other Livewire datatables, PowerGrid gives you the freedom to customize the way you interact with the table as well as the way you want to be displayed in the app.Spread the word!