Skip to content
YajraBox

Laravel DataTables

HTML Builder

The HTML Builder is a fluent interface for generating DataTables HTML markup and JavaScript configuration. It provides a clean, expressive way to define your table structure, columns, and options.

Installation

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

After installation, publish the configuration:

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

Basic Usage

Via Dependency Injection

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

Via IoC Container

use Yajra\DataTables\Facades\DataTables;
 
Route::get('users', function() {
    $builder = app('datatables.html');
});

From DataTables Instance

use Yajra\DataTables\Facades\DataTables;
 
Route::get('users', function(DataTables $dataTable) {
    $builder = $dataTable->getHtmlBuilder();
});

Configuration

Edit config/datatables-html.php to set default table attributes:

<?php
 
return [
    'table' => [
        'class' => 'table table-bordered',
        'id'    => 'dataTable',
    ],
];

Column Types

Standard Columns

Column::make('name')
    ->title('Name')
    ->data('name')
    ->name('name')

ID Columns

Use Column::make('id') for the ID field:

Column::make('id')
    ->title('ID')

Computed Columns

Column::computed('action', 'Action')
    ->orderable(false)
    ->searchable(false)

Checkbox Columns

Column::checkbox()

Or use the helper method:

$builder->addCheckbox()

Index Columns

Column::index()

Or use the helper method:

$builder->addIndex()

Action Columns

Column::action()

Or use the helper method:

$builder->addAction()

Column Attributes

Attribute Type Description
name string Column name from data source
data string Key from JSON response
title string Column header text
searchable bool Enable/disable search
orderable bool Enable/disable ordering
render string JavaScript render function
footer string Footer content
exportable bool Include in exports
printable bool Include in print view
className string CSS class name
width string Column width
visible bool Show/hide column

Table Configuration

Basic Table

echo $html->table();

Table with Custom Attributes

echo $html->table(['class' => 'table table-striped', 'id' => 'users-table']);

Table with Footer

echo $html->table(['class' => 'table'], true);

Table with Search Headers

echo $html->table([], false, true);

AJAX Configuration

Basic AJAX

$html = $builder->ajax(route('users.data'));

POST AJAX

$html = $builder->postAjax(route('users.data'));

AJAX with Custom Data

$html = $builder->ajax([
    'url' => route('users.data'),
    'type' => 'GET',
    'data' => 'function(d) { d.key = "value"; }'
]);

Parameters

Configure DataTables options:

$html = $builder
    ->paging(true)
    ->searching(true)
    ->info(false)
    ->searchDelay(350);

Plugins

Select Plugin

$html = $builder
    ->selectStyleSingle()
    ->selectInfo(true)
    ->selectItemsRow();

Buttons Plugin

use Yajra\DataTables\Html\Button;
 
$html = $builder->buttons(
    Button::make('excel')->text('Export Excel'),
    Button::make('pdf')->text('Export PDF')
);

SearchPanes Plugin

$html = $builder->searchPanes(true);

Responsive Plugin

$html = $builder->responsive(true);

Scripts Generation

// With default type
echo $html->scripts();
 
// With module type (for Vite)
echo $html->scripts([], ['type' => 'module']);

See Also

Edit this page on GitHub