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