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.
Creating Your First Table
Section titled “Creating Your First Table”Let’s build a complete users table that demonstrates the core features of Inertia Tables.
Step 1: Create a Table Class
Section titled “Step 1: Create a Table Class”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); }}
Step 2: Use the Table in Your Controller
Section titled “Step 2: Use the Table in Your Controller”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(), ]); }}
Step 3: Render the Table in React
Section titled “Step 3: Render the Table in React”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} /> );}
Understanding Table Components
Section titled “Understanding Table Components”Let’s break down what each part of your table does:
Table Configuration
Section titled “Table Configuration”->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
Columns
Section titled “Columns”TextColumn::make('name') ->searchable() // Makes this column searchable ->sortable() // Enables sorting on this column
Actions
Section titled “Actions”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
Adding Search and Filtering
Section titled “Adding Search and Filtering”The table automatically includes a search input when you call ->searchable()
on the table. Individual columns can be made searchable:
TextColumn::make('name') ->searchable()
Adding Sorting
Section titled “Adding Sorting”Enable sorting on columns by calling the sortable()
method:
TextColumn::make('created_at') ->sortable()
Working with Relationships
Section titled “Working with Relationships”You can easily display and search relationship data using dot notation:
TextColumn::make('profile.company') ->label('Company') ->searchable(),
Deferred Loading
Section titled “Deferred Loading”For better performance, you can defer table loading:
// In your controllerpublic 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.
Next Steps
Section titled “Next Steps”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.