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.

Livewire PowerGrid was initially released last weekend by Dan on Twitter but since then two more releases were launched.

PowerGrid is a component for Laravel Livewire used to generate dynamic tables

https://github.com/Power-Components/livewire-powergrid

PowerGrid comes with a variety of out-of-the-box features:

✅ Searching & Filters

✅ Column Sorting

✅ Pagination

✅ 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 config/livewire-powergrid.php.

    // 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 null with 'alpinejs'.

     //...
    'js_framework' => 'alpinejs',

The CDN for Alpine JS is configured by default, in the same file:

    //...
    'js_framework_cdn' => [
        'alpinejs' => 'https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/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 --model option)

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 app/Http/Livewire folder.

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!

Leave a Reply

Your email address will not be published. Required fields are marked *