Skip to content

Grouped 10,000 numbers

The example below shows a simple grouping mode - 10,000 items in groups of 10.

import { GroupedVirtuoso } from 'react-virtuoso'
import { useMemo } from 'react'

export default function App() {
  const groupCounts = useMemo(() => {
    return Array(1000).fill(10)
  }, [])

  return (
    <GroupedVirtuoso
      style={{ height: '100%' }}
      groupCounts={groupCounts}
      groupContent={(index) => {
        return (
          <div style={{ backgroundColor: 'var(--background)' }}>
            Group {index * 10} - {index * 10 + 10}
          </div>
        )
      }}
      itemContent={(index, groupIndex) => (
        <div>
          {index} (group {groupIndex})
        </div>
      )}
    />
  )
}