Tables in a tabs

I just found out that responsive feature is not working for data table with display:none;

Hello, @olesolo

Can you give us a link to a page with data tables in tabs? It helps us to figure out your issue faster.Most likely bad code of your plugins or plugin, which you use to create tabs, provoked this issue.
You need to deactivate all your plugins one by one and check the issue. Thus you will find out which plugin causes the error. If it won’t help, try to switch temporarily to a standard WordPress theme.

Here is the link. The tabs are at the bottom of the page. Try to open the second tab on mobile.

Hello, @olesolo
In order to show data table in tab properly, you should call the function from Data Tables by Supsystic plugin to refresh table after the tab opening.
Here is the example of custom code for using data tables in tabs:

<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">[supsystic-tables id=1]</div>
<div id="tabItemContent_3">Some data</div>
jQuery(document).ready(function() {
 var tabSection = jQuery('#tabsList');
 var 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() {
     // Call the function from Data Tables by Supsystic plugin to refresh table after the tab opening
     if(typeof app.getTableInstanceById(tableId).fnAdjustColumnSizing == 'function' ) {
      app.getTableInstanceById(tableId).fnAdjustColumnSizing(false);
     }

    });
   }
  });
 }
});

Please try it and let us know the results.

not working ??

I tried this code with a direct link to tableId

jQuery(document).ready(function() {

 //jQuery('.et_pb_tab_1').attr('data-table_id', '1');
 var tabSection = jQuery('.et_pb_tabs_controls');
 var 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('.et_pb_tab_1').each(function() {
   // Get table id
   var tableId = 1;
   // Check, is this tab contains table or not
    jQuery(this).on('click', function() {
     // Call the function from Data Tables by Supsystic plugin to refresh table after the tab opening
     if(typeof app.getTableInstanceById(tableId).fnAdjustColumnSizing == 'function' ) {
      app.getTableInstanceById(tableId).fnAdjustColumnSizing(false);
     }
   });
  });
 }
});

Hello, @olesolo

Can you specify, what exactly is not working – table in tab is still not responsive or provided code doesn’t work for you?

table in tab is still not responsive.

Please, write us via internal support and we’ll provide a fix for you.

I still can’t fix this issue. I can’t add an id attributes to my tabs. May be you could add a simple code for “Execute JS Script After Table Load” to reload table?

Hello, @olesolo

We have already improved required code to show Data Table properly in tabs and added fix to a plugin code.
Here is the link to instruction: https://supsystic.com/documentation/table-in-hidden-tab/

If you still have problems with it, please write us via internal support and we’ll try to make it work specially for you.

My quick solution is to change table class on click if window width is small.

if (jQuery(window).width() < 480) {
            jQuery('div.et_pb_tab table').attr('class','supsystic-table border stripe hover order-column lightboxImg no-border  dataTable no-footer oneColumn oneColumnWithLabels');
          }