Version

Quick Starter

This guide will walk you through building a complete DataTable in 15 minutes.

Step 1: Installing Laravel & DataTables

Quick Installation

If you have already installed Laravel Installer on your local machine, you may create a new project via Laravel command:

laravel new datatables

After the project has been created, install Yajra DataTables:

cd datatables
 
composer require yajra/laravel-datatables:"^13.0"

For simplicity, you may use SQLite to store your application's data. To instruct Laravel to use SQLite instead of MySQL, update your new application's .env file and remove all of the DB_* environment variables except for the DB_CONNECTION variable, which should be set to sqlite:

touch database/database.sqlite

.env

DB_CONNECTION=sqlite

Step 2: Install Laravel DataTables Vite

Next, install Laravel DataTables Vite and the Bootstrap assets used by this guide:

npm i -D laravel-datatables-vite bootstrap @popperjs/core bootstrap-icons

This will install the following assets:

- Bootstrap 5 and Bootstrap Icons
- DataTables with Buttons and Select plugins for Bootstrap 5
- Laravel DataTables custom scripts

Once installed, we can now configure our scripts and CSS needed for our application:

resources/js/app.js

import './bootstrap';
import 'bootstrap';
import 'laravel-datatables-vite';

resources/css/app.css

/* Fonts */
@import url('https://fonts.bunny.net/css?family=Nunito');
 
/* Bootstrap */
@import 'bootstrap/dist/css/bootstrap.min.css';
 
/* DataTables */
@import 'bootstrap-icons/font/bootstrap-icons.css';
@import "datatables.net-bs5/css/dataTables.bootstrap5.min.css";
@import "datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css";
@import 'datatables.net-select-bs5/css/select.bootstrap5.css';

Note: Laravel uses Vite with CSS by default. If you prefer SCSS, install the sass package: npm i -D sass

We just need to start the Vite development server to automatically recompile our JS, CSS and refresh the browser when we make changes to our Blade templates:

npm run dev

Step 3: Setup a Users DataTable

Open a new terminal in your datatables project directory and run the following command:

php artisan datatables:make Users

Next, we will configure our UsersDataTable and add the columns that we want to display:

app/DataTables/UsersDataTable.php

<?php
 
namespace App\DataTables;
 
use App\Models\User;
use Illuminate\Database\Eloquent\Builder as QueryBuilder;
use Yajra\DataTables\EloquentDataTable;
use Yajra\DataTables\Html\Builder as HtmlBuilder;
use Yajra\DataTables\Html\Button;
use Yajra\DataTables\Html\Column;
use Yajra\DataTables\Html\Layout;
use Yajra\DataTables\Services\DataTable;
 
class UsersDataTable extends DataTable
{
    public function dataTable(QueryBuilder $query): EloquentDataTable
    {
        return (new EloquentDataTable($query))->setRowId('id');
    }
 
    public function query(User $model): QueryBuilder
    {
        return $model->newQuery();
    }
 
    public function html(): HtmlBuilder
    {
        return $this->builder()
                    ->setTableId('users-table')
                    ->columns($this->getColumns())
                    ->minifiedAjax()
                    ->orderBy(1)
                    ->selectStyleSingle()
                    ->layout(function (Layout $layout) {
                        $layout->topStart('buttons');
                        $layout->topEnd('search');
                        $layout->bottomStart('info');
                        $layout->bottomEnd('paging');
                    })
                    ->buttons([
                        Button::make('print'),
                        Button::make('reset'),
                        Button::make('reload'),
                    ]);
    }
 
    public function getColumns(): array
    {
        return [
            Column::make('name'),
            Column::make('email'),
            Column::make('created_at'),
            Column::make('updated_at'),
            Column::make('id'),
        ];
    }
 
    protected function filename(): string
    {
        return 'Users_'.date('YmdHis');
    }
}

Step 4: Setup a Users Controller, View & Route

php artisan make:controller UsersController

app/Http/Controllers/UsersController.php

<?php
 
namespace App\Http\Controllers;
 
use App\DataTables\UsersDataTable;
 
class UsersController extends Controller
{
    public function index(UsersDataTable $dataTable)
    {
        return $dataTable->render('users.index');
    }
}

resources/views/users/index.blade.php

@extends('layouts.app')
 
@section('content')
    <div class="container">
        <div class="card">
            <div class="card-header">Manage Users</div>
            <div class="card-body">
                {{ $dataTable->table() }}
            </div>
        </div>
    </div>
@endsection
 
@push('scripts')
    {{ $dataTable->scripts(attributes: ['type' => 'module']) }}
@endpush

routes/web.php

<?php
 
use App\Http\Controllers\UsersController;
use Illuminate\Support\Facades\Route;
 
Route::get('/users', [UsersController::class, 'index'])->name('users.index');

Step 5: Create the App Layout

Create the layout used by the users view. It must load your Vite assets and include @stack('scripts') before the closing body tag so the generated DataTables script can be pushed from the page.

resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ config('app.name', 'Laravel') }}</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    <div id="app">
        <main class="py-4">
            @yield('content')
        </main>
    </div>
    @stack('scripts')
</body>
</html>

Step 6: Migrate and Seed Test Data

php artisan migrate
php artisan tinker

App\Models\User::factory()->count(100)->create();

Our application should now be ready to run:

php artisan serve

Once you have started the Artisan development server, your application will be accessible in your web browser at http://localhost:8000.

We can now visit our /users route and see our users table.