Installation

Install InertiaX into an existing Laravel + Inertia + React application. Starting a new app? Use Laravel’s React starter kit first.

Requirements

Your application should already use:

PHP 8.3, 8.4, or 8.5;
Laravel 12 or 13;
React 19.1.1 or newer within React 19;
Inertia’s Laravel adapter 2.0.5+ and React adapter 2.3.18+, both within 2.x, or both adapters on 3.x.

See Compatibility for the tested combinations.

Connect the InertiaX registry

Install InertiaX

Install the Laravel package

Install it in the existing application:
Laravel
Terminal window
composer require inertiax/laravel-table
Laravel discovers the package automatically. The standard Table workflow does not require publishing a configuration file.
Install the frontend packages

Install the renderer and Inertia integration with your preferred package manager:
React
pnpm
npm
Yarn
Bun
Terminal window
pnpm add @inertiax/react-table @inertiax/react @inertiax/react-inertia
Terminal window
npm install @inertiax/react-table @inertiax/react @inertiax/react-inertia
Terminal window
yarn add @inertiax/react-table @inertiax/react @inertiax/react-inertia
Terminal window
bun add @inertiax/react-table @inertiax/react @inertiax/react-inertia

Load the styles

Import the stylesheet in your existing browser entry:

React

import '@inertiax/react-table/styles.css';

The compiled, scoped stylesheet needs no Tailwind configuration. If you already use base.css with custom styling, keep that stylesheet.

Add the providers

Wrap the content of your shared layout in both providers. In the current React starter kit (Inertia 3), that is AppLayout, which the layout option of createInertiaApp keeps mounted between pages:

React

import { InertiaProvider } from '@inertiax/react-inertia';
import { TableProvider } from '@inertiax/react-table';
import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout';
import type { BreadcrumbItem } from '@/types';

export default function AppLayout({
    breadcrumbs = [],
    children,
}: {
    breadcrumbs?: BreadcrumbItem[];
    children: React.ReactNode;
}) {
    return (
        <InertiaProvider>
            <TableProvider>
                <AppLayoutTemplate breadcrumbs={breadcrumbs}>
                    {children}
                </AppLayoutTemplate>
            </TableProvider>
        </InertiaProvider>
    );
}

Without the current kit, put the providers in your own persistent layout:

With Inertia 3, return that layout from the layout option of createInertiaApp.
With Inertia 2, including apps from the earlier starter kit, assign it to each page, for example UsersIndex.layout = page => <AppLayout>{page}</AppLayout>, or as a default in your resolve callback. A layout rendered inside each page’s body instead recreates the providers each time the page changes.

If pages use different visual layouts, place the providers in their common outer layout. If you have a separate ssr.tsx, give it the same layout. Don’t add the providers in withApp: it wraps Inertia’s App, outside the page props the providers read. Rebuild your frontend after setup.

Bind Table to your app

Create this small component once. Pages can then render <AppTable prop="users" />.

React

import { useQueryHost } from '@inertiax/react';
import { Table, type TableProps } from '@inertiax/react-table';

export type AppTableProps = Omit<TableProps, 'host'>;
export function AppTable(props: AppTableProps) {
    return <Table {...props} host={useQueryHost()} />;
}

Next step

Build your first table.

View Markdown