Table

InertiaX adds searchable, sortable, filterable tables to your Laravel + Inertia + React application. Define the data and columns in PHP, then render the table by name in React.

Laravel queries the data. InertiaX supplies the table UI and keeps its controls, URL state, and results in sync through Inertia partial reloads. Links to records and operations on selected rows stay in your application’s routes; see the recipes.

A table in two parts

Return a table as an Inertia prop:

Laravel

use Inertia\Inertia;
use InertiaX\Table\Columns\NumberColumn;
use InertiaX\Table\Columns\TextColumn;
use InertiaX\Table\Table;

return Inertia::render('users/index', [
    Table::make('users')
        ->data($users)
        ->addColumns([
            NumberColumn::make('id')->numberCast('int'),
            TextColumn::make('name')->searchable()->sortable(),
        ]),
]);

Here, $users is the Eloquent query for the records your page displays. Render the prop by its name:

React

import { AppTable } from '@/components/app-table';

export default function UsersIndex() {
    return <AppTable prop="users" />;
}

You can keep a small definition inline, move it into a reusable table class, or let InertiaX infer the columns and filters from your model. Add filters, selection, and custom cell rendering as you need them.

Where to go next

New here? Start with Installation, then Your first table. Already have a table? Go straight to Columns, Search, or Filtering. Recipes lists common tasks with the guide page for each.

Building a table with an AI agent? The agent guide covers setup, a complete table, its page and a feature test, for an existing app with package access.

Not using Inertia? See Direct envelope. The table shows the response you supply, and fetching new rows is up to your own integration.