ZUi-Web

Huge datasets displayed in lists or tables can slow down a website's performance due to the number of elements loaded in the DOM. Web components, which typically contain multiple elements in the shadow DOM, can further degrade performance when handling large datasets

For a better user experience in this case of displaying a large list of e.g. tag bars in a table, virtual scrolling is a good approach for improving the performance of the application.

Virtual scrolling is a popular strategy used in web development for displaying efficiently a large lists of items and is basically used to render only the items that are currently visible in the viewport instead of adding all of them at once as DOM elements on the page.

We evaluated the impact of virtual scrolling on a ZuiTable that displays many rows with ZuiTagBars and we could recognized that it leads to a much better performance regarding the redering and loading time, memory used, and scrolling experience, as well.

Virtual scrolling in ZUi Example Angular App by using @angular/cdk (Scrolling | Angular Material) library.

Install the Package by running : pnpm install @angular/cdk
Import the module in app.module.ts:

import { _CdkVirtualScrollViewport, ScrollingModule_ } from '@angular/cdk/scrolling';
@NgModule({  
  imports: [ 
    _CdkVirtualScrollViewport,  
    ScrollingModule,_  
  ],
declarations: [...]
...

Use cdk-virtual-scroll-viewport in template:

<cdk-virtual-scroll-viewport appendOnly="false" itemSize="50" class="example-viewport">
 <zui-table (zui-table-header-cell-sorted)="onHeaderCellSorted($any($event))">  
    <table style="table-layout: fixed">    
     <thead>        
      ...
    </thead>
    <tbody>        
      <tr *cdkVirtualFor="let row of this.sortedItems" class="example-item">  
          <td>...</td>  
          <td><div style="padding: 0px 8px">  
          <zui-tag-bar>                
            <zui-tag *ngFor="let tag of row.tags" value="{{ tag }}" text="{{ tag }}"></zui-tag>  
           </zui-tag-bar>            
          </div></td>        
      </tr>      
    </tbody>    
   </table>  
</zui-table>
</cdk-virtual-scroll-viewport>

Virtual scrolling in ZUi Example React App by using virtuoso (Getting Started with React Virtuoso | React Virtuoso) library.

Install the package :

npm install react-virtuoso

Import the module in the .tsx file:

import { TableVirtuoso } from 'react-virtuoso';

Use TableVirtuoso:

<ZuiTable>  
  <TableVirtuoso    style={{ height: '100%', tableLayout: 'fixed' }}  
    components={{  
      Table: ({ style, ...props }) => <table {...props} style={{ ...style, tableLayout: 'fixed' }} />,  
    }}  
    data={tableRows}  
    fixedHeaderContent={() => (  
      <>  
        <tr>          
         <th>...</th>         
        </tr>      
       </>   
     )}  
    itemContent={(index, item) => (  
      <>  
      ...
      <td><div className="tag-bar-container">  
       <ZuiTagBar> {item.tags.map((tag) => (  
                        <ZuiTag key={tag} value={tag} text={tag}></ZuiTag>  
                     ))}  
       </ZuiTagBar>  
      </div></td>      
     </>    
    )}  
  />  
</ZuiTable>