Version

HTML Builder Installation

The HTML Builder plugin provides a fluent interface for generating DataTables HTML markup and JavaScript configuration.

Overview

The HTML Builder allows you to:

Generate Table HTML - Create table markup with columns configuration
Configure DataTables - Set up pagination, searching, ordering
Build JavaScript - Auto-generate client-side DataTables initialization
Add Buttons - Include export, print, and custom buttons

Installation

Install the HTML Builder package:

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

Publish Configuration

Publish the configuration and assets:

php artisan vendor:publish --tag=datatables-html

This creates:

config/datatables-html.php - Configuration file
View templates for customization

Basic Usage

Defining Columns

use Yajra\DataTables\Facades\DataTables;
use Yajra\DataTables\Html\Builder;
use Yajra\DataTables\Html\Column;
use App\Models\User;
 
Route::get('users', function(Builder $builder) {
    // Handle AJAX requests
    if (request()->ajax()) {
        return DataTables::of(User::query())->toJson();
    }
 
    // Build HTML for initial page load
    $html = $builder->columns([
        Column::make('name'),
        Column::make('email'),
        Column::make('created_at'),
        Column::make('id'),
    ]);
 
    return view('users.index', compact('html'));
});

Blade Template

@extends('layouts.app')
 
@section('content')
<div class="container">
    <div class="card">
        <div class="card-header">
            <h3>Users</h3>
        </div>
        <div class="card-body">
            {!! $html->table() !!}
        </div>
    </div>
</div>
@endsection
 
@push('scripts')
    {!! $html->scripts() !!}
@endpush

Configuration Options

Customize the default table attributes in config/datatables-html.php:

<?php
 
return [
    'table' => [
        'class' => 'table table-bordered table-striped',
        'id' => 'dataTable',
        'width' => '100%',
    ],
    'script' => 'datatables::script',
    'scriptNonce' => env('DATA_TABLES_SCRIPT_NONCE'),
];

Column Types

Type	Method	Description
Standard	`Column::make('name')`	Database column
Computed	`Column::computed('action')`	JavaScript-rendered column
Checkbox	`Column::checkbox()`	Row selection checkboxes
Index	`Column::index()`	Row numbering
Action	`Column::action()`	Action buttons

Common Configuration

Enable Server-Side Processing

public function html(): HtmlBuilder
{
    return $this->builder()
        ->columns($this->getColumns())
        ->minifiedAjax()
        ->orderBy(0, 'asc')
        ->serverSide(true)
        ->processing(true);
}

Add Buttons

use Yajra\DataTables\Html\Button;
 
public function html(): HtmlBuilder
{
    return $this->builder()
        ->columns($this->getColumns())
        ->buttons([
            Button::make('excel'),
            Button::make('csv'),
            Button::make('pdf'),
            Button::make('print'),
        ]);
}

Laravel DataTables