Are you ready for Cyber ~~Monday~~ Week Deals?

Extra 25% off for all sale items + Free CoreUI Icons PRO with every order! Limited offer for the first 100 people, use code 2024BWCW25 during checkout.

This Component is a part of CoreUI PRO for React.js, an advanced UI library offering over 100 components designed for creating responsive, sleek, and powerful applications. Experience it yourself by signing up for a complimentary 7-day trial.

Start Free Trial

React Virtual Scroller Component

Virtual Scroller

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.

On this page

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

const [index, setIndex] = useState(0)
return (
  <CVirtualScroller className="border" visibleItems={20} onScroll={(currentItemIndex) => setIndex(currentItemIndex)}>
    {Array.from({ length: 10000 }, (_, i) => (
      <div key={i}>Option {i + 1}</div>
    ))}
  </CVirtualScroller>
)

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`	-