Livewire PowerGrid

Appearance

Table Rows ​

This section covers the Table Row features.

Here you will find:

Checkboxes ​

To enable checkboxes on Table rows, call the showCheckBox() in your Component's setUp() method.

By default, showCheckBox() reference the field id. If you need to reference another field, simply pass the field name to the parameter $attribute.

Example:

php
// app/Livewire/DishTable.php

use PowerComponents\LivewirePowerGrid\PowerGridComponent;

class DishTable extends PowerGridComponent
{
    public function setUp(): array
    {
        $this->showCheckBox();
    }
}

🚀 See it in action

See an interactive example using Checkboxes on a Table.

Radio Buttons ​

To enable radio buttons on Table rows, call the showRadioButton() in your Component's setUp() method.

By default, showRadioButton() reference the field id. If you need to reference another field, simply pass the field name to the parameter $attribute.

Example:

php
// app/Livewire/DishTable.php

use PowerComponents\LivewirePowerGrid\PowerGridComponent;

class DishTable extends PowerGridComponent
{
    public function setUp(): array
    {
        $this->showRadioButton();
    }
}

🚀 See it in action

See an interactive example using Radio Buttons on a Table.

See Formatting Data Dropdown Menu.

Inline Editing ​

See Edit On Click.

Toggle Switch ​

See Toggleable.

Buttons ​

Buttons are registered inside the method actions() in your Table Component class.

Inside this method, you have access to the (Model|array) $row variable containing the rendered row's data.

To add buttons to each row, you must add a call to Buttons::class, and proceed chaining as many Button methods as you need.

In addition, make sure you have added an Action Column to your Component.

The example below creates a button to dispatch an event when clicked.

php
// app/Livewire/DishTable.php

use PowerComponents\LivewirePowerGrid\PowerGridComponent;
use PowerComponents\LivewirePowerGrid\Button;

class DishTable extends PowerGridComponent
{
    public function actions($row): array
    {
        return [
            Button::add('edit-stock')
                ->slot("Edit <strong>{e($row->name)}</strong>")
                ->class('bg-indigo-500 text-white')
                ->dispatch('clickToEdit', ['dishId' => $row->id]),
        ];
    }
}

🚀 See it in action

See an interactive example using Buttons on a Table.

Actions From Blade View ​

PowerGrid offers the possibility to render a custom view inside each row's Action Column.

This is useful when you need to build a combination of actions for a complex scenario or when working with cache on a large dataset.

To load actions from a View, add a method actionsFromView() to your PowerGrid Component returning a View.

Inside this method, you have access to the (Model|array) $row variable containing the rendered row's data.

Example:

php
use Illuminate\View\View;

public function actionsFromView($row): View
{
    return view('actions-view', ['row' => $row]);
}

Your view may look something like the example below.

php
// resources/views/actions-view.blade.php

<div>
    @if($row->in_stock == 'Yes')
        <button>Order now</button>
    @else
        - out of sock -
    @endif
</div>

🚀 See it in action

See an interactive example using Action From View.

Image in Cell ​

See Formatting Data Image.

Cell Data Formatting ​

See Custom Fields and Formatting Data Examples.

Conditionally Show/Hide Controls ​

See Conditional Rules.

Collapsible Rows ​

See Detail Row.

Multi-row Bulk Actions ​

See Bulk Actions.

Created By Luan Freitas and @DanSysAnalyst