Interactive examples

See the code. Use the table.

Explore InertiaX through real interfaces and the Laravel and React code behind them.

Users

A complete table from your Laravel model.

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

return Inertia::render('Users/Index', [
    $users,
]);

Automatic columns

Columns and field types are inferred from your model.

Users

12 users

Interactive

Name	Email	Role	Joined On
Ada Lovelace	[email protected]	admin	2025-01-12
Grace Hopper	[email protected]	admin	2025-01-18
Katherine Johnson	[email protected]	analyst	2025-02-03
Margaret Hamilton	[email protected]	engineer	2025-02-14
Dorothy Vaughan	[email protected]	analyst	2025-03-02
Mary Jackson	[email protected]	engineer	2025-03-11
Radia Perlman	[email protected]	engineer	2025-04-01
Evelyn Boyd Granville	[email protected]	analyst	2025-04-19
Joan Clarke	[email protected]	analyst	2025-05-08
Annie Easley	[email protected]	engineer	2025-05-21

12 row(s)

Rows per page Page 1 of 2

Enable JavaScript to use the interactive tables. You can alsoread the quick start.

Search & filters: Users

Search, filter, sort, select, and control visible columns.

Declare columns, add a role filter, and enable row selection.

InertiaX::table('users')
    ->data(User::class)
    ->addColumns([
        NumberColumn::make('id')
            ->numberCast('int')->visible(false),
        TextColumn::make('name')
            ->searchable()->sortable(),
        TextColumn::make('email')->toggleable(),
        TextColumn::make('role'),
        DateColumn::make('joined_on', 'Joined')
            ->format('M j')->toggleable(),
    ])
    ->addFilter(SelectFilter::make('role')->options([
        'admin' => 'admin',
        'analyst' => 'analyst',
        'engineer' => 'engineer',
    ]))
    ->selection()
    ->pageSize(5);

Custom cells: Orders

Format totals, statuses, and dates with custom cells.

Laravel formats statuses and dates; React formats totals.

InertiaX::table('orders')
    ->data(Order::class)
    ->addColumns([
        NumberColumn::make('id')
            ->numberCast('int')->visible(false),
        TextColumn::make('reference', 'Order')
            ->searchable(),
        TextColumn::make('customer'),
        NumberColumn::make('total')->type('demo/money'),
        BadgeColumn::make('status')->variant([
            'paid' => 'success', 'processing' => 'warning',
            'refunded' => 'secondary', 'failed' => 'danger',
        ]),
        DateColumn::make('placed_at', 'Placed')
            ->format('M j')->sortable(),
    ])
    ->addFilter(SelectFilter::make('status')->options([
        'paid' => 'paid', 'processing' => 'processing',
        'refunded' => 'refunded', 'failed' => 'failed',
    ]))
    ->pageSize(5);

Collections: Activity log

Use the same table experience with in-memory data.

Pass a collection or an array and declare its columns.

InertiaX::table('activity')
    ->data(collect($recentEvents))
    ->addColumns([
        TextColumn::make('id')->visible(false),
        TextColumn::make('actor')->searchable(),
        TextColumn::make('action'),
        TextColumn::make('target')->copyable(),
        DateTimeColumn::make('occurred_at', 'Time')
            ->format('H:i')->sortable(),
    ])
    ->pageSize(5);