Skip to content
YajraBox

Laravel DataTables
Icon

WARNING You're browsing the documentation for an upcoming version of Laravel DataTables. The documentation and features of this release are subject to change.

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);

See Also

Edit this page on GitHub