Can I use the virtual scroll with a HTML table?

Is there any way to use this component with a table?

Something similar to:

    <virtual-scroll [items]="rows" [childHeight]="30">
      <tr *ngFor="let item of rows">
        <td>Some text</td>
      </tr>
    </virtual-scroll>

[maykoestevez]

Hello @MastaBleh, I’m trying to use your suggestions, but i’m not getting good results.

This is my html

    <virtual-scroll [items]="filteredList" (update)="viewPortItems = $event" style="height: calc(100vh - 4.2rem - 4.2rem - 4.2rem + 1.29rem);" [childHeight]="46">
                    <tbody id="tbody-envios">
                        <tr *ngFor="let data of viewPortItems">
                            <td>{{envio.name}}</td>
                            <td>{{envio.email}}</td>
                            <td>{{envio.sendDateTime|date:'dd/MM/yyyy hh:mm:ss'}}</td>
                            <td>{{envio.campaignStatus}} </td>
                            <td [class]="envio.bounce?'red-text':'blue-text'">{{envio.bounce?'Rechazado':'No Rechazado'}}</td>
                            <td [class]="envio.click?'blue-text':'red-text'">{{envio.click?'Archivo Abierto':'No Abierto'}}</td>
                            <td class="file-download" (click)="downloadFile(envio)">{{envio.tipoArchivo==1?'data1':'data 2'}}</td>
                        </tr>
                    </tbody>

                </virtual-scroll>

Css

virtual-scroll {
    display: block;
    width: 100%;
}
#tbody-envios {
    height: calc(100vh - 4.2rem - 4.2rem - 4.2rem + 1.29rem);
    display: block;
}

I have followed your tips but what i’m getting is this

[MastaBleh]

Get over the form of this message, but this discussion is loosing time & efforts of way too much people. Does anybody here as ever spent 5min to gather some informations ? God, its working, this discussion is bullshit. Only to say LOVE YOU all, i’ll spend 7min registering and writting this. Whats fed me up ? I got of course the same problem of you all but i simply did not stop at the first “its not working” comment…

What we want? simply the benefits of html table characteristics unstead of spending time to refactor all design into self managed div blocks. (also: the scrollbar in the tbody block, keep thoses th headers visible). The problem: html table are strict in the dom construction. note: elements involved with overflow property, in complex design could interfere, care.

Directive: @MrToasty97 Angular2-virtual-scroll directive is working out of the box. c’ant bind to ‘items’; directive is called ‘virtualScroll’ and not ‘virtual-scroll’. see demo/usage 3rd snippet :

<div virtualScroll [items]="items" (update)="viewPortItems = $event">
    <list-item *ngFor="let item of viewPortItems" [item]="item">
    </list-item>
</div>

Using directive in tbody context: not working

<table>
  <thead>
    <tr>
      <th>No</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody virtualScroll [items]="items" (update)="viewPortItems = $event">
    <tr *ngFor="let item of viewPortItems">
      <td>{{item.No}}</td>
      <td>{{item.Name}}</td>
    </tr>
  </tbody>
</table>

Implemented a2 virtual scroll in various context without problem (as directive or component), never managed to get the scroll working as expected in the described configuration. always as 1 of the following problem:

• all items are visible
• cant scroll at all
• only 2 element visible when 20 are expected to be visible

Here is the 10M$ working snippet

<table>
    <thead>
        <tr>
            <th>col1</th>
            <th>col2</th>
            <th>col3</th>
        </tr>
    </thead>
    <virtual-scroll [items]="placeHolders" (update)="visibleElements = $event" style="height: calc(100vh - 4.2rem - 4.2rem - 4.2rem + 1.29rem);" [childHeight]="46">
        <tbody>
            <tr *ngFor="let element of visibleElements; let i=index">
                <td>index {{i}}</td>
                <td>{{element}}</td>
                <td></td>
            </tr>
        </tbody>
    </virtual-scroll>
</table>

Key points:

• tbody inside virtual scroll selector
• tbody styled as height: calc(100vh - 4.2rem - 4.2rem - 4.2rem + 1.29rem); display: block;
• give the same height to the virtualscroll comp : style=“height: calc(100vh - 4.2rem - 4.2rem - 4.2rem + 1.29rem);”. Do not give fixed value on both (tbody+virtualScroll) or you ll get stuck when the user resize the windows. With calc( 100vh - Xrem + Xrem) you got your responsive and no unexpected scrollfkingbar.
• specify the childHeight in px

Its working. (if not, i’ll be fed from your tears and might dig 2min to get it working for you (i also accept cash unstead of tears (i really prefer your tears))).

And for very large list (when you want to mind fuck your users or when you cant ask 10K+ object to your api), use this component for with “proxy” binding. (in comp.ts) this.placeHolders: number[] = Array.from(Array(10000).keys()); -> generate [0,1,…,10000] and in set visibleElements(value: any[]) { console.log(value); //ex: print: [18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36] // get elements 18 to 36 from your api this.visibleElements$ = value; }

Thank you Rinto Jose, it’s appreciated that you spent some time giving us this virtual scroll. LOVE you people with the art of saying bullshits without the capacities to evaluate the consequences of misinformation.