Source: https://tanstack.com/virtual/v3/docs/framework/vue/examples/sticky

TanStack

Virtual v3v3

Search...

+ K

Auto

Log In

TanStack StartRC

Docs Examples GitHub Contributors

TanStack Router

Docs Examples GitHub Contributors

TanStack Query

Docs Examples GitHub Contributors

TanStack Table

Docs Examples Github Contributors

TanStack Formnew

Docs Examples Github Contributors

TanStack DBbeta

Docs Github Contributors

TanStack Virtual

Docs Examples Github Contributors

TanStack Paceralpha

Docs Examples Github Contributors

TanStack Storealpha

Docs Examples Github Contributors

TanStack Devtoolsalpha

Docs Github Contributors

More Libraries

Maintainers Partners Support Learn StatsBETA Discord Merch Blog GitHub Ethos Brand Guide

Documentation

Framework

Vue

Version

v3

Search...

+ K

Menu

• Home

• Frameworks

• Contributors

• GitHub

• Discord

Getting Started

• Introduction
  
  core

• Installation
  
  core

• Vue Virtual
  
  vue

Core APIs

• Virtualizer
  
  core

• VirtualItem
  
  core

Examples

• Fixed
  
  vue

• Variable
  
  vue

• Dynamic
  
  vue

• Sticky
  
  vue

• Infinite Scroll
  
  vue

• Smooth Scroll
  
  vue

• Table
  
  vue

• Padding
  
  vue

• Scroll Padding
  
  vue

Framework

Vue

Version

v3

Menu

• Home

• Frameworks

• Contributors

• GitHub

• Discord

Getting Started

• Introduction
  
  core

• Installation
  
  core

• Vue Virtual
  
  vue

Core APIs

• Virtualizer
  
  core

• VirtualItem
  
  core

Examples

• Fixed
  
  vue

• Variable
  
  vue

• Dynamic
  
  vue

• Sticky
  
  vue

• Infinite Scroll
  
  vue

• Smooth Scroll
  
  vue

• Table
  
  vue

• Padding
  
  vue

• Scroll Padding
  
  vue

Vue Example: Sticky

Github StackBlitz CodeSandbox

===========================================================================================================================================================================================================================================================================================================================================================================================

Code ExplorerCode

Interactive SandboxSandbox

• public

• src

  • App.vue

  • main.ts

  • style.css

  • vite-env.d.ts

• .gitignore

• README.md

• index.html

• package.json

• tsconfig.json

• tsconfig.node.json

• vite.config.ts

vue

<template>
  <div>
    <div
      ref="parentRef"
      class="List"
      style="height: 300px; width: 400px; overflow: auto"
    >
      <div
        :style="{
          height: `${totalSize}px`,
          width: '100%',
          position: 'relative',
        }"
      >
        <div
          v-for="virtualRow in virtualRows"
          :key="virtualRow.index"
          :class="['ListItem', { Sticky: isSticky(virtualRow.index) }]"
          :style="{
            ...(isSticky(virtualRow.index)
              ? {
                  background: '#fff',
                  borderBottom: '1px solid #ddd',
                  zIndex: 1,
                }
              : {}),
            ...(isActiveSticky(virtualRow.index)
              ? { position: 'sticky' }
              : {
                  position: 'absolute',
                  transform: `translateY(${virtualRow.start}px)`,
                }),
            top: 0,
            left: 0,
            width: '100%',
            height: `${virtualRow.size}px`,
          }"
        >
          {{ rows[virtualRow.index] }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { faker } from '@faker-js/faker'
import { findIndex, groupBy } from 'lodash'
import { useVirtualizer, defaultRangeExtractor } from '@tanstack/vue-virtual'

const groupedNames = groupBy(
  Array.from({ length: 1000 })
    .map(() => faker.person.firstName())
    .sort(),
  (name: string[]) => name[0],
)
const groups = Object.keys(groupedNames)

const rows = groups.reduce<string[]>(
  (acc, k) => [...acc, k, ...groupedNames[k]],
  [],
)

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

const activeStickyIndexRef = ref(0)

const stickyIndexes = computed(() =>
  groups.map((gn) => findIndex(rows, (n: string) => n === gn)),
)

const isSticky = (index: number) => stickyIndexes.value.includes(index)

const isActiveSticky = (index: number) => activeStickyIndexRef.value === index

const rowVirtualizer = useVirtualizer({
  count: rows.length,
  estimateSize: () => 50,
  getScrollElement: () => parentRef.value,
  rangeExtractor: (range) => {
    activeStickyIndexRef.value = [...stickyIndexes.value]
      .reverse()
      .find((index) => range.startIndex >= index)

    const next = new Set([\
      activeStickyIndexRef.value,\
      ...defaultRangeExtractor(range),\
    ])

    return [...next].sort((a, b) => a - b)
  },
})

const virtualRows = computed(() => rowVirtualizer.value.getVirtualItems())

const totalSize = computed(() => rowVirtualizer.value.getTotalSize())
</script>


<template>
  <div>
    <div
      ref="parentRef"
      class="List"
      style="height: 300px; width: 400px; overflow: auto"
    >
      <div
        :style="{
          height: `${totalSize}px`,
          width: '100%',
          position: 'relative',
        }"
      >
        <div
          v-for="virtualRow in virtualRows"
          :key="virtualRow.index"
          :class="['ListItem', { Sticky: isSticky(virtualRow.index) }]"
          :style="{
            ...(isSticky(virtualRow.index)
              ? {
                  background: '#fff',
                  borderBottom: '1px solid #ddd',
                  zIndex: 1,
                }
              : {}),
            ...(isActiveSticky(virtualRow.index)
              ? { position: 'sticky' }
              : {
                  position: 'absolute',
                  transform: `translateY(${virtualRow.start}px)`,
                }),
            top: 0,
            left: 0,
            width: '100%',
            height: `${virtualRow.size}px`,
          }"
        >
          {{ rows[virtualRow.index] }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { faker } from '@faker-js/faker'
import { findIndex, groupBy } from 'lodash'
import { useVirtualizer, defaultRangeExtractor } from '@tanstack/vue-virtual'

const groupedNames = groupBy(
  Array.from({ length: 1000 })
    .map(() => faker.person.firstName())
    .sort(),
  (name: string[]) => name[0],
)
const groups = Object.keys(groupedNames)

const rows = groups.reduce<string[]>(
  (acc, k) => [...acc, k, ...groupedNames[k]],
  [],
)

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

const activeStickyIndexRef = ref(0)

const stickyIndexes = computed(() =>
  groups.map((gn) => findIndex(rows, (n: string) => n === gn)),
)

const isSticky = (index: number) => stickyIndexes.value.includes(index)

const isActiveSticky = (index: number) => activeStickyIndexRef.value === index

const rowVirtualizer = useVirtualizer({
  count: rows.length,
  estimateSize: () => 50,
  getScrollElement: () => parentRef.value,
  rangeExtractor: (range) => {
    activeStickyIndexRef.value = [...stickyIndexes.value]
      .reverse()
      .find((index) => range.startIndex >= index)

    const next = new Set([\
      activeStickyIndexRef.value,\
      ...defaultRangeExtractor(range),\
    ])

    return [...next].sort((a, b) => a - b)
  },
})

const virtualRows = computed(() => rowVirtualizer.value.getVirtualItems())

const totalSize = computed(() => rowVirtualizer.value.getTotalSize())
</script>

Dynamic

Infinite Scroll

Partners Become a Partner