@knime/kds-table 6.3.1 → 6.4.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @knime/kds-table
 
+## 6.4.0
+
+### Minor Changes
+
+- 641d886: - `TableUI`:
+  - added an empty state — set `empty-state` prop to show a `KdsEmptyState` in the body area (the column headers stay visible), shown when no data are given.
+  - added `actionConfig.hideSortingButton` to hide the action bar's sorting button without affecting sorting from the column headers.
+  - changed the reset button's label from "Reset to Nodeoutput" to "Reset table".
+  - use the `--kds-color-page-default` token for the header background instead of a hard-coded white.
+
+### Patch Changes
+
+- Updated dependencies [21c714b]
+  - @knime/kds-components@6.4.0
+  - @knime/kds-styles@6.4.0
+
 ## 6.3.1
 
 ### Patch Changes

package/dist/index.css

@@ -186,38 +186,40 @@ tr {
 }
 
 .kds-table-action-bar {
-&[data-v-6538127c] {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+&[data-v-aba83d11] {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
   min-height: var(--kds-dimension-component-height-2-5x);
   padding-right: var(--kds-spacing-container-0-25x);
   padding-left: var(--kds-spacing-container-0-5x);
   border-bottom: var(--kds-border-base-subtle);
 }
-&.temporary-view[data-v-6538127c] {
+&.temporary-view[data-v-aba83d11] {
     background-color: var(--kds-color-background-static-info-muted);
 }
-& .left {
-&[data-v-6538127c] {
+& .dimension[data-v-aba83d11] {
+    font: var(--kds-font-base-title-small);
+    color: var(--kds-color-text-and-icon-muted);
+    white-space: pre;
+}
+& .left[data-v-aba83d11],
+  & .center[data-v-aba83d11],
+  & .right[data-v-aba83d11] {
     display: flex;
-    flex: 1 0 0;
-    gap: var(--kds-spacing-container-0-5x);
+    flex: 1;
     align-items: center;
+    min-width: 0;
     padding: var(--kds-spacing-container-0-12x) 0;
 }
-& .dimension[data-v-6538127c] {
-      font: var(--kds-font-base-title-small);
-      color: var(--kds-color-text-and-icon-muted);
-      white-space: pre;
+& .left[data-v-aba83d11] {
+    gap: var(--kds-spacing-container-0-5x);
 }
+& .center[data-v-aba83d11] {
+    justify-content: center;
 }
-& .right[data-v-6538127c] {
-    display: flex;
+& .right[data-v-aba83d11] {
     gap: var(--kds-spacing-container-0-25x);
-    align-items: center;
     justify-content: flex-end;
-    padding: var(--kds-spacing-container-0-12x) 0;
 }
 }
 
@@ -332,14 +334,12 @@ tr {
 }
 
 thead {
-&[data-v-5ec89e0d] {
-  /* TODO SLEEK-376 handle background color */
-  /* stylelint-disable-next-line no-unknown-custom-properties */
-  background-color: var(--knime-white);
+&[data-v-fc0a0ecb] {
+  background-color: var(--kds-color-page-default);
   border-bottom: var(--kds-border-base-subtle);
 }
 & tr {
-&[data-v-5ec89e0d] {
+&[data-v-fc0a0ecb] {
     display: flex;
     height: 100%;
     transition:
@@ -347,51 +347,51 @@ thead {
       box-shadow 0.15s;
 }
 & th {
-&[data-v-5ec89e0d] {
+&[data-v-fc0a0ecb] {
       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-5ec89e0d] {
+&.deletion-cell-spacer[data-v-fc0a0ecb] {
         width: var(--kds-dimension-component-width-2x);
 }
 &.select-cell {
-&[data-v-5ec89e0d] {
+&[data-v-fc0a0ecb] {
         display: flex;
         justify-content: center;
         width: var(--kds-dimension-component-width-2x);
         padding: var(--kds-spacing-container-0-75x);
 }
-& .select-checkbox[data-v-5ec89e0d] {
+& .select-checkbox[data-v-fc0a0ecb] {
           /* With this added padding the checkbox appears centered initially */
           padding: var(--kds-spacing-container-0-10x);
 }
 }
-&.new-column-head[data-v-5ec89e0d] {
+&.new-column-head[data-v-fc0a0ecb] {
         display: flex;
         flex-direction: column;
         justify-content: center;
         padding: var(--kds-spacing-container-0-5x);
 }
 }
-&[data-v-5ec89e0d]:hover {
+&[data-v-fc0a0ecb]:hover {
       outline: none;
 }
 }
-&.sub-menu-active tr[data-v-5ec89e0d] {
+&.sub-menu-active tr[data-v-fc0a0ecb] {
     padding-right: var(--kds-dimension-component-width-2x);
 }
 }
 .header-selection-overlay {
-&[data-v-5ec89e0d] {
+&[data-v-fc0a0ecb] {
   position: absolute;
   top: 0;
   height: 100%;
   pointer-events: none;
   border: var(--kds-border-action-selected-accent);
 }
-&.header-focused[data-v-5ec89e0d] {
+&.header-focused[data-v-fc0a0ecb] {
     border: var(--kds-border-action-focused);
 }
 }
@@ -573,7 +573,7 @@ tr.row {
 }
 }
 
-.wrapper[data-v-d531fa0a] {
+.wrapper[data-v-e1645875] {
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -583,7 +583,7 @@ tr.row {
 }
 }
 table {
-&[data-v-d531fa0a] {
+&[data-v-e1645875] {
   position: relative;
   display: flex;
   flex-grow: 1;
@@ -591,11 +591,23 @@ table {
   width: 100%;
   min-height: 0;
   }
-&[data-v-d531fa0a]:focus {
+&[data-v-e1645875]:focus {
     outline: none;
 }
-& .new-row-footer[data-v-d531fa0a] {
+& .new-row-footer[data-v-e1645875] {
+    width: 100%;
+}
+}
+.empty-state-overlay {
+&[data-v-e1645875] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  }
+& .empty-state[data-v-e1645875] {
     width: 100%;
+    max-width: 100%;
 }
 }