Skip to content

Button Class โ€‹

This section covers the PowerGrid Buttons Class.

Here you will find:

Introduction โ€‹

PowerGrid offers a convenient way to display buttons in your Table Rows and a Header button for Bulk Actions.

Please, refer to the sections linked above to see how to use buttons in each case. Below, we will explore the configuration methods for the Button::class.

Usage โ€‹

See Table Rows and Bulk Actions.

Button Methods โ€‹

The methods below can be chained to the PowerComponents\LivewirePowerGrid\Button class.

add() โ€‹

Creates a new button.

ParameterDescription
(string) $actioninternal name of this button

Example:

php
use PowerComponents\LivewirePowerGrid\Button;

Button::add('create-dish'),

slot() โ€‹

Render the given HTML.

ParameterDescription
(string) $slotHTML string

Example:

php
use PowerComponents\LivewirePowerGrid\Button;

Button::add('create-dish')  
        ->slot("⚡ Edit"),

class() โ€‹

Sets the button's CSS class attribute.

ParameterDescription
(string) $classAttrCSS class

Example:

php
use PowerComponents\LivewirePowerGrid\Button;

Button::add('create-dish')  
    ->slot('Create a dish')
    ->class('bg-indigo-500 text-white'),

dispatch() โ€‹

Dispatch events.

ParameterDescription
(string) $eventName of event
(array, Closure) $paramsParameters

Example:

php
use PowerComponents\LivewirePowerGrid\Button;

Button::add('create-dish')  
    ->slot('Create a dish')
    ->class('bg-indigo-500 text-white')
    ->dispatch('postAdded', ['key' => $row->id]),

The code above is equivalent to:

html
<div>
    <button wire:click="$dispatch('postAdded', { key: 1})">
</div>

๐Ÿ’ก TIP

Read more about Events in the Livewire documentation.


dispatchTo() โ€‹

Dispatch Events to a target.

ParameterDescription
(string) $toComponent name
(string) $eventName of event
(array, Closure) $paramsParameters

The code below:

php
use PowerComponents\LivewirePowerGrid\Button;

Button::add('view')
    ->slot('View')
    ->class('btn btn-primary')
    ->dispatchTo('admin-component', 'postAdded', ['key' => $row->id]),

is equivalent to:

html
<div>
    <button wire:click="$dispatchTo('admin-component', 'postAdded', { key: 1})">
</div>

๐Ÿ’ก TIP

Read more about Events in the Livewire documentation.


openModal() โ€‹

Opens a modal window using wire-elements/modal package. You must install Wire Elements to use this functionality.

ParameterDescription
(string) $componentYou must pass the View of Livewire Modal component.
(array, Closure) $paramsThis is the component parameter.

Example:

php
use PowerComponents\LivewirePowerGrid\Button;

Button::add('view')
    ->slot('View')
    ->class('btn btn-primary')
    ->openModal('view-dish', ['dish' => 'id']),

method() โ€‹

Sets the Action HTTP method.

ParameterDescription
(string) $methodValid methods: get/post/put/delete

Example:

php
use PowerComponents\LivewirePowerGrid\Button;

Button::add('view')
    ->slot('View')
    ->class('btn btn-primary')
    ->method('delete'),

route() โ€‹

Sets the Action route.

ParameterDescription
(string) $routeValid Laravel route
(array) $paramsRoute parameters

Example:

php
use PowerComponents\LivewirePowerGrid\Button;

Button::add('view')
    ->slot('View')
    ->class('btn btn-primary')
    ->route('dish.edit', ['dish' => $row->id]),

target() โ€‹

Sets the target for the specified route.

ParameterDefaultDefault
(string) $targetHTML href target_blank

Example:

php
use PowerComponents\LivewirePowerGrid\Button;

Button::add('view')
    ->slot('View')
    ->class('btn btn-primary')
    ->target('_self'),

can() โ€‹

Checks if the button has permission to be rendered.

ParameterDefaultDefault
(string) $allowedIf false, the button will not be rendered.true

Example:

php
use PowerComponents\LivewirePowerGrid\Button;

Button::add('edit-dish')
    ->slot('Edit')
    ->route('dish.edit', ['dish' => $row->id])
    ->can(allowed: auth()->check()),

tooltip() โ€‹

Sets the button's tooltip (title attribute).

Parameter
(string) $tooltip

Example:

php
use PowerComponents\LivewirePowerGrid\Button;

Button::add('edit-dish')
    ->slot('Edit')
    ->route('dish.edit', ['dish' => $row->id])
    ->tooltip('Edit Record'),

toggleDetail() โ€‹

Toggle (expand/collapse) the Detail Row.

Example:

php
use PowerComponents\LivewirePowerGrid\Button;

Button::add('toggle-detail')
    ->slot('Toggle Detail')
    ->toggleDetail(),

bladeComponent() โ€‹

Allows you to add a custom component overriding all default behavior

ParameterDefault
(string) $componentView component path (blade)
(array) $paramsBlade parameters

Example:

php
use PowerComponents\LivewirePowerGrid\Button;

Button::add('my-custom-button')
    ->bladeComponent('my-custom-button', ['dishId' => $row->id]),

render() โ€‹

Renders HTML.

ParameterDefault
(Closure) $closureClosure (Model)

Example:

php
use PowerComponents\LivewirePowerGrid\Button;

Button::add('custom')
     ->render(function ($dish) {
        return Blade::render(<<<HTML
<x-button.circle primary icon="pencil" wire:click="editStock('$dish->id')" />
HTML);
}),

id() โ€‹

Add custom html id attribute.

Parameter
(string) $value

The code below:

php
use PowerComponents\LivewirePowerGrid\Button;

Button::add('view')
    ->slot('View')
    ->class('btn btn-primary')
    ->id('view'),

is equivalent to:

html
<button id="view-1"> // 1 - is the value set in the current row using primaryKey = id.

Conditional Formatting โ€‹

See Conditional Rules.

Extending the Button::class โ€‹

You can extend the Button::class via Laravel's Macroable feature.

The class a has built-in dynamicProperties variable which can be used to store custom method parameters.

The following code adds a custom icon() method to the Button class.

php
use PowerComponents\LivewirePowerGrid\Button;

Button::macro('icon', function (string $name) {
    $this->dynamicProperties['icon'] = $name;

    return $this;
});

As a result, the method can now be chained to the class as demonstrated below:

php
use PowerComponents\LivewirePowerGrid\Button;

Button::add('new-modal')
    ->slot('New window')
    ->class('bg-gray-300')
    ->icon('fa-window')
    ->openModal('new', []),

Created By Luan Freitas and @DanSysAnalyst