Row Actions

Introduction

Row Actions can be used to perform actions on a single row in a table. Row Actions can be configured to require a confirmation dialog before performing the action. Just like Row Links, Row Actions require the ActionColumn to be included in the Table's column array.

use InertiaUI\Table\Columns;

class Users extends Table
{
    public function columns(): array
    {
        return [
            Columns\TextColumn::make('email'),
            Columns\ActionColumn::new(),
        ];
    }
}

Defining Row Actions

To define a Row Action, pass the label as the first argument and use the handle argument to define the action to be performed. The handle argument should be a callback that accepts the Model instance as the first argument.

use App\Models\User;
use InertiaUI\Table\Action;

class Users extends Table
{
    public function actions(): array
    {
        return [
            Action::make('Activate', handle: fn (User $user) => $user->activate()),
        ];
    }
}

Note that the handle callback is performed using a regular HTTP request, so make sure that the action doesn't take too long to complete. If you need to perform a long-running task, consider using a queued job.

Disabling Row Actions

You can disable a Row Action by using the disabled() method or disabled argument. The disabled argument should be a boolean or a callback that returns a boolean value.

Action::make(
    label: 'Activate',
    handle: fn (User $user) => $user->activate()
    disabled: !auth()->user()->is_admin
);

When you pass a callback to the disabled argument, it accepts the Model as argument:

Action::make('Activate', handle: fn (User $user) => $user->activate())
    ->disabled(fn (User $user) => $user->is_active);

Please note that, visually, the disabled state is only applied to the Row Action; it does not visually change anything in the Bulk Actions dropdown. You can still select a row and click on a Bulk Action, but it takes the disabled state into account when looping through the selected rows by not executing the action on the disabled rows.

Hiding Row Actions

You can hide a Row Action by using the hidden() method or hidden argument. Just like the disabled argument, the hidden argument should be a boolean or a callback that returns a boolean value.

Action::make(
    label: 'Restore',
    handle: fn (User $user) => $user->restore(),
    hidden: fn (User $user) => ! $user->trashed()
);

Just like disabling, the hidden state is only applied to the Row Action; it does not visually change anything in the Bulk Actions dropdown. However, you can make rows unselectable. Please refer to the Bulk Actions documentation for more information on how to make rows unselectable.

Disabling and Hiding simultaneously

Good chances are that you want to both disable and hide a Row Action based on the same condition. In that case, you can use the disabledAndHidden method or the disabledAndHidden argument.

Action::make(
    label: 'Delete',
    handle: fn (User $user) => $user->delete(),
    disabledAndHidden: fn (User $user) => $user->has_pending_invoice
);

Redirecting After Action

You can redirect the user to a different URL after the action is performed by using the after argument on the make() method. The after argument accepts both a string URL or a callback that returns a URL.

Action::make(
    label: 'Activate',
    handle: fn (User $user) => $user->activate(),
    after: '/activated-users'
);

Confirmation Dialog

By default, Row Actions will not show a confirmation dialog before performing the action. To enable a confirmation dialog, use the confirm argument on the Action instance:

Action::make('Delete', handle: fn (User $user) => $user->delete())->confirm();

Here are the default texts for the confirmation dialog:

Text	Default Value
Title	"Confirm action"
Message	"Are you sure you want to perform this action?"
Confirm Button	"Yes"
Cancel Button	"Cancel"

You can customize the confirmation dialog by passing alternative texts to the confirm() method:

Action::make('Delete', handle: fn (User $user) => $user->delete())->confirm(
    title: 'Delete User',
    message: 'Are you sure you want to delete this user?',
    confirmButton: 'Delete',
    cancelButton: 'Cancel'
);

Alternatively, you may pass the texts as named arguments to the make() method, but this also requires passing the confirmRequired argument as true:

Action::make(
    label: 'Delete',
    handle: fn (User $user) => $user->delete(),
    confirmationRequired: true,
    confirmationTitle: 'Delete User',
    confirmationMessage: 'Are you sure you want to delete this user?',
    confirmationConfirmButton: 'Delete',
    confirmationCancelButton: 'Cancel'
);

