Direct envelope

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.

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.

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

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.

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

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 for envelope validation and Registration & diagnostics for custom renderer fallbacks.