A fast, type-safe virtual list component for rendering massive data. Works with Vue 3
Live Demo · Try it on CodeSandbox
Features:
- Extremely efficient calculations
- Provides generic type safety inside the
#itemslot - Automatically and transparently deals with variable element heights
- Small footprint. <10KB gzipped, including dependencies
Example:
<template> <div> <VirtualScroller :default-size="40" :items="someArrayOfUsers" > <template #item="{ ref, offset, index }"> <!-- `ref` is the array item. Thanks to Volar, `ref` has the type `User` here --> {{ ref.name }} </template> </VirtualScroller> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { createVirtualScroller } from 'vue-typed-virtual-list'; type User = { id: number; name: string; phone: string; }; export default defineComponent({ components: { // pass the item type as a type parameter to enable type safety in the item slot VirtualScroller: createVirtualScroller<User>() }, data: () => ({ someArrayOfUsers: Array .from(Array(100)) .map((_, i) => ({ id: i + 1, name: 'Name', phone: 'Phone' })) }) }) </script>or, with <script setup>:
<script setup lang="ts"> import { createVirtualScroller } from 'vue-typed-virtual-list'; const VirtualScroller = createVirtualScroller<User>(); type User = { id: number; name: string; phone: string; }; const someArrayOfUsers: User[] = Array .from(Array(100)) .map((_, i) => ({ id: i + 1, name: 'Name', phone: 'Phone' })); </script>If you're not using TypeScript in your project:
-const VirtualScroller = createVirtualScroller<User>(); +const VirtualScroller = createVirtualScroller();defaultSize- Placeholder size to use in calculations before an item's actual height has been measureditems- Array of items to renderpadding- Number of items beyond what is visible in the overflow viewport to render. (Default: 10)
visibleItemsChanged- Fired when the start/end indices have changed- argument type:
{ start: number; end: number }
- argument type:
scrollTo(index: number): void- scrolls an index into view (Example)
yarn yarn dev PRs welcome