Virtual Scroll
Render large fixed-height lists efficiently with Angular CDK virtual scrolling. Only visible rows (plus a small buffer) stay in the DOM — ideal for inboxes, pickers, and admin tables with thousands of rows.
Unlock it plus 85 pro blocks, widgets & layouts — $99 one-time. Lifetime updates, 14-day money-back guarantee.
Basic usage
Set an explicit height on base-virtual-scroll (e.g. class="h-96"), pass [items] and [itemSize], and provide a row template with baseVirtualScrollItem.
5,000 users — only visible rows are rendered.
HTML
Item size
itemSize must match the rendered row height in pixels. Mismatch causes jitter or overlap when scrolling.
HTML
Installation
Run the following command to add this component to your project:
bash
npx base-ui-cli add virtual-scroll
API Reference
Base UI provides standalone components. Import the exact elements you want to use into your component.
typescript (Example)
import { VirtualScrollComponent, VirtualScrollItemDirective } from '@lussos/base-ui';
@Component({
selector: 'app-your-component',
imports: [
VirtualScrollComponent,
VirtualScrollItemDirective
],
template: `...`
})
export class YourComponent {} Properties for virtual-scroll — generated from JSDoc in the library source.
| Selector | Property | Type | Default | Description |
|---|---|---|---|---|
[baseVirtualScrollItem] | — | — | — | Marks an `ng-template` as the row template for . |
base-virtual-scroll | class | string | '' | Extra host classes merged via `cn()`. Set an explicit height (e.g. `h-96`) on the host. |
base-virtual-scroll | items | T[] | [] | Full list rendered virtually. |
base-virtual-scroll | itemSize | number | 48 | Fixed row height in pixels — must match the rendered row template height. |
base-virtual-scroll | minBufferPx | number | 200 | Minimum pixels rendered outside the viewport (CDK buffer). |
base-virtual-scroll | maxBufferPx | number | 400 | Maximum pixels rendered outside the viewport (CDK buffer). |
Content