VirtualList

---
import { VirtualList } from '@santi020k/lumen-astro'

const rows = Array.from({ length: 200 }, (_, index) => `Deployment #${200 - index}`)
---

{/* 200 rows remain mounted; only the fixed-height visible window is displayed. */}
<VirtualList aria-label="Deployments" itemSize={44} style="--ui-list-height: 12rem">
  {rows.map(row => <div>{row}</div>)}
</VirtualList>

{/* Data mode mounts a bounded window from a synthetic 10,000-record collection. */}
<VirtualList id="data-virtual-list" mode="data" role="list" aria-label="Large deployment collection" style="--ui-list-height: 12rem" />
<noscript><p>Enable JavaScript to browse the large deployment collection.</p></noscript>
<script>
  import { createLumenVirtualCollectionController } from '@santi020k/lumen-core'

  const root = document.getElementById('data-virtual-list')

  if (root && !root.dataset.collectionReady) {
    root.dataset.collectionReady = 'true'

    const controller = createLumenVirtualCollectionController(root, {
      items: Array.from({ length: 10000 }, (_, id) => ({ id })),
      getKey: record => record.id,
      itemSize: 44,
      renderItem: record => {
        const row = document.createElement('div')

        row.textContent = `Deployment #${record.id + 1}`

        return row
      }
    })

    document.addEventListener('astro:before-swap', () => controller.destroy(), { once: true })
  }
</script>

'use client'

import { Button, VirtualList } from '@santi020k/lumen-react'

const records = Array.from({ length: 10000 }, (_, id) => ({ id, label: `Record ${id + 1}` }))

export function Example() {
  return (
    <VirtualList aria-label="Records" items={records} getKey={record => record.id}
      renderItem={record => <Button variant="ghost">{record.label}</Button>}
      itemSize={44} overscan={4} style={{ height: '12rem' }} />
  )
}

<lumen-virtual-list id="records" mode="data" role="list" aria-label="Records"></lumen-virtual-list>
<script type="module">
  import { createLumenVirtualCollectionController } from '@santi020k/lumen-core'

  const root = document.getElementById('records')
  if (root) {
    const controller = createLumenVirtualCollectionController(root, {
      items: Array.from({ length: 10000 }, (_, id) => ({ id })),
      getKey: record => record.id,
      itemSize: 44,
      renderItem: record => {
        const row = document.createElement('div')
        row.textContent = `Record ${record.id + 1}`
        return row
      }
    })
    // Call controller.destroy() when removing this view.
  }
</script>