Implement Angular CDK Virtual Scroll for Clarity datagrid rows

I want to implement the datarid with the ability to have virtual scrolling. Can we use Angular CDK package for implementing virtual scrolling for Clarity datagrid rows?

I tried adding CDK Virtual Scroll on the datagrid as same code below:

<clr-datagrid>

  <clr-dg-column>...</clr-dg-column>

  <cdk-virtual-scroll-viewport [itemSize]="--" style="height:---px">

     <clr-dg-row *cdkVirtualFor="let item of items"> ... </clr-dg-row>

  </cdk-virtual-scroll-viewport>

</clr-datagrid>

However, nothing rendered on the datagrid (The datagrid shows the empty placeholder). If I remove the CDK virtual scrolling, then the Clarity datagrid works as expected. Do we have any way for this?

Thanks.

Instead of Datagrid, you can simply use an HTML table and it will work fine.

<table>
    <thead>
        <tr>
            <th>
                ID
            </th>
            <th>
                NAME
            </th>
        </tr>
    </thead>
    <tbody>
        <cdk-virtual-scroll-viewport itemSize="50">
            <tr *cdkVirtualFor="let item of results">
                <td>{{ item.ID }}</td>
                <td>{{ item.NAME }}</td>
           </tr>
        </cdk-virtual-scroll-viewport>
    </tbody>
</table>