CoreUI PRO Component

To use this component you must have a CoreUI PRO license. Buy the CoreUI PRO and get access to all PRO components, features, templates, and dedicated support.

Experimental release

This component is part of the future release and has an experimental API. If you want to use the Virtual Scroller component you have to note that API can change in the final version.

React Virtual Scroller Component

4.8.0+

A virtual scroller is a UI element that allows users to scroll through a list of items without requiring the entire list to be loaded into memory at once. This can be particularly useful for lists that are very large or that contain a lot of data, as it allows the user to view and interact with a subset of the list while the rest of the data is loaded in the background.

Virtual scrollers work by only rendering the items that are currently visible on the screen, and as the user scrolls through the list, new items are dynamically loaded and added to the view. This helps to reduce the amount of data that needs to be loaded and processed at any given time, which can improve the performance and responsiveness of the UI.

Virtual scroll (10000 Items)#

Option 1
Option 2
Option 3
Option 4
Option 5
Option 6
Option 7
Option 8
Option 9
Option 10
Option 11
Option 12
Option 13
Option 14
Option 15
Option 16
Option 17
Option 18
Option 19
Option 20
Option 21
Option 22
Option 23
Option 24
Option 25
Option 26
Option 27
Option 28
Option 29
Option 30

API#

CVirtualScroller#

1import { CVirtualScroller } from '@coreui/react-pro'
2// or
3import CVirtualScroller from '@coreui/react-pro/src/components/virtual-scroller/CVirtualScroller'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the base component.string-
itemHeightSingle item height.number | 'auto'auto
itemsNumberNumber of items.number-
onScrollEvent fires when the component has been scrolled.(currentItemIndex: number) => void-
visibleItemsAmount of visible itemsnumber-