@knime/kds-table 0.7.0 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @knime/kds-table
 
+## 0.8.0
+
+### Minor Changes
+
+- f171bc8: `TableUI`: added optional `overlayDataValueViewButton` flag to `ColumnConfig` that overlays the data value view button on top of the cell content instead of reserving space next to it, so slotted content (e.g. images) does not shrink when the button appears on hover.
+
+### Patch Changes
+
+- Updated dependencies [1f991d6]
+- Updated dependencies [3e20664]
+  - @knime/kds-components@2.6.1
+  - @knime/kds-styles@2.6.1
+
 ## 0.7.0
 
 ### Minor Changes

package/README.md

@@ -1,6 +1,6 @@
 # KNIME® Design System – Table Component
 
-This is part of the [KNIME Design System](../README.md) maintained by the [UI Core Team](mailto:team-ui-core@knime.com).
+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.
 
@@ -105,6 +105,33 @@ Use in Template
 </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:
+
+```ts
+// Vitest — vitest.config.ts
+export default defineConfig({
+  test: { server: { deps: { inline: [/@knime\//] } } },
+});
+```
+
+```ts
+// Vite SSR — vite.config.ts
+export default defineConfig({ ssr: { noExternal: [/@knime\//] } });
+```
+
+```ts
+// Nuxt — nuxt.config.ts
+export default defineNuxtConfig({ build: { transpile: [/@knime\//] } });
+```
+
 ### Requirements
 
 The KNIME-Table expects that the embedding app provides the following:

package/dist/index.css

@@ -169,17 +169,17 @@ tr {
 }
 }
 
-.sort-popover[data-v-0885d523] {
+.sort-popover[data-v-97a272c8] {
   position-try-order: most-inline-size;
 }
 .popover-container {
 .body {
-&[data-v-0885d523] {
+&[data-v-97a272c8] {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: var(--kds-spacing-container-0-5x);
     }
-&[data-v-0885d523] > * {
+&[data-v-97a272c8] > * {
       min-width: 0;
 }
 }
@@ -445,7 +445,7 @@ thead {
 }
 
 .data-cell {
-&[data-v-e7fb7b49] {
+&[data-v-a7720ed9] {
   display: flex;
   font: var(--kds-font-base-interactive-small);
   color: var(--kds-color-text-and-icon-neutral);
@@ -453,10 +453,10 @@ thead {
   user-select: none;
   background-clip: border-box;
 }
-&.in-cell-selection[data-v-e7fb7b49] {
+&.in-cell-selection[data-v-a7720ed9] {
     background-color: var(--kds-color-focus-background);
 }
-&.colored-cell[data-v-e7fb7b49] {
+&.colored-cell[data-v-a7720ed9] {
     /* stylelint-disable no-unknown-custom-properties -- runtime variable set via inline :style */
     background-image: linear-gradient(
       90deg,
@@ -467,14 +467,25 @@ thead {
     background-repeat: no-repeat;
     background-size: var(--kds-spacing-container-0-25x);
 }
-& .cell-content[data-v-e7fb7b49] {
+& .cell-content {
+&[data-v-a7720ed9] {
+    position: relative;
     display: flex;
     gap: var(--kds-spacing-container-0-25x);
     align-self: flex-start;
     justify-content: space-between;
     width: 100%;
+
+    /* Anchored at the same height as the buttons of padded (non-slotted)
+       cells, so it lines up with the other columns' buttons in the row. */
+}
+& > .overlaid[data-v-a7720ed9] {
+      position: absolute;
+      top: var(--ceb68c32);
+      right: 0;
+}
 }
-& .cell-content .cell-text[data-v-e7fb7b49] {
+& .cell-content .cell-text[data-v-a7720ed9] {
     flex: 0 1 auto;
     min-width: 0;
     overflow: hidden;