TanStack
Virtual

Marko Example: Grid
GitHub StackBlitz CodeSandbox

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Grid Virtualisation — @tanstack/marko-virtual</title>
    <style>
      * { box-sizing: border-box; margin: 0; padding: 0; }
      body { font-family: system-ui, sans-serif; padding: 24px; }
      h1 { font-size: 24px; margin-bottom: 8px; }
      p { color: #555; margin-bottom: 16px; }
      .scroll-grid { height: 500px; width: 100%; max-width: 700px; overflow: auto; border: 1px solid #e5e7eb; border-radius: 6px; }
      .cell { font-size: 11px; font-family: monospace; box-sizing: border-box; border-right: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: center; }
      .cell-even { background: #f9fafb; }
      .cell-odd  { background: #ffffff; }
    </style>
  </head>
  <body>
    <h1>Grid Virtualisation</h1>
    <p>A 1000 × 1000 grid — two &lt;virtualizer&gt; tags sharing the same scroll element.</p>

    <div/gridScroll class="scroll-grid">
      <virtualizer/rowV
        count=1000
        estimateSize=(i) => 30 + ((i * 7 + 11) % 20)
        getScrollElement=() => gridScroll()
      />
      <virtualizer/colV
        count=1000
        estimateSize=(i) => 80 + ((i * 11 + 17) % 80)
        horizontal=true
        getScrollElement=() => gridScroll()
      />
      <div style=`height: ${rowV.totalSize}px; width: ${colV.totalSize}px; position: relative`>
        <for|row| of=rowV.virtualItems>
          <for|col| of=colV.virtualItems>
            <div
              class=(col.index + row.index) % 2 === 0 ? "cell cell-even" : "cell cell-odd"
              style=`position: absolute; top: 0; left: 0; width: ${col.size}px; height: ${row.size}px; transform: translateX(${col.start}px) translateY(${row.start}px)`
            >
              ${row.index},${col.index}
            </div>
          </for>
        </for>
      </div>
    </div>
  </body>
</html>