When using the table element of this plugin within the tabs, accordion or toggle elements that are native to WP Bakery Page Builder itself (or other sources), 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, even when using one of the other more basic responsive layouts outside the scope of the listed advanced table scripts.
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 those other plugins or themes are implementing those tab or accordion 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 such container elements, 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 usually NOT supported to embed a table element within such elements, as those elements will prevent the table from working correctly. If the tabs / accordion / toggle element would trigger a global resize event, every time a new section is activated / opened, the table would be able to adjust itself again, but otherwise, this plugin has no way of knowing when a (new) section has been selected / opened.
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<script type="text/javascript"> jQuery(document).ready(function () { /* Hook into the tab click event */ /* Adjust class name ".tabli" with the class name actually used by tabs/accordion/toggle element */ jQuery("body").on("click", ".tabli", function(event) { setTimeout( function() { /* Trigger a Global Resize Event */ if (typeof(Event) === 'function') { window.dispatchEvent(new Event('resize')); } else { var evt = window.document.createEvent('UIEvents'); evt.initUIEvent('resize', true, false, window, 0); window.dispatchEvent(evt); } jQuery(window).trigger("debouncedresize"); /* Readjust TableSaw Layout */ var tab = jQuery(this).find("a").attr("href").substring(1); var table = jQuery(this).parent().next().find("#" + tab).find(".ts-advanced-tables-datatable.ts-datatables-theme-tablesaw").trigger("enhance.tablesaw"); }, 200); }); }); </script> |
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.
