Tables not rendering correctly

[hmarcelodn]

I'm submitting a bug report

Library Version: 1.0.0-beta.3.0.1
Please tell us about your environment:

Operating System: Windows Server

Node Version: 5.0.0

NPM Version: 3.5.2

JSPM: 0.16.35

Browser: all

Language: ECMA6

Current behavior:

I created a basic table with hardcoded content. I specified the height on table and repeater item.

It works when scrolling down but its breaking when scrolling up.

<table id="testVirtual" class="virtual-repeater-wrapper"> <tr virtual-repeat.for="item of [1,2,3,4,1,2,3,4,1,2,3,4,1,2,3,4,1,2,3,4,1,2,3,4,1,2,3,4,1,2,3,4,1,2,3,4,1,2,3,4]" class="virtual-repeated-item"> <td>Test1</td> </tr> </table>

Demo: http://screencast.com/t/XQgHkORPjpbo

Expected/desired behavior:

Same behavior works when using divs instead of tables.

[AStoker]

Try wrapping the table itself in a wrapper with a set size and an overflow property.
What version of the repeater are you using?
Can you post your surrounding code (instead of it being in a screencast)?
And could you also format your question according to the issue template?

[hmarcelodn]

@AStoker Updated. I will take a look to the suggestion.

[hmarcelodn]

@AStoker it works if i wrapp the table with a div like you said. So is not there a way to just scroll the tbody?

[AStoker]

It's related to this: #46 (comment)
I don't have an answer right now unfortunately :(
@martingust, do you have an answer for the behavior of those buffer elements in tables?
In the mean time @hmarcelodn, is that good enough to get you going at least?

[hmarcelodn]

@AStoker so far I can go with that I believe. I will find some kind of work around for headers. Thanks.

[AStoker]

No problem. I'd like to leave this issue open as a reference to fix the behavior with tables, since it seems a bit strange to me.

[hmarcelodn]

@martingust @AStoker please update this if you got some information regarding that improvement.

Thanks a lot for helping.

[mateuszdw]

Any news on that bug? Simple table with bootstrap styling throw getBoundingClientRect error. I'm using aurelia-ui-virtualization@1.0.0-beta.3.0.2. Wrapping table like this:

<div style="overflow: scroll; height: 90vh">
  <table class="table">
    <tr virtual-repeat.for="file of files">
      <td>${file.no}</td>
    </tr>
  </table>
</div>

Still not fix issue for me.

[mateuszdw]

For those who really like to use current version of virtual-repeat with tables, try bootstrap grid layout:

<div style="overflow: scroll; height: 90vh">
    <div virtual-repeat.for="file of files">
      <div class="row" style="height:40px;">
        <div class="col-xs-6">${file.no}</div>
        <div class="col-xs-6">${file.name}</div>
      </div>
    </div>
</div>

What else cost me o lot of time to figure out was oneTime binding in virtual-repeat. It's obviouse you can't use ${file.no & oneTime}. Is worth mentioning in docs you can't use oneTime in virtual-repeat block.
By the way GREAT component!

[nisargrthakkar]

Is there any solution for this bug? Got table structure error `getBoundingClientRect '

[bigopon]

A fix is at #131, if anyone still using virtual table, please give it a check.