GitHub - dcbeck/ngx-responsive-virtual-scroll: A fast and lightweight virtual scrolling solution for Angular that supports single column lists, responsive grid lists and view caching

NgxResponsiveVirtualScroll

Overview

This library provides efficient rendering of large datasets in a list or grid layout within Angular applications. It utilizes virtual scrolling techniques to only render the visible portion of the grid, improving performance and reducing memory consumption.

Features

🚀 Optimized Performance: Renders only visible grid items to minimize memory usage
📊 Large Dataset Support: Efficiently handles massive data collections
🎨 Flexible Grid Configuration: Customizable layout and styling options
📱 Responsive Design: Dynamically adjusts grid based on viewport size
🔄 Resize Handling: Auto-scroll and column count change detection

Demo Page

👉 Live Demo

Installation

To install the NgxResponsiveVirtualScroll Library, you can use npm:

npm install ngx-responsive-virtual-scroll

Usage

1. Import the module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ResponsiveVirtualScrollModule } from 'ngx-responsive-virtual-scroll';

@NgModule({
  imports: [BrowserModule, ResponsiveVirtualScrollModule],
  // Other declarations and providers...
})
export class YourAppModule {}

2. Use the component

<ngx-responsive-virtual-scroll 
  [items]="data$" 
  [type]="'grid'" 
  [itemGap]="24" 
  [stretchItems]="true" 
  [scrollViewPadding]="24"
  [autoScrollOnResize]="true" 
  [gridMaxColumns]="4" 
  [gridItemWidth]="200" 
  [rowHeight]="200" 
  [trackBy]="trackByFn" 
  (columnCountChange)="handleChange($event)"
>
  <ng-template let-item let-row="row" let-column="column">
    <!-- Define your cell here -->
    <!-- Access data item properties with {{item}}  -->
    <!-- Access row and column index of current item -->
  </ng-template>
</ngx-responsive-virtual-scroll>

API Reference

Inputs

Property	Type	Default	Description
`[items]`	`Observable<any[]>` or `any[]`	-	Data source for rendering (array or stream of data)
`[type]`	`'list'` or `'grid'`	`'grid'`	Layout type
`[itemGap]`	`number`	`0`	Spacing between items
`[gridMaxColumns]`	`number`	`undefined`	Maximum grid columns
`[gridItemWidth]`	`number`	`200`	Width of grid items
`[rowHeight]`	`number`	-	Height of each row
`[stretchItems]`	`boolean`	`false`	Stretch items to fill space
`[autoScrollOnResize]`	`boolean`	`false`	Scroll to last focused item on resize
`[trackBy]`	`function`	`undefined`	Optimize update performance (only works for array datasource)

Outputs

Event	Type	Description
`(columnCountChange)`	`number`	Triggered when column count changes