AngularJS ng-table fixed headers with jquery accor

Question

I'm using angular js ng-table to display some information. I would like to make the header of the ng-table fixed with scroll bar.Moreover I need to place one accordion just before the ng-table.

When I collapse the accordion my ng-table fixed header does not work properly. Please refer plunker I have created : "http://plnkr.co/edit/FGjU46cCMuhIdyacffHl?p=preview"

Answer 1

Problem with existing code is stickyTableHeaders() calculations for fixed header are not getting updated on accordion expand collapse.

Only way to fix the issue is disable accordion animation and then apply stickyTableHeaders() function in callbacks by JQuery UI accordion like below :

 $( "#accordion" ).accordion({
      collapsible: true,
      animate :false,
      activate: function( event, ui ) {
        $('.table').stickyTableHeaders({ scrollableArea: container, "fixedOffset": 2 });
      },
      beforeActivate: function( event, ui ) {
         $('.table').stickyTableHeaders({ scrollableArea: container, "fixedOffset": 2 })
      }

    });

You need to disable animation because there is no callback provided for animate event.