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 (
      style={{ height: 400 }}
      itemContent={(index, user) => (
            backgroundColor: user.bgColor,
            padding: '1rem 0.5rem',