Tool Components

These components are classified under the Tool category. At next you can see the list of available components:

Components
Datatables, Modal

Datatables

Important

This component requires the Datatables plugin, so be sure to first setup the plugin on the package configuration file. Read more on the plugins configuration section. The plugin can be installed locally using php artisan adminlte:plugins install --plugin=datatables --plugin=datatablesPlugins command. The datatablesPlugins provides the files for the tool buttons that are used for the data export feature, so you can avoid its installation if you won't use them. After installing the plugins, you will need to include the related plugins files on the configuration file, example of this configuration will be provided later.

This component represents a wrapper around the well known Datatables plugin. The component defines the next set of attributes:

Attribute	Description	Type	Default	Required
beautify	When enabled, the table cells will be vertically and horizontally centered.	any	null	no
bordered	When enabled, borders will be displayed around the table	any	null	no
compressed	When enabled, the table will be compressed using less white space between cells and rows	any	null	no
config	Array with the plugin configuration parameters	array	[]	no
footer-theme	The table footer theme (light or dark)	string	null	no
heads	An array with the headers (titles) for the table columns. Each header can be a string or an array with next properties: label, width, no-export and classes	array	-	yes
head-theme	The table head theme (light or dark)	string	null	no
hoverable	When enabled, a hover effect will be available for the table rows	any	null	no
id	The table identification (id) attribute	string	-	yes
striped	When enabled, a striped effect will be available for the table rows	any	null	no
theme	The table theme (light, dark, primary, secondary, info, warning or danger)	string	null	no
with-buttons	When enabled, a set of tool buttons for exporting the data of the table will be available	any	null	no
with-footer	Enables a footer with header cells. The footer can be fully customized using the footerCallback option	any	null	no

The available options for the config attribute are those explained on the plugin documentation. You can define each header of the heads attribute with an inner array, the next properties are available:

• label: for the column title.
• width: to define the column width percentage.
• no-export: to disable data export for the column (useful for columns with buttons or actions).
• classes: to add extra classes for the column title (only for versions >= v3.8.6).

All other extra attributes you define will be inserted directly on the underlying table element.

Note

You can always do all the plugin configuration from Javascript/jQuery using the id property of the component as the selector for the id attribute, instead of using the config property of the component. However, you may need to invoke the destroy method first.

Examples

{{-- Setup data for datatables --}}
@php
$heads = [
    'ID',
    'Name',
    ['label' => 'Phone', 'width' => 40],
    ['label' => 'Actions', 'no-export' => true, 'width' => 5],
];

$btnEdit = '<button class="btn btn-xs btn-default text-primary mx-1 shadow" title="Edit">
                <i class="fa fa-lg fa-fw fa-pen"></i>
            </button>';
$btnDelete = '<button class="btn btn-xs btn-default text-danger mx-1 shadow" title="Delete">
                  <i class="fa fa-lg fa-fw fa-trash"></i>
              </button>';
$btnDetails = '<button class="btn btn-xs btn-default text-teal mx-1 shadow" title="Details">
                   <i class="fa fa-lg fa-fw fa-eye"></i>
               </button>';

$config = [
    'data' => [
        [22, 'John Bender', '+02 (123) 123456789', '<nobr>'.$btnEdit.$btnDelete.$btnDetails.'</nobr>'],
        [19, 'Sophia Clemens', '+99 (987) 987654321', '<nobr>'.$btnEdit.$btnDelete.$btnDetails.'</nobr>'],
        [3, 'Peter Sousa', '+69 (555) 12367345243', '<nobr>'.$btnEdit.$btnDelete.$btnDetails.'</nobr>'],
    ],
    'order' => [[1, 'asc']],
    'columns' => [null, null, null, ['orderable' => false]],
];
@endphp

{{-- Minimal example / fill data using the component slot --}}
<x-adminlte-datatable id="table1" :heads="$heads">
    @foreach($config['data'] as $row)
        <tr>
            @foreach($row as $cell)
                <td>{!! $cell !!}</td>
            @endforeach
        </tr>
    @endforeach
</x-adminlte-datatable>

{{-- Compressed with style options / fill data using the plugin config --}}
<x-adminlte-datatable id="table2" :heads="$heads" head-theme="dark" :config="$config"
    striped hoverable bordered compressed/>

Important

Please, note the differences between the previous two examples, on the first one the rows and cells were manually constructed using loops over they available dataset. On the second example, the dataset is passed directly to the underlying plugin using the $config['data'] property. You can't mix both strategies, use one or another.

Use the next image as reference to check how every example is rendered. Please, note in the image the tables were wrapped inside a Bootstrap Grid System to organize them. This same consideration is valid for all the other examples below.

{{-- Themes --}}
<x-adminlte-datatable id="table3" :heads="$heads" :config="$config" theme="info" striped hoverable/>

<x-adminlte-datatable id="table4" :heads="$heads" theme="danger" :config="$config"
    striped hoverable/>

<x-adminlte-datatable id="table5" :heads="$heads" :config="$config" theme="light" striped hoverable/>

<x-adminlte-datatable id="table6" :heads="$heads" head-theme="light" theme="dark" :config="$config"
    striped hoverable with-footer footer-theme="light" beautify/>

{{-- With buttons --}}
<x-adminlte-datatable id="table7" :heads="$heads" head-theme="light" theme="warning" :config="$config"
    striped hoverable with-buttons/>

