Implement Angular CDK Virtual Scroll for Clarity datagrid rows

Question

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.

Clarity advises against virtual scrolling (https://github.com/vmware/clarity/wiki/Virtual-scrolling) and can't work to support any other libraries that might hack the functionality into Clarity. We recommend pagination instead as a fully accessible way to have large sets in a datagrid. — Jeremy Wilken, Nov 05 '19 at 18:02

score 1 · Accepted Answer · answered Nov 12 '19 at 14:14

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>

Implement Angular CDK Virtual Scroll for Clarity datagrid rows

1 Answers1