Skip to main content

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