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>
      )}
    />
  )
}