vue-list-virtualized

Vue components for efficiently rendering large, scrollable lists and tabular data
1,522 1
vue vuejs virtual list grid masonry scrolling virtualized infinite vue-component vue-list-virtualized
Install
npm install vue-list-virtualized
Latest Version:0.6.5
Vue:2
Last Updated:Jan 7, 2022
Links: GitHub  ·  npm
Maintainer: funkibitto

Getting started

Install vue-list-virtualized using npm.

npm install vue-list-virtualized --save

Demo

git clone https://github.com/yunkitae/vue-virtualized.git
npm i
npm run dev

Add plugin

import Vue from 'vue';
import { Masonry } from 'vue-virtualized';

Vue.component('Masonry', Masonry);

Use

  <masonry
    :scroll-top="scrollTop"
    :state="state"
    :overscan="overscan"
    :container-width="containerWidth"
    :container-height="containerHeight"
    :gutter="gutter"
    :grid="grid"
    :list="list"
    @reflowed="reflowed"
  >
    <product
      slot="cell"
      slot-scope="props"
      :grid="grid"
      :order="props.index"
      :item="props.item"
    />
  </masonry>

Properties

Name Required Type Default Description
scrollTop true Number window scroll y position or element scroll y position
state false String null Vuex state json stringfy value
overscan false Number 0 If use, View port over size
containerWidth true Number 0 Masonry layout width
containerHeight true Number 0 Masonry layout height
gutter false Number 0 Masonry slot gutter(margin)
grid true Number 2 Masonry horizon slot count
list true Array null list data

Events

Name Description
reflowed slot reflowd

Related Packages

vue-virtual-collection

Vue component for efficiently rendering large collection data

34,838 637
infinite scrolling virtual virtualized vue vue-component vuejs collection dom recycle
virtua

A zero-config, fast and small virtual list, grid and masonry component for React...

29,130,889 3,753
grid infinite list masonry scrolling virtual virtualized vue angular flex +11
vue-easytable

Vue table component

226,597 3,799
grid infinite list scrolling virtualized vue vue-component body checkbox components +12
@easytable/vue

Vue table component

6,830 48
grid infinite list scrolling virtualized vue vue-component body checkbox components +12
@activewidgets/vue

Datagrid component for vue.js

1,718 2
grid scrolling virtual virtualized vue activewidgets data-grid data-table datagrid datatable +1

Version History

Version Released Vue License
0.6.5 ^2.0
0.6.4 ^2.0
0.6.3 ^2.0
0.6.2 ^2.0
0.6.1 ^2.0