KNIME® Design System – Table Component

This is part of the KNIME Design System.

This package 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 and built on the KNIME Design System tokens.

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

Development

This package is part of the KNIME Design System monorepo. For setup instructions, see the root README.

Launch development server

From the root of the monorepo:

pnpm dev       # Starts Storybook with all design system components

Git hooks

Git hooks are configured at the monorepo root. See root README for details.

Testing

Running unit tests

Unit tests are based on Vitest. Run from the monorepo root:

pnpm run test:unit      # Run all unit tests (packages/*)
pnpm run coverage       # Generate coverage reports

Coverage data is collected at the root level and merged with Storybook coverage for SonarQube reporting.

TypeScript setup

The package-level tsconfig.json is the source of truth for editor support and pnpm run type-check. The build-specific tsconfig.build.json extends it and only overrides declaration output plus build-only excludes. The remaining differences to @knime/kds-components are intentional for now:

• allowJs, because the package still ships typed JavaScript utility modules.
• The @knime/components path stub, to stop vue-tsc from following that package's source export.

The package now uses src/index.ts as its public entrypoint, aligned with @knime/kds-components. Type declarations are emitted as a source-like tree under dist/src, and the published types entry points to dist/src/index.d.ts.

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:

pnpm run build      # Build only this package
pnpm run build      # From root: builds all packages including table

Results are saved to dist/.

Versioning & Publishing

Versioning and publishing are managed at the root level.

All @knime/kds-* packages (including this table) are versioned together via Changesets. For release workflows, see the root README.

Using the table component in a Vue application

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

pnpm add @knime/kds-table

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

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

Use in Template

<template>
  <Table />
</template>

Using with Vitest, Nuxt, or Vite SSR

The published JavaScript imports its CSS as a side effect (e.g. import "./index.css"), which bundlers handle automatically. When the package is instead evaluated by Node's native ESM loader — as Vitest and Vite/Nuxt SSR do by default, since they externalize node_modules — Node has no .css loader and throws Unknown file extension ".css". Configure the consuming project once so @knime/* packages are processed instead of externalized:

// Vitest — vitest.config.ts
export default defineConfig({
  test: { server: { deps: { inline: [/@knime\//] } } },
});

// Vite SSR — vite.config.ts
export default defineConfig({ ssr: { noExternal: [/@knime\//] } });

// Nuxt — nuxt.config.ts
export default defineNuxtConfig({ build: { transpile: [/@knime\//] } });

Requirements

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

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