# Installation

> Install the Laravel and React packages, load the styles, and set up your shared layout.

Source: https://docs.inertiax.dev/table/installation/

Install InertiaX into an existing Laravel + Inertia + React application. Starting a new app? Use Laravel’s [React starter kit](https://laravel.com/starter-kits#react) 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](https://docs.inertiax.dev/table/compatibility/) for the tested combinations.

## Connect the InertiaX registry

**InertiaX packages come from a private registry.** In your portal, accept the license and create a registry key. Then, in your application's directory, run the **Connect the registry** commands the portal's **Registry keys** page shows for Composer and for your JavaScript package manager.

[Open your portal](https://portal.inertiax.dev/) No access yet? [Request early access](https://inertiax.dev/#early-access)

## Install InertiaX

1. **Install the Laravel package**

   Install it in the existing application:

   **Laravel**

   ```sh
   composer require inertiax/laravel-table
   ```

   Laravel discovers the package automatically. The standard Table workflow does not require publishing a configuration file.

2. **Install the frontend packages**

   Install the renderer and Inertia integration with your preferred package manager:

   **React**

   **pnpm**

   ```sh
   pnpm add @inertiax/react-table @inertiax/react @inertiax/react-inertia
   ```

   **npm**

   ```sh
   npm install @inertiax/react-table @inertiax/react @inertiax/react-inertia
   ```

   **Yarn**

   ```sh
   yarn add @inertiax/react-table @inertiax/react @inertiax/react-inertia
   ```

   **Bun**

   ```sh
   bun add @inertiax/react-table @inertiax/react @inertiax/react-inertia
   ```

## Load the styles

Import the stylesheet in your existing browser entry:

**React**

resources/js/app.tsx

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

resources/js/layouts/app-layout.tsx

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

resources/js/components/app-table.tsx

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