Tables Within Elementor Components (Tabs)

Hi,

thanks for your post, and sorry for the trouble.

This can happen when “Horizontal Scrolling” is used with a table that is then shown in a tab.
The reason for this problem is that, with tabs, only the first table is shown when the page is loaded. The tables on the other tabs are hidden.
This however means that the browser can not calculate things like column widths for these tables (because hidden elements don’t have a width, so to say).

Now, to fix this, it is possible to tell the JavaScript code to re-calculate the widths immediately after the tab with the table is opened. Unfortunately, as there are so many solutions for tabs (different themes and plugins for this all have their own implementation), there’s no one-size-fits-all solution.

In your case, this JavaScript code can help:

jQuery('.elementor-tab-content .dataTable').DataTable({retrieve:true}).columns.adjust().draw();
jQuery('.elementor-tab-title').one('click', function(){jQuery('#'+this.getAttribute('aria-controls')+' .dataTable').DataTable({retrieve:true}).columns.adjust().draw();});

Does your theme maybe offer a section that allows adding custom
JavaScript? Otherwise, we can add this with a small custom plugin.

Regards,
Tobias

thanks Tobias, really appreciate the reply!

I’m using Astra Pro which has a “Custom Layout” feature. I’ve gone through the docs on how to use it, it does seems to be inserting the code which you kindly shared, although doesnt seem to be firing / updating the table still. I’m not sure why…

https://titanium.net/wp-content/uploads/2023/03/CustomLayoutCode1.png
https://titanium.net/wp-content/uploads/2023/03/CustomLayoutCode2.png
https://titanium.net/wp-content/uploads/2023/03/CustomCodeLayout3.png

The code is inserted into the page line 3291.

view-source:https://titanium.net/flange/

Do you have any thoughts on what I might be missing ?

Hi,

that looks promising! Can you please try again with

jQuery(function($){
  $('.elementor-tab-content .dataTable').DataTable({retrieve:true}).columns.adjust().draw();
  $('.elementor-tab-title').one('click', function(){$('#'+this.getAttribute('aria-controls')+' .dataTable').DataTable({retrieve:true}).columns.adjust().draw();});
});

and change “Priority” in those settings from 10 to 11? This should move this code below the TablePress code (it’s need to run after that).

Regards,
Tobias

Thanks alot to keep looking into this, really appreciated! I tried the updated code also set priority to 100 to force it to go right at the bottom after the tablepress JQuery script. Ah still no joy unfortunately.

Hi,

ok, the position of the code is correct now. I’n not sure why it’s not evaluated properly though… We might need an artificial delay here, to be sure that the JS code for the tabs, etc. has run. Can you please give this a try?:

jQuery(function($){
  setTimeout( function() {
    $('.elementor-tab-content .dataTable').DataTable({retrieve:true}).columns.adjust().draw();
    $('.elementor-tab-title').one('click', function(){$('#'+this.getAttribute('aria-controls')+' .dataTable').DataTable({retrieve:true}).columns.adjust().draw();});
  }, 10 );
});

Regards,
Tobias

Thanks Tobias,

I couldnt get that to work unfortunately.Although the table body was already been drawn to span the full width. It was just the header that wasnt. Anyway I managed to drop this css in

.dataTables_scrollHeadInner {
width:100% !important;
}

and that causes the header to span the full width. The cells still dont space out nicely as when the tables arent in a tab but it probably as good as I can get it. If I get that working I’ll post back to this thread.

thanks again Tobias for responding and working on this, it is an amazing plugin and top class support. Good luck to you and the plugin !

Hi,

yes, that could at least be a workaround. But the code is definitely work, which you can see when pasting it into the browser’s JS console.

So, it’s just a timing issue of when it runs, I would say. If you want, you could give it another try and change the 10 in the next-to-last line of the code to e.g. 100 or even 1000. That will set a delay of 100ms (or even 1s) until it is run. By then, the tabs should hopefully have initialized.

Best wishes,
Tobias