Set of components used for virtualizing DOM
npm install vue-windowingSet of components used for virtualizing DOM.
``
npm install --save vue-windowing
Install all as a plugin:
`javascript
import Vue from 'vue'
import ViewWindowing from 'vue-windowing';
Vue.use(ViewWindowing)
`
Install only those which you want:
`javascript
import Vue from 'vue'
import {
VirtualScroll,
// ...
NestedList,
} from 'vue-windowing';
Vue.component(VirtualScroll, 'VirtualScroll');
Vue.component(NestedList, 'NestedList');
`
There are several components used for DOM virtualization:
Component used for virtualizing vertical scrolling elements. It may handle dynamic height elements calculated on fly by AutoHeightMeasurer.
Example:
`vue
:items="items"
:render-ahead="renderAhead"
:estimated-height="estimatedHeight">
`
Wrapper for VirtualScroll. It adds simple functionality of flattening passed items. Allowing to render tree data structures.
Example:
`vue
:items="items"
:render-ahead="renderAhead"
:estimated-height="estimatedHeight">
`
Wrapper for VirtualScroll. It adds simple functionality of flattening passed items and toggling visibility of groups. Allowing to render tree data structures.
Example:
`vue
:items="items"
:render-ahead="renderAhead"
:estimated-height="estimatedHeight"
@expand="onExpandGroup">
``
Props:
| Prop name | Description | Default value |
| ------------- |:-------------:| -----:|
| items | list of items | [] or {} for Nested/Expanding List |
| renderAhead | number of buffered items at the top/bottom | 2 |
| estimatedHeight | approximated value of each row height | 30 |
| expanded | the flag which toggles between state of all items - only for ExpandingList | '' |
Events:
- expand: click event for group element which toggles between visible state of group items - only for ExpandingList
> :x: Do not use margin directly for styling node items! Height won't be measured well.
> :information_source: Each virtualized component by default will fully expand, to make things happening you either have to set height / max-height of component or by implementing dynamic height content with flexbox / grid.