@knime/kds-table 10.2.0 → 11.1.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @knime/kds-table
 
+## 11.1.0
+
+### Patch Changes
+
+- Updated dependencies [1cbcad8]
+  - @knime/kds-styles@11.1.0
+  - @knime/kds-components@11.1.0
+
+## 11.0.0
+
+### Patch Changes
+
+- Updated dependencies [880698d, df12b1a]
+  - @knime/kds-components@11.0.0
+  - @knime/kds-styles@11.0.0
+
 ## 10.2.0
 
 ### Patch Changes

package/README.md

@@ -1,6 +1,6 @@
 # KNIME® Design System – Table Component
 
-This is part of the [KNIME Design System](../README.md).
+This is part of the [KNIME Design System](../../README.md).
 
 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.
 
@@ -8,7 +8,7 @@ It's published as npm package: [@knime/kds-table]
 
 ## Development
 
-This package is part of the [KNIME Design System monorepo](../README.md). For setup instructions, see the **[root README](../README.md)**.
+This package is part of the [KNIME Design System monorepo](../../README.md). For setup instructions, see the **[root README](../../README.md)**.
 
 ### Launch development server
 
@@ -34,17 +34,14 @@ Coverage data is collected at the root level and merged with Storybook coverage
 ### TypeScript setup
 
 The package-level [tsconfig.json](tsconfig.json) is the source of truth for editor support and `pnpm run type-check`.
-The build-specific [tsconfig.build.json](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:
+The build-specific [tsconfig.build.json](tsconfig.build.json) extends it and only overrides declaration output plus build-only excludes. Unlike `@knime/kds-components`, it sets `allowJs`, because some unit tests under `src/**/__tests__` are still JavaScript.
 
-- `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](src/index.ts) as its public entrypoint, aligned with `@knime/kds-components`.
+The package uses [src/index.ts](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).
+The table logs via the global `consola` variable, which the embedding application needs to provide (e.g. `window.consola = consola`).
 
 See https://github.com/nuxt/consola for details.
 
@@ -53,46 +50,91 @@ See https://github.com/nuxt/consola for details.
 To build the table component as [Vue library]:
 
 ```sh
-pnpm run build      # Build only this package
-pnpm run build      # From root: builds all packages including table
+pnpm run build          # From this package: build only the table
+pnpm run build:table    # From the monorepo root: build only the table
+pnpm run build          # From the monorepo root: build all packages
 ```
 
 Results are saved to `dist/`.
 
 ## Versioning & Publishing
 
-Versioning and publishing are managed at the **[root level](../README.md#changesets--publishing)**.
+Versioning and publishing are managed at the **[root level](../../README.md#changesets--publishing)**.
 
-All `@knime/kds-*` packages (including this table) are versioned together via Changesets. For release workflows, see the [root README](../README.md).
+All `@knime/kds-*` packages (including this table) are versioned together via Changesets. For release workflows, see the [root README](../../README.md).
 
 ## Using the table component in a Vue application
 
-Install [@knime/kds-table] npm package as dependency:
+Install the [@knime/kds-table] npm package together with `@knime/kds-styles`. It declares `vue` and `@vueuse/core` as peer dependencies:
 
 ```sh
-pnpm add @knime/kds-table
+pnpm add @knime/kds-table @knime/kds-styles vue @vueuse/core
 ```
 
-```js
-import { Table } from "@knime/kds-table";
+The table uses the KDS CSS variables but does not load them. Import them once in your app (e.g. in `main.ts`):
 
-export default {
-  // ...
-  components: {
-    Table,
-  },
-  // ...
-};
+```ts
+import "@knime/kds-styles/kds-variables.css";
 ```
 
-Use in Template
+`TableUI` must be rendered below a `useColumnSizes` provider, which sets the
+column-width CSS variables on the given element. The table fills its parent
+(`height: 100%`), so give that element a height:
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+
+import {
+  type ColumnConfig,
+  type TableConfig,
+  TableUI,
+  columnTypes,
+  useColumnSizes,
+} from "@knime/kds-table";
+
+const columns: ColumnConfig[] = [
+  { id: "name", key: "name", header: "Name", type: columnTypes.String },
+  { id: "age", key: "age", header: "Age", type: columnTypes.Number },
+];
+
+// An array of row groups; the rows to display go into the first group.
+const data = [
+  [
+    { name: "Ada", age: 36 },
+    { name: "Alan", age: 41 },
+  ],
+];
+
+const tableConfig: TableConfig = { enableColumnResizing: true };
+
+const tableRoot = ref<HTMLElement | null>(null);
+const colSizes = ref([200, 100]);
+useColumnSizes(colSizes, tableRoot);
+</script>
 
-```xml
 <template>
-  <Table />
+  <div ref="tableRoot" style="height: 300px">
+    <!-- `data` and `columns` are required; `tableConfig` toggles table features. -->
+    <TableUI :data="data" :columns="columns" :table-config="tableConfig" />
+  </div>
 </template>
 ```
 
+Unlike the other KDS packages, this package's exports are **not** `Kds`-prefixed —
+it predates that convention. The main entry points are:
+
+| Export                           | Kind       | Description                                                                   |
+| -------------------------------- | ---------- | ----------------------------------------------------------------------------- |
+| `TableUI`                        | component  | The table                                                                     |
+| `TableUIWithAutoSizeCalculation` | component  | `TableUI` wrapper that measures content for auto column sizes and row heights |
+| `TableActionBar`                 | component  | Action bar (search, sort, …) rendered above the table                         |
+| `useColumnSizes`                 | composable | Provides the column sizes to the table (required)                             |
+| `constants`                      | const      | Shared table constants                                                        |
+
+See [`src/index.ts`](src/index.ts) for the complete public API, and the
+**Table** section of the design-system Storybook for live examples.
+
 ### Using with Vitest, Nuxt, or Vite SSR
 
 The published JavaScript imports its CSS as a side effect (e.g.
@@ -124,12 +166,10 @@ export default defineNuxtConfig({ build: { transpile: [/@knime\//] } });
 
 The KNIME-Table expects that the embedding app provides the following:
 
-- Vue and Consola compatible to the versions defined in [`package.json`](package.json)
+- `vue` and `@vueuse/core` matching the peer dependency ranges in [`package.json`](package.json)
+- a global `consola` instance (see [Logging](#logging))
 
 [Vue]: https://vuejs.org/
-[node]: https://knime-com.atlassian.net/wiki/spaces/SPECS/pages/905281540/Node.js+Installation
 [Vue library]: https://vitejs.dev/guide/build.html#library-mode
 [Vitest]: https://vitest.dev/
-[lcov]: https://github.com/linux-test-project/lcov
-[clover]: http://openclover.org/
 [@knime/kds-table]: https://www.npmjs.com/package/@knime/kds-table

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@knime/kds-table",
   "type": "module",
-  "version": "10.2.0",
+  "version": "11.1.0",
   "description": "Package containing the table component of the KNIME Design System",
   "license": "See LICENSE file",
   "author": "KNIME AG, Zurich, Switzerland",
@@ -10,8 +10,8 @@
     "vue": "~3.5.0"
   },
   "dependencies": {
-    "@knime/kds-components": "^10.2.0",
-    "@knime/kds-styles": "^10.2.0",
+    "@knime/kds-components": "^11.1.0",
+    "@knime/kds-styles": "^11.1.0",
     "@knime/utils": "^2.0.3",
     "@knime/vue-headless-virtual-scroller": "0.2.0",
     "fast-deep-equal": "3.1.3",