@zyrica/vue-virtual-scroller v0.1.4

@zyrica/vue-virtual-scroller

Virtual scrolling in both directions - Demo 1066*148 icons

Installation

npm install --save @zyrica/vue-virtual-scroller

Usage

<script>
    import VueVirtualScroller from '@zyrica/vue-virtual-scroller';
    
    export default {
      props: {
        data, // [[dataObject]]
      },
      components: {
        VueVirtualScroller,
      },
    }
</script>

<template>
  <vue-virtual-scroller
    class="scroller"
    :data="data"
    :heights="50"
    :widths="50"
  >
    <div slot-scope="dataObject">
      {{dataObject.property}}
    </div>
  </vue-virtual-scroller>
</template>

Props

Data

This is the table data and is required.

The datatype described in three ways:

• Array of arrays of objects
• [{}]
• datarow = cellData

It is important that the data is symetrical, each row should have the same amounts of columns.

width, height

These props are the width and height of the container.

Should be numbers and defaults to 800*500

widths, heights

Widths and heights describe the size of each row and column.

They can independently be either Numbers or Array of Numbers.

If its a Number all cells will have the same size. (faster)

If its a Array of Numbers each number represent the size of the corresponding row or column. In this case its important that the array size correspond to the size of the data.