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.

web.php

<?php

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');
Route::get('/users',UserController::class)->name('users');
require __DIR__.'/auth.php';


Step 4: Create User Seeder

You need just uncomment and add numbers of users.

database/seeders/DatabaseSeeder.php

<?php

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(40)->create();

        // \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

Inertia.js

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
//or
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

'./node_modules/@protonemedia/inertiajs-tables-laravel-query-builder/**/*.{js,vue}'

tailwind.config.js

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

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/js/**/*.vue',
        './node_modules/@protonemedia/inertiajs-tables-laravel-query-builder/**/*.{js,vue}',
    ],

    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.

UserController.php

<?php

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) {
                    $query
                        ->orWhere('name', 'LIKE', "%{$value}%")
                        ->orWhere('email', 'LIKE', "%{$value}%");
                });
            });
        });
        $users = QueryBuilder::for(User::class)
        ->defaultSort('name')
        ->allowedSorts(['name', 'email'])
        ->allowedFilters(['name', 'email', $globalSearch])
        ->paginate(8)
        ->withQueryString();

        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

resources/js/Pages/Users/Index.vue

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

defineProps(["users"])
</script>

<template>
    <Head title="Dashboard" />

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

        <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" />
                    </div>
                </div>
            </div>
        </div>
    </BreezeAuthenticatedLayout>
</template>
create laravel 9 inertia vue 3 datatables


Step 10: Run Server

Run laravel 9 and vite server

php artisan serve 
//or
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