Skip to content

Getting Started

Learn how to create your first data table with Inertia Tables through a step-by-step tutorial.

Inertia Tables allows you to create interactive data tables that seamlessly integrate between your Laravel backend and React frontend. This guide will walk you through building your first table with common features like columns, search, sorting, and actions.

Let’s build a complete users table that demonstrates the core features of Inertia Tables.

Create the file manually at app/Tables/UserTable.php:

<?php
namespace App\Tables;
use App\Models\User;
use Egmond\InertiaTables\Concerns\InteractsWithTable;
use Egmond\InertiaTables\Contracts\HasTable;
use Egmond\InertiaTables\Table;
use Egmond\InertiaTables\Columns\TextColumn;
use Egmond\InertiaTables\Actions\Action;
class UserTable implements HasTable
{
use InteractsWithTable;
public function table(Table $table): Table
{
return $table->as('users')
->query(User::query())
->columns([
TextColumn::make('name')
->searchable()
->sortable(),
TextColumn::make('email')
->searchable()
->sortable(),
TextColumn::make('created_at')
->sortable()
->label('Joined'),
])
->actions([
Action::make('edit')
->label('Edit User'),
Action::make('delete')
->label('Delete')
->color('danger')
->action(fn (User $record) => $record->delete())
->requiresConfirmation(),
])
->searchable()
->paginate(15);
}
}

Update your controller to return the table data:

<?php
namespace App\Http\Controllers;
use App\Tables\UserTable;
use Inertia\Inertia;
use Inertia\Response;
class DashboardController extends Controller
{
public function index(): Response
{
return Inertia::render('Dashboard', [
'users' => UserTable::make(),
]);
}
}

Create or update your React component to display the table:

import { InertiaTable } from '@tygoegmond/inertia-tables-react';
import { TableResult } from '@tygoegmond/inertia-tables-react/types';
interface DashboardProps {
users: TableResult;
}
export default function Dashboard({ users }: DashboardProps) {
return (
<InertiaTable
state={users}
/>
);
}

Let’s break down what each part of your table does:

->as('users') // Sets the table name for state management
->query(User::query()) // Defines the base Eloquent query
->searchable() // Enables search functionality
->paginate(15) // Sets pagination to 15 items per page
TextColumn::make('name')
->searchable() // Makes this column searchable
->sortable() // Enables sorting on this column
Action::make('edit')
->label('Edit User') // Display text for the action
Action::make('delete')
->action() // Defines the action to perform
->requiresConfirmation() // Shows confirmation dialog before executing

The table automatically includes a search input when you call ->searchable() on the table. Individual columns can be made searchable:

TextColumn::make('name')
->searchable()

Enable sorting on columns by calling the sortable() method:

TextColumn::make('created_at')
->sortable()

You can easily display and search relationship data using dot notation:

TextColumn::make('profile.company')
->label('Company')
->searchable(),

For better performance, you can defer table loading:

// In your controller
public function index(): Response
{
return Inertia::render('Dashboard', [
'users' => Inertia::defer(fn () => UserTable::make()),
]);
}

The React component will show a loading state until the data is available.

Now that you have a basic table working, you can explore more advanced features:

  • Columns - Learn about different column types and customization options
  • Actions - Explore row actions, bulk actions, and header actions

This completes your first Inertia Tables implementation! The table will automatically handle search, sorting, pagination, and actions with a clean, responsive interface.