CdkVirtualScrollViewport header is not fixed

Question

In my angular application, I want to keep my table header at fixed position and display the scrollbar to the body part only.

I am using CdkVirtualScrollViewport library from angular to plot the table content. But it is not giving me appropriate results. It is showing the scrollbar from the header itself. Kindly help me to resolve this issue. Attaching details below.

Html page

<cdk-virtual-scroll-viewport [itemSize]="25" [style.height.vh]="height" class="viewport">
    <table mat-table [dataSource]="dataSource" matSort aria-label="Elements" cdkDropListGroup class="table">

      <tr mat-header-row *matHeaderRowDef="columnsDef; sticky: true" class="column-header"></tr>
      <tr
        [style.backgroundColor]="hasTelematic(row) ? '#f3f3f3' : '#ffffff'"
        mat-row
        class="row-content"
        *matRowDef="let row; columns: columnsDef"
      ></tr>
    </table>
  </cdk-virtual-scroll-viewport>

Current result

Expected result - Header should be at fixed postion.

Note: I tried solution provided in other forum but it is not working.

score 0 · Answer 1 · answered Feb 10 '23 at 10:06

I found one work around for it.

I have placed 2 cdk-virtual-scroll-viewreport. one for header and other for body. For header I have kept overflow-y as hidden so scroll bar wont be appearing for it.

Header

<cdk-virtual-scroll-viewport [itemSize]="25" [style.height.vh]="12" class="viewport" style="overflow-y: hidden;">
    <table mat-table [dataSource]="dataSource" matSort aria-label="Elements" cdkDropListGroup class="table">
      <tr mat-header-row *matHeaderRowDef="columnsDef; sticky: true" class="column-header"></tr>
    </table>
  </cdk-virtual-scroll-viewport>

Body

<cdk-virtual-scroll-viewport [itemSize]="25" [style.height.vh]="height" class="viewport">
    <table mat-table [dataSource]="dataSource" matSort aria-label="Elements" cdkDropListGroup class="table">
      
      <tr
        [style.backgroundColor]="hasTelematic(row) ? '#f7f7f7' : '#ffffff'"
        mat-row
        class="row-content"
        *matRowDef="let row; columns: columnsDef"
      ></tr>
    </table>
  </cdk-virtual-scroll-viewport>

I'm curious if you're actually using "virtual scrolling" here or not? Looks like the `cdk-virtual-scroll-viewport` is just being used as simple containers here, not actually performing virtual scrolling i.e. modifying the list of items visible based on scroll position? If that's true, divs can probably work as well... — Steven Manuel, Aug 21 '23 at 06:55

CdkVirtualScrollViewport header is not fixed

1 Answers1