Vue component for efficiently rendering large collection data

vue-virtual-collection

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

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" } },
    // ...
]

GitHub