@knime/kds-table 0.6.4 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @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
+
+- f1defd4: `TableUI` / `TableUIWithAutoSizeCalculation`: remove built-in filter controls and add an extensible `#action-bar-left` slot and `additionalHeaderMenuItems` prop.
+
+  BREAKING CHANGES:
+
+  - `TableUI` / `TableUIWithAutoSizeCalculation`: removed prop `colFilterValues`; removed emit `columnFilter`; removed methods `openActionBarFilterControl`, `clearColumnFilter`.
+  - `TableActionBar`: removed props `colFilterValues`, `columns`; removed emit `columnFilter`; removed expose `openFilterControl`.
+  - `ActionConfig`: removed `enableFilters` field.
+  - `ColumnConfig`: removed `filterConfig` field; removed `headerSubMenuItems` field (use `additionalHeaderMenuItems` on `TableUI`/`TableUIWithAutoSizeCalculation` instead).
+  - Removed exported types `FilterConfig`, `FilterValue`, `ColFilterValues`.
+
+  New API:
+
+  - `TableUI` / `TableUIWithAutoSizeCalculation`: new `#action-bar-left` slot — rendered in the action bar's left section after sort controls; inject any filter UI here.
+  - `TableUI` / `TableUIWithAutoSizeCalculation`: new `additionalHeaderMenuItems` prop (`KdsMenuItem[][]`, index-aligned with `columns`) — per-column header menu items appended after sort items, kept separate from `columns` for rendering performance.
+  - New exported helpers for building custom filter controls in the `#action-bar-left` slot: `PopoverContainer` component and `useButtonPopoverInteraction` composable.
+
 ## 0.6.4
 
 ### Patch 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

@@ -148,23 +148,6 @@ tr {
 }
 }
 
