@knime/kds-table 0.2.2 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @knime/kds-table
 
+## 0.3.0
+
+### Minor Changes
+
+- 4c26c8e: Rework table properties
+
+### Patch Changes
+
+- d5af91b: Preserve leading, trailing, and duplicate whitespace in table cell renderer
+
 ## 0.2.2
 
 ### Patch Changes

package/dist/index.css

@@ -4554,26 +4554,26 @@ td {
 }
 
 tr {
-&[data-v-b1ac99a6] {
+&[data-v-640baae1] {
   display: flex;
   border-bottom: var(--kds-border-base-subtle);
 }
 & td {
-&.deletion-cell-spacer[data-v-b1ac99a6] {
+&.deletion-cell-spacer[data-v-640baae1] {
       width: var(--kds-dimension-component-width-2x);
       min-width: var(--kds-dimension-component-width-2x);
 }
-& .skeleton[data-v-b1ac99a6] {
+& .skeleton[data-v-640baae1] {
       padding: var(--kds-spacing-container-0-12x) 0;
 }
 &.select-cell {
-&[data-v-b1ac99a6] {
+&[data-v-640baae1] {
       display: flex;
       justify-content: center;
       width: var(--kds-dimension-component-width-2x);
       min-width: var(--kds-dimension-component-width-2x);
 }
-& .select-checkbox[data-v-b1ac99a6] {
+& .select-checkbox[data-v-640baae1] {
         /* With this added padding the checkbox appears centered initially */
         padding: var(--kds-spacing-container-0-10x);
 }
@@ -4598,13 +4598,13 @@ tr {
 }
 
 .container {
-&[data-v-fb9f9377] {
+&[data-v-a66c9aef] {
   flex: 1 1 0;
 }
-&.fit-content[data-v-fb9f9377] {
+&.fit-content[data-v-a66c9aef] {
     flex: 0 0 auto;
 }
-& .header-container[data-v-fb9f9377] {
+& .header-container[data-v-a66c9aef] {
     position: sticky;
     top: 0;
     z-index: var(--z-index-sticky-header);
@@ -4612,7 +4612,7 @@ tr {
     flex: 1;
     flex-direction: column;
 }
-& tbody[data-v-fb9f9377] {
+& tbody[data-v-a66c9aef] {
     /**
       * Necessary for the absolutely placed elements inside of it (e.g. cell selection overlay)
       * to scroll with the body.
@@ -4631,11 +4631,11 @@ tr {
 }
 }
 .resize-scroll-spacer {
-&[data-v-fb9f9377] {
+&[data-v-a66c9aef] {
   /* Only animate when collapsing back after a resize ends; while resizing the width
      tracks the growing column and must update instantly. */
 }
-&.collapsing[data-v-fb9f9377] {
+&.collapsing[data-v-a66c9aef] {
     transition: width 0.2s ease;
 }
 }
@@ -4674,37 +4674,37 @@ tr {
 }
 
 .page-controls {
-&[data-v-df9e464a] {
+&[data-v-10c111ef] {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-75x);
 }
-& .page-row-range[data-v-df9e464a],
-  & .page-size-menu[data-v-df9e464a] {
+& .page-row-range[data-v-10c111ef],
+  & .page-size-menu[data-v-10c111ef] {
     flex-grow: 1;
     flex-basis: 0;
 }
-.page-size-menu[data-v-df9e464a] {
+.page-size-menu[data-v-10c111ef] {
     display: flex;
     justify-content: flex-end;
 }
 }
 
-.rows[data-v-9653892f] {
+.rows[data-v-bd4cc5ec] {
   display: grid;
   grid-template-columns: auto auto auto auto;
   gap: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-5x);
 }
-.row[data-v-9653892f] {
+.row[data-v-bd4cc5ec] {
   display: contents;
 }
-.column[data-v-9653892f],
-.mode[data-v-9653892f],
-.value[data-v-9653892f] {
+.column[data-v-bd4cc5ec],
+.mode[data-v-bd4cc5ec],
+.value[data-v-bd4cc5ec] {
   min-width: 0;
 }
-.add[data-v-9653892f] {
+.add[data-v-bd4cc5ec] {
   margin-top: var(--kds-spacing-container-0-5x);
 }
 
@@ -4729,28 +4729,28 @@ tr {
 }
 }
 
-.filter-popover[data-v-178504c8] {
+.filter-popover[data-v-3cd94230] {
   position-try-order: most-inline-size;
 }
 
-.sort-popover[data-v-80bf221a] {
+.sort-popover[data-v-ad5ee20c] {
   position-try-order: most-inline-size;
 }
 .popover-container {
 .body {
-&[data-v-80bf221a] {
+&[data-v-ad5ee20c] {
     display: grid;
     grid-template-columns: auto auto;
     gap: var(--kds-spacing-container-0-5x);
     }
-&[data-v-80bf221a] > * {
+&[data-v-ad5ee20c] > * {
       min-width: 0;
 }
 }
 }
 
 .kds-table-action-bar {
-&[data-v-8cfb3c41] {
+&[data-v-4a59722f] {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -4759,28 +4759,28 @@ tr {
   padding-left: var(--kds-spacing-container-0-5x);
   border-top: var(--kds-border-base-subtle);
 }
-&.temporary-view[data-v-8cfb3c41] {
+&.temporary-view[data-v-4a59722f] {
     background-color: var(--kds-color-background-static-info-muted);
 }
 & .left {
-&[data-v-8cfb3c41] {
+&[data-v-4a59722f] {
     display: flex;
     flex: 1 0 0;
     gap: var(--kds-spacing-container-0-5x);
     align-items: center;
     padding: var(--kds-spacing-container-0-12x) 0;
 }
-& .title[data-v-8cfb3c41] {
+& .title[data-v-4a59722f] {
       font: var(--kds-font-base-title-medium-strong);
       color: var(--kds-color-text-and-icon-neutral);
 }
-& .dimension[data-v-8cfb3c41] {
+& .dimension[data-v-4a59722f] {
       font: var(--kds-font-base-title-small);
       color: var(--kds-color-text-and-icon-muted);
       white-space: pre;
 }
 }
-& .right[data-v-8cfb3c41] {
+& .right[data-v-4a59722f] {
     display: flex;
     gap: var(--kds-spacing-container-0-25x);
     align-items: center;
@@ -4789,14 +4789,119 @@ tr {
 }
 }
 
+.column-header {
+&[data-v-cc11c6b2] {
+  /* Need to set position relative here to position the resize handle absolutely within the header cell */
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: var(--kds-dimension-component-height-2-5x);
+  max-height: var(--kds-dimension-component-height-5x);
+  padding-right: var(--kds-spacing-container-0-37x);
+  padding-left: var(--kds-spacing-container-0-5x);
+  color: var(--kds-color-text-and-icon-neutral);
+  text-align: left;
+  white-space: nowrap;
+}
+&.header-focused[data-v-cc11c6b2] {
+    background-color: var(--kds-color-focus-background);
+}
+&.colored-header[data-v-cc11c6b2] {
+    /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties -- runtime variable set via inline :style */
+    background-image: linear-gradient(
+      90deg,
+      var(--data-cell-color),
+      var(--data-cell-color)
+    );
+    background-repeat: no-repeat;
+    background-size: var(--kds-spacing-container-0-25x);
+}
+& .column-header-content {
+&[data-v-cc11c6b2] {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+}
+&[data-v-cc11c6b2]:focus {
+      outline: none;
+}
+&.with-button-in-header[data-v-cc11c6b2] {
+      width: calc(
+        100% - var(--kds-dimension-component-width-1-5x)
+      ); /* due to .sub-menu-select-header / .delete-column-button: width */
+}
+& .main-header {
+&[data-v-cc11c6b2] {
+      display: flex;
+}
+& .header-text-container[data-v-cc11c6b2] {
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font: var(--kds-font-base-title-medium-strong);
+}
+}
+& .sub-header-text-container[data-v-cc11c6b2] {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font: var(--kds-font-base-subtext-small);
+}
+}
+& .delete-column-button[data-v-cc11c6b2] {
+    display: flex;
+    align-items: center;
+    width: var(--kds-dimension-component-width-2x);
+}
+& .resize-handle-area {
+&[data-v-cc11c6b2] {
+    position: absolute;
+
+    /* resize handle should range into top border */
+    top: calc(-1 * var(--kds-core-border-width-xs));
+
+    /* resize handle should be at the very right of the header cell, but not range into the next cell, which is
+      why we need to remove half of the .resize-handles' border */
+    right: calc(
+      -1 *
+        (
+          var(--kds-spacing-container-0-25x) - var(--kds-core-border-width-l) /
+            2
+        )
+    );
+
+    /* otherwise the handle will be behind rows when virtual scrolling */
+    z-index: var(--z-index-column-resize-drag-handle);
+    display: flex;
+    justify-content: center;
+    width: 0;
+    height: 100%;
+    padding-inline: var(--kds-spacing-container-0-25x);
+    cursor: col-resize;
+    opacity: 0;
+}
+& .resize-handle[data-v-cc11c6b2] {
+      border-right: var(--kds-border-resize-handle-hover);
+      border-radius: var(--kds-border-radius-container-0-25x);
+}
+&.hover[data-v-cc11c6b2] {
+      opacity: 1;
+}
+&.drag[data-v-cc11c6b2] {
+      opacity: 1;
+}
+}
+}
+
 thead {
-&[data-v-3b63e327] {
+&[data-v-e7068bdf] {
   background-color: var(--kds-color-surface-default);
   border-top: var(--kds-border-base-subtle);
   border-bottom: var(--kds-border-base-subtle);
 }
 & tr {
-&[data-v-3b63e327] {
+&[data-v-e7068bdf] {
     display: flex;
     height: 100%;
     transition:
@@ -4804,151 +4909,51 @@ thead {
       box-shadow 0.15s;
 }
 & th {
-&[data-v-3b63e327] {
+&[data-v-e7068bdf] {
       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-3b63e327] {
+&.deletion-cell-spacer[data-v-e7068bdf] {
         width: var(--kds-dimension-component-width-2x);
 }
-&.header-focused[data-v-3b63e327] {
-        background-color: var(--kds-color-focus-background);
-}
 &.select-cell {
-&[data-v-3b63e327] {
+&[data-v-e7068bdf] {
         display: flex;
         justify-content: center;
         width: var(--kds-dimension-component-width-2x);
         padding: var(--kds-spacing-container-0-75x);
 }
-& .select-checkbox[data-v-3b63e327] {
+& .select-checkbox[data-v-e7068bdf] {
           /* With this added padding the checkbox appears centered initially */
           padding: var(--kds-spacing-container-0-10x);
 }
 }
-&.colored-header[data-v-3b63e327] {
-        /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties -- runtime variable set via inline :style */
-        background-image: linear-gradient(
-          90deg,
-          var(--data-cell-color),
-          var(--data-cell-color)
-        );
-        background-repeat: no-repeat;
-        background-size: var(--kds-spacing-container-0-25x);
-}
-&.column-header {
-&[data-v-3b63e327] {
-        /* Need to set position relative here to position the resize handle absolutely within the header cell */
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding-right: var(--kds-spacing-container-0-37x);
-        padding-left: var(--kds-spacing-container-0-5x);
-        color: var(--kds-color-text-and-icon-neutral);
-}
-& .column-header-content {
-&[data-v-3b63e327] {
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          width: 100%;
-}
-&[data-v-3b63e327]:focus {
-            outline: none;
-}
-&.with-button-in-header[data-v-3b63e327] {
-            width: calc(
-              100% - var(--kds-dimension-component-width-1-5x)
-            ); /* due to .sub-menu-select-header / .delete-column-button: width */
-}
-& .main-header {
-&[data-v-3b63e327] {
-            display: flex;
-}
-& .header-text-container[data-v-3b63e327] {
-              max-width: 100%;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              font: var(--kds-font-base-title-medium-strong);
-}
-}
-& .sub-header-text-container[data-v-3b63e327] {
-            overflow: hidden;
-            text-overflow: ellipsis;
-            font: var(--kds-font-base-subtext-small);
-}
-}
-& .delete-column-button[data-v-3b63e327] {
-          display: flex;
-          align-items: center;
-          width: var(--kds-dimension-component-width-2x);
-}
-& .resize-handle-area {
-&[data-v-3b63e327] {
-          position: absolute;
-
-          /* resize handle should range into top border */
-          top: calc(-1 * var(--kds-core-border-width-xs));
-
-          /* resize handle should be at the very right of the header cell, but not range into the next cell, which is 
-          why we need to remove half of the .resize-handles' border */
-          right: calc(
-            -1 *
-              (
-                var(--kds-spacing-container-0-25x) -
-                  var(--kds-core-border-width-l) / 2
-              )
-          );
-
-          /* otherwise the handle will be behind rows when virtual scrolling */
-          z-index: var(--z-index-column-resize-drag-handle);
-          display: flex;
-          justify-content: center;
-          width: 0;
-          height: 100%;
-          padding-inline: var(--kds-spacing-container-0-25x);
-          cursor: col-resize;
-          opacity: 0;
-}
-& .resize-handle[data-v-3b63e327] {
-            border-right: var(--kds-border-resize-handle-hover);
-            border-radius: var(--kds-border-radius-container-0-25x);
-}
-&.hover[data-v-3b63e327] {
-            opacity: 1;
-}
-&.drag[data-v-3b63e327] {
-            opacity: 1;
-}
-}
-}
-&.new-column-head[data-v-3b63e327] {
+&.new-column-head[data-v-e7068bdf] {
         display: flex;
         flex-direction: column;
         justify-content: center;
         padding: var(--kds-spacing-container-0-5x);
 }
 }
-&[data-v-3b63e327]:hover {
+&[data-v-e7068bdf]:hover {
       outline: none;
 }
 }
-&.sub-menu-active tr[data-v-3b63e327] {
+&.sub-menu-active tr[data-v-e7068bdf] {
     padding-right: var(--kds-dimension-component-width-2x);
 }
 }
 .header-selection-overlay {
-&[data-v-3b63e327] {
+&[data-v-e7068bdf] {
   position: absolute;
   top: 0;
   height: 100%;
   pointer-events: none;
   border: var(--kds-border-action-selected-accent);
 }
-&.header-focused[data-v-3b63e327] {
+&.header-focused[data-v-e7068bdf] {
     border: var(--kds-border-action-focused);
 }
 }
@@ -5001,7 +5006,7 @@ thead {
 }
 
 .data-cell {
-&[data-v-698a5d81] {
+&[data-v-2bf6d6ac] {
   display: flex;
   font: var(--kds-font-base-interactive-small);
   color: var(--kds-color-text-and-icon-neutral);
@@ -5009,10 +5014,10 @@ thead {
   user-select: none;
   background-clip: border-box;
 }
-&.in-cell-selection[data-v-698a5d81] {
+&.in-cell-selection[data-v-2bf6d6ac] {
     background-color: var(--kds-color-focus-background);
 }
-&.colored-cell[data-v-698a5d81] {
+&.colored-cell[data-v-2bf6d6ac] {
     /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties -- runtime variable set via inline :style */
     background-image: linear-gradient(
       90deg,
@@ -5022,51 +5027,52 @@ thead {
     background-repeat: no-repeat;
     background-size: var(--kds-spacing-container-0-25x);
 }
-&.inline-block span[data-v-698a5d81] {
+&.inline-block span[data-v-2bf6d6ac] {
     display: inline-block;
 }
-& .cell-content[data-v-698a5d81] {
+& .cell-content[data-v-2bf6d6ac] {
     display: flex;
     gap: var(--kds-spacing-container-0-25x);
     align-self: flex-start;
     justify-content: space-between;
     width: 100%;
 }
-& .cell-content .cell-text[data-v-698a5d81] {
+& .cell-content .cell-text[data-v-2bf6d6ac] {
     flex: 0 1 auto;
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
+    white-space: pre;
 }
 }
 
-tr[data-v-0ad921a2] {
+tr[data-v-5dbf98c3] {
   display: flex;
 }
 tr.row {
-&[data-v-0ad921a2] {
+&[data-v-5dbf98c3] {
   border-bottom: var(--kds-border-base-subtle);
   }
 & td {
-&[data-v-0ad921a2] {
+&[data-v-5dbf98c3] {
     padding: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     }
 &.select-cell {
-&[data-v-0ad921a2] {
+&[data-v-5dbf98c3] {
       display: flex;
       justify-content: center;
       width: var(--kds-dimension-component-width-2x);
       min-width: var(--kds-dimension-component-width-2x);
       }
-& .select-checkbox[data-v-0ad921a2] {
+& .select-checkbox[data-v-5dbf98c3] {
         /* With this added padding the checkbox appears centered initially */
         padding: var(--kds-spacing-container-0-10x);
 }
 }
 &.deletion-cell {
-&[data-v-0ad921a2] {
+&[data-v-5dbf98c3] {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -5074,11 +5080,11 @@ tr.row {
       min-width: var(--kds-dimension-component-width-2x);
       opacity: 0;
       }
-&[data-v-0ad921a2]:focus-within {
+&[data-v-5dbf98c3]:focus-within {
         opacity: 1;
 }
 }
-&.action[data-v-0ad921a2] {
+&.action[data-v-5dbf98c3] {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -5087,19 +5093,19 @@ tr.row {
 }
 }
 &:hover {
-&[data-v-0ad921a2] {
+&[data-v-5dbf98c3] {
     outline: none;
     background-color: var(--kds-color-background-neutral-hover);
     }
-& .deletion-cell[data-v-0ad921a2] {
+& .deletion-cell[data-v-5dbf98c3] {
       opacity: 1;
 }
 }
-& a[data-v-0ad921a2] {
+& a[data-v-5dbf98c3] {
     outline: none;
 }
 }
-.row-drag-handle[data-v-0ad921a2] {
+.row-drag-handle[data-v-5dbf98c3] {
   position: relative;
   bottom: var(--kds-spacing-container-0-37x);
   height: var(--kds-spacing-container-0-37x);
@@ -5109,18 +5115,18 @@ tr.row {
 }
 
 .overlay {
-&[data-v-f7862e17] {
+&[data-v-4eeb1626] {
   position: absolute;
   z-index: var(--z-index-cell-selection-overlay);
   pointer-events: none;
   border: var(--kds-border-action-selected-accent);
 }
-&.virtual-focus[data-v-f7862e17] {
+&.virtual-focus[data-v-4eeb1626] {
     border: var(--kds-border-action-focused);
 }
 }
 
-.wrapper[data-v-829ae68c] {
+.wrapper[data-v-bac906a7] {
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -5130,7 +5136,7 @@ tr.row {
 }
 }
 table {
-&[data-v-829ae68c] {
+&[data-v-bac906a7] {
   position: relative;
   display: flex;
   flex-grow: 1;
@@ -5138,15 +5144,15 @@ table {
   width: 100%;
   min-height: 0;
   }
-&[data-v-829ae68c]:focus {
+&[data-v-bac906a7]:focus {
     outline: none;
 }
-& .new-row-footer[data-v-829ae68c] {
+& .new-row-footer[data-v-bac906a7] {
     width: 100%;
 }
 }
 
-.table-column-size-calculation[data-v-ea7bec0f] {
+.table-column-size-calculation[data-v-38696592] {
   position: absolute;
   top: -9999px;
   left: -9999px;