With Inertia

This is the path the Introduction assumes. Without Inertia, see Direct envelope.

After the app setup, return the table as an Inertia prop and render it with your AppTable binding:

Laravel

return Inertia::render('users/index', [
    UsersTable::make('users')->data($users),
]);

React

import { AppTable } from '@/components/app-table';

export default function UsersIndex() {
  return <AppTable prop="users" />;
}

AppTable is the application component created during installation. It passes the query service to Table from @inertiax/react-table. Search, filters, sorting, and pagination trigger partial reloads of the named prop.

Customize one table

React

<AppTable
  prop="users"
  debounceMs={250}
  customization={{ texts: { empty: { label: 'No matching users.' } } }}
/>

Use customization for styling, renderers, and events. debounceMs changes the search and filter request delay.

See Multiple tables to render independent instances, or Request lifecycle for URL state, request timing, and retry behavior.

Deferred table props

To load a table after the page, wrap it in Inertia’s defer() under its own name:

Laravel

return Inertia::render('users/index', [
    'users' => Inertia::defer(fn () => UsersTable::make('users')->data($users)),
]);

The key must be the table’s name, because the page reloads the prop by that name. Inertia’s optional() and always() wrap a table the same way.

Show a fallback until the table arrives:

React

import { usePage } from '@inertiajs/react';
import { AppTable } from '@/components/app-table';

export default function UsersIndex() {
  const { users } = usePage().props;
  return users === undefined ? <p>Loading users…</p> : <AppTable prop="users" />;
}

With Inertia 2, use this prop check instead of wrapping the table in Deferred. That wrapper unmounts the table during matching reloads, which cancels its request. The prop check keeps the table mounted while search, filters, or pagination reload its data.

Invalid table links

Stale pagination and invalid URL settings show a problem inside the table. Users can reset the affected settings; other tables and page content remain available.

Browser history

Table interactions update the current history entry. Back and Forward restore the table’s URL state without stepping through every search or filter change. If navigation interrupts a search, returning to the page loads the results for its restored URL.

Share a table link

Use the component ID from OrdersTable::make('orders') in URL keys, even if a custom integration reads a differently named prop. For example:

/orders?orders_search=acme&orders_page=2

See URL state for encoded sort and filter links and default omission, and Testing tables for response assertions. If you build your own adapter, see Inertia integration options.