-.rows[data-v-e5d5e963] {
-  display: grid;
-  grid-template-columns: 2fr 1fr 2fr auto;
-  gap: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-5x);
-}
-.row[data-v-e5d5e963] {
-  display: contents;
-}
-.column[data-v-e5d5e963],
-.mode[data-v-e5d5e963],
-.value[data-v-e5d5e963] {
-  min-width: 0;
-}
-.add[data-v-e5d5e963] {
-  margin-top: var(--kds-spacing-container-0-5x);
-}
-
 .popover {
 &[data-v-349cd3ba] {
   display: flex;
@@ -186,24 +169,24 @@ 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;
 }
 }
 }
 
 .kds-table-action-bar {
-&[data-v-9181ec3b] {
+&[data-v-a70d7b02] {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -212,24 +195,24 @@ tr {
   padding-left: var(--kds-spacing-container-0-5x);
   border-top: var(--kds-border-base-subtle);
 }
-&.temporary-view[data-v-9181ec3b] {
+&.temporary-view[data-v-a70d7b02] {
     background-color: var(--kds-color-background-static-info-muted);
 }
 & .left {
-&[data-v-9181ec3b] {
+&[data-v-a70d7b02] {
     display: flex;
     flex: 1 0 0;
     gap: var(--kds-spacing-container-0-5x);
     align-items: center;
     padding: var(--kds-spacing-container-0-12x) 0;
 }
-& .dimension[data-v-9181ec3b] {
+& .dimension[data-v-a70d7b02] {
       font: var(--kds-font-base-title-small);
       color: var(--kds-color-text-and-icon-muted);
       white-space: pre;
 }
 }
-& .right[data-v-9181ec3b] {
+& .right[data-v-a70d7b02] {
     display: flex;
     gap: var(--kds-spacing-container-0-25x);
     align-items: center;
@@ -239,7 +222,7 @@ tr {
 }
 
 .column-header {
-&[data-v-2a49a01e] {
+&[data-v-31a6758f] {
   /* Need to set position relative here to position the resize handle absolutely within the header cell */
   position: relative;
   display: flex;
@@ -253,10 +236,10 @@ tr {
   text-align: left;
   white-space: nowrap;
 }
-&.header-focused[data-v-2a49a01e] {
+&.header-focused[data-v-31a6758f] {
     background-color: var(--kds-color-focus-background);
 }
-&.colored-header[data-v-2a49a01e] {
+&.colored-header[data-v-31a6758f] {
     /* stylelint-disable no-unknown-custom-properties -- runtime variable set via inline :style */
     background-image: linear-gradient(
       90deg,
@@ -268,48 +251,48 @@ tr {
     background-size: var(--kds-spacing-container-0-25x);
 }
 & .column-header-content {
-&[data-v-2a49a01e] {
+&[data-v-31a6758f] {
     display: flex;
     flex-direction: column;
     justify-content: center;
     width: 100%;
 }
-&[data-v-2a49a01e]:focus {
+&[data-v-31a6758f]:focus {
       outline: none;
 }
-&.with-button-in-header[data-v-2a49a01e] {
+&.with-button-in-header[data-v-31a6758f] {
       width: calc(
         100% - var(--kds-dimension-component-width-1-5x)
       ); /* due to .sub-menu-select-header / .delete-column-button: width */
 }
 & .main-header {
-&[data-v-2a49a01e] {
+&[data-v-31a6758f] {
       display: flex;
 }
-& .header-text-container[data-v-2a49a01e] {
+& .header-text-container[data-v-31a6758f] {
         max-width: 100%;
         overflow: hidden;
         text-overflow: ellipsis;
         font: var(--kds-font-base-title-medium-strong);
 }
 }
-& .sub-header-text-container[data-v-2a49a01e] {
+& .sub-header-text-container[data-v-31a6758f] {
       overflow: hidden;
       text-overflow: ellipsis;
       font: var(--kds-font-base-subtext-small);
 }
 }
-& .menu-button-hidden[data-v-2a49a01e] {
+& .menu-button-hidden[data-v-31a6758f] {
     pointer-events: none;
     opacity: 0;
 }
-& .delete-column-button[data-v-2a49a01e] {
+& .delete-column-button[data-v-31a6758f] {
     display: flex;
     align-items: center;
     width: var(--kds-dimension-component-width-2x);
 }
 & .resize-handle-area {
-&[data-v-2a49a01e] {
+&[data-v-31a6758f] {
     position: absolute;
 
     /* resize handle should range into top border */
@@ -335,21 +318,21 @@ tr {
     cursor: col-resize;
     opacity: 0;
 }
-& .resize-handle[data-v-2a49a01e] {
+& .resize-handle[data-v-31a6758f] {
       border-right: var(--kds-border-resize-handle-hover);
       border-radius: var(--kds-border-radius-container-0-25x);
 }
-&.hover[data-v-2a49a01e] {
+&.hover[data-v-31a6758f] {
       opacity: 1;
 }
-&.drag[data-v-2a49a01e] {
+&.drag[data-v-31a6758f] {
       opacity: 1;
 }
 }
 }
 
 thead {
-&[data-v-a024da6c] {
+&[data-v-a97dc625] {
   /* TODO SLEEK-376 handle background color */
   /* stylelint-disable-next-line no-unknown-custom-properties */
   background-color: var(--knime-white);
@@ -357,7 +340,7 @@ thead {
   border-bottom: var(--kds-border-base-subtle);
 }
 & tr {
-&[data-v-a024da6c] {
+&[data-v-a97dc625] {
     display: flex;
     height: 100%;
     transition:
@@ -365,51 +348,51 @@ thead {
       box-shadow 0.15s;
 }
 & th {
-&[data-v-a024da6c] {
+&[data-v-a97dc625] {
       min-height: var(--kds-dimension-component-height-2-5x);
       max-height: var(--kds-dimension-component-height-5x);
       text-align: left;
       white-space: nowrap;
 }
-&.deletion-cell-spacer[data-v-a024da6c] {
+&.deletion-cell-spacer[data-v-a97dc625] {
         width: var(--kds-dimension-component-width-2x);
 }
 &.select-cell {
-&[data-v-a024da6c] {
+&[data-v-a97dc625] {
         display: flex;
         justify-content: center;
         width: var(--kds-dimension-component-width-2x);
         padding: var(--kds-spacing-container-0-75x);
 }
-& .select-checkbox[data-v-a024da6c] {
+& .select-checkbox[data-v-a97dc625] {
           /* With this added padding the checkbox appears centered initially */
           padding: var(--kds-spacing-container-0-10x);
 }
 }
-&.new-column-head[data-v-a024da6c] {
+&.new-column-head[data-v-a97dc625] {
         display: flex;
         flex-direction: column;
         justify-content: center;
         padding: var(--kds-spacing-container-0-5x);
 }
 }
-&[data-v-a024da6c]:hover {
+&[data-v-a97dc625]:hover {
       outline: none;
 }
 }
-&.sub-menu-active tr[data-v-a024da6c] {
+&.sub-menu-active tr[data-v-a97dc625] {
     padding-right: var(--kds-dimension-component-width-2x);
 }
 }
 .header-selection-overlay {
-&[data-v-a024da6c] {
+&[data-v-a97dc625] {
   position: absolute;
   top: 0;
   height: 100%;
   pointer-events: none;
   border: var(--kds-border-action-selected-accent);
 }
-&.header-focused[data-v-a024da6c] {
+&.header-focused[data-v-a97dc625] {
     border: var(--kds-border-action-focused);
 }
 }
@@ -462,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);
@@ -470,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,
@@ -484,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;
@@ -580,7 +574,7 @@ tr.row {
 }
 }
 
-.wrapper[data-v-5dec2b59] {
+.wrapper[data-v-d531fa0a] {
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -590,7 +584,7 @@ tr.row {
 }
 }
 table {
-&[data-v-5dec2b59] {
+&[data-v-d531fa0a] {
   position: relative;
   display: flex;
   flex-grow: 1;
@@ -598,15 +592,15 @@ table {
   width: 100%;
   min-height: 0;
   }
-&[data-v-5dec2b59]:focus {
+&[data-v-d531fa0a]:focus {
     outline: none;
 }
-& .new-row-footer[data-v-5dec2b59] {
+& .new-row-footer[data-v-d531fa0a] {
     width: 100%;
 }
 }
 
-.table-column-size-calculation[data-v-29efd9ce] {
+.table-column-size-calculation[data-v-11d56c71] {
   position: absolute;
   top: -9999px;
   left: -9999px;