laravel 9 inertia vue 3 datatables example

In this section we will see how to use datatables in laravel 9 inertia vue 3 with Inertia.js tables for laravel query builder package. For Inertia vue 3 datatables you need laravel breeze or laravel jetstream, protonemedia/inertiajs-tables-laravel-query-builder and spatie/laravel-query-builder.

Step 1: Install Laravel & Connect Database

Run below command to create laravel protect.

composer create-project laravel/laravel inertia-datatables

Step 2: Install Breeze & Setup Inertia Js Vue 3

Install laravel breeze via composer

composer require laravel/breeze --dev

Next, run below command

php artisan breeze:install

install breeze with vue 3

php artisan breeze:install vue

And final install Dependencies

npm install && npm run dev 

Step 3: Create User Controller and Route

Run below to create User Controller

php artisan make:controller UserController

Create users route.



use App\Http\Controllers\UserController;
use Illuminate\Foundation\Application;
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;

| Web Routes
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!

Route::get('/', function () {
    return Inertia::render('Welcome', [
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
        'laravelVersion' => Application::VERSION,
        'phpVersion' => PHP_VERSION,

Route::get('/dashboard', function () {
    return Inertia::render('Dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');
require __DIR__.'/auth.php';

Step 4: Create User Seeder

You need just uncomment and add numbers of users.



namespace Database\Seeders;

// use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
     * Seed the application's database.
     * @return void
    public function run()

        // \App\Models\User::factory()->create([
        //     'name' => 'Test User',
        //     'email' => '[email protected]',
        // ]);

Run migrate database with seeder

php artisan migrate:fresh --seed

Step 5: Install Inertia.js Tables for Laravel Query Builder

Before install laravel inertia datatables you need some requirements.

Vue 3

Laravel 9


Tailwind CSS v3 + Forms plugin

PHP 8.0+

Install Server-side installation (Laravel) via composer

composer require protonemedia/inertiajs-tables-laravel-query-builder

Client-side installation (Inertia)

npm install @protonemedia/inertiajs-tables-laravel-query-builder --save
yarn add @protonemedia/inertiajs-tables-laravel-query-builder

Step 6: Setup Inertia.js Tables

You need to Setup protonemedia/inertiajs in tailwind.config.js.

Add this path tailwind.config.js for datatables ui



const defaultTheme = require('tailwindcss/defaultTheme');

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],

    plugins: [require('@tailwindcss/forms')],

Step 7: Install spatie query builder

install spatie query builder via composer:

composer require spatie/laravel-query-builder

Step 8: Add QueryBuilder and InertiaTable in User Controller

Add datatables functionality in user controller. Also add global search using spatie query builder and InertiaTable.



namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Support\Collection;
use Inertia\Inertia;
use ProtoneMedia\LaravelQueryBuilderInertiaJs\InertiaTable;
use Spatie\QueryBuilder\AllowedFilter;
use Spatie\QueryBuilder\QueryBuilder;

class UserController extends Controller

    public function __invoke()
        $globalSearch = AllowedFilter::callback('global', function ($query, $value) {
            $query->where(function ($query) use ($value) {
                Collection::wrap($value)->each(function ($value) use ($query) {
                        ->orWhere('name', 'LIKE', "%{$value}%")
                        ->orWhere('email', 'LIKE', "%{$value}%");
        $users = QueryBuilder::for(User::class)
        ->allowedSorts(['name', 'email'])
        ->allowedFilters(['name', 'email', $globalSearch])

        return Inertia::render('Users/Index', ['users' => $users])->table(function (InertiaTable $table) {
            $table->column('id', 'ID', searchable: true, sortable: true);
            $table->column('name', 'User Name', searchable: true, sortable: true);
            $table->column('email', 'Email Address', searchable: true, sortable: true);
            $table->column('created_at', 'Join Date', searchable: true, sortable: true);

Step 9: Use Protonemedia DataTables in Inertia Vue 3 File


<script setup>
import BreezeAuthenticatedLayout from '@/Layouts/Authenticated.vue';
import { Head } from '@inertiajs/inertia-vue3';
import { Table } from "@protonemedia/inertiajs-tables-laravel-query-builder";


    <Head title="Dashboard" />

        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">

        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6 bg-white border-b border-gray-200">
                         <h3 class="text-2xl text-center">Laravel 9 Inertia JS Datatable</h3>
                         <Table :resource="users" />
create laravel 9 inertia vue 3 datatables

Step 10: Run Server

Run laravel 9 and vite server

php artisan serve 
npm run dev 

Read Also

Laravel 9 Inertia Vue 3 Integrating Dashboard Example

Laravel 9 Inertia Vue 3 File Upload Example

Laravel 9 Inertia Vue 3 Form Submit Example

Laravel 9 Inertia Vue 3 Search & Filter Example

Laravel 9 Install Inertia js Server-side rendering (SSR)

Laravel 9 with Inertia Vue 3 Implement Flash Message

Laravel 9 Inertia Vue 3 CRUD Tutorial Example

Laravel Inertia Vue 3 Form Validation

Laravel 9 Inertia Vue 3 Pagination Example

How to Delete Record in Laravel 9 with Inertia Vue 3