vue-collection-cluster
A vue component for displaying large data sets. Render 100000+ rows/columns easily with great performance.
Demo
Installation
npm install --save vue-collection-cluster
Usage
; components: CollectionCluster { 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.
{{ item.title }} {{ item.value }}
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
Methods
isAtTop()
Return: Boolean
Is list at the top?
isAtBottom()
Return: Boolean
Is list at the bottom?
scrollTo(index, position)
index: Int
, position: default|top|bottom|topInset|bottomInset'
Scrolls to specified index at position.
scrollToBottom()
Scrolls to bottom of list.
resizeItem(index)
index: Int
Should be called whenever item with dynamic height did change height.
Example
Letter.vue
source:
{{item.value}}
Name.vue
source:
{{item.value.name}}
License
Copyright (c) 2018 Andrej Adamcik