TanStackVirtual

Headless UI for Virtualizing Large Element Lists

Virtualize only the visible content for massive scrollable DOM nodes at 60FPS in TS/JS, React, Vue, Solid, Svelte, Lit & Angular while retaining 100% control over markup and styles.

Get Started

NPM Downloads

Stars on GitHub

Contributors on GitHub

Dependents on GitHub

Just a quick look...

import { useVirtualizer } from '@tanstack/react-virtual'

const rowVirtualizer = useVirtualizer({
  count: 1000,
  getScrollElement: () => parentRef.current,
  estimateSize: () => 36,
})
// Map virtual rows to your UIimport { useVirtualizer } from '@tanstack/react-virtual'

const rowVirtualizer = useVirtualizer({
  count: 1000,
  getScrollElement: () => parentRef.current,
  estimateSize: () => 36,
})
// Map virtual rows to your UI

import { createVirtualizer } from '@tanstack/solid-virtual'

const parentRef: HTMLElement | undefined = undefined

const rowVirtualizer = createVirtualizer({
  count: 1000,
  getScrollElement: () => parentRef!,
  estimateSize: () => 36,
})
// Map rowVirtualizer.getVirtualItems() to your UIimport { createVirtualizer } from '@tanstack/solid-virtual'

const parentRef: HTMLElement | undefined = undefined

const rowVirtualizer = createVirtualizer({
  count: 1000,
  getScrollElement: () => parentRef!,
  estimateSize: () => 36,
})
// Map rowVirtualizer.getVirtualItems() to your UI

<script setup lang="ts">
import { ref } from 'vue'
import { useVirtualizer } from '@tanstack/vue-virtual'

const parentRef = ref<HTMLElement | null>(null)

const rowVirtualizer = useVirtualizer({
  count: 1000,
  getScrollElement: () => parentRef.value!,
  estimateSize: () => 36,
})
</script>

<template>
  <div ref="parentRef" style="overflow: auto; height: 300px">
    <!-- Render rowVirtualizer.getVirtualItems() -->
  </div>
</template><script setup lang="ts">
import { ref } from 'vue'
import { useVirtualizer } from '@tanstack/vue-virtual'

const parentRef = ref<HTMLElement | null>(null)

const rowVirtualizer = useVirtualizer({
  count: 1000,
  getScrollElement: () => parentRef.value!,
  estimateSize: () => 36,
})
</script>

<template>
  <div ref="parentRef" style="overflow: auto; height: 300px">
    <!-- Render rowVirtualizer.getVirtualItems() -->
  </div>
</template>

<script lang="ts">
  import { createVirtualizer } from '@tanstack/svelte-virtual'
  let parentRef: HTMLDivElement
  const rowVirtualizer = createVirtualizer({
    count: 1000,
    getScrollElement: () => parentRef,
    estimateSize: () => 36,
  })
</script>

<div bind:this={parentRef} style="overflow:auto; height:300px">
  <!-- Render $rowVirtualizer.getVirtualItems() -->
</div><script lang="ts">
  import { createVirtualizer } from '@tanstack/svelte-virtual'
  let parentRef: HTMLDivElement
  const rowVirtualizer = createVirtualizer({
    count: 1000,
    getScrollElement: () => parentRef,
    estimateSize: () => 36,
  })
</script>

<div bind:this={parentRef} style="overflow:auto; height:300px">
  <!-- Render $rowVirtualizer.getVirtualItems() -->
</div>

import { LitElement, customElement, html } from 'lit'
import { createLitVirtualizer } from '@tanstack/lit-virtual'

@customElement('virtual-list')
export class VirtualList extends LitElement {
  private parent?: HTMLDivElement
  virtualizer = createLitVirtualizer({
    count: 1000,
    getScrollElement: () => this.parent!,
    estimateSize: () => 36,
  })

  render() {
    return html`<div style="overflow:auto; height:300px"></div>`
  }
}import { LitElement, customElement, html } from 'lit'
import { createLitVirtualizer } from '@tanstack/lit-virtual'

@customElement('virtual-list')
export class VirtualList extends LitElement {
  private parent?: HTMLDivElement
  virtualizer = createLitVirtualizer({
    count: 1000,
    getScrollElement: () => this.parent!,
    estimateSize: () => 36,
  })

  render() {
    return html`<div style="overflow:auto; height:300px"></div>`
  }
}

import { Component, ElementRef, viewChild } from '@angular/core'
import { createAngularVirtualizer } from '@tanstack/angular-virtual'

@Component({
  standalone: true,
  selector: 'virtual-list',
  template: '<div #parent style="overflow:auto; height:300px"></div>',
})
export class VirtualListComponent {
  parent = viewChild.required<ElementRef<HTMLDivElement>>('parent')
  virtualizer = createAngularVirtualizer(() => ({
    count: 1000,
    getScrollElement: () => this.parent().nativeElement,
    estimateSize: () => 36,
  }))
}import { Component, ElementRef, viewChild } from '@angular/core'
import { createAngularVirtualizer } from '@tanstack/angular-virtual'

@Component({
  standalone: true,
  selector: 'virtual-list',
  template: '<div #parent style="overflow:auto; height:300px"></div>',
})
export class VirtualListComponent {
  parent = viewChild.required<ElementRef<HTMLDivElement>>('parent')
  virtualizer = createAngularVirtualizer(() => ({
    count: 1000,
    getScrollElement: () => this.parent().nativeElement,
    estimateSize: () => 36,
  }))
}

Designed for zero design

Headless Virtualization means you're always in control of your markup, styles and components. Go design and implement the most beautiful UI you can dream up and let us take care of the hard parts.

Big Power, Small Package

Don't be fooled by the small bundle size. TanStack Virtual uses every byte to deliver powerful performance. After all, 60FPS is table stakes these days and we refuse to sacrifice anything for that 🧈-y smooth UX.

Maximum Composability

With a single function/hook, you'll get limitless virtualization for vertical, horizontal, and grid-style layouts. The API is tiny (literally 1 function), but its composability is not.

Loved by Developers

See what teams are saying

"We chose TanStack Virtual for our virtualization needs - it handles our massive lists without breaking a sweat."

Evan Bacon

@Baconbrix · Expo

"TanStack Virtual is the answer when you need to render thousands of rows without destroying performance. Headless, flexible, and just works."

Developer Review

Community ·

"For anyone dealing with large datasets in React, TanStack Virtual is a must. The row virtualizer alone saved our app."

Community Developer

GitHub Discussion ·