Action Button styling

You can customize the button styling by passing a class name to the buttonClass argument: To display a row link as a primary or danger button, you can use the asPrimaryButton() or asDangerButton() method.

Action::make('Activate', handle: fn (User $user) => $user->activate())->asPrimaryButton();
Action::make('Suspend', handle: fn (User $user) => $user->delete())->asDangerButton();

Alternatively, you can use the style argument to specify the button style with the ActionStyle enum.

use InertiaUI\Table\ActionStyle;

Action::make(
    label: 'Activate',
    handle: fn (User $user) => $user->activate(),
    style: ActionStyle::PrimaryButton
);

Custom Actions in the Frontend

If you want to handle the action customly in the frontend, you can simple discard the handle argument:

Action::make('Custom Action');

In the frontend, you must define a callback to handle the action. The callback should accept the action object, an array of keys, and a callback to call when the action is finished. The onFinish callback ensures that the loading state is removed.

Vue

<script setup>
import { Table } from 'inertiaui/table'

function handleCustomAction(action, keys, onFinish) {
    // Perform the action...
    onFinish();
}
</script>

<template>
    <Table :resource="users" @custom-action="handleCustomAction" />
</template>

React

import { Table } from 'inertiaui/table'

function handleCustomAction(action, keys, onFinish) {
    // Perform the action...
    onFinish();
}

export default function Users({ users }) {
    return (
        <Table resource={users} onCustomAction={handleCustomAction} />
    );
}

To make the action more recognizable in the frontend, you can use the id argument or method to give the action a unique identifier.

Action::make('Activate', id: 'activate_user');
Action::make('Delete')->id('delete_user');

Alternatively, you can use Metadata to add additional data to the action.

Action::make('Activate')->meta(['using' => 'customActivator']);

This data can be accessed in the frontend by using the meta property on the action object.

function handleCustomAction(action, keys, onFinish) {
    if (action.id === 'activate_user') {
        // Perform the action with the ID 'activate_user'
    }

    if (action.meta.using === 'customActivator') {
        // Perform the action using a custom activator
    }
    onFinish();
}

Success and Error events

You can define a callback to be executed after the action is performed successfully or when an error occurs. Please note that these events are not fired when you use custom actions.

Success Event

The callback will receive the action object and an array of keys as arguments.

Vue

<script setup>
import { Table } from 'inertiaui/table'

function handleActionSuccess(action, keys) {
    console.log(`Action '${action.id}' with keys ${keys.join(',')} was successful`);
}
</script>

<template>
    <Table :resource="users" @action-success="handleActionSuccess" />
</template>

React

import { Table } from 'inertiaui/table'

function handleActionSuccess(action, keys) {
    console.log(`Action '${action.id}' with keys ${keys.join(',')} was successful`);
}

export default function Users({ users }) {
    return (
        <Table resource={users} onActionSuccess={handleActionSuccess} />
    );
}

Error Event

By default, the component will show a dialog with a generic error message when an error occurs during the action. When you pass a callback to handle the error, the dialog will not be shown, and you need to handle the error yourself.

Vue

<script setup>
import { Table } from 'inertiaui/table'

function handleActionError(action, keys, error) {
    console.error(`Action '${action.id}' with keys ${keys.join(',')} failed with error: ${error}`);
}
</script>

<template>
    <Table :resource="users" @action-error="handleActionError" />
</template>

React

import { Table } from 'inertiaui/table'

function handleActionError(action, keys, error) {
    console.error(`Action '${action.id}' with keys ${keys.join(',')} failed with error: ${error}`);
}

export default function Users({ users }) {
    return (
        <Table resource={users} onActionError={handleActionError} />
    );
}

Data Attributes and Metadata

Check out the Row Links documentation for more information on how to add Data Attributes and Metadata to Row Actions.