Problems with Tabs and Accordions

When using the table element of this plugin within the tabs or accordion elements that are native to Visual Composer itself, you will notice that advanced table features (DataTable / FooTable / TableSaw) are either not working at all, or only in a limited capacity. Furthermore, any responsive behavior of the table will also be impacted negatively.

This is NOT a bug or issue with this plugin, but due to an inherit limitation in those container elements itself (tabs / accordion), caused by the way Visual Composer is implementing those elements.

The table scripts need to be able to correctly determine the table dimensions in order to apply its responsive behavior. But when embedded within a tabs or accordion element, only the table in the first tab / accordion (or the one visible after page load) will be able to do so, because the other tables are hidden from view, in a container element (tab / accordion) that is invisible due to a “display: none;” rule.

Because of that, a browser will assign a width and height of 0 (zero) pixel to any element that is hidden that way, preventing the table scripts to determine any valid dimensions for the tables in any of the none visible sections, which is why those tables are “missing” their responsive behavior. Other advanced table features (filter, sorting, serch, etc.) can be impacted as well, for the same reason.

Therefore, it is NOT supported to embed a table element within a tabs or accordion element native to Visual Composer (including modified versions of it provided by themes that bundle Visual Composer), as those elements will prevent the table from working correctly.

In regards to the “TableSaw” script, there is a possible workaround, requiring some additional JS code to be added to the page holding the elements. This code will trigger a global browser resize event when clicking on a tab and then re-initializing any TableSaw tables within the tabs element.

Using this code or any modified version of it (in order to use it with other elements than just tabs) should only be done by advanced and experienced users. Please be aware that the code above is only provided as a guide for a potential workaround; however, “Tekanewa Scripts by Kraut Coding” does not officially support any such implementations and usage is at the users own risk.


Tekanewa has written 35 articles

Hi there, I am the Lead Developer here at Tekanewa Scripts by Kraut Coding; well, to be honest, I'm also the only developer. I love to create something beautiful and useful for Websites and here I write about how to use them. :)