Top Items Example

The Virtuoso component accepts an optional topItems number property that allows you to pin the first N items of the list.

Scroll the list below - the first two items remain fixed and always visible.

import React from 'react'
import { Virtuoso } from 'react-virtuoso'
import { getUser } from './FakeData'
import { UserItem } from './ExampleComponents'

const GenerateItem = index => {
  return <UserItem user={getUser(index)} index={index} />
}

export default () => (
  <Virtuoso
    totalCount={100000}
    overscan={200}
    topItems={2}
    item={GenerateItem}
    style={{ height: '400px', width: '350px' }}
  />
)