Release Notes
PowerGrid Version 4
Dependencies
PowerGrid was born with the intention of always keeping as close as possible to the latest laravel update, so we updated the minimum versions of php, tailwind and livewire for greater support and durability.
Independent Export Engine
Openspout was previously installed as a dependency, now you must manually install it in composer.json and adjust which version you are using in PowerGrid settings.
Deprecated Batch Export properties
For better organization, we have moved the queues properties inside the Exportable Facade.
Support TomSelect and SlimSelect
Add support for Slim Select and Tom Select by default, instead of using the multi select component that came by default in version 3. ) and Tom Select by default instead of using the multi select component that came by default in version 3. This allows for further customization and greater support.
Changed Columns::makeFilters to Filter Facade
Instead of calling the method to create a custom filter inside a column, we should use the Filters Facade.
<!-- 🚫 Before -->
Column::makeInputSelect()
Column::makeInputMultiSelect()
Column::makeInputDatePicker()
Column::makeInputEnumSelect()
Column::makeInputRange()
Column::makeInputText()
Column::makeBooleanFilter()
<!-- ✅ After -->
Filter::multiSelect()
Filter::datepicker()
Filter::select()
Filter::number()
Filter::inputText()
Filter::boolean()
Multi Sorting
PowerGrid v4 allows you to choose multiple columns to sort by.
To enable multi-sorting, you must set the property $multiSort to true in your PowerGrid table class.
use PowerComponents\LivewirePowerGrid\Traits\WithExport;
final class YourPowerGridTable extends PowerGridComponent
{
public bool $multiSort = true;
}
Multi-sorting behaves like chaining several ->orderBy(...)->orderBy(...) Laravel Eloquent methods.
Dynamic Filter
PowerGrid Filters are internal components, if you want to use an external component you can utilize Dynamic Filters.
A practical example is when you are using external components (such as wireui) throughout your system and want to apply them in PowerGrid too.
Example:
public function filters(): array
{
return [
Filter::dynamic('in_stock', 'in_stock')
->component('select') // <x-select ...attributes/>
->attributes([
'class' => 'min-w-[170px]',
'async-data' => route('categories.index'),
'option-label' => 'name',
'multiselect' => false,
'option-value' => 'id',
'placeholder' => 'Test',
'wire:model.lazy' => 'filters.select.in_stock'
]),
];
}
Row Index
Sometimes we need to display the row index instead of the Model id.
To activate this functionality, simply chain the index() method to your column.
Example:
public function columns(): array
{
return [
Column::make('Index', '')
->index(),
}
Tailwind Theme class
PowerGrid uses the slate color by default, you might want to change that, just insert the PowerGrid preset in the tailwind.config.js file
Header Without Loading
If you don't want to display PowerGrid's default loading icon when some request is made to the server, just call withoutLoading() on Header Facade. This is useful when you already have a layout to show the progress of internal calls.
Custom SearchBox Theme
You can change the classes and styles of the input, icon search and icon close.
Table tdBodyEmpty
You can use tdBodyEmpty to change the row style when the table is empty.
Filter Multi Select Async
If you don't want to load the multi-select data immediately when the table loads, you can use this feature to make your table appear faster.
PowerGrid uses TomSelect, you can read more about it here.
Defer Loading
The table will be fully loaded after the data is completely ready. Behind the scenes wire:init is used
Search with whereHasMorph
Now you can search your table if your data source has morphic relationship whereHasMorph
BulkAction store
Using the Alpine store, we can track how many items have been selected. This is useful to count how many items we will export or carry out a mass action.