@knime/kds-table 6.9.0 → 6.11.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @knime/kds-table
 
+## 6.11.0
+
+### Minor Changes
+
+- 780a0b9: `TableUI`: the `emptyState` prop no longer defaults to a "No data" message - omitting it now shows nothing at all. An empty table is not necessarily worth a message; one is only helpful when the table is empty because of something the user did and can undo, e.g. a filter that excludes every row. Pass an `emptyState` to keep showing a message.
+
+### Patch Changes
+
+- 780a0b9: `TableUI`: place the empty state into the area the rows would have occupied instead of below the body. It is now centered in that area (at most 80px below the header) rather than collapsed against the column headers or pushed to the bottom edge, the horizontal scrollbar stays at the bottom of the table, and it no longer scrolls away horizontally.
+- @knime/kds-components@6.11.0
+  - @knime/kds-styles@6.11.0
+
+## 6.10.0
+
+### Patch Changes
+
+- Updated dependencies [6d050de]
+  - @knime/kds-components@6.10.0
+  - @knime/kds-styles@6.10.0
+
 ## 6.9.0
 
 ### Minor Changes

package/dist/index.css

@@ -54,13 +54,13 @@ tr {
 }
 
 .container {
-&[data-v-45a530bb] {
+&[data-v-188dbeca] {
   flex: 1 1 0;
 }
-&.fit-content[data-v-45a530bb] {
+&.fit-content[data-v-188dbeca] {
     flex: 0 0 auto;
 }
-& .header-container[data-v-45a530bb] {
+& .header-container[data-v-188dbeca] {
     position: sticky;
     top: 0;
     z-index: var(--z-index-sticky-header);
@@ -68,7 +68,7 @@ tr {
     flex: 1;
     flex-direction: column;
 }
-& tbody[data-v-45a530bb] {
+& tbody[data-v-188dbeca] {
     /**
       * Necessary for the absolutely placed elements inside of it (e.g. cell selection overlay)
       * to scroll with the body.
@@ -86,12 +86,41 @@ tr {
     width: fit-content;
 }
 }
+.empty-state-container {
+&[data-v-188dbeca] {
+  position: sticky;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+
+  /*
+    The two spacers share the space around the empty state equally, i.e. they
+    center it - but the upper one is capped, so with plenty of space the message
+    stays close to the header instead of drifting into the middle of the table.
+  */
+
+  /* Rather overflow than squeeze the message when the space gets tight. */
+}
+&[data-v-188dbeca]::before,
+  &[data-v-188dbeca]::after {
+    flex: 1 1 0;
+    content: "";
+}
+&[data-v-188dbeca]::before {
+    max-height: var(--kds-spacing-container-5x);
+}
+&[data-v-188dbeca] > * {
+    flex: 0 0 auto;
+}
+}
 .resize-scroll-spacer {
-&[data-v-45a530bb] {
+&[data-v-188dbeca] {
   /* Only animate when collapsing back after a resize ends; while resizing the width
      tracks the growing column and must update instantly. */
 }
-&.collapsing[data-v-45a530bb] {
+&.collapsing[data-v-188dbeca] {
     transition: width 0.2s ease;
 }
 }
@@ -607,7 +636,7 @@ tr.row {
 }
 }
 
-.wrapper[data-v-1941898e] {
+.wrapper[data-v-83bc03a3] {
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -617,7 +646,7 @@ tr.row {
 }
 }
 table {
-&[data-v-1941898e] {
+&[data-v-83bc03a3] {
   position: relative;
   display: flex;
   flex-grow: 1;
@@ -625,24 +654,17 @@ table {
   width: 100%;
   min-height: 0;
   }
-&[data-v-1941898e]:focus {
+&[data-v-83bc03a3]:focus {
     outline: none;
 }
-& .new-row-footer[data-v-1941898e] {
+& .new-row-footer[data-v-83bc03a3] {
     width: 100%;
 }
 }
-.empty-state-overlay {
-&[data-v-1941898e] {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  }
-& .empty-state[data-v-1941898e] {
-    width: 100%;
-    max-width: 100%;
-}
+
+/* The empty state is placed into the rows' area by TableCoreVirtual. */
+.empty-state[data-v-83bc03a3] {
+  max-width: 100%;
 }
 
 .table-column-size-calculation[data-v-f3ef2f4b] {