Inertia Table Documentation

Appearance

Row Links ​

Introduction ​

Row Links and actions can be used to provide additional functionality to the rows in a table. They can be used to navigate to a different page or perform an action. Before defining Row Links and actions, it is necessary to include the ActionColumn in the Table's column array. The ActionColumn is a special column that is used to define Row Links and actions. Without the ActionColumn, Row Links and actions will not be displayed.

php
use InertiaUI\Table\Columns;

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

Row Links are used to navigate to a different page when. To define a row link, pass the label as the first argument and a callback as the second argument. The callback should return the URL to navigate to when the row link is clicked.

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

class Users extends Table
{
    public function actions(): array
    {
        return [
            Action::make('Edit', fn (User $user) => '/users/'.$user->id.'/edit'),
        ];
    }
}

Using the Url object ​

The callback accepts a second argument, which is a Url object. Instead of returning a string URL, you can use the Url object to generate URLs and tweak behavior.

php
use InertiaUI\Table\Url;

Action::make('Edit', fn (User $user, Url $url) => $url->route('users.edit', $user));

The Url object has the following methods:

php
Action::make('Edit', fn (User $user, Url $url) => $url
    ->to('/users/'.$user->id.'/edit')
    ->route('users.edit', $user) // Same as URL::route()
    ->signedRoute('users.edit', $user) // Same as URL::signedRoute()
    ->temporarySignedRoute('users.edit', now()->addMinutes(30), $user) // Same as URL::temporarySignedRoute()
    ->preserveScroll()
    ->preserveState()
    ->openInNewTab()
    ->asDownload()
    ->disabled()
    ->hidden()
    ->modal()
);

The preserveScroll(), preserveState(), openInNewTab(), asDownload(), disabled(), and hidden() methods accept a boolean argument that can be used to enable or disable the behavior:

php
Action::make('Edit', fn (User $user, Url $url) => $url
    ->route('users.edit', $user)
    ->disabled(!auth()->user()->is_admin)
);

The modal() method can be used to open the URL in a modal or slideover using the Inertia Modal package. Check out the Modal Integration documentation to learn more about this.

Conditionable ​

The Url class uses Laravel's Conditionable trait, which can help prevent repeating the condition:

php
Action::make('Edit', fn (User $user, Url $url) => $url
    ->route('users.edit', $user)
    ->when(
        auth()->user()->is_admin,
        fn (Url $url) => $url->openInNewTab(),
        fn (Url $url) => $url->disabled()
    )
);

Downloading Files ​

Row Links usually navigate with the Inertia Router, which expects a JSON response and doesn't support file downloads. To download a file when a Row Link is clicked, you can use the asDownload() method on the Action or Url object, or use the downloadUrl argument in the make() method.

php
// Call 'asDownload()' on the Action object
Action::make('Invoice', fn (Order $order) => $order->invoice_url)->asDownload();

// Call 'asDownload()' on the Url object
Action::make('Invoice', fn (Order $order, Url $url) => $url->to($order->invoice_url)->asDownload());

// Use the 'downloadUrl' argument in the 'make()' method
Action::make('Invoice', downloadUrl: fn (Order $order) => $order->invoice_url);

You might have seen the Variant enum in the Badge Column styling documentation. You can use this enum to style the Row Link by using the variant method or the variant argument.

php
use InertiaUI\Table\Variant;

Action::make(
    label: 'Details',
    url: fn (Order $order) => route('orders.show', $order),
    variant: Variant::Info
);

You may also use one of the helper methods to style the Row Link:

php
Action::make(...)->asDangerLink();
Action::make(...)->asDefaultLink();
Action::make(...)->asInfoLink();
Action::make(...)->asPrimaryLink(); // alias of asInfoLink()
Action::make(...)->asSuccessLink();
Action::make(...)->asWarningLink();

If you don't want to use the built-in variants, you can pass a custom class name to the linkClass argument or to the linkClass() method.

php
Action::make('Details')->linkClass('custom-link');

Alternatively, you can use the asLink() method to pass either a Variant enum or a custom class name.

php
Action::make('Status overview')->asLink(Variant::Info);
Action::make('Secret link')->asLink('link-special-purple');

By default, Row Links are displayed as text links. To display Row Links as buttons, you can use the asButton() method.

php
Action::make('Edit', fn (User $user) => route('users.edit', $user))->asButton();

You can pass a Variant enum value or a string with custom classes to the asButton() method to style the button, or use one of the helper methods:

php
Action::make('Order confirmation')->asButton(Variant::Success);
Action::make('Secret link')->asButton('btn-special-pink');
Action::make('Review')->asInfoButton();

What happened to the style argument?

To support more button styles and custom styling, we split the Row Link and Action styling into the Variant enum and the ActionType enum. Additionally, we wanted to avoid confusion with the CSS style attribute. The old style argument is still available for backward compatibility; however, it is recommended that you update your code.

Icons ​

You can add an icon to the Row Link by using the icon() method, or by using the icon argument in the make() method. Please read the Icons documentation to learn how to use icons in the package.

php
Action::make(
    label: 'Edit',
    url: fn (User $user) => route('users.edit', $user),
    icon: 'PencilIcon'
);

Icon-only ​

You can display only the icon without the label by using the hideLabel() method.

php
Action::make('Edit', fn (User $user) => route('users.edit', $user))
    ->icon('PencilIcon')
    ->hideLabel();

Data Attributes ​

You can add Data Attributes to the Row Links by using the dataAttributes argument in the make() method or by using the dataAttributes method. You don't have to prefix the keys with data-.

php
Action::make('Edit', fn (User $user) => route('users.edit', $user))
    ->dataAttributes(['action' => 'edit-user']);

You can target the Row Link with specific data attributes using CSS. For example, to style the Row Link with the data-action="edit-user" attribute, you can use the following CSS:

css
button[data-action="edit-user"] {
    /* ... */
}

Metadata ​

You can add metadata to Actions by using the meta argument in the make() method or by using the meta() method.

php
Action::make(
    label: 'Edit',
    url: fn (User $user) => route('users.edit', $user),
    meta: ['key' => 'value'],
);

In the default Table component, this metadata is unused and not passed to any DOM element. However, this feature can be useful when extending the Table component using slots, or when you build a custom Table component.