Skip to content

Conditional Action Rules โ€‹

This section covers the Conditional Action Rules feature.

Here you will find:

Introduction โ€‹

Many web applications require the ability to control how data is displayed and what actions are available to the user based on certain conditions.

For example, you may want to remove a button if the user lacks the necessary permissions for that particular action, or display a red background to indicate that a product is no longer available.

PowerGrid provides a set of Action Rules that you can use to control the style, visibility, and behavior of Table rows, checkboxes, and buttons. These rules can be combined to meet specific conditions and requirements.

Usage โ€‹

Action Rules are registered inside the method actionRules() in your Table Component class.

Rules can be applied to 3 different targets: Rows, Buttons and checkboxes. A target may appear in more than one rule.

Each Rule consists of a target object and a single condition that must be satisfied, along with any number of modifiers. The modifiers will be applied once the condition is met.

To add a Rule, you must add a call to Rule::class, and proceed by defining a target using the methods button(), row() or checkbox. Next, you must chain a condition using the method when() and proceed by chaining modifiers.

For instance, a single button can be the target of two different rules. The first rule will change the button text and its background if the price is under a certain amount. The second rule will disable the button if the product is sold out.

In addition to these two Rules, we can also hide the checkboxes and change the row background when the product is out of stock.

Let's see the code for the example above:

php
// app/Livewire/DishTable.php

use PowerComponents\LivewirePowerGrid\PowerGridComponent;
use PowerComponents\LivewirePowerGrid\Facades\Rule; 

class DishTable extends PowerGridComponent
{
    public function actionRules(): array
    {
        return [                
            Rule::button('order-dish')
                ->when(fn($dish) => $dish->price < 100)
                ->slot('Order NOW! ๐Ÿ”ฅ')
                ->setAttribute('class', '!bg-orange-400'),

            Rule::button('order-dish')
                ->when(fn($dish) => $dish->in_stock === false)
                ->hide()

            Rule::checkbox()
                ->when(fn ($dish) => $dish->in_stock == false)
                ->hide(),
                
            Rule::rows()
                ->when(fn ($dish) => $dish->in_stock == false)
                ->setAttribute('class', '!bg-red-200'),
        ];
    }
}

๐Ÿš€ See it in action

See an interactive example using Conditional Rules on a Table.

Performance โ€‹

Actions Rules are processed on the server side. If you are working with many Rules or caching data, you should consider using Actions From View to improve your application's performance.

Conditional Cell Data Formatting โ€‹

See Custom Fields and Formatting Data Examples.

Modifiers โ€‹

The Modifiers will take effect when the Rule condition is satisfied.

Available methods:


disable() โ€‹

Disables the Rule target (available for Buttons and Checkboxes).

Example:

php
use PowerComponents\LivewirePowerGrid\Facades\Rule;

Rule::button('order-dish')
    ->when(fn($dish) => $dish->in_stock == false)
    ->disable(),

dispatch() โ€‹

Sets the event to be emitted by the Rule target (available for Buttons).

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

๐Ÿ’ก TIP

Read more about Dispatch in the Livewire documentation.

Example:

php
use PowerComponents\LivewirePowerGrid\Facades\Rule;

Rule::button('order-dish')
    ->when(fn($dish) => $dish->is_spicy == true)
    ->dispatch('showSpiceAlert', ['id' => 'id']),

dispatchTo() โ€‹

Sets the target component and the event name to be emitted by the Rule target (available for Buttons).

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

Example:

php
use PowerComponents\LivewirePowerGrid\Facades\Rule;

Rule::button('order-dish')
    ->when(fn($dish) => $dish->is_spicy == true)
    ->dispatchTo('alert-component', 'showSpiceAlert', ['id' => 'id']),

๐Ÿ’ก TIP

Read more about Dispatch in the Livewire documentation.


hide() โ€‹

Hides the Rule target (available for Buttons and Checkboxes).

Example:

php
use PowerComponents\LivewirePowerGrid\Facades\Rule;

Rule::checkbox()
    ->when(fn($dish) => $dish->in_stock == false)
    ->hide(),

hideToggleable() โ€‹

Hides the Toggleable Switch for the row. See also showToggleable().

Note that this feature will only hide the Toggleable, not disable it.

Example:

php
use PowerComponents\LivewirePowerGrid\Facades\Rule;

Rule::rows()
    ->when(fn ($dish) => $dish->trashed() == true)
    ->hideToggleable(),

redirect() โ€‹

Sets Rule target's redirect URL (available for Buttons).

ParameterDescriptionDefault
(Closure) $closureClosurenull
(string) $targetHTML href target_blank

Example:

php
use PowerComponents\LivewirePowerGrid\Facades\Rule;

Rule::button('order-dish')
    ->when(fn($dish) => $dish->is_new == true)
    ->redirect(fn($dish) => 'https://www.google.com/search?q='.urlencode(e($dish->name)), '_blank'),

loop() โ€‹

Interacts with the Row index.

The example below generates a zebra striped Table by applying a background on even rows.

php
use PowerComponents\LivewirePowerGrid\Facades\Rule;

Rule::rows()
    ->loop(fn ($loop) => $loop->index % 2)
    ->setAttribute('class', '!bg-gunmetal-100'),

slot() โ€‹

Sets the Rule target slot content (available for Buttons).

Parameter
(string) $slot
php
use PowerComponents\LivewirePowerGrid\Facades\Rule;

Rule::button('order-dish')
    ->when(fn($dish) => $dish->on_sale == true)
    ->slot('Order ๐Ÿ’ฐ ON SALE ๐Ÿ’ฐ'),

setAttribute() โ€‹

Sets a value to the Rule target attribute.

ParameterDescription
(string) $attributeHTML attribute (class,id, x-on:click ...)
(string) $valueAttribute value

Example:

php
use PowerComponents\LivewirePowerGrid\Facades\Rule;

Rule::rows()
    ->when(fn($dish) => $dish->in_stock == false)
    ->setAttribute('class', '!bg-red-200'),

When using Buttons as targets, you may chain as many setAttribute() methods as need.

php
use PowerComponents\LivewirePowerGrid\Facades\Rule;

Rule::button('order-dish')
    ->when(fn($dish) => $dish->in_stock == false)
    ->setAttribute('class', '!bg-red-200')
    ->setAttribute('wire:click', ['action' => [
        'params' => 1,
        'dishId' => 'id',
    ]]),

showToggleable() โ€‹

Shows the Toggleable Switch for the row. See also hideToggleable().

php
use PowerComponents\LivewirePowerGrid\Facades\Rule;

Rule::rows()
    ->when(fn ($dish) => $dish->trashed() == false)
    ->showToggleable(),

bladeComponent() โ€‹

Changes the Blade Component in the Rule target.

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

Example:

php
use PowerComponents\LivewirePowerGrid\Facades\Rule;

Rule::button('order-dish')
    ->when(fn($dish) => $dish->in_stock == false)
    ->bladeComponent('another-custom-button', ['dishId' => 'id']),

Created By Luan Freitas and @DanSysAnalyst