Your first table

After installation, add a page that displays users. This example uses Laravel’s standard User model and an existing account you can sign in with.

1. Define the table

<?php

namespace App\Http\Controllers;

use App\Models\User;
use Inertia\Inertia;
use Inertia\Response;
use InertiaX\Components\Table\Columns\NumberColumn;
use InertiaX\Components\Table\Columns\TextColumn;
use InertiaX\Facades\InertiaX;

class UserController
{
    public function index(): Response
    {
        return Inertia::render('Users/Index', [
            InertiaX::table('users')
                ->data(User::class)
                ->addColumns([
                    NumberColumn::make('id')->numberCast('int')->visible(false),
                    TextColumn::make('name')->searchable()->sortable(),
                    TextColumn::make('email'),
                ]),
        ]);
    }
}

The id column identifies each row; visible(false) keeps it out of the displayed table.

2. Render the table

Create the page at the path your Inertia page resolver uses for Users/Index:

import { InertiaX } from '@inertiax/react-inertia';

export default function UsersIndex() {
  return (
    <main>
      <h1>Users</h1>
      <InertiaX prop="users" />
    </main>
  );
}

3. Add the route

use App\Http\Controllers\UserController;
use Illuminate\Support\Facades\Route;

Route::get('/users', [UserController::class, 'index'])
    ->middleware('auth')
    ->name('users.index');

Open /users while signed in. You should see users’ names and email addresses in a styled table. Search for part of a name, then click the Name heading to sort.

Let InertiaX infer the columns

InertiaX can also automatically infer columns from the model:

InertiaX::table('users')
    ->data(User::class)
    ->autoColumns();

See Inferring columns from a model to learn how it works and customize the inferred columns.

Next steps

Add filters or change the page size.
Move the definition into a reusable table class.
Adjust colors and spacing.

In production, pass a query scoped to your application’s authorization and access rules. See Authorization & security.