Fast Virtual Scrolling Component For Vue 3 - Virtualised

Install & Download:

# Yarn
$ yarn add vue-virtualised
# NPM
$ npm i vue-virtualised

Description:

A virtual scrolling library for Vue 3 that lets you render high performance large lists and hierarchical tree views in applications.

How to use it:

1. Import the components.

import { VirtualisedList, VirtualisedTree } from "vue-virtualised";

2. Create a virtual scrolling list.

<virtualised-list :nodes="[1, 2, 3, ...]">
  <template #cell="slotProps">
    {{ slotProps.node }}
  </template>
</virtualised-list>

3. Create a virtual scrolling tree.

<virtualised-tree
  :nodes="[
    {
      name: 'Node 1',
      children: [{ name: 'Leaf 1' }],
      state: { expanded: true },
    },
    { name: 'Node 2' },
  ]"
>
  <template #cell="slotProps">
    <div
      :style="{
        textAlign: 'left',
        marginLeft: `${slotProps.node.parents.length * 30}px`,
      }"
    >
      {{ slotProps.node.name }}
    </div>
  </template>
</virtualised-tree>

4. Possible props for <VirtualisedTree />

nodes: {
  type: Array as PropType<Array<Node>>,
  required: true,
},
useTimeSlicing: { type: Boolean, default: () => true },
onChange: {
  type: Function as PropType<OnChangeCallback>,
  default: () => null,
},
viewportHeight: {
  type: Number,
  default: () => 400,
},
initialScrollTop: {
  type: Number,
  default: () => 0,
},
initialScrollIndex: {
  type: Number,
  default: () => null,
},
scrollBehaviour: {
  // eslint-disable-next-line no-undef
  type: String as PropType<ScrollBehavior>,
  default: () => "auto",
},
tolerance: {
  type: Number,
  default: () => 2,
},
getNodeHeight: {
  type: Function as PropType<GetNodeHeight>,
  default: () => 40,
},
getNodeKey: {
  type: Function as PropType<GetNodeKey>,
  default: (node: NodeModel, index: number) => node.key ?? index,
},
cellRenderer: {
  type: Function as PropType<CellRenderer>,
  default: () => null,
},

5. Possible props for <VirtualisedList />

nodes: {
  type: Array as PropType<Array<any>>,
  required: true,
},
viewportHeight: {
  type: Number,
  default: () => 400,
},
initialScrollTop: {
  type: Number,
  default: () => 0,
},
initialScrollIndex: {
  type: Number,
  default: () => null,
},
scrollBehaviour: {
  // eslint-disable-next-line no-undef
  type: String as PropType<ScrollBehavior>,
  default: () => "auto",
},
tolerance: {
  type: Number,
  default: () => 2,
},
getNodeHeight: {
  type: Function as PropType<GetNodeHeight>,
  default: () => 40,
},
getNodeKey: {
  type: Function as PropType<GetNodeKey>,
  default: (node: any, index: number) => node.key ?? index,
},
cellRenderer: {
  type: Function as PropType<CellRenderer>,
  default: () => null,
},