DEV Community

loading...
Cover image for Datatables: Laravel Jetsteam Inertia

Datatables: Laravel Jetsteam Inertia

WAIYL KARIM
Updated on ・3 min read

When I first was trying to set my project using Laravel Jetstream with Inertia and VueJs I spent so much time trying to figure out how to implement jQuery Datatables in my project. In this article I'm going to show you how to do just that step by step.

Set up your Laravel Project

composer create-project laravel/laravel my-crm
Enter fullscreen mode Exit fullscreen mode

or via laravel command if you have that installed

laravel new my-crm
Enter fullscreen mode Exit fullscreen mode

Next let's install Jetstream

composer require laravel/jetstream
Enter fullscreen mode Exit fullscreen mode

Install Inertia with Vuejs

php artisan jetstream:install inertia
Enter fullscreen mode Exit fullscreen mode

Install & build NPM dependencies

npm install

npm dev
Enter fullscreen mode Exit fullscreen mode

Migrate your database

php artisan migrate
Enter fullscreen mode Exit fullscreen mode

Install the amazing datatables laravel package by Yajra

composer require yajra/laravel-datatables-oracle:"~9.0"
Enter fullscreen mode Exit fullscreen mode

Install Datatables

npm install datatables.net-dt

npm i jquery
Enter fullscreen mode Exit fullscreen mode

Implement Datatables

On your web.php routes file, let's add necessary routes to load our resources

Route::resource('users', UsersController::class);

Route::name('users.datatables')->get('users', [UsersController::class, 'datatables']);
Enter fullscreen mode Exit fullscreen mode

Now, create a UsersController and add the following

<?php

namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;
use Inertia\Inertia;

class UsersController extends Controller
{
    /**
     * Datatable Columns Array
     *
     * @var Array
     */
    private $datatableColumns;

    /**
     * Datatable Headers Array
     *
     * @var Array
     */
    private $datatableHeaders;

    /**
     * Datatables Data URL
     *
     * @var String
     */
    private $datatableUrl;

    /**
     * Controller constructor
     *
     * @return void
     */
    public function __construct() {     
        $this->datatableHeaders = [
            'ID', 
            'Name', 
            'Email'
        ];

        $this->datatableColumns = [
            ['data' => 'id'],
            ['data' => 'name'],
            ['data' => 'email']
        ];

        $this->datatableUrl = route('users.datatables');
    }

    /**
     * Get datatables JSON Response
     *
     * @return \Illuminate\Http\Response
     */
    public function datatables() {
        $datatables = datatables()
            ->of(User::query())
            ->addColumn('id', fn($user) => $user->id)
            ->addColumn('name', fn($user) => $user->name)
            ->addColumn('email', fn($user) => $user->email)
            ->toArray();

        return response()->json($datatables);
    }

    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index(Request $request)
    {
        return Inertia::render('Users/Index')
            ->with('datatableUrl', $this->datatableUrl)
            ->with('datatableColumns', $this->datatableColumns)
            ->with('datatableHeaders', $this->datatableHeaders);
    }

Enter fullscreen mode Exit fullscreen mode

Now that we've got that out of the way, let's build our Vuejs components.

The first component we will be creating is the Users/Index.vue component. Inside your resources/js folder create a new folder called Users and inside this folder create a .vue file called Index.vue

// resources/js/Pages/Users/Index.vue
<template>
        <div class="bg-white rounded-lg shadow-md mx-4 p-6">
                 <!-- we will display our datatable here -->
        </div>

</template>

<script>
    export default {

    }
</script>

Enter fullscreen mode Exit fullscreen mode

We will get back and change this file later.

Now let's create our Datatable component.

Again inside resources/js add a new folder called Shared and inside this folder create file called Datatable.vue

// resources/js/Shared/Datatable.vue

<template>
    <div>
        <table class="table table-hover table-bordered" id="dt-users">
            <thead class="border-1 rounded-sm text-white border-gray-800 bg-gray-900">
                <tr>
                    <th v-for="header in headers" :key="header.id">{{ header }}</th>
                </tr>
            </thead>
        </table>
    </div>
</template>

<script>
    import 'jquery/dist/jquery.min.js';
    import "datatables.net-dt/js/dataTables.dataTables"
    import $ from 'jquery'; 

    export default {
        props: ['url', 'columns', 'headers'],
        mounted(){
            let datatable = $('#dt-users').on('processing.dt', function(e, settings, processing) {
                    if (processing) {
                        $('table').addClass('opacity-25');
                    }else {
                        $('table').removeClass('opacity-25');
                    }
                }).DataTable({
                ajax: {
                    url: this.url,
                },
                serverSide: true,
                processing: true,
                paging: true,
                columns: this.columns,
            });

        },
    }
</script>
Enter fullscreen mode Exit fullscreen mode

Go back to resources/js/Pages/Users/Index.vue and import this file as followed:

// final version of resources/js/Users/Index.vue

<template>
    <div class="bg-white rounded-lg shadow-md mx-4 p-6">
        <Datatable 
            :url="datatableUrl" 
            :headers="datatableHeaders"
            :columns="datatableColumns"
        />
    </div>
</template>

<script>
    import Datatable from '@/Shared/Datatable'

    export default {
        components: {
            Datatable,
        },
        props: ['datatableUrl', 'datatableColumns', 'datatableHeaders'],
    }
</script>
Enter fullscreen mode Exit fullscreen mode

And that's it! Leave questions in the comment section.

Happy coding.

Cover image credit pikisuperstar

Discussion (0)