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
`top{n}`, `top{n}Start`, `top{n}End`	Numbered top row generated with the optional order argument
`bottom{n}`, `bottom{n}Start`, `bottom{n}End`	Numbered bottom row generated with the optional order argument

$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
buttons - Buttons extension toolbar when the Buttons plugin is installed
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 the optional order argument for multiple rows:

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

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(view('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