Utilizing footable in conjunction with Boostrap Responsive Tabs leads to an issue post-resize. When the page is initially loaded on a desktop, everything functions properly until the screen is resized. Once the screen is resized, the tables within the tabs stop working. This issue occurs both ways - if the page is loaded with a small browser window, the tables will work within the responsive tabs, but break when the window is expanded.
The problem has been replicated on jsfiddle
(External resources can be found on fiddle)
$(document).ready(function(){
fakewaffle.responsiveTabs(['xs']);
$('.footable').footable();
});
<div class="row">
<div class="col-lg-12">
<div class="bs-component">
<ul class="nav nav-tabs responsive">
<li class="active">
<a data-toggle="tab" href="#tab1">This</a>
</li>
<li>
<a data-toggle="tab" href="#tab2">Is</a>
</li>
<li>
<a data-toggle="tab" href="#tab3">My</a>
</li>
<li>
<a data-toggle="tab" href="#tab4">Boomstick!</a>
</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade active in">
<table class="table table-striped table-bordered table-hover footable toggle-medium">
<thead>
<th>Identifier</th>
<th data-hide="all">Column2</th>
<th data-hide="all">Column3</th>
</thead>
<tbody>
<tr>
<td>Clickme</td>
<td>Okay</td>
<td>Whatever</td>
</tr>
<tr>
<td>Second Row</td>
<td>Still Okay</td>
<td>Still Whatever</td>
</tr>
</tbody>
</table>
</div>
<div id="tab2" class="tab-pane fade active">
<table class="table table-striped table-bordered table-hover footable toggle-medium">
<thead>
<th>Identifier</th>
<th data-hide="all">Column2</th>
<th data-hide="all">Column3</th>
</thead>
<tbody>
<tr>
<td>Clickme</td>
<td>Okay</td>
<td>Whatever</td>
</tr>
<tr>
<td>Second Row</td>
<td>Still Okay</td>
<td>Still Whatever</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>