Responsive BS4 DataTables Not Doing Anything At All (Responsive-wise)

Responsive BS4 DataTables Not Doing Anything At All (Responsive-wise)

Webworthy DesignWebworthy Design Posts: 1Questions: 1Answers: 0

Everything else seems to be working (sorting, pagination, etc). I added the responsiveness today but it acts like nothing happened. When I drag in my browser edge the tables just blows out of the containing div... As a test I tried loading one of the demos up in codepen and it worked. So I copy/pasted the same demo into my app, including their cdn links, but whenever I try and get it to work in my app nothing happens (I'm building something in Laravel with BS4). I've checked and checked again. I'm at a total loss. I've been toying with it for hours... hoping someone can help get me through this. Here's the code I'm working with if it helps...

MY TABLE

<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header" style="display: flex; align-items: center; justify-content: space-between;">
                <h5><i class="fas fa-users fa-fw"></i> Families</h5>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addFamily">
                    <i class="fas fa-plus"></i> Add Family
                </button>
            </div>
            <div class="card-body">

                    <table class="table table-bordered table-hover mb-0 dt" width="100%">
                        <thead>
                            <tr>
                                <th>Parent 1 First Name</th>
                                <th>Parent 1 Last Name</th>
                                <th>Parent 2 First Name</th>
                                <th>Parent 2 Last Name</th>
                                <th class="actions no-sort">Actions</th>
                            </tr>
                        </thead>
                
                        <tbody>
                            @foreach ($families as $family)

                                <tr>
                                    <td>{{ $family->parent1_first_name }}</td>
                                    <td>{{ $family->parent1_last_name }}</td>
                                    <td>{{ $family->parent2_first_name }}</td>
                                    <td>{{ $family->parent2_last_name }}</td>
                                    <td class="actions">
                                        <i class="fas fa-eye fa-fw" data-toggle="modal" data-target="#showFamily" 
                                            data-id="{{ $family->id }}"
                                            data-parent1_first_name="{{ $family->parent1_first_name }}"
                                            data-parent1_last_name="{{ $family->parent1_last_name }}"
                                            data-parent2_first_name="{{ $family->parent2_first_name }}"
                                            data-parent2_last_name="{{ $family->parent2_last_name }}"
                                            data-phone="{{ $family->phone }}"
                                            data-email="{{ $family->email }}"
                                            data-address="{{ $family->address }}"
                                            data-city="{{ $family->city }}"
                                            data-state="{{ $family->state }}"
                                            data-zip="{{ $family->zip }}"
                                            data-notes="{{ $family->notes }}" 
                                            @if ($family->students->count())
                                                data-students="{{ $family->students->sortBy('first_name') }}"
                                            @endif
                                            ></i>

                                        <i class="fas fa-pen fa-fw" data-toggle="modal" data-target="#editTechnique" 
                                            data-id="{{ $family->id }}"    
                                            data-parent1_first_name="{{ $family->parent1_first_name }}"
                                            data-parent1_last_name="{{ $family->parent1_last_name }}"
                                            data-parent2_first_name="{{ $family->parent2_first_name }}"
                                            data-parent2_last_name="{{ $family->parent2_last_name }}"
                                            data-phone="{{ $family->phone }}"
                                            data-email="{{ $family->email }}"
                                            data-address="{{ $family->address }}"
                                            data-city="{{ $family->city }}"
                                            data-state="{{ $family->state }}"
                                            data-zip="{{ $family->zip }}"
                                            data-notes="{{ $family->notes }}"></i>

                                        <i class="fas fa-trash fa-fw" data-toggle="modal" data-target="#deleteTechnique" 
                                            data-id="{{ $family->id }}"></i>
                                    </td>
                                </tr>

                            @endforeach
                            
                        </tbody>
                    </table>

            </div>
        </div>
    </div>
</div>

DATATABLE JS

// DataTables
$('.dt').DataTable({
    responsive: true,
    autoWidth: false,
    columnDefs: [{
        targets: 'no-sort',
        orderable: false
    }]
});

JS REQUIREMENTS

require('bootstrap');
require('@coreui/coreui');
require( 'datatables.net-bs4' )();
require( 'datatables.net-responsive-bs4' )();

SCSS INCLUDES

// DataTables
@import '~datatables.net-bs4/css/dataTables.bootstrap4.min.css';
@import '~datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css';

PACKAGE.JSON DEPENDENCIES

"dependencies": {
        "@coreui/coreui": "^2.1.4",
        "datatables.net": "^1.10.19",
        "datatables.net-bs4": "^1.10.19",
        "datatables.net-responsive-bs4": "^2.2.3",
        "perfect-scrollbar": "^1.4.0",
        "simple-line-icons": "^2.4.1"
    }

Let me know if I missed anything that might help get this working. Thanks!

Answers

Sign In or Register to comment.