# Direct envelope

> Render a supplied table response in previews, tests, or a custom integration.

Source: https://docs.inertiax.dev/table/guide/direct-rendering/

Direct envelope means your own code hands the renderer a complete table response, with no Inertia adapter in between. Use `InertiaXRenderer` for previews, tests, or your own integration. For Laravel + Inertia pages, use [With Inertia](https://docs.inertiax.dev/table/guide/inertia/).

The renderer shows the response you supply. Search, sorting, filters and pagination update its controls but fetch no new rows unless you provide an integration; see [Data updates](https://docs.inertiax.dev/table/guide/direct-rendering/#data-updates).

For this direct-rendering path, install `@inertiax/react-table` alongside your application’s React and React DOM. It brings its Table Core and Table Protocol dependencies; the shared `@inertiax/react` service provider and `@inertiax/react-inertia` adapter are unnecessary.

## Render a supplied envelope

**React**

```tsx
import { TableProvider, InertiaXRenderer } from '@inertiax/react-table';
import '@inertiax/react-table/styles.css';

export function Preview({ rawEnvelope }: { rawEnvelope: unknown }) {
  return (
    <TableProvider>
      <InertiaXRenderer envelope={rawEnvelope} />
    </TableProvider>
  );
}
```

An envelope is the complete serialized table response produced by Laravel. The renderer validates it and displays the built-in table. Theme, regions, events, and hooks work as described in [React customization API](https://docs.inertiax.dev/table/reference/react/).

## Data updates

The direct renderer’s default in-memory integration updates state but returns the supplied rows. It does not query Laravel, write a URL, or recompute search, sorting, filtering, or pagination. Supply a new envelope when the preview data changes.

For server interactions through another host, `InertiaXIntegrationRenderer` accepts a `TableIntegrationFactory` from `@inertiax/table-core`. The factory owns the bridge to that host: initial data, dispatch, cancellation, result correlation, updates, and any location behavior. Laravel + React + Inertia is the tested full-stack integration; other hosts require your own implementation and verification.

## Ownership and disposal

| Surface                           | Owner                                                                            |
| --------------------------------- | -------------------------------------------------------------------------------- |
| `TableProvider` without `runtime` | Creates and disposes its runtime                                                 |
| `TableProvider runtime={runtime}` | Caller owns the supplied runtime                                                 |
| `InertiaXRenderer`                | Creates and disposes its session                                                 |
| `InertiaXIntegrationRenderer`     | Owns its session; caller owns the supplied integration factory and its resources |
| `TableRenderer session={session}` | Caller owns the supplied session                                                 |

Dispose caller-owned resources when their owning application scope ends.

When Activity or Suspense retains a table, the renderer preserves valid interaction state and resumes interrupted work when shown again. Unmounting the table ends its lifetime. See [Session lifecycle](https://docs.inertiax.dev/table/reference/react/#session-lifecycle) for custom session ownership, runtime replacement, and restoring saved state.

## Validate input separately

The renderer already decodes its input. Use the protocol decoder if your integration needs to inspect a response before rendering:

**React**

```ts
import { decodeTableEnvelope, ProtocolDecodeError } from '@inertiax/table-protocol';

export function decodeForPreview(input: unknown) {
  try {
    return decodeTableEnvelope(input);
  } catch (error) {
    if (error instanceof ProtocolDecodeError) {
      console.error(error.code, error.path);
    }
    throw error;
  }
}
```

Declare `@inertiax/table-core` or `@inertiax/table-protocol` as a direct dependency when your own source imports it. Use versions compatible with the installed `@inertiax/react-table` package.

See [Protocol reference](https://docs.inertiax.dev/table/protocol/) for envelope validation and [Registration & diagnostics](https://docs.inertiax.dev/table/guide/registration/#diagnose-a-missing-renderer) for custom renderer fallbacks.