Fork me on GitHub

Expandable / collapsable table detail rows with Angular.js 27


Here is how to create expandable and collapsible tables with Angular.js. I couldn’t find any examples of this online and Angular.js only recently added official support for this in v1.2.0 with ng-repeat using ng-repeat-start/ng-repeat-end.

Don’t get me wrong here, I’m not really a fan of how this looks (I prefer Knockout.js’ “virtual element” approach in this situation) but it seems to be the official/best way to do it with Angular. Luckily I’ve been using Angular for many months now and this is the first time I needed it so it’s pretty uncommon.

What I’m talking about


Name    Gender
+ Bob    Male
+ Jane  Female
+ Bill     Male


Name    Gender
– Bob     Male
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis nisi quis mi tincidunt luctus ut quis nunc. Nam non risus tincidunt risus sodales condimentum. Morbi sed gravida elit. Nunc a turpis vestibulum elit posuere blandit. Phasellus luctus lectus non porta auctor. Etiam pellentesque imperdiet posuere. Nullam adipiscing congue nisl, in vulputate odio ornare ac.
+ Jane  Female
+ Bill     Male





Here is an example Plunker with it running. Enjoy and let me know if you’ve found a better way!

27 thoughts on “Expandable / collapsable table detail rows with Angular.js

  1. Reply Anupama desi Serial Jun 19,2022 3:26 pm

    Hiya, I’m really glad I have found this information. Today bloggers publish only about gossips and internet and this is actualpy annoying.
    A good web site with exciting content, that’s whst I need.

    Thank you forr keeping this web-site, I will be visiting it.
    Do you do newsletters? Can’t ind it.

  2. Reply Harphoul Mohini Full Episode Jun 19,2022 3:25 pm

    obviously like your web-site however you need to test the spellinng on several of your posts.
    Several of them are rife with spelling issuess and I iin finding it very bothersome
    to infrm the trugh then again I will certainly
    come back again.

  3. Reply raviook Feb 3,2018 7:09 am

    Hey Nice solution. Thank you very much!!

  4. Reply Minal Aug 10,2017 3:42 pm

    Great solution! Thank you!
    I am looking to add animation to this and tried everything. Strangely the angularjs animate and css transitions are not working well with the tr ng-if elements.
    Any suggestions on how I could go about it?

  5. Reply Kiran Aug 2,2017 3:58 am

    You made my day. I was building angular version of Jtable and want to give hierarchical support for data.Your solution worked perfectly.

  6. Reply Great work! it helped me a lot. Jul 12,2017 2:16 am

    How to do if one row is expanded and remaining all rows should be collapsed(scenario: if i expand one row, again if i expand one more row. previously expanded should be collapsed.

  7. Reply ef May 22,2017 2:05 am

    How can I select collapsible row. Like If I select all the collapsible rows under it should get selected?

  8. Reply $(this) Apr 10,2017 12:56 pm

    Great article; the -start and -end are awesome and the colspan=”3″ is also a great addition since it allows us to put anything into the table row without being restricted by the number .

  9. Reply Jomar Nov 18,2016 10:27 am

    Is there a way to expan specific while collapse all others?

  10. Reply Sateesh Kumar Oct 19,2016 1:19 am

    How to implement ‘close others’ functionality in this example.

  11. Reply Anthony Jaxon Aug 17,2016 11:45 am

    Is there a way to expand / collapse ALL of the rows in a parent table?

    • Reply Eugenia Soria Oct 5,2016 6:57 pm

      This happened to me by accident, but it’ll work for you.
      In this example, change each occurrence of “person.expanded” to “people.expanded”

  12. Reply Jorge Apr 16,2016 11:18 pm

    Thanks! Really helpful!

  13. Reply AngelaM Mar 16,2016 10:12 am

    Can I have an index based check box as part of the main row before expanding, so that I can carry on with my index based functionality. I tried implementing it but I can see only one check box.


  14. Reply tezet Mar 2,2016 4:49 am

    Works like a charm! Thanks!

  15. Reply rroxysam Feb 24,2016 1:19 pm

    Hi john,

    I have to use nested ng-repeat using table in angular js. So that on expand i can open other. Can you help me out for this situation.


  16. Reply App Dev Guy Feb 18,2016 7:32 pm

    Hi John

    Excellent example, and so simple. Works with smart-tables without interfering with their code as well. **Ensure you have the ng-repeat-start** and not just ng-repeat, I tested to the see the difference and sure enough, the expansion only occurs with the start added.

    By the way, John, is there a post on Stack you have answered with this, I wouldn’t mind popping an up-vote on it.

    Kind regards

  17. Reply bastienJS Dec 7,2015 2:20 pm

    Hi John,

    in the WPF days I put a IsExpanded property on the ViewModel. Then you do not need the 2 buttons.

  18. Reply Johnathan McAuliffe Dec 23,2014 8:17 am

    Hi how are you ? That was a really helpful example exactly what I need for clickable exandable row. Sweet thanks.

  19. Reply Karan Jun 12,2014 10:05 pm

    This wouldn’t work since is outside of the repeater in the above

    • Reply Karan Jun 12,2014 10:11 pm

      Not only was my formatting wrong, but I completely overlooked the -start and -end, the point of this article… Sorry but thank you!

Leave a Reply