DataTables Quick Starter

Create a new Laravel project

laravel new datatables
cd datatables

Setup Laravel UI

composer require laravel/ui --dev
php artisan ui bootstrap --auth

Install Laravel DataTables

composer require yajra/laravel-datatables:^9.0

Setup database and ENV configuration

Create a new database and update .env file and set the database credentials.

touch database/database.sqlite

DB_CONNECTION=sqlite
DB_DATABASE=/absolute/path/to/database/database.sqlite

php artisan migrate

Install Laravel DataTables Vite Assets

npm i laravel-datatables-vite --save-dev

This will install the following packages:

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

Register the package js and css

Edit resources/js/app.js and add the following:

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

Edit resources/sass/app.scss and add the following:

// Fonts
@import url('https://fonts.bunny.net/css?family=Nunito');
 
// Variables
@import 'variables';
 
// Bootstrap
@import 'bootstrap/scss/bootstrap';
 
// 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';

Compile the assets

npm run dev

Create and update UsersDataTable

Create a new DataTable class:

php artisan datatables:make Users

Then, update the getColumns() with the users fields:

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\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()
                    ->buttons([
                        Button::make('add'),
                        Button::make('excel'),
                        Button::make('csv'),
                        Button::make('pdf'),
                        Button::make('print'),
                        Button::make('reset'),
                        Button::make('reload'),
                    ]);
    }
 
    protected function getColumns(): array
    {
        return [
            Column::make('id'),
            Column::make('name'),
            Column::make('email'),
            Column::make('created_at'),
            Column::make('updated_at'),
        ];
    }
 
    protected function filename(): string
    {
        return 'Users_'.date('YmdHis');
    }
}

Create and update the users controller

Create a new controller and add the following:

php artisan make:controller UsersController

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

Update the default app layout

Add @stack('scripts') before the body end tag of resources/views/layouts/app.blade.php

....
        <main class="py-4">
            @yield('content')
        </main>
    </div>
    @stack('scripts')
</body>
</html>

Create users index file

Create new file: 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

Register users route

Update routes/web.php.

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

Create dummy data using tinker

php artisan tinker
 
Psy Shell v0.9.9 (PHP 7.2.22 — cli) by Justin Hileman
>>> User::factory(100)->create()

Access Users DataTables

http://datatables.test/users

Edit this page on GitHub