Package Exports

@knowbly/vue-virtual-collection

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@knowbly/vue-virtual-collection) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-virtual-collection

Vue component for efficiently rendering large collection data. Inspired by react-virtualize

Demo

Usage

Install

npm i vue-virtual-collection

import

import Vue from 'vue'
import VirtualCollection from 'vue-virtual-collection'

Vue.use(VirtualCollection)

Use it !

<template>
    <div>
        <VirtualCollection :cellSizeAndPositionGetter="cellSizeAndPositionGetter" :collection="items" :height="500" :width="330">
            <div slot="cell" slot-scope="props">{{props.data}}</div>
        </VirtualCollection>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                /**
                 * This will create 1000 items like:
                 * [
                 *   { data: '#0' },
                 *   { data: '#1' },
                 *   ...
                 *   { data: '#999' }
                 * ]
                 */
                items: new Array(1000).fill(0).map((_, index) => ({ data: '#' + index }))
            }
        },
        methods: {
            cellSizeAndPositionGetter(item, index) {
                // compute size and position
                return {
                    width: 100,
                    height: 150,
                    x: (index % 2) * 110,
                    y: parseInt(index / 2) * 160
                }
            }
        }
    }
</script>

Props

cellSizeAndPositionGetter

Type: Function

(item: object, index: number) -> ({ height: number, width: number, x: number, y: number })

Required: ✓

Callback responsible for returning size and offset/position information for a given cell

function cellSizeAndPositionGetter(item, index) {
    return {
        width: item.width,
        height: item.height,
        x: item.x,
        y: item.y
    }
}

collection

Type: Array

Required: ✓

The Data for cells to render. Each object in array Must contains data property, which will be passed into slot scope.

const collection = [
    { data: { text: "#1" } },
    { data: { text: "#2" } },
    { data: { text: "#3" } },
    // ...
]

width

Type: number

Required: ✓

The width of collection

height

Type: number

Required: ✓

The height of collection

sectionSize

Type: number

Optionally override the size of the sections a Collection's cells are split into. This is an advanced option and should only be used for performance tuning purposes.

Slots

cell

<div slot="cell" slot-scope="yourOwnScope">{{yourOwnScope.data.text}}</div>

The data property in items of collection will be passed into the slot scope.

const collection = [
    { data: { text: "#1" } },
    { data: { text: "#2" } },
    { data: { text: "#3" } },
    // ...
]