Row Links & Modals

Make table rows clickable so users can navigate to a detail page or open a modal.

Row Links

Make each row a link to a URL:

$table->rowLink(fn($user) => route('users.show', $user));

The callback receives the row item (model instance) and must return a URL string or null.

Clicking anywhere on the row (except cells with clickable: false) navigates to the URL using an Inertia visit.

External Row Links (non-Inertia pages)

When the target page is not an Inertia page, use href: true to navigate with a plain browser redirect instead of an Inertia visit:

$table->rowLink(fn($ticket) => route('tickets.show', $ticket), href: true);

This sets rowLinkType to 'href' and uses window.location.href on click.

Row Modals

Open a modal instead of navigating:

$table->rowModal(fn($user) => route('users.edit', $user));

This sets rowLinkType to 'modal'. On click, the package fetches the URL with Accept: application/json and passes the response to your application's openModal function.

Host app requirement

The package dispatches a table-builder:open-modal DOM event on window. Listen for it wherever your modal system lives:

window.addEventListener('table-builder:open-modal', (e) => {
    openModal((e as CustomEvent).detail);
});

The URL must return JSON in this shape:

{
    "component": "MyModal",
    "title": "Optional title",
    "data": {}
}

component is the modal Vue component name. How you render it is up to your app - a common pattern is a ModalRenderer component that resolves components/${name}.vue dynamically and renders it inside a <dialog> or overlay.

Signature (rowLink)

rowLink(callable $callback, bool $modal = false, bool $href = false): self

Signature (rowModal)

rowModal(callable $callback): self

Conditional Links

Return null from the callback to make a specific row non-clickable:

$table->rowLink(function ($user) {
    if (! auth()->user()->can('view', $user)) {
        return null;
    }
    return route('users.show', $user);
});

Non-Clickable Cells

Individual columns can opt out of following the row link. This is useful for action columns (edit/delete buttons):

->column('actions', 'Actions', clickable: false, canBeHidden: false)

Primary Key

The row link system needs to identify each row. For Eloquent models this is automatic. For plain arrays or models with a non-standard primary key, configure it explicitly:

$table->primaryKey('uuid');

How It Works

1. After loading the resource, the table maps rowLinkCallable over every row to produce a rowLinks array.
2. This array is passed to the frontend alongside rowLinkType ('link', 'modal', or 'href').
3. The Vue component matches each row by index to its link URL and applies the appropriate click handler.