KNIME® UI Table

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

This repository contains the table component used by e.g. the TableView of KNIME Analytics Platform and KNIME Hub. It is based on the Vue JavaScript framework.

It's published as npm package: @knime/knime-ui-table

Development

Prerequisites

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

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

Install dependencies

npm install

Launch development server

npm run dev

or, using storybook:

npm run storybook

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.

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 used in analysis software (SonarQube, Jenkins, …).

Running security audit

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

npm run audit

Logging

You can log using the global consola variable (which the embedding application needs to provide).

See https://github.com/nuxt/consola for details.

Building

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

npm run build

Results are saved to /dist.

Publishing

Once a pull request was created and the BitBucket pipeline built successfully, make sure to hit the "Deploy" button responsible for "publish patch version to npm". This will automatically create an extra version bump commit which must be included when finally merging the pull request to master.

Using the KNIME-Table in a Vue application

Install @knime/knime-ui-table npm package as dependency:

npm i @knime/knime-ui-table

import { Table } from "@knime/knime-ui-table";

export default {
  // ...
  components: {
    Table,
  },
  // ...
};

Use in Template

<template>
  <Table />
</template>

Requirements

The KNIME-Table expects that the embedding app provides the following:

• Vue and Consola compatible to the versions defined in package.json