Angular Material cdk-virtual-scroll-viewport: How to render multiple items per row?

Question

Is it possible to use Angular Material's <cdk-virtual-scroll-viewport> when you have multiple items in one line ( display: inline-block; vertical-align: top; )?

For me the CDK renders only 3-2 items per line, with lots of space left on the right. I have set itemSize to the height of one item and the viewport's width to 100%.

Answer 1

If you want to use a different library to achieve this functionality, then you can try - ngx-virtual-scroller

You can achieve the same functionality using Angular Scroll CDK with a little bit of code. I got my inspiration from this post - https://groups.google.com/g/angular/c/dAW9-Svq-o4?pli=1

But the function can be a little bit easier than suggested in the above blog

/* Function to convert single array into Array of array */
generateDataChunk(data,chunk=3) {
    let index: number;
    let dataChunk: [][] = [];
    for (index = 0; index < data.length; index += chunk) {
      dataChunk.push(data.slice(index, index + chunk));
    }
    return dataChunk;
  }

itemSet = generateDataChunk(itemData);

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
  <div *cdkVirtualFor="let items of itemSet" class="example-item">
    <div class="example-sub-item" *ngFor="let item of items">{{item}}</div>
  </div>
</cdk-virtual-scroll-viewport>

This will achieve the functionality.