All articles

Introducing InertiaX

A backend-defined, frontend-rendered approach to application tables, with room for the parts that make your product different.

Application tables tend to accumulate the same work: choosing fields, defining search and sorting, handling pagination, and rendering useful cells. The data lives in Laravel, but much of the interface needs to know which operations that data supports.

InertiaX separates those responsibilities. Laravel describes the table and its capabilities. React renders that description and handles application-specific presentation.

A definition close to the data

For a users directory, the definition might look like this:

A users table
use InertiaX\Components\Table\Columns\NumberColumn;
use InertiaX\Components\Table\Columns\TextColumn;
use InertiaX\Facades\InertiaX;

InertiaX::table('users')
    ->data($users)
    ->addColumns([
        NumberColumn::make('id')->numberCast('int')->visible(false),
        TextColumn::make('name')->searchable()->sortable(),
        TextColumn::make('email'),
    ]);

Here, $users is the application’s authorized, scoped query. Search and sorting are declared alongside the fields they operate on, keeping those capabilities close to the data. The hidden primary key provides row identity.

On the React side, the Inertia adapter selects the named table prop:

Inside the Users page
import { InertiaX } from '@inertiax/react-inertia';

<InertiaX prop="users" />;

The table name connects the Laravel instance to the page. React uses its description to render the table and its controls. Making the name searchable does not require a second column definition on the frontend.

As the table grows

For a simple list, there may be little to coordinate. As search rules, filters, and richer cells arrive, maintaining separate table configurations in PHP and JavaScript creates more room for them to disagree. The backend description gives both sides a common definition of what the table supports.

React still owns how application-specific values appear. A custom cell can express a role or status without turning the backend definition into a UI template or moving query logic into the page.

The first table guide shows how to connect a Laravel definition to an Inertia page.