Skip to content

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
  • Dark mode support
  • RTL support
  • Support for React and Vue

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',
                )
        ];
    }
}