# With Inertia

> Render a named table prop and customize its React component.

Source: https://docs.inertiax.dev/table/guide/inertia/

This is the path the [Introduction](https://docs.inertiax.dev/table/) assumes. Without Inertia, see [Direct envelope](https://docs.inertiax.dev/table/guide/direct-rendering/).

After the [app setup](https://docs.inertiax.dev/table/installation/), return the table as an Inertia prop and render it with your `AppTable` binding:

**Laravel**

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

**React**

```tsx
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**

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

Use `customization` for [styling](https://docs.inertiax.dev/table/guide/styling/), [renderers](https://docs.inertiax.dev/table/guide/custom-renderers/), and [events](https://docs.inertiax.dev/table/guide/controller-events/). `debounceMs` changes the search and filter request delay.

See [Multiple tables](https://docs.inertiax.dev/table/guide/multiple-tables/) to render independent instances, or [Request lifecycle](https://docs.inertiax.dev/table/guide/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**

```php
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**

```tsx
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](https://docs.inertiax.dev/table/guide/url-recovery/). 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:

```text
/orders?orders_search=acme&orders_page=2
```

See [URL state](https://docs.inertiax.dev/table/guide/url-state/) for encoded sort and filter links and default omission, and [Testing tables](https://docs.inertiax.dev/table/guide/testing/) for response assertions. If you build your own adapter, see [Inertia integration options](https://docs.inertiax.dev/table/reference/inertia-integration/).