Grouped by First Letter

Here is a more complex GroupedVirtuoso example displaying 200 users, grouped by the first letter of their name. The generateGroupedUsers is a dummy implementation that builds grouped data. The users variable contains 500 user records, The groups variable contains the first letter groups -> ['A', 'B', 'C']. The groupCounts specifies how many items each group has, for example [ 20, 30, 15, 10 ].

Live Editor

function App() {
  const { users, groups, groupCounts } = useMemo(() => {
    const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')
    
    const users = letters.flatMap((letter) => {
      return Array.from({ length: 20 }, (_, index) => ({
        name: `${letter} User ${index}`,
        initials: `${letter}${index}`,
        description: `Description for user ${index}`,
      }))
    })    

    const groups = Array.from({ length: 10 }, (_, index) => { return letters[index] })

    const groupCounts = groups.map((letter, index) => {
      return users.filter((user, userIndex) => user.name.startsWith(letter)).length
    })
    return { users, groups, groupCounts }
  }, [])

  return (
    <GroupedVirtuoso
      groupCounts={groupCounts}
      style={{ height: 400 }}
      groupContent={index => {
        return <div 
        style={{ 
          backgroundColor: 'white',
          paddingTop: '1rem',
          borderBottom: '1px solid #ccc'
        }}>{groups[index]}</div>
      }}

      itemContent={index => {
        return <div>{users[index].name}</div>
      }}
    />
  )
}

Result