TanStack
Virtual

Marko Example: Fixed
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>Fixed 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; }
      h2 { font-size: 18px; margin: 24px 0 12px; }
      p { color: #555; margin-bottom: 16px; }
      section { margin-bottom: 32px; }
      .scroll-row-container { height: 200px; overflow-y: auto; border: 1px solid #e5e7eb; border-radius: 6px; position: relative; }
      .scroll-col-container { width: 400px; height: 80px; overflow-x: auto; border: 1px solid #e5e7eb; border-radius: 6px; position: relative; }
      .scroll-grid-container { height: 400px; width: 400px; overflow: auto; border: 1px solid #e5e7eb; border-radius: 6px; }
      .item { display: flex; align-items: center; padding: 0 12px; font-size: 13px; border-bottom: 1px solid #f3f4f6; box-sizing: border-box; }
      .item-even { background: #f9fafb; }
      .item-odd  { background: #ffffff; }
      .cell { font-size: 11px; font-family: monospace; box-sizing: border-box; border-right: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; }
      .cell-even { background: #f9fafb; }
      .cell-odd  { background: #ffffff; }
    </style>
  </head>
  <body>
    <h1>Fixed Virtualisation</h1>
    <p>Fixed sizes — every item's dimensions are hard-coded to the same value and never change.</p>

    <section>
      <h2>Rows</h2>
      <div/rowScroll class="scroll-row-container">
        <virtualizer/rowV
          count=10000
          estimateSize=() => 35
          getScrollElement=() => rowScroll()
        />
        <div style=`height: ${rowV.totalSize}px; width: 100%; position: relative`>
          <for|item| of=rowV.virtualItems>
            <div
              class=item.index % 2 === 0 ? "item item-even" : "item item-odd"
              style=`position: absolute; top: 0; left: 0; width: 100%; height: ${item.size}px; transform: translateY(${item.start}px)`
            >
              Row ${item.index}
            </div>
          </for>
        </div>
      </div>
    </section>

    <section>
      <h2>Columns</h2>
      <div/colScroll class="scroll-col-container">
        <virtualizer/colV
          count=10000
          estimateSize=() => 100
          horizontal=true
          getScrollElement=() => colScroll()
        />
        <div style=`width: ${colV.totalSize}px; height: 100%; position: relative`>
          <for|item| of=colV.virtualItems>
            <div
              class=item.index % 2 === 0 ? "item item-even" : "item item-odd"
              style=`position: absolute; top: 0; left: 0; height: 100%; width: ${item.size}px; transform: translateX(${item.start}px)`
            >
              Col ${item.index}
            </div>
          </for>
        </div>
      </div>
    </section>

    <section>
      <h2>Grid</h2>
      <div/gridScroll class="scroll-grid-container">
        <virtualizer/gridRowV
          count=1000
          estimateSize=() => 35
          getScrollElement=() => gridScroll()
        />
        <virtualizer/gridColV
          count=1000
          estimateSize=() => 100
          horizontal=true
          getScrollElement=() => gridScroll()
        />
        <div style=`height: ${gridRowV.totalSize}px; width: ${gridColV.totalSize}px; position: relative`>
          <for|row| of=gridRowV.virtualItems>
            <for|col| of=gridColV.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); display: flex; align-items: center; justify-content: center`
              >
                ${row.index},${col.index}
              </div>
            </for>
          </for>
        </div>
      </div>
    </section>
  </body>
</html>