@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
- [[{}]]
- data[row][column] = 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.