Skip to content

Row Action Buttons

Row Action buttons can be configured inside actions() method, for each row or header() method.

Usage

To add a button, include a new Button::add(string $action) in the actions(array|Model $row) or header() method.

TIP

The $row parameter in actions indicates each item in your data source. It can be an array or a model.

Next, place your Button::add(string $action) code inside the method's return [] statement.

Then, configure this Button by chaining Button methods to it.

Example:

php
//..
public function header(): array
{
    return [
        Button::add('new-modal')
            ->slot('New window')
            ->class('bg-gray-300')
            ->openModal('new', []),
            
        //...
    ];
}

//..
public function actions(Dish $row): array
{
    return [
        Button::add('create-dish')  
            ->slot('Create a dish')
            ->class('bg-indigo-500 text-white')
            ->dispatch('postAdded', ['key' => $row->id]),
        //...
    ];
}
//..
public function header(): array
{
    return [
        Button::add('new-modal')
            ->slot('New window')
            ->class('bg-gray-300')
            ->openModal('new', []),
            
        //...
    ];
}

//..
public function actions(Dish $row): array
{
    return [
        Button::add('create-dish')  
            ->slot('Create a dish')
            ->class('bg-indigo-500 text-white')
            ->dispatch('postAdded', ['key' => $row->id]),
        //...
    ];
}

The example above generates a gray button. When clicked, this button opens a new modal window.

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
//..
Button::add('create-dish')
//..
Button::add('create-dish')

slot

Render the html.

ParameterDescription
(string) $slotrender html

Example:

php
//..
Button::add('create-dish')  
    ->slot('Create a dish')
//..
Button::add('create-dish')  
    ->slot('Create a dish')

class

  • Sets the button CSS class attribute.
ParameterDescription
(string) $classAttrHTML class value

Example:

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

dispatch

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

TIP

Read more about Events in the Livewire documentation.

The code below:

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

is equivalent to:

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

dispatchTo

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

TIP

Read more about Events in the Livewire documentation.

The code below:

php
//...
Button::add('view')
    ->slot('View')
    ->class('btn btn-primary')
    ->dispatchTo('admin-component', 'postAdded', ['key' => $row->id]),
//...
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>
<div>
    <button wire:click="$dispatchTo('admin-component', 'postAdded', { key: 1})">
</div>

openModal

  • Opens a modal window with wire-elements/modal packages
ParameterDescription
(string) $componentYou must pass the View of Livewire Modal component.
(array, Closure) $paramsThis is the component parameter.

WARNING

You must install Wire Elements Modal to use this functionality. More information is also available at its documentation.

Example:

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

method

  • Sets the action's HTTP method.
ParameterDescription
(string) $methodValid methods: get/post/put/delete

Example:

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

route

  • Sets the action's route.
ParameterDescription
(string) $routeValid Laravel route
(array) $paramsRoute parameters

Example:

php
//...
Button::add('view')
    ->slot('View')
    ->class('btn btn-primary')
    ->route('dish.edit', ['dish' => $row->id]),
//...
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
//...
Button::add('view')
    ->slot('View')
    ->class('btn btn-primary')
    ->target('_self'),
//...
Button::add('view')
    ->slot('View')
    ->class('btn btn-primary')
    ->target('_self'),

can

  • Sets Action's permission.
ParameterDefaultDefault
(string) $canIf is false, the button will not be rendered.true

Example:

php
$canClickButton = true; // User has permission to edit

Button::add('edit-dish')
    ->slot('Edit')
    ->route('dish.edit', ['dish' => $row->id])
    ->can($canClickButton),
$canClickButton = true; // User has permission to edit

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

tooltip

  • Sets the button tooltip (title attribute).
Parameter
(string) $tooltip

Example:

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

toggleDetail

Example:

php
Button::add('toggle-detail')
    ->slot('Toggle Detail')
    ->toggleDetail(),
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
Button::add('my-custom-button')
    ->bladeComponent('my-custom-button', ['dishId' => $row->id]),
Button::add('my-custom-button')
    ->bladeComponent('my-custom-button', ['dishId' => $row->id]),

view/components/my-custom-button.blade.php

html
<button type="button"
        class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
    My Custom Button #{{ $dishId }}
</button>
<button type="button"
        class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
    My Custom Button #{{ $dishId }}
</button>

Output

html
<button type="button"
        class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
    My Custom Button #1
</button>
<button type="button"
        class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
    My Custom Button #1
</button>

render

  • Allows you to render HTML
ParameterDefault
(Closure) $closureClosure (Model)

Example:

php
Button::add('custom')
     ->render(function (Dish $dish) {
        return Blade::render(<<<HTML
<x-button.circle primary icon="pencil" wire:click="editStock('$dish->id')" />
HTML);
}),
Button::add('custom')
     ->render(function (Dish $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
//...
Button::add('view')
    ->slot('View')
    ->class('btn btn-primary')
    ->id('view'),
//...
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.
<button id="view-1"> // 1 - is the value set in the current row using primaryKey = id.

Advanced usage

While the standard button methods can handle most tasks, there may be times when you need to customize the Button class to add extra functionality. Below are some examples of how to do so without interiefing with package internals.

Extending Button class

While Button class cannot be extended directly, it is possible to add methods using macros. Also, this class has built-in dynamicProperties variable which can be used to store custom method parameters.

The following code shows how a custom icon method can be added to Button class.

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

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

    return $this;
});

WARNING

Macros should only be placed in service providers.

With mentioned additions icon can be accessed as regular method.

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

Created By Luan Freitas and DanSysAnalyst