Fast Virtual Scrolling Component For Vue 3 – Virtualised

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,
},

Preview:

Changelog:

v0.1.8 (10/14/2021)

• Bump up versions of vulnerable dependencies

v0.1.7 (06/07/2021)

• This release updates the documentation to distinguish between node.key and getNodeKey.

v0.1.5 (05/12/2021)

• Optimise package size.

v0.1.3 (05/05/2021)

• Deliver types for TypeScript projects to import.

v0.1.1 (04/21/2021)

• Add invariant error message for empty nodes props.

v0.1.0 (04/19/2021)

• TypeScript support.
• Invariant VS TS type validation.
• Add/remove nodes API.
• Refresh component API.

Download Details:

Author: FallingCeilingS

Live Demo: https://github.com/FallingCeilingS/vue-virtualised

Download Link: https://github.com/FallingCeilingS/vue-virtualised/archive/refs/heads/main.zip

Official Website: https://github.com/FallingCeilingS/vue-virtualised

Install & Download:

# Yarn
$ yarn add vue-virtualised

# NPM
$ npm i vue-virtualised