Inertia Table Documentation

Appearance

Row Links ​

Row Links turn each row in an Inertia Table into a clickable link, typically to navigate to a detail or edit page for the underlying record. They're defined in the same actions() method as row actions, but instead of a callback that performs an action, the callback returns a URL (or a Url object for new tabs, signed routes, modals, and more). Row Links require an ActionColumn to be present in the table's column array.

Introduction ​

Before defining a Row Link or a Row Action, include an ActionColumn in your Table's column array. The ActionColumn is where both are rendered. Without it, neither is displayed.

php
use InertiaUI\Table\Columns;

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

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

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: a Url object. Instead of returning a string, you may use this object to generate URLs and tweak navigation 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()
    ->prefetch('hover', cacheFor: '1m')
);

The preserveScroll(), preserveState(), openInNewTab(), asDownload(), disabled(), and hidden() methods accept a boolean argument 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 opens the URL in a modal or slideover via the Inertia Modal package. See the Modal Integration documentation for details.

Conditionable ​

The Url class uses Laravel's Conditionable trait, so you may avoid repeating conditions:

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 typically navigate via the Inertia Router, which expects a JSON response and does not support file downloads. To download a file instead, call asDownload() on the Action or Url object, or use the downloadUrl argument on make():

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);

Prefetch v4 ​

You may instruct Inertia to prefetch the link URL before the user clicks it by calling prefetch() on the Url object:

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

By default, prefetch() uses Inertia's default strategy. You may pass a strategy explicitly, and an optional cacheFor duration to control how long the prefetched response is cached:

php
->prefetch('hover')  // prefetch on hover
->prefetch('mount')  // prefetch when the component mounts
->prefetch('click')  // prefetch on mousedown, before click fires

->prefetch('hover', cacheFor: '1m')            // cache for 1 minute
->prefetch('hover', cacheFor: ['30s', '1m'])   // stale after 30s, expire after 1m

The cacheFor argument maps directly to Inertia's cacheFor prop on the <Link> component. Accepted formats are a duration string ('30s', '1m') or an array of two durations (['staleTime', 'expireTime']). See the Inertia.js prefetching documentation for the full list of strategies and caching options.

The Variant enum from Badge Column styling may also be used to style Row Links, via 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();

To skip the built-in variants, pass a custom class name to the linkClass argument or the linkClass() method:

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

Alternatively, you may use the asLink() method and 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 render as text links. To render them as buttons, call the asButton() method:

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

Pass a Variant enum value or a string of custom classes to asButton() 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();

Icons ​

You may add an icon to a Row Link via the icon() method or the icon argument on make(). See the Icons documentation for details on wiring up an icon library.

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

Icon-only ​

To show only the icon and hide the label, call the hideLabel() method:

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

Data Attributes ​

You may add Data Attributes to Row Links via the dataAttributes argument on make() or the dataAttributes() method. Keys do not need a data- prefix.

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

You may target Row Links by their data attributes. For example, to style the Row Link with the data-action="edit-user" attribute:

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

Metadata ​

You may attach metadata to an Action via the meta argument on make() or the meta() method:

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

The default Table component ignores this metadata and does not pass it to any DOM element. It becomes useful when extending the Table component using slots, or when building a custom Table component.