Version

HTML Builder Layout

The layout() method allows customizing the table control elements position using DataTables layout option.

Basic Usage

use Yajra\DataTables\Html\Builder;
use Yajra\DataTables\Html\Layout;
 
$html = $builder->layout(function (Layout $layout) {
    $layout->topStart('pageLength');
    $layout->topEnd('search');
    $layout->bottomStart('info');
    $layout->bottomEnd('paging');
});

Available Positions

The position name format is (top|bottom)[number](Start|End)?:

Position	Description
`top`	Top row, full width
`topStart`	Top left corner
`topEnd`	Top right corner
`bottom`	Bottom row, full width
`bottomStart`	Bottom left corner
`bottomEnd`	Bottom right corner
`top2`, `top2Start`, `top2End`	Second top row
`bottom2`, `bottom2Start`, `bottom2End`	Second bottom row

$html = $builder->layout(function (Layout $layout) {
    $layout->topStart('pageLength');
    $layout->topEnd('search');
    $layout->bottomStart('info');
    $layout->bottomEnd('paging');
});

Built-in Features

DataTables provides these built-in features:

info - Table information summary
pageLength - Page length control
paging - User input control for paging
search - Search input box
div - A simple placeholder element
null - Show nothing

$html = $builder->layout(function (Layout $layout) {
    // Use built-in features
    $layout->topStart('pageLength');
    $layout->topEnd(['search' => ['placeholder' => 'Search...']]);
    $layout->bottomStart('info');
    $layout->bottomEnd('paging');
 
    // Remove a feature
    $layout->topStart(null);
});

Multiple Elements

Pass an array to show multiple items:

$html = $builder->layout(function (Layout $layout) {
    $layout->top(['pageLength', 'search']);
    $layout->bottom(['info', 'paging']);
});

Multiple Rows

Use ordering for multiple rows:

$html = $builder->layout(function (Layout $layout) {
    // First top row
    $layout->topStart('pageLength');
    $layout->topEnd('search');
 
    // Second top row
    $layout->top2Start('info');
    $layout->top2End('paging');
});

Custom Elements

Use view methods to render jQuery selectors:

$html = $builder->layout(function (Layout $layout) {
    $layout->topStartView('#custom-toolbar');
    $layout->bottomEndView('#custom-footer');
});

Livewire Components

Add Livewire components to the layout:

use Yajra\DataTables\Html\Enums\LayoutPosition;
 
$html = $builder->layout(function (Layout $layout) {
    $layout->addLivewire(
        \App\Livewire\DataTableFilters::class,
        LayoutPosition::TopStart
    );
});

Add Custom View

Render any view or component:

use Yajra\DataTables\Html\Enums\LayoutPosition;
 
$html = $builder->layout(function (Layout $layout) {
    $layout->addView('components.search-box', LayoutPosition::TopEnd);
});

Array Configuration

You can also pass an array directly:

$html = $builder->layout([
    'topStart' => 'pageLength',
    'topEnd' => 'search',
    'bottomStart' => 'info',
    'bottomEnd' => 'paging',
]);

Or use Layout::make():

use Yajra\DataTables\Html\Layout;
 
$layout = Layout::make();
$layout->topStart('pageLength');
$layout->topEnd('search');
 
$html = $builder->layout($layout);

Laravel DataTables