Skip to content

Cell Action Buttons

Cell Action buttons can be configured in each column inside the columns() method.

This method is inside your PowerGrid file (e.g. DishTable.php).

Usage

You can add buttons to your each cell of a column by chaining Cell Action methods to Column::add().

The following example adds a toggleable button to each cell of "In Stock" column.

php
//...
public function columns(): array
{
    $canEdit = true; // User has edit permission

    return [
        Column::add()
            ->title('In Stock')
            ->field('in_stock')
            ->toggleable($canEdit, 'yes', 'no'),
    ];
}
//...
public function columns(): array
{
    $canEdit = true; // User has edit permission

    return [
        Column::add()
            ->title('In Stock')
            ->field('in_stock')
            ->toggleable($canEdit, 'yes', 'no'),
    ];
}

Cell Action Methods

These methods will add action buttons to each cell of a specific column in your Table.

editOnClick

  • When the user clicks on the link, the cell turns into an input text.

WARNING

This method is not available for Collection PowerGrid tables.

ParameterDescriptionDefault
(bool) $hasPermissionIf is true, an "action link" will be displayed in the cell.true
(?string) $fallbackIf the value is null and $fallback is filled, the input value will receive this value.null
(bool) $saveOnMouseOutIf $saveOnMouseOut is true, clicking anywhere outside will save the datafalse

The content can be edited and saved by pressing the <enter> key.

TIP

If $saveOnMouseOut is 'true', when pressing esc the value entered will be canceled and returned to the normal state.

Example:

php
//...
$canEdit = auth()->can('user_edit'); // User has edit permission

Column::add()
    ->title('Name')
    ->field('name'),
    ->editOnClick($canEdit),
//...
$canEdit = auth()->can('user_edit'); // User has edit permission

Column::add()
    ->title('Name')
    ->field('name'),
    ->editOnClick($canEdit),
Details

When pressing enter, powergrid will send the received value to a public property, which you can use however you want, but we recommend using the native powergrid method: onUpdatedEditable

php
public array $name = [];

public function onUpdatedEditable($id, $field, $value): void
{   
    User::query()->find($id)->update([
        $field => $value,
    ]);
}
public array $name = [];

public function onUpdatedEditable($id, $field, $value): void
{   
    User::query()->find($id)->update([
        $field => $value,
    ]);
}

Validation

WARNING

To do the validation, make sure you put $rules and the validate() method before saving

php
public array $name = [];

protected array $rules = [
     'name.*' => ['required', 'min:6'],
];

public function onUpdatedEditable($id, $field, $value): void
{   
    $this->validate();
    
    User::query()->find($id)->update([
        $field => $value,
    ]);
}
public array $name = [];

protected array $rules = [
     'name.*' => ['required', 'min:6'],
];

public function onUpdatedEditable($id, $field, $value): void
{   
    $this->validate();
    
    User::query()->find($id)->update([
        $field => $value,
    ]);
}

Result:

Output

WARNING

  • editOnClick on click requires Update Data method to be configured.
  • This feature is not available when using table.column notation on $primaryKey (E.g., $primaryKey = 'dishes.name')

toggleable

  • If isToggleable is true, the table cell will be converted into a toggleable button.

WARNING

This method is not available for Collection PowerGrid tables.

ParameterDescriptionDefault
(bool) $isToggleableenable/disable this featurefalse
(string) $trueLabel**Value if is truenull
(string) $falseLabel**Value if is truefalse

** When $isToggleable it is false, the table cell will contain the text passed in $trueLabel/$falseLabel, according to its boolean value.

This is useful when the user do not have permission to edit data and must see a text instead of a button.

Example:

php
//...
$canEdit = true; //User has edit permission

Column::add()
    ->title('In Stock')
    ->field('in_stock'),
    ->toggleable($canEdit, 'yes', 'no'),
//...
$canEdit = true; //User has edit permission

Column::add()
    ->title('In Stock')
    ->field('in_stock'),
    ->toggleable($canEdit, 'yes', 'no'),

TIP

To get the data from a toggleable, use the onUpdatedToggleable method

php
public function onUpdatedToggleable($id, $field, $value): void
{
   Dish::query()->find($id)->update([
       $field => $value,
   ]);
}
public function onUpdatedToggleable($id, $field, $value): void
{
   Dish::query()->find($id)->update([
       $field => $value,
   ]);
}

Result:

Output

WARNING

  • toggleable requires Update Data method to be configured.
  • This feature is not available when using table.column notation on $primaryKey (E.g., $primaryKey = 'dishes.name').

Created By Luan Freitas and DanSysAnalyst