Table in Hidden Tab

If you’d like to tune table created by our Data Table plugin into a tab, which is hidden by default, we need to aware you, that table needs to be rendered on the page from the very beginning to be output correctly, but as a tab is hidden by default, we need to create a detailed tutorial with an example, to make sure everything will be working fine.

Step 1. Add ID of table as an attribute to tab header.

Step 2. Add a small script with a callback on click on your tab headers – right to a page with tabs or into any javascript file of your theme which is loaded on the page with tabs. The callback should:

• get the table id from tab header
• get table object using the function getTableInstanceById(tableId) (this function is placed in global window.supsystic.Tables object)
• call the function fnAdjustColumnSizing(false) of table object to refresh table after showing tab content.

Please note, that it is almost impossible to  calculate the positioning and size of the table correctly (and other elements as well) in the hidden elements by default.

Sometimes it causes the issues. For example – you have 100% table width, but in process of building a table, in a hidden element (tab) – its width will be 100% of the width of this hidden element. So,  when it’s hidden – its width is 0. Because of this, the table can be display not correct. At that point – when you open the table on the page (in the new tab) – it have to be updated.

The update must be bound to the code of opening tab. Because the code can be different for different tabs on the page – we can not foresee all of them.

An example below shows a code, that would be used for a case, where we have tab container with id “tabsList” and 3 tabs with header with class “tabItem”. Then, our callback will be looking like that:

<ul id="tabsList">
  <li><a href="#tabItemContent_1" class="tabItem">Tab 1</a></li>
  <li><a href="#tabItemContent_2" class="tabItem" data-table_id="1">Tab 2</a></li>
  <li><a href="#tabItemContent_3" class="tabItem">Tab 3</a></li>
</ul>
<div id="tabItemContent_1">Some data</div>
<div id="tabItemContent_2">
Save as
csv 
xls 
xlsx 
pdf 
print 
size 
active 
date 
size 
active 
date 
</div>
<div id="tabItemContent_3">Some data</div>

jQuery(document).ready(function() {
	var tabSection = jQuery('#tabsList'),
		app = window.supsystic && window.supsystic.Tables ? window.supsystic.Tables : false;
	// Check are Data Tables by Supsystic plugin API and tabs section exist on page
	if(tabSection.length && app) {
		// Find all tabs
		tabSection.find('.tabItem').each(function() {
			// Get table id
			var tableId = jQuery(this).data('table_id');
			// Check, is this tab contains table or not
			if(tableId) {
				jQuery(this).on('click', function() {
					var tbl = app.getTableInstanceById(tableId),
						respMode = tbl.data('responsive-mode');
					// Call the function from Data Tables by Supsystic plugin to refresh table after the tab opening
					if(typeof tbl.fnAdjustColumnSizing == 'function' ) {
						tbl.fnAdjustColumnSizing(false);
					}
					switch(respMode) {
						case 0:	// Responsive Mode: Standart Responsive Mode
							jQuery(window).trigger('resize');
							break;
						case 1:	// Responsive Mode: Automatic Column Hiding
							tbl.trigger('responsive-resize.dt');
							break;
						default:
							break;
					}
				});
			}
		});
	}
});