Blazing fast scrolling of any Amount of Data

vue-virtual-scroller. Blazing fast scrolling of any amount of data | Live demo | Video demo


npm install --save vue-virtual-scroller

vue-virtual-scroller now uses vue-observe-visibility to automatically refresh itself when shown to prevent display glitches. This means you need to include the Intersection Observer polyfill needed by vue-observe-visibility for this to work in old browsers (like Internet Explorer).

Default import

Install all the components:

import Vue from 'vue'
import VueVirtualScroller from 'vue-virtual-scroller'


Use specific components:

import Vue from 'vue'
import { RecycleScroller } from 'vue-virtual-scroller'

Vue.component('RecycleScroller', RecycleScroller)

The line below should be included when importing the package:

import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'


<link rel="stylesheet" href="vue-virtual-scroller/dist/vue-virtual-scroller.css"/>

<script src="vue.js"></script>
<script src="vue-virtual-scroller/dist/vue-virtual-scroller.min.js"></script>

If Vue is detected, the plugin will be installed automatically. If not, install the component:


Or register it with a custom name:

Vue.component('RecycleScroller', VueVirtualScroller.RecycleScroller)


There are several components provided by vue-virtual-scroller:

RecycleScroller is a component that only renders the visible items in your list. It also re-uses components and dom elements to be as efficient and performant as possible.

DynamicScroller is a component that wraps the RecycleScroller component and extends its features to include dynamic size management. The main use case for this is when you do not know the size of the items in advance. The Dynamic Scroller automatically “discovers” item dimensions as it renders new items during scrolling.

DynamicScrollerItem must wrap each item in a DynamicScroller to handle size computations.

IdState is a mixin that ease the local state management in reused components inside a RecycleScroller.


RecycleScroller is a virtual scroller that only renders the visible items. As the user scrolls, RecycleScroller reuses all components and DOM nodes to maintain optimal performance.

Basic usage

Use the scoped slot to render each item in the list:

    v-slot="{ item }"
    <div class="user">
      {{ }}

