vue-typed-virtual-list
v1.0.10
Published
A small, efficient, easy-to-use virtual list for Vue 3
Downloads
477
Readme
vue-typed-virtual-list
A fast, type-safe virtual list component for Vue 3.
Features:
- Extremely efficient calculations
- Provides generic type safety inside the
#item
slot - Automatically and transparently deals with variable element heights
- Small footprint. <2KB gzipped
Live Demo · Try it on CodeSandbox
Usage
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>
Props
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)
Emits
visibleItemsChanged
- Fired when the start/end indices have changed- argument type:
{ start: number; end: number }
- argument type:
Exposed Instance Methods
scrollTo(index: number): void
- scrolls an index into view
Development
yarn
yarn dev
Contributing
PRs welcome