How can i make datatables responsive like expandable .

[Ticket-Master]

i have tried using this from datatables.net $('#myTable').DataTable( { responsive: true } );

but it is not working and just does not work.

adminlte 3 has given a explanation here https://adminlte.io/docs/3.1//javascript/expandable-tables.html

but i don't understand how can i make it responsive in boilerplate .

[sebastienheyd]

Hello,

You have to load the plugin manually because it is not loaded by default, I will see to add it as an option to the default loader.

You can use this for now :

@include('boilerplate::load.datatables')
@push('css')
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.7/css/responsive.bootstrap4.min.css">
@endpush
@push('js')
    <script src="https://cdn.datatables.net/responsive/2.2.7/js/dataTables.responsive.min.js"></script>
    <script>
        $('#myTable').DataTable( {
            responsive: true
        } );
    </script>
@endpush

Another approach is to surround the table by using a div with the class "table-responsive", see https://getbootstrap.com/docs/4.0/content/tables/#responsive-tables

[Ticket-Master]

Thanks alot ! the snippet you provided worked ! i hope this helps others too !

[sebastienheyd]

I just added the plugins to the package (v7.5.2) : https://sebastienheyd.github.io/boilerplate/plugins/datatables

IMPORTANT: you must call php artisan vendor:publish --tag=boilerplate-public --force after updating to the new version

The easiest way now is to directly call the responsive plugin with the loader :

@include('boilerplate::load.datatables', ['responsive' => true])
@push('js')
    <script>
        $('#myTable').DataTable( {
            responsive: true
        } );
    </script>
@endpush