Skip to content
Icon

WARNING You're browsing the documentation for an upcoming version of Laravel DataTables. The documentation and features of this release are subject to change.

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:

  1. Bootstrap Icons
  2. DataTables with Buttons and Select plugins for Bootstrap 5
  3. 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