Tablesaw not getting triggered inside Bootstrap Carousel

Question

I'm using the Tablesaw plugin to get responsive tables.

At some point I need to include different tables inside different items/slides of a Bootstrap Carousel.

On load, the table on the active Item of the Carousel will display correctly (Tablesaw is initiated properly), but once I move to the next slide/item, the tables in there won't be properly displayed (Tablesaw not initiated).

Tablesaw includes an extra JS file to initiate upon load:

$( function(){
    $( document ).trigger( "enhance.tablesaw" );
});

This seems to work for the first slide/item but not for the rest.

Any clue on why this might be happening?

I've created a Plunker to illustrate the issue.

Answer 1

The problem is in the Tablesaw intialization. Tablesaw needs to know during initialization (which is done in the tablesaw-init.js) the size of the element. You have two tablesaw elements placed inside the bootstrap Carousel, while one is active and the other is not. When you look at the Carousel css, you can see that the display property of the Carousel item which is not currently active is set to none. Elements which are not displayed have width and height set to 0.

So the solution could be changing the code inside the file tablesaw-init.js to this:

;(function($) {
    $(function(){
      // Show all carousel items before Tablesaw intialization
      $(".carousel-inner > .item").css("display", "block");
      // Initialize the Tablesaw
      $( document ).trigger( "enhance.tablesaw" );
      // Remove the style added before initialization
      $(".carousel-inner > .item").removeAttr("style");
    });
})(jQuery);

After this change there is no need to handle the slid event.

Here is your original code sample with the mentioned change, so you can see it is working https://plnkr.co/edit/Ocd0axmKLS1KDtGYlU4K?p=preview

Answer 2

You can't initialize Tablesaw on hidden tables.

So you have to set your custom initialization script to only initialize visible tables:

;(function($) {
    $(function(){
        // Initialize Tablesaw on the active carousel slide
        $('#carousel-einzelwerte .item.active').trigger('enhance.tablesaw');
        // Initialize Tablesaw on slide change
        $('#carousel-einzelwerte').on('slid.bs.carousel', function(e) {
            $(e.relatedTarget).trigger('enhance.tablesaw');
        });
    });
})(jQuery);

Demo: https://plnkr.co/edit/JxOnj6dJVcmpyBrzEzrs?p=preview