{{-- With buttons + customization --}}
@php        
$config['dom'] = '<"row" <"col-sm-7" B> <"col-sm-5 d-flex justify-content-end" i> >
                  <"row" <"col-12" tr> >
                  <"row" <"col-sm-12 d-flex justify-content-start" f> >';
$config['paging'] = false;
$config["lengthMenu"] = [ 10, 50, 100, 500];
@endphp

<x-adminlte-datatable id="table8" :heads="$heads" head-theme="dark" class="bg-teal" :config="$config"
    striped hoverable with-buttons/>

Required Plugin Configuration

To use this component you need to install and enable the required Datatables plugins. You can install the plugins locally using the next command:

php artisan adminlte:plugins install --plugin=datatables --plugin=datatablesPlugins

Then, the plugin configuration to use Datatables without the set of export buttons may look like this:

'Datatables' => [
    'active' => false,
    'files' => [
        [
            'type' => 'js',
            'asset' => true,
            'location' => 'vendor/datatables/js/jquery.dataTables.min.js',
        ],
        [
            'type' => 'js',
            'asset' => true,
            'location' => 'vendor/datatables/js/dataTables.bootstrap4.min.js',
        ],
        [
            'type' => 'css',
            'asset' => true,
            'location' => 'vendor/datatables/css/dataTables.bootstrap4.min.css',
        ],
    ],
],

To use the export buttons (refer to with-buttons attribute), you will need also next configuration:

'DatatablesPlugins' => [
    'active' => false,
    'files' => [
        [
            'type' => 'js',
            'asset' => true,
            'location' => 'vendor/datatables-plugins/buttons/js/dataTables.buttons.min.js',
        ],
        [
            'type' => 'js',
            'asset' => true,
            'location' => 'vendor/datatables-plugins/buttons/js/buttons.bootstrap4.min.js',
        ],
        [
            'type' => 'js',
            'asset' => true,
            'location' => 'vendor/datatables-plugins/buttons/js/buttons.html5.min.js',
        ],
        [
            'type' => 'js',
            'asset' => true,
            'location' => 'vendor/datatables-plugins/buttons/js/buttons.print.min.js',
        ],
        [
            'type' => 'js',
            'asset' => true,
            'location' => 'vendor/datatables-plugins/jszip/jszip.min.js',
        ],
        [
            'type' => 'js',
            'asset' => true,
            'location' => 'vendor/datatables-plugins/pdfmake/pdfmake.min.js',
        ],
        [
            'type' => 'js',
            'asset' => true,
            'location' => 'vendor/datatables-plugins/pdfmake/vfs_fonts.js',
        ],
        [
            'type' => 'css',
            'asset' => true,
            'location' => 'vendor/datatables-plugins/buttons/css/buttons.bootstrap4.min.css',
        ],
    ],
],

Finally, you need to use the @section('plugins.Datatables', true) and/or @section('plugins.DatatablesPlugin', true) sentences on the blade file where you expect to use the component. Alternatively, you can choose to use the plugin files from a CDN instead of installing it locally.

Modal

This component represents an AdminLTE modal notification. The following attributes are available:

Attribute	Description	Type	Default	Required
disable-animations	Disables the show/hide modal fade animations	any	null	no
icon	A fontawesome icon for the modal header	string	null	no
id	The modal id attribute, used to target the modal and show it	string	-	yes
scrollable	Enables a scrollable modal. Use this when the modal content is large	any	null	no
size	The modal size (sm, lg or xl).	string	null	no
static-backdrop	Enables a static backdrop. The modal will not close when clicking outside it	any	null	no
theme	The modal theme: light, dark, primary, secondary, info, success, warning, danger or any other AdminLTE color like lightblue or teal	string	null	no
title	The title for the modal header	string	null	no
v-centered	Enables a vertically centered modal	any	null	no

Any other attribute you define will be directly inserted into the underlying div.modal element. For example, you may define a class, onclick, or any other attribute you may need.

The modal also defines the next extra slot (the main slot is used for the modal body content):

• footerSlot: Use this slot to customize the modal footer.

Examples

{{-- Minimal --}}
<x-adminlte-modal id="modalMin" title="Minimal"/>
{{-- Example button to open modal --}}
<x-adminlte-button label="Open Modal" data-toggle="modal" data-target="#modalMin"/>

{{-- Themed --}}
<x-adminlte-modal id="modalPurple" title="Theme Purple" theme="purple"
    icon="fas fa-bolt" size='lg' disable-animations>
    This is a purple theme modal without animations.
</x-adminlte-modal>
{{-- Example button to open modal --}}
<x-adminlte-button label="Open Modal" data-toggle="modal" data-target="#modalPurple" class="bg-purple"/>

{{-- Custom --}}
<x-adminlte-modal id="modalCustom" title="Account Policy" size="lg" theme="teal"
    icon="fas fa-bell" v-centered static-backdrop scrollable>
    <div style="height:800px;">Read the account policies...</div>
    <x-slot name="footerSlot">
        <x-adminlte-button class="mr-auto" theme="success" label="Accept"/>
        <x-adminlte-button theme="danger" label="Dismiss" data-dismiss="modal"/>
    </x-slot>
</x-adminlte-modal>
{{-- Example button to open modal --}}
<x-adminlte-button label="Open Modal" data-toggle="modal" data-target="#modalCustom" class="bg-teal"/>