Grouped 10,000 numbers

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

Live Editor

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

  return (
    <GroupedVirtuoso
      style={{ height: 400 }}
      groupCounts={groupCounts}
      groupContent={index => {
        return (
            <div style={{ backgroundColor: 'var(--ifm-color-content-inverse)' }}>Group {index * 10} - {index * 10 + 10}</div>
        )
      }}
      itemContent={(index, groupIndex) => (<div>{index} (group {groupIndex})</div>) }
    />
  )
}

Result