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!