AngularJS ng-table fixed headers with jquery accordian

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"

You really don't want to use Angular and Jquery alongside each other. I suggest you use angular-ui-bootstrap accordion for coherence. — RobSeg
– RobSeg, Commented Jul 15, 2015 at 13:40

BhagyashriK · Accepted Answer · 2015-07-15 13:17:28Z

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.

answered Jul 15, 2015 at 13:17

BhagyashriK

5252 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS ng-table fixed headers with jquery accordian

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related