vue-collection-cluster

vue-collection-cluster

A vue component for displaying large data sets easily with great performance.

Installation

npm install --save vue-collection-cluster

Usage

<template>
	<collection-cluster
		v-bind="collection"
		:items="items"
	></collection-cluster>
</template>

import CollectionCluster from 'vue-collection-cluster';

export {
	components: {CollectionCluster},
	data() {
		return {
			collection: {

			},
			items: [{
				type: 'header',
				title: 'List',
			}, {
				type: 'letter',
				value: 'A',
			}]
		}
	}
}

Scoped slots

Each item in the list must have type, by the type a correct slot is rendered for item.

<collection-cluster :items="items">
	<div slot="header" 
		slot-scope="{ cell, item }"
		:key="cell.index"
		class="item"
	>
		{{ item.title }}
	</div>

	<div slot="letter" 
		slot-scope="{ cell, item }"
		:key="cell.index"
		class="item"
	>
		{{ item.value }}
	</div>
</collection-cluster>

Height Types

static

Each slot must have size set in the css, which must be equal to size set in itemHeight option.

dynamic

Each item in the list must have property (heightField) with the exact height of the slot for that item.

automatic

Size of slot is automaticaly calculated when rendered and set to heightField property of the item.

For dynamic/automatic types, the itemHeight option is used as estimate. It's strongly recommended to use it.

Options

items

Type: Array, Required

List of items to display.

columns

Type: Number, Default: 1

Number of columns per row.

itemHeight

Type: Number, Default: 100

Height of the row.

typeField

Type: String, Default: type

Item property's name for type.

heightField

Type: String, Default: height

Item property's name for height.

heightType

Type: String, Default: static, Options: static, dynamic, automatic

inset

Type: Object, Default: {top: 0, bottom: 0}

Inset from top and bottom of the list.

scrollPastEnd

Type: Number, Default: 0

Renders space at the end of the list of size height * scrollPastEnd.

0.5 = 50% of height

buffer

Type: Number, Default: 200

Pixels to pre-render around visible area.

threshold

Type: Number, Default: 50

Threshold for scrollToTop & scrollToBottom events.

autoResize

Type: Boolean, Default: true

Sets whether the list should auto resize and render items when window resizes.

Events

cellsChange

Emitted when visible/rendered cells change. There is one argument with list of cells.

scrollToTop

scrollToBottom