title: DataTables/jQuery UI Tabs header width bug
body: <p>So there is a well known bug with DataTables + jQuery UI Tabs where the column headers cannot be calculated properly due to the DataTable being initially hidden, this prevents the sort icon from being shown as the width is off the screen - <a href="http://datatables.net/examples/api/tabs_and_scrolling.html" rel="nofollow">http://datatables.net/examples/api/tabs_and_scrolling.html</a>.</p>
  
  <p>In the link above it says to fix this inside the tabs <code>onActivated</code> method like so:</p>
  
  <pre><code>   $("#tabs").tabs({
          active: obj["currentTabIndex"],
          activate: function(event, ui) {
              $("#example").DataTable().columns.adjust();
              chrome.storage.local.set({"currentTabIdx": ui.newPanel[0].dataset["tabIndex"]});
          }
      });
  </code></pre>
  
  <p>However, as you can see I am saving the tab that was selected so that when the user reloads the page, the same tab that they left on was open.</p>
  
  <p>On reload, the tab that was selected shows however the <code>activate</code> event does not fire as the tab wasn't selected, merely loaded.</p>
  
  <p>I have tried adjusting the columns inside the <code>activate</code>, <code>load</code>, <code>create</code> methods etc but nothing works.</p>
  
  <p>Is there a solution for this? </p>