Mastering Laravel Yajra DataTable HTML Builder: A Step-by-Step Guide

Introduction:
Laravel, one of the most popular PHP web application frameworks, offers a plethora of tools and packages to streamline web development. When it comes to handling tabular data, Laravel Yajra DataTables is a go-to package for many developers. In this guide, we’ll dive deep into the Laravel Yajra DataTable HTML Builder, a powerful tool for creating interactive and feature-rich data tables in your Laravel applications.

What is Laravel Yajra DataTables?

Laravel Yajra DataTables is a package that integrates the DataTables jQuery plugin into Laravel applications. DataTables is a flexible, feature-rich JavaScript library for enhancing HTML tables. By using Yajra DataTables, you can easily build advanced data tables with searching, sorting, filtering, and pagination capabilities.

The Laravel Yajra DataTable HTML Builder simplifies the process of creating DataTables in Laravel applications by providing a fluent and convenient API for defining table configurations, columns, and data sources.

Step 1: Install Laravel Yajra DataTables

To get started, you’ll need a Laravel project up and running. If you don’t have one yet, you can create one using the Laravel installer:

composer create-project laravel/laravel your-project-name

Next, install the Yajra DataTables package via Composer:

composer require yajra/laravel-datatables-oracle

After installing the package, you'll need to publish its configuration and assets:

php artisan vendor:publish --tag=datatables

Step 2: Set up a Model and Migration

Let's assume you want to display a data table for a "users" table. Create a model and migration for this table:

php artisan make:model User -m

Now, open the migration file located in the database/migrations directory and define your table schema:

public function up()
{
    Schema::create('users', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('email')->unique();
        $table->timestamps();
    });
}

Run the migration to create the "users" table:

php artisan migrate

Step 3: Create a DataTable

Now, it’s time to create a DataTable using the Laravel Yajra DataTable HTML Builder. First, generate a new DataTable class:

php artisan datatables:make UserDataTable

This command will generate a UserDataTable class in the app/DataTables directory. Open this file and configure your DataTable by specifying the model, columns, and other settings.

use Yajra\DataTables\Html\Builder;
use Yajra\DataTables\Services\DataTable;

class UserDataTable extends DataTable
{
    public function dataTable($query)
    {
        return datatables()
            ->eloquent($query)
            ->addColumn('action', 'userdatatable.action');
    }
    public function query(User $model)
    {
        return $model->newQuery();
    }
    public function html()
    {
        return $this->builder()
            ->columns($this->getColumns())
            ->minifiedAjax()
            ->addAction(['width' => '80px'])
            ->parameters([
                'dom' => 'Bfrtip',
                'buttons' => ['export', 'print', 'reset', 'reload'],
            ]);
    }
    protected function getColumns()
    {
        return [
            'id',
            'name',
            'email',
            'created_at',
            'updated_at',
        ];
    }
    protected function filename()
    {
        return 'User_' . date('YmdHis');
    }
}

Step 4: Create a Blade View

Next, create a Blade view to display your DataTable. You can use the dataTable method to render the table:

@extends('layouts.app')

@section('content')
    {!! $dataTable->table(['class' => 'table table-bordered']) !!}
@endsection
@push('scripts')
    {!! $dataTable->scripts() !!}
@endpush

Step 5: Route and Controller

Create a route in your web.php file to load the DataTable view and a controller to handle the DataTable requests:

Route::get('users', 'UserController@index')->name('users.index');
Route::get('users/datatables', 'UserController@datatables')->name('users.datatables');

In your controller, you can use the datatables method to load and render the DataTable:

public function index(UserDataTable $dataTable)
{
    return $dataTable->render('users.index');
}

public function datatables(UserDataTable $dataTable)
{
    return $dataTable->ajax();
}

Step 6: Enjoy Your DataTable

That’s it! You’ve successfully set up a DataTable using the Laravel Yajra DataTable HTML Builder. Access your DataTable by visiting the /users route in your Laravel application. You'll have a feature-rich data table with searching, sorting, and pagination capabilities ready to display your data.

Customize your DataTable further by exploring the official documentation and the DataTables documentation.

Conclusion:
Laravel Yajra DataTables is a powerful package for creating interactive data tables in your Laravel applications. With the Laravel Yajra DataTable HTML Builder, you can easily define and customize your DataTables, making it a valuable tool for presenting and managing tabular data in your web projects.

Go forth and get more out of your content. Go forth and conquer Medium! (and while you’re at it, follow me on Medium! and feel free to Subscribe)

Found this post useful? Kindly tap the 👏 button below! :)

🌟 Enjoy my blogging content? Support my work by buying me a virtual coffee on BuyMeACoffee! Your contributions help fuel insightful tech articles. Join hands in making coding more accessible and exciting for all. https://www.buymeacoffee.com/arjunamrutiya🚀