A Vue.js component to render a high-performance virtual scrolling grid using CSS Grid Layout.
More Features:
- Supports any Vue.js component.
- Infinite Scroll is supported as well.
How to use it:
1. Import the component.
import VirtualGrid from ‘vue-virtual-grid’;
2. Register the component.
components: {
VirtualGrid,
// ...
},
3. Add the Virtual Grid to the template.
<VirtualGrid :items="yourDataSet" :updateFunction="yourGetDataFunction" :getGridGap="yourFunction" :getColumnCount="yourFunction" :getWindowMargin="yourFunction" :getItemRatioHeight="yourFunction" :updateTriggerMargin="number" :loader="loaderComponent" :debug="false" />
4. Define your data set in items object.
{
// unique ID
id: string,
// custom param, pass an object with what you want inside (optional)
injected?: string,
// original height of the item
height: number,
// original width of the item (optional: if not set, height will not be adjusted by getItemRatioHeight)
width?: number,
// how many columns will use your item (set 0 if you want the full width)
columnSpan: number,
// if the item should appear on the next row (optional)
newRow?: boolean,
// A VueJS component (custom template of your choice) to render the item (passed as prop `item`)
renderComponent: Component
}
Preview:
Changelog:
v2.5.0 (05/05/2022)
- allow to use the scrolling container inside a div
- child elements now have a class to target them
- fix warning on component name
v2.4.0 (02/16/2022)
- Migrate to Vite builder
v2.3.0 (12/16/2020)
- Better infinite scroll rendering
Download Details:
Author: Mikescops
Live Demo: https://vue-virtual-grid.netlify.app/
Download Link: https://github.com/Mikescops/vue-virtual-grid/archive/main.zip
Official Website: https://github.com/Mikescops/vue-virtual-grid
Install & Download:
# NPM
$ npm i vue-virtual-grid --save