Vue components developed by Vue.js 3.0 for efficiently rendering large scrollable lists and hierarchical data. vue-virtualised is able to render and update 1 million nodes within a few seconds in front-end.

Install vue-virtualised using npm.

# npm
npm install vue-virtualised --save

# yarn
yarn add vue-virtualised

ES6 and CommonJS builds are available with each distribution. For example:

// You can import any component you want as a named export from 'vue-virtualised'. e.g.
import { VirtualisedList, VirtualisedTree } from "vue-virtualised";

// Or you can import the component as a named export. e.g.
import { VirtualisedTree as Tree } from "vue-virtualised";

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

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

A static type system can help prevent many potential runtime errors as applications grow, which is why this project is written in TypeScript. When the documentation is referred to any specific type, please check types folder for more information. For TypeScript project, types can be imported directly from the library. For example:

import type { Node, NodeModel } from "vue-virtualised";

Here are props that are identical in both VirtualisedList and VirtualisedTree components.

Here are events that are identical in both VirtualisedList and VirtualisedTree components.

Slots are provided for rendering content dynamically. Here are slots that are identical in both VirtualisedList and VirtualisedTree components.

scrollToStart(): void

scrollToEnd(): void

scrollToIndex(index: number): void

Valid index should be in the range from 0 to nodes.length - 1.

scrollToNode(conditionCallback: ConditionCallback): void

Valid conditionCallback should be a function that takes a node as a parameter and returns a boolean:

conditionCallback(node: Node): boolean

refreshView(): void

Forces refresh rendered content.

scrollToHeight(height: number, behaviour: ScrollBehavior): void

createNode(nodes: Array<Node | NodeModel>, node: NodeModel, path: Array<number>): Promise<void>

This method creates a single node (node allows contain children) as well as its descendants, and it can be bound to the cell slot. Valid parameters are:

• nodes: nodes prop.

• node: The node to be created.

• path: The path of the node in the tree structure. e.g. For the following tree structure, the paths are showing in the comment for each:

  [
    {
      name: 'Node 1', // path: [0]
      children: [{ name: 'Leaf 1' /* path: [0, 0] */ }],
      state: { expanded: true },
    },
    { name: 'Node 2' }, // path: [1]
  ]

  In addition, path can be composed by the node slot prop in the cell slot:

  const path = [...node.parents, node.index];

updateNode(nodes: Array<Node>, node: NodeModel, index: number, updateFn: UpdateNodeCallback): void

This method can be bound to the cell slot, which updates a single node in both original data and the view. Valid parameters are:

• nodes: nodes prop.
• node: The current node of the slot that needs to be updated.
• index: The index of the node that needs to be updated.
• updateFn: The function that manipulates the current node and returns an updated node:

updateFn(node: NodeModel): NodeModel

This method can be used to expand/collapse the current node by setting the boolean value of state.expanded.

updateNodes(nodes: Array<Node>, node: NodeModel, index: number, updateFn: UpdateNodeCallback): void

This method can be bound to cell slot, which updates a single node in the tree view including all its descendants in both original data and the view. Valid parameters are:

• nodes: nodes prop.
• node: The current node of the slot that needs to be updated.
• index: The index of the node that needs to be updated.
• updateFn: The function that manipulates the current node and returns an updated node:

updateFn(node: NodeModel): NodeModel

removeNode(nodes: Array<Node | NodeModel>, path: Array<number>): Promise<void>

This method removes a single node as well as its descendants, and it can be bound to the cell slot. Valid parameters are:

• nodes: nodes prop.
• path: The path of the node in the tree structure.

forceUpdate(): void

Forces refresh rendered content.

Pull requests and issues are welcome!

yarn install

yarn serve

yarn build

yarn lint

MIT