eklundlabs/inertiajs-datatables

Laravel inertiajs datatables

dev-main 2026-01-13 03:24 UTC

Requires

• php: ^8.4
• illuminate/contracts: ^12.0
• spatie/laravel-package-tools: ^1.16

Requires (Dev)

• larastan/larastan: ^3.0
• laravel/pint: ^1.14
• nunomaduro/collision: ^8.8
• orchestra/testbench: ^10.0.0||^9.0.0
• pestphp/pest: ^4.0
• pestphp/pest-plugin-arch: ^4.0
• pestphp/pest-plugin-laravel: ^4.0
• phpstan/extension-installer: ^1.4
• phpstan/phpstan-deprecation-rules: ^2.0
• phpstan/phpstan-phpunit: ^2.0
• spatie/laravel-ray: ^1.35

MIT

• Kristoffer Eklund

• laravel
• datatable
• inertia

README

Note

Limitations

• Currently only react is supported
• Only one table per page

Prerequisites

• Tailwind CSS v4 or higher
• Laravel v12 or higher
• Inertiajs v2.1 or higher using react

Installation

1. Install the Composer package

composer require eklundlabs/inertiajs-datatables:dev-main

2. Install the NPM package

npm install vendor/eklundlabs/inertiajs-datatables/react

3. Register package paths with Tailwind

Add the package paths using the @source directive in your app.css file:

@source '../../vendor/eklundlabs/inertiajs-datatables/react/**/*.{ts,tsx}';

Your first datatable

1. Define your datatable

use App\Models\User;
use Eklundlabs\InertiaDatatable\Table;
use Eklundlabs\InertiaDatatable\Actions\Action;
use Eklundlabs\InertiaDatatable\Columns\TextColumn;

class Users extends Table
{
    protected ?string $resource = User::class;

    public function columns(): array
    {
        return [
            TextColumn::make('name', 'Namn')
                ->searchable()
                ->url(fn(User $user) => route('users.show', $user->id)),
            TextColumn::make('email', 'Email'),
        ];
    }

    public function actions(): array
    {
        return [
            Action::make('Delete', fn (User $user) => $user->delete())
                ->confirm('Are you sure you want to delete this user?'),
        ];
    }
}

2. Expose the datatable via the Inertia response

use Inertia\Inertia;
use App\DataTables\Users;

class UsersController extends Controller
{
    public function __invoke(Request $request)
    {
        return Inertia::render('users/listing', [
            'users' => Users::make()
        ]);
    }
}

3. Render it using the DataTable react component

import { usePage } from '@inertiajs/react';
import { DataTable, type DataTableResource } from '@eklundlabs/inertia-datatable-react';

export default function UsersListing() {
    const { props } = usePage<{
        users: DataTableResource;
    }>();

    return (<DataTable resource={props.users} />);
}