DOCSEARCHbyAlgolia
Submit Docs

PowerGrid for Laravel Livewire

website·Indexed 31 days ago

https://livewire-powergrid.com

A powerful data table component for Laravel Livewire. Features include column filtering, sorting, searching, pagination, bulk actions, and data exporting. The documentation covers installation, component configuration, data source setup, custom themes, and performance monitoring.

Tokens
54.4K
Snippets
332
Records
366
Agent score
57%

What's inside PowerGrid

  1. Overview of Livewire PowerGrid features

    Livewire PowerGrid is a package for Laravel Livewire used to create modern, customizable data tables. It supports both Bootstrap 5 and Tailwind CSS 3x/4x and includes the following built-in capabilities:

    • Data Management: Pagination, column sorting, global search, and a custom filter builder.
    • Interactivity: Inline editing (click-to-edit), row buttons, checkboxes, dropdown menus, and toggle switches.
    • Customization: Custom cell content (links, images, currency formatting) and conditional action rules for rows and buttons.
    • Analysis & Export: Column summaries (Sum, Count, Average) and data export to XLSX/CSV via OpenSpout, including queue support for large datasets.
    • Integration: Responsive design and integration with Wire Elements Modal.
    • Localization: Multi-language support including English, Portuguese, Spanish, Italian, and German.

  2. Overview of Livewire PowerGrid features

    Livewire PowerGrid is a Laravel Livewire package used to create modern, customizable data tables. It supports both Bootstrap 5 and Tailwind CSS 3x/4x and provides the following built-in capabilities:

    • Data Management: Pagination, column sorting, global search, and a custom filter builder.
    • Interactivity: Inline editing (click-to-edit), row buttons, checkboxes, dropdown menus, and toggle switches.
    • Customization: Custom cell content (links, images, currency formatting) and conditional action rules for rows, buttons, and checkboxes.
    • Analysis & Export: Column summaries (Sum, Count, Average) and data export to XLSX/CSV via OpenSpout, including queue export for large datasets.
    • Integration: Responsive design and integration with Livewire Modal (Wire Elements Modal).
    • Localization: Multi-language support including English, Portuguese, Spanish, Italian, and German.

  3. Install OpenSpout for PowerGrid Data Export

    To use the export functionality in PowerGrid, you must install the OpenSpout package. PowerGrid supports both v4 and v5. If you choose v5, you must also update the PowerGrid configuration.
    composer require openspout/openspout:^4.0 # or ^5.0

  4. Load Eloquent relationships in PowerGrid data source

    To include related model data in your PowerGrid table, use the Eloquent with() method within the datasource() method to eager load the relationships.
    // app/Livewire/DishTable.php

public function datasource(): ?Builder
{
    return Dish&query()&with('kitchen');
}

  5. Render custom Blade components as filters

    You can replace the default filter UI with a custom Blade component using the component() method. Pass the component name and an array of attributes. Inside the component, you can access PowerGrid's default attributes using $attributes->getAttributes() or specific attributes via $attributes->get('key').
    // In the PowerGrid Component
Filter::boolean('in_stock')
    ->component('my-custom-select', [
        'class' => 'p-2',
    ]),

// In resources/views/components/my-custom-select.blade.php
<div>
    @json($attributes->getAttributes())
    <input {{ $attributes->get('inputAttributes') }} />
</div>

  7. Define table columns in a PowerGrid component

    Columns are defined within the columns() method of a PowerGrid component. There are two primary ways to add columns: using Column::add() for a fluent builder approach or Column::make() for a more concise syntax. Every column requires a title (for the header) and a field (to link it to the data source).
    // app/Livewire/DishTable.php

use PowerComponents
LivewirePowerGrid
PowerGridComponent;
use PowerComponents
LivewirePowerGrid
Column;

class DishTable extends PowerGridComponent
{
    public function columns(): array
    {
        return [
            // Using Column::add()
            Column::add()
                ->title('ID')
                ->field('id'),

            // Using Column::make()
            Column::make(title: 'Dish name', field: 'name'),
        ];
    }
}

  8. Filter data by Eloquent relationships

    To filter based on a related model's field, you must first define the relationship in the component's relationSearch() method. Then, use the filterRelation() method on the filter, passing the relationship name and the specific field on that related model to filter by.
    public function filters(): array
{
    return [
        Filter::inputText('category_name')
            ->filterRelation('category', 'name') // 'category' is the relation, 'name' is the field
    ];
}

  9. Apply a custom theme to a specific PowerGrid table

    To override the global theme for a specific table, implement the customThemeClass() method within your PowerGrid component class and return the fully qualified class name of your custom theme.
    class DishTable extends PowerGridComponent
{
    public function customThemeClass(): ?string
    {
        return \App\PowerGridThemes\BigFonts::class;
    }
}

  10. Extend the PowerGrid Button class using Macros

    The PowerComponents\LivewirePowerGrid\Button class uses Laravel's Macroable trait, allowing you to define custom methods. You can use the internal attributes() method within a macro to store custom HTML attributes that will be rendered on the button.
    use PowerComponents
LivewirePowerGrid
Button;

// Define the macro
Button::macro('navigate', function () {
    $this->attributes([
        'wire:navigate' => true
    ]);

    return $this;
});

// Use the macro in your button configuration
Button::add('new-modal')
    ->slot('New window')
    ->class('bg-gray-300')
    ->navigate();

  11. Implement Detail Rows for expandable content

    Detail Rows allow users to expand a row to see additional information. This is enabled by adding the Detail class to the setUp() method, specifying a view via view(), and enabling the toggle button with showCollapseIcon().
    // app/Livewire/DishTable.php

use PowerComponents
LivewirePowerGrid
PowerGridComponent;
use PowerComponents
LivewirePowerGrid
Detail;

class DishTable extends PowerGridComponent
{
    public function setUp(): array
    {
        return [
            Detail::make()
                ->view('dishes.detail') // View has access to $row and $options
                ->showCollapseIcon(),   // Optional: pass custom icon path to this method
        ];
    }
}

  12. Filter data by Eloquent relationships

    To filter based on a related model's field, you must first define the relationship in the component's relationSearch() method. Then, use the filterRelation() method on the filter definition, passing the relationship name and the specific field on the related model to filter by.
    public function filters(): array
{
    return [
        Filter::inputText('category_name')
            ->filterRelation('category', 'name') // 'category' is the relation, 'name' is the field
    ];
}