export default {
  props: {
    list: Array,

<style scoped>
.scroller {
  height: 100%;

.user {
  height: 32%;
  padding: 0 12px;
  display: flex;
  align-items: center;

Important notes

  • You need to set the size of the virtual-scroller element and the items elements (for example, with CSS). Unless you are using variable size mode, all items should have the same height (or width in horizontal mode) to prevent display glitches.
  • If the items are objects, the scroller needs to be able to identify them. By default it will look for an id field on the items. This can be configured with the keyField prop if you are using another field name.
  • It is not recommended to use functional components inside RecycleScroller since the components are reused (so it will actually be slower).
  • The list item components must be reactive to the item prop being updated without being re-created (use computed props or watchers to properly react to props changes!).
  • You don’t need to set key on list content (but you should on all nested <img> elements to prevent load glitches).
  • The browsers have a size limitation on DOM elements, it means that currently the virtual scroller can’t display more than ~500k items depending on the browser.
  • Since DOM elements are reused for items, it’s recommended to define hover styles using the provided hover class instead of the :hover state selector (e.g. .vue-recycle-scroller__item-view.hover or .hover .some-element-inside-the-item-view).

How does it work?

  • The RecycleScroller creates pools of views to render visible items to the user.
  • A view holds a rendered item, and is reused inside its pool.
  • For each type of item, a new pool is created so that the same components (and DOM trees) are reused for the same type.
  • Views can be deactivated if they go off-screen, and can be reused anytime for a newly visible item.

Here is what the internals of RecycleScroller look like in vertical mode:

  <!-- Wrapper element with a pre-calculated total height -->
    :style="{ height: computedTotalHeight + 'px' }"
    <!-- Each view is translated to the computed position -->
      v-for="view of pool"
      :style="{ transform: 'translateY(' + view.computedTop + 'px)' }"
      <!-- Your elements will be rendered here -->

When the user scrolls inside RecycleScroller, the views are mostly just moved around to fill the new visible space, and the default slot properties updated. That way we get the minimum amount of components/elements creation and destruction and we use the full power of Vue virtual-dom diff algorithm to optimize DOM operations!


  • items: list of items you want to display in the scroller.
  • direction (default: 'vertical'): scrolling direction, either 'vertical' or 'horizontal'.
  • itemSize (default: null): display height (or width in horizontal mode) of the items in pixels used to calculate the scroll size and position. If it is set to null (the default value), it will use variable size mode.
  • minItemSize: minimum size used if the height (or width in horizontal mode) of a item is unknown.
  • sizeField (default: 'size'): field used to get the item’s size in variable size mode.
  • typeField (default: 'type'): field used to differentiate different kinds of components in the list. For each distinct type, a pool of recycled items will be created.
  • keyField (default: 'id'): field used to identify items and optimize managing rendered views.
  • pageMode (default: false): enable Page mode.
  • prerender (default: 0): render a fixed number of items for Server-Side Rendering (SSR).
  • buffer (default: 200): amount of pixel to add to edges of the scrolling visible area to start rendering items further away.
  • emitUpdate (default: false): emit a 'update' event each time the virtual scroller content is updated (can impact performance).


  • resize: emitted when the size of the scroller changes.
  • visible: emitted when the scroller considers itself to be visible in the page.
  • hidden: emitted when the scroller is hidden in the page.
  • update (startIndex, endIndex): emitted each time the views are updated, only if emitUpdate prop is true

Default scoped slot props

  • item: item being rendered in a view.
  • index: reflects each item’s position in the items array
  • active: whether or not the view is active. An active view is considered visible and being positioned by RecycleScroller. An inactive view is not considered visible and is hidden from the user. Any rendering-related computations should be skipped if the view is inactive.

Other Slots

  <slot name="before"></slot>
    <!-- Reused view pools here -->
  <slot name="after"></slot>


  <template #before>
    Hey! I'm a message displayed before the items!

  <template v-slot="{ item }">
    <div class="user">
      {{ }}

Page mode

The page mode expands the virtual-scroller and uses the page viewport to compute which items are visible. That way, you can use it in a big page with HTML elements before or after (like a header and a footer). Set the page-mode prop to true:


<RecycleScroller page-mode>
  <!-- ... -->

  Copyright 2017 - Cat

Variable size mode

This mode can be performance heavy with a lot of items. Use with caution.

If the itemSize prop is not set or is set to null, the virtual scroller will switch to variable size mode. You then need to expose a number field on the item objects with the size of the item element.

You still need to set the size of the items with CSS correctly (with classes for example).

Use the sizeField prop (default is 'size') to set the field used by the scroller to get the size for each item.


const items = [
    id: 1,
    label: 'Title',
    size: 64,
    id: 2,
    label: 'Foo',
    size: 32,
    id: 3,
    label: 'Bar',
    size: 32,


You can set the buffer prop (in pixels) on the virtual-scroller to extend the viewport considered when determining the visible items. For example, if you set a buffer of 1000 pixels, the virtual-scroller will start rendering items that are 1000 pixels below the bottom of the scroller visible area, and will keep the items that are 1000 pixels above the top of the visible area.

The default value is 200.

<RecycleScroller :buffer="200" />

Server-Side Rendering

The prerender props can be set as the number of items to render on the server inside the virtual scroller:



This works just like the RecycleScroller, but it can render items with unknown sizes!

Basic usage

    <template v-slot="{ item, index, active }">
        <div class="avatar">
        <div class="text">{{ item.message }}</div>

export default {
  props: {
    items: Array,

<style scoped>
.scroller {
  height: 100%;

Important notes

  • minItemSize is required for the initial render of items.
  • DynamicScroller won’t detect size changes on its own, but you can put values that can affect the item size with size-dependencies on DynamicScrollerItem.
  • You don’t need to have a size field on the items.


Extends all the RecycleScroller props.

  • It’s not recommended to change sizeField prop since all the size management is done internally.


Extends all the RecycleScroller events.

Default scoped slot props

Extends all the RecycleScroller scoped slot props.

Other slots

Extends all the RecycleScroller other slots.


The component that should wrap all the items in a DynamicScroller.


  • item (required): the item rendered in the scroller.
  • active (required): is the holding view active in RecycleScroller. Will prevent unnecessary size recomputation.
  • sizeDependencies: values that can affect the size of the item. This prop will be watched and if one value changes, the size will be recomputed. Recommended instead of watchData.
  • watchData (default: false): deeply watch item for changes to re-calculate the size (not recommended, can impact performance).
  • tag (default: 'div'): element used to render the component.
  • emitResize (default: false): emit the resize event each time the size is recomputed (can impact performance).


  • resize: emitted each time the size is recomputed, only if emitResize prop is true.


This is convenience mixin that can replace data in components being rendered in a RecycleScroller.

Why is this useful?

Since the components in RecycleScroller are reused, you can’t directly use the Vue standard data properties: otherwise they will be shared with different items in the list!

IdState will instead provide an idState object which is equivalent to $data, but it’s linked to a single item with its identifier (you can change which field with idProp param).


In this example, we use the id of the item to have a “scoped” state to the item:

  <div class="question">
    <p>{{ item.question }}</p>
    <button @click="idState.replyOpen = !idState.replyOpen">Reply</button>
      placeholder="Type your reply"

import { IdState } from 'vue-virtual-scroller'

export default {
  mixins: [
      // You can customize this
      idProp: vm =>,

  props: {
    // Item in the list
    item: Object,

  // This replaces data () { ... }
  idState () {
    return {
      replyOpen: false,
      replyText: '',


  • idProp (default: vm => field name on the component (for example: 'id') or function returning the id.

Download Details:

Author: Akryum

Live Demo:


#vuejs #javascript #vue-js

What is GEEK

Buddha Community

Blazing fast scrolling of any Amount of Data
Siphiwe  Nair

Siphiwe Nair


Your Data Architecture: Simple Best Practices for Your Data Strategy

If you accumulate data on which you base your decision-making as an organization, you should probably think about your data architecture and possible best practices.

If you accumulate data on which you base your decision-making as an organization, you most probably need to think about your data architecture and consider possible best practices. Gaining a competitive edge, remaining customer-centric to the greatest extent possible, and streamlining processes to get on-the-button outcomes can all be traced back to an organization’s capacity to build a future-ready data architecture.

In what follows, we offer a short overview of the overarching capabilities of data architecture. These include user-centricity, elasticity, robustness, and the capacity to ensure the seamless flow of data at all times. Added to these are automation enablement, plus security and data governance considerations. These points from our checklist for what we perceive to be an anticipatory analytics ecosystem.

#big data #data science #big data analytics #data analysis #data architecture #data transformation #data platform #data strategy #cloud data platform #data acquisition

Gerhard  Brink

Gerhard Brink


Getting Started With Data Lakes

Frameworks for Efficient Enterprise Analytics

The opportunities big data offers also come with very real challenges that many organizations are facing today. Often, it’s finding the most cost-effective, scalable way to store and process boundless volumes of data in multiple formats that come from a growing number of sources. Then organizations need the analytical capabilities and flexibility to turn this data into insights that can meet their specific business objectives.

This Refcard dives into how a data lake helps tackle these challenges at both ends — from its enhanced architecture that’s designed for efficient data ingestion, storage, and management to its advanced analytics functionality and performance flexibility. You’ll also explore key benefits and common use cases.


As technology continues to evolve with new data sources, such as IoT sensors and social media churning out large volumes of data, there has never been a better time to discuss the possibilities and challenges of managing such data for varying analytical insights. In this Refcard, we dig deep into how data lakes solve the problem of storing and processing enormous amounts of data. While doing so, we also explore the benefits of data lakes, their use cases, and how they differ from data warehouses (DWHs).

This is a preview of the Getting Started With Data Lakes Refcard. To read the entire Refcard, please download the PDF from the link above.

#big data #data analytics #data analysis #business analytics #data warehouse #data storage #data lake #data lake architecture #data lake governance #data lake management

Cyrus  Kreiger

Cyrus Kreiger


How Has COVID-19 Impacted Data Science?

The COVID-19 pandemic disrupted supply chains and brought economies around the world to a standstill. In turn, businesses need access to accurate, timely data more than ever before. As a result, the demand for data analytics is skyrocketing as businesses try to navigate an uncertain future. However, the sudden surge in demand comes with its own set of challenges.

Here is how the COVID-19 pandemic is affecting the data industry and how enterprises can prepare for the data challenges to come in 2021 and beyond.

#big data #data #data analysis #data security #data integration #etl #data warehouse #data breach #elt

Macey  Kling

Macey Kling


Applications Of Data Science On 3D Imagery Data

CVDC 2020, the Computer Vision conference of the year, is scheduled for 13th and 14th of August to bring together the leading experts on Computer Vision from around the world. Organised by the Association of Data Scientists (ADaSCi), the premier global professional body of data science and machine learning professionals, it is a first-of-its-kind virtual conference on Computer Vision.

The second day of the conference started with quite an informative talk on the current pandemic situation. Speaking of talks, the second session “Application of Data Science Algorithms on 3D Imagery Data” was presented by Ramana M, who is the Principal Data Scientist in Analytics at Cyient Ltd.

Ramana talked about one of the most important assets of organisations, data and how the digital world is moving from using 2D data to 3D data for highly accurate information along with realistic user experiences.

The agenda of the talk included an introduction to 3D data, its applications and case studies, 3D data alignment, 3D data for object detection and two general case studies, which are-

  • Industrial metrology for quality assurance.
  • 3d object detection and its volumetric analysis.

This talk discussed the recent advances in 3D data processing, feature extraction methods, object type detection, object segmentation, and object measurements in different body cross-sections. It also covered the 3D imagery concepts, the various algorithms for faster data processing on the GPU environment, and the application of deep learning techniques for object detection and segmentation.

#developers corner #3d data #3d data alignment #applications of data science on 3d imagery data #computer vision #cvdc 2020 #deep learning techniques for 3d data #mesh data #point cloud data #uav data

Uriah  Dietrich

Uriah Dietrich


What Is ETLT? Merging the Best of ETL and ELT Into a Single ETLT Data Integration Strategy

Data integration solutions typically advocate that one approach – either ETL or ELT – is better than the other. In reality, both ETL (extract, transform, load) and ELT (extract, load, transform) serve indispensable roles in the data integration space:

  • ETL is valuable when it comes to data quality, data security, and data compliance. It can also save money on data warehousing costs. However, ETL is slow when ingesting unstructured data, and it can lack flexibility.
  • ELT is fast when ingesting large amounts of raw, unstructured data. It also brings flexibility to your data integration and data analytics strategies. However, ELT sacrifices data quality, security, and compliance in many cases.

Because ETL and ELT present different strengths and weaknesses, many organizations are using a hybrid “ETLT” approach to get the best of both worlds. In this guide, we’ll help you understand the “why, what, and how” of ETLT, so you can determine if it’s right for your use-case.

#data science #data #data security #data integration #etl #data warehouse #data breach #elt #bid data