8

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>
david valentino
  • 783
  • 9
  • 16

1 Answers1

4

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

<cdk-virtual-scroll-viewport>
    <table>
    </table>
</cdk-virtual-scroll-viewport>
david valentino
  • 783
  • 9
  • 16
  • 5
    yeah this works, sadly it scrolls the table header too – Arron McCrory Nov 14 '18 at 23:47
  • 1
    @ArronMcCrory yes then i removed the header, how else.. this one should come as directive – david valentino Nov 15 '18 at 01:10
  • 1
    I think eventually mat-table is going to have the virtual scroll built into it. – Arron McCrory Jan 04 '19 at 23:31
  • how can we make the header fixed in such case ? – Nikhil Kamani Jul 27 '20 at 05:26
  • 2
    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 https://stackblitz.com/edit/components-issue-t3xvyz?file=app%2Fapp.component.ts – Nikhil Kamani Jul 27 '20 at 10:25