Angular-vs-scroll not working with hidden elements in table

Question

I am stuck with a problem:
I have a a data table - with huge data possibility. So as I use ng-repeat I started to check solutions for optimized work and found angular-vs-scroll which looked very good for me. But I faced a problem:
It works perfectly fine until I put some hidden elements inside - hidden tr which opens on a click from "parent row". I can't use divs for that, because data is huge and I want it to be perfectly aligned.

Problem is, that with hidden element, vs-scroll fail on calculating height, any ideas to fix that? Or use some better alternatives?

<div class="hello">
<table class="table table-hover table-striped">
    <thead>
      <tr>
        <th data-ng-repeat="label in table.labels" style="width: {{100/table.labels.length}}%"><div>{{label}}</div></th>
       </tr>
       </thead>

       <tbody vs-repeat vs-scroll-parent=".hello">
         <tr data-ng-repeat-start="result in table.results | filter : string">
            <td data-ng-repeat="label in table.labels">
              {{result[label]}}
           </td>
         </tr> 
         <tr data-ng-repeat-end>
             <td colspan="{{table.labels.length}}"> <div class="hidden-element">
                Hello, I am hidden element
               </div> 
               </td>
          </tr>     
       </tbody>

</table>
</div>

And results are: without hidden elements

without hidden elements

with hidden elements

have you tried with move the hidden class into . Because you try to create a tr withou any td. that might the problem for the table layout — mtamma, May 18 '16 at 07:13
Hi, well since empty tr has a 0 height anyway, not displaying it at all with css class doesn't help. It works fine, if I move hidden element inside a parent tr, but it kinda not what I am looking for. And I don't want to create table inside table, oh I need working aligment on all levels :( — user2204319, May 18 '16 at 07:31
oh.. ok. what happen if you just remove the div from the td. — mtamma, May 18 '16 at 07:46
well div is not a problem at all. Problem is in hidden element - td - if is set all hidden elements to visible or hide them all, it will work fine, but if I want to toggle them - broken :( — user2204319, May 18 '16 at 08:04

score 0 · Answer 1 · edited May 23 '17 at 12:16

May I suggest using a library to solve your table headaches?

Angular-datatables can provide endless scrolling, sorting, searching, pagination, exporting and I have successfully implemented nested tables that open on a click of the row. The rows seperate and an additional datatable is nested inbetween the rows, works great and no worries about layout problems!

I have recently published all my code to inject an Angular-datatable that resolves it's data from a json object/promise, if you would like the additional code to inject a detail table I can provide that for you.

Please check my answer here: Ng-repeat trying to create a counter index

Here's some screenshots:

Nested details table:

Angular-vs-scroll not working with hidden elements in table

1 Answers1