Introduction
Inertia Table is part of Inertia UI, a suite of packages designed for Laravel, Inertia.js, and Tailwind CSS. Inertia Table makes it super easy to build tables based on your Eloquent Models. Here's a quick overview of what you can expect from Inertia Table:
- Sorting, including support for related models
- Pagination with a customizable number of items per page
- Toggleable columns
- Search with support for related models
- Extensive filtering options (text, date, boolean, sets, etc.)
- Row links, actions and bulk actions with customizable confirmation dialogs and icons
- Export to CSV, Excel, and PDF
- Queued exports for large datasets
- Multiple tables per page with independent settings
- Dark mode and RTL support
- Empty state with customizable message and actions
- Extensively tested across multiple Laravel versions, PHP versions, and database drivers (MariaDB, MySQL, PostgreSQL, SQLite)
- Built for Laravel and Inertia.js with React and Vue support
Example Table class
Tables can be defined fluently with a builder or with dedicated classes. Here's an example of a Table class.
php
class Users extends Table
{
protected ?string $resource = User::class;
public function columns(): array
{
return [
Columns\TextColumn::make('id', 'ID', toggleable: false),
Columns\TextColumn::make('name', 'Full Name', sortable: true),
Columns\TextColumn::make('email', sortable: true),
Columns\DateColumn::make('email_verified_at'),
Columns\ActionColumn::new(),
];
}
public function filters(): array
{
return [
Filters\TextFilter::make('name', 'Full Name'),
Filters\TextFilter::make('email'),
Filters\BooleanFilter::make('is_admin', 'Admin'),
Filters\DateFilter::make('email_verified_at')->nullable(),
];
}
public function actions(): array
{
return [
Action::make('Deactivate', handle: fn (User $user) => $user->deactivate())
->asDangerButton()
->asBulkAction()
->confirm(
title: 'Deactivate User',
message: 'Are you sure you want to deactivate this user? This will remove their verified email status.',
confirmButton: 'Deactivate',
)
];
}
}