KNIME® Vue Headless Virtual Scroller

This repository is maintained by the KNIME UI Extensions Development Team.

Fast scrolling of large amounts of data. ⚡️

Uses a virtual grid to enable simultanous horizontal ⇢ and vertical ⇣ virtual scrolling. Based on the Vue JavaScript framework.

Inspired by Vue Virtual Scroller.

Demo

Using it in a Vue component

Install @knime/vue-headless-virtual-scroller npm package as dependency:

npm i @knime/vue-headless-virtual-scroller

The library exposes two Vue composables which can be utilized depending on the use case:

• useVirtualLine([...]) enables scrolling in a single direction
• useVirtualGrid([...]) enables scrolling in both horizontal and vertical directions

A SizeManager is passed as prop to determine how virtual sizes are determined for scrolling. E.g. a SameSizeManager assumes that all contained items will have the same height (or width respectively).

See the DemoGrid.vue for a simple integration.

Development

Prerequisites

• Install Node.js, see version in package.json.

Newer versions may also work, but have not been tested.

Install dependencies

npm install

Git hooks

When committing your changes, a couple of commit hooks will run via husky.

• pre-commit hook to lint and format the changes in your stage zone (via lintstaged)
• prepare-commit-msg hook to format your commit message to conform with the required format by KNIME. In order for this to work you must set environment variables with your Atlassian email and API token. Refer to @knime/eslint-config/scripts/README.md for more information.

Launch development server with demo application

npm run dev

Testing

Running unit tests

This project contains unit tests based on Vitest. They are run with

npm run test:unit

You can generate a coverage report with

npm run coverage

The output can be found in the coverage folder. It contains a browseable html report as well as raw coverage data in LCOV and Clover format, which can be consumed in analysis software (Sonar, Jenkins, …).

Running security audit

npm provides a check against known security issues of used dependencies. Run it by calling

npm run audit

Building

To build the table component as Vue library, use the following command:

npm run build

Results are saved to /dist folder.

Join the Community!

• KNIME Forum