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.

React Virtual Scroller Component

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

Option 31

API#

CVirtualScroller#

import { CVirtualScroller } from '@coreui/react-pro'
// or
import CVirtualScroller from '@coreui/react-pro/src/components/virtual-scroller/CVirtualScroller'

Property	Description	Type	Default
className	A string of all className you want applied to the base component.	`string`	-
onScroll	Event fires when the component has been scrolled.	`(currentItemIndex: number) => void`	-
visibleItems	Amount of visible items	`number`	-

On this page