Top Items List Example
The Virtuoso component accepts an optional topItemCount
number property that allows you to pin the first several items of the list.
Scroll the list below - the first two items remain fixed and always visible.
backgroundColor
is set to hide the scrollable items behind the top ones.
import { Virtuoso } from 'react-virtuoso' import { generateUsers } from './data' export default function App() { return ( <Virtuoso style={{ height: 400 }} data={generateUsers(1000)} topItemCount={2} itemContent={(index, user) => ( <div style={{ backgroundColor: user.bgColor, padding: '1rem 0.5rem', }} > <h4>{user.name}</h4> </div> )} /> ) }