Unresponsive Footable Table when nested in a hidden tab

January 31st, 2014

Footable is a great responsive table Jquery plugin that uses responsive breakpoints to gracefully collapse columns on different screen sizes.  One place I use Footable is within tabs where I display different tables using Bootstrap Tabs js.  What I found is that Footable doesn't quite work right on hidden tabs, i.e. the table show in the hidden tabs but remain initially unresponsive to the device screen (you could resize the window to trigger a resize event, but if a user is on the phone, this really isn't an option).  From a little snooping, it looks like Footable attempts to inherit the width and height of the table to determine whether to trigger its responsive breakpoints.  Since hidden tabs have zero width, it inherits the lowest breakpoint.  

So how do you fix this?  It's actually quite simple -- all you need to do is add the following javascript to trigger a resize of the footable table whenever a user clicks on a tab.  Using Bootstrap Tab and Footable, the code would look like this: 

$(document).ready(function() { 
     $('.nav-tabs a').click(function (e) {
           e.preventDefault(); //prevents re-size from happening before tab shown
           $(this).tab('show'); //show tab panel 
           $('.footable').trigger('footable_resize'); //fire re-size of footable

If you are using another tab plugin (like Jquery's UI Tab), you just need to hook into a similar user action and trigger the Footable's resize event like I did above.  Hope that helps!