How to use cdk-virtual-scroll-viewport for table tbody

Question

since html parse tr then td, using <cdk-virtual-scroll-viewport>breaks the view is there any cdkVirtualScrollViewport as directive for <tbody>?

<tbody>
<cdk-virtual-scroll-viewport  style="height: 500px; width: 100%;"  itemSize="100"
    <tr [hidden]="data.get_user.name.toLowerCase().indexOf(pupilFilter.name.toLowerCase()) < 0 || (pupilFilter.classValue != '0' && data.get_class.value != pupilFilter.classValue)" appMarkClicked="" *cdkVirtualFor="let data of top.data.branch.get_users_as_pupil; let i = index" >
        <td>{{i + 1}}</td>
    </tr>
</cdk-virtual-scroll-viewport>
</tbody>

Astomatous

material.angular.io/cdk/scrolling/… – Nagy

I got this working with setting the height and width. This can be tricky, don't set it to 100% cause that's 26px set it to like 1600px. – Tenney

Did you find any solution? I have the same requirements. – Peep

Answer 1

well, i can put the <cdk-virtual-scroll-viewport before <table>

<cdk-virtual-scroll-viewport>
    <table>
    </table>
</cdk-virtual-scroll-viewport>

Astomatous

yeah this works, sadly it scrolls the table header too – Jadwigajae

@ArronMcCrory yes then i removed the header, how else.. this one should come as directive – Astomatous

I think eventually mat-table is going to have the virtual scroll built into it. – Jadwigajae

how can we make the header fixed in such case ? – Homologous

found a solution for fixed header, we can get the offset using _renderedContentOffset which gives the offset of top most item paced in view port for cdkscroll in typescript and set the style.top for th to negative of offset value reveived, this is the example i refered stackblitz.com/edit/… – Homologous

I got Property '_renderedContentOffset' is private and only accessible within class 'CdkVirtualScrollViewport'. error. And when scrolling, the header is laggy. Does anyone have other solutions for sticky header? – Selffertilization

getOffsetToRenderedContentStart is a public method that returns the private field. The field must have been public in an older version. – Matrass