@knime/kds-table 6.12.2 → 7.1.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @knime/kds-table
 
+## 7.1.0
+
+### Minor Changes
+
+- 2c25f9d: `TableUI`: added optional `rowCountItems` to `ActionConfig` — when given, the row count in the action bar becomes a dropdown offering these menu items (e.g. to choose how many rows to fetch), each carrying its own handler like `settingsItems`.
+- 2c25f9d: `TableUI`: the action bar no longer replaces the table size with a "No data" placeholder when a table has neither rows nor columns; it shows the plain counts ("Rows: 0") instead.
+- 2c25f9d: `TableUI`: `tableState.tableSizes.totalNumRows` may now be `null` for a table whose row count is unknown (e.g. a database table). The action bar then shows "Rows: -" instead of "Rows: 0", and never renders an "m of n" range against an unknown total.
+
+### Patch Changes
+
+- Updated dependencies
+  - @knime/kds-components@7.1.0
+  - @knime/kds-styles@7.1.0
+
+## 7.0.0
+
+### Patch Changes
+
+- Updated dependencies [f9928f3, 3ddf326, 2270bce, 6c94688, c2d1454, 16a64c0]
+  - @knime/kds-styles@7.0.0
+  - @knime/kds-components@7.0.0
+
 ## 6.12.2
 
 ### Patch Changes

package/dist/index.css

@@ -215,7 +215,7 @@ tr {
 }
 
 .kds-table-action-bar {
-&[data-v-b0b2c849] {
+&[data-v-6aefb7ab] {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   min-height: var(--kds-dimension-component-height-2-5x);
@@ -223,42 +223,61 @@ tr {
   padding-left: var(--kds-spacing-container-0-5x);
   border-bottom: var(--kds-border-base-subtle);
 }
-&.temporary-view[data-v-b0b2c849] {
+&.temporary-view[data-v-6aefb7ab] {
     background-color: var(--kds-color-background-static-info-muted);
 }
-& .dimension[data-v-b0b2c849] {
-    font: var(--kds-font-base-title-small);
-    color: var(--kds-color-text-and-icon-muted);
+& .dimension {
+&[data-v-6aefb7ab] {
+    --dimension-font: var(--kds-font-base-title-small);
+    --dimension-color: var(--kds-color-text-and-icon-muted);
+
+    font: var(--dimension-font);
+    color: var(--dimension-color);
     white-space: pre;
+
+    /*
+     * Match the row-count dropdown trigger's label to the dimension text.
+     * :deep() is needed since KdsMenuButton is a multi-root component, so the
+     * scope id is not inherited by the button element the class lands on.
+     */
+}
+&.with-row-count-dropdown[data-v-6aefb7ab] {
+      display: inline-flex;
+      align-items: center;
+}
+&[data-v-6aefb7ab] .row-count-menu-button {
+      font: var(--dimension-font);
+      color: var(--dimension-color);
+}
 }
 & .preview {
-&[data-v-b0b2c849] {
+&[data-v-6aefb7ab] {
     display: flex;
     gap: var(--kds-spacing-container-0-12x);
     align-items: center;
 }
-& .preview-label[data-v-b0b2c849] {
+& .preview-label[data-v-6aefb7ab] {
       font: var(--kds-font-base-title-small-strong);
       color: var(--kds-color-text-and-icon-neutral);
 }
 }
-& .left[data-v-b0b2c849],
-  & .center[data-v-b0b2c849],
-  & .right[data-v-b0b2c849] {
+& .left[data-v-6aefb7ab],
+  & .center[data-v-6aefb7ab],
+  & .right[data-v-6aefb7ab] {
     display: flex;
     flex: 1;
     align-items: center;
     min-width: 0;
     padding: var(--kds-spacing-container-0-12x) 0;
 }
-& .left[data-v-b0b2c849],
-  & .center[data-v-b0b2c849] {
+& .left[data-v-6aefb7ab],
+  & .center[data-v-6aefb7ab] {
     gap: var(--kds-spacing-container-0-5x);
 }
-& .center[data-v-b0b2c849] {
+& .center[data-v-6aefb7ab] {
     justify-content: center;
 }
-& .right[data-v-b0b2c849] {
+& .right[data-v-6aefb7ab] {
     gap: var(--kds-spacing-container-0-25x);
     justify-content: flex-end;
 }

package/dist/index.js

@@ -92,13 +92,13 @@ var border = {
 					h: 345,
 					s: 0,
 					l: 11.4,
-					alpha: 0
+					a: 0
 				},
 				dark: {
 					h: 345,
 					s: 0,
 					l: 11.4,
-					alpha: 0
+					a: 0
 				}
 			},
 			width: {
@@ -117,13 +117,13 @@ var border = {
 					h: 330,
 					s: 0,
 					l: 10.2,
-					alpha: .4
+					a: .4
 				},
 				dark: {
 					h: 330,
 					s: 0,
 					l: 99,
-					alpha: .5
+					a: .5
 				}
 			},
 			width: {
@@ -142,13 +142,13 @@ var border = {
 					h: 0,
 					s: 0,
 					l: 72.5,
-					alpha: 1
+					a: 1
 				},
 				dark: {
 					h: 0,
 					s: 0,
 					l: 48.2,
-					alpha: 1
+					a: 1
 				}
 			},
 			width: {
@@ -167,13 +167,13 @@ var border = {
 					h: 209.4,
 					s: 57.3,
 					l: 49.6,
-					alpha: 1
+					a: 1
 				},
 				dark: {
 					h: 213.6,
 					s: 91.6,
 					l: 76.7,
-					alpha: 1
+					a: 1
 				}
 			},
 			width: {
@@ -192,13 +192,13 @@ var border = {
 					h: 171.8,
 					s: 27,
 					l: 47.8,
-					alpha: 1
+					a: 1
 				},
 				dark: {
 					h: 168,
 					s: 46.7,
 					l: 85.3,
-					alpha: 1
+					a: 1
 				}
 			},
 			width: {
@@ -217,13 +217,13 @@ var border = {
 					h: 209.4,
 					s: 57.3,
 					l: 49.6,
-					alpha: 1
+					a: 1
 				},
 				dark: {
 					h: 213.6,
 					s: 91.6,
 					l: 76.7,
-					alpha: 1
+					a: 1
 				}
 			},
 			width: {
@@ -242,13 +242,13 @@ var border = {
 					h: 348.8,
 					s: 90.9,
 					l: 34.5,
-					alpha: 1
+					a: 1
 				},
 				dark: {
 					h: 3.5,
 					s: 100,
 					l: 79.6,
-					alpha: 1
+					a: 1
 				}
 			},
 			width: {
@@ -267,13 +267,13 @@ var border = {
 					h: 176.7,
 					s: 82,
 					l: 17.5,
-					alpha: 1
+					a: 1
 				},
 				dark: {
 					h: 176.7,
 					s: 82,
 					l: 17.5,
-					alpha: 1
+					a: 1
 				}
 			},
 			width: {
@@ -292,13 +292,13 @@ var border = {
 					h: 330,
 					s: 0,
 					l: 10.2,
-					alpha: .4
+					a: .4
 				},
 				dark: {
 					h: 330,
 					s: 0,
 					l: 99,
-					alpha: .5
+					a: .5
 				}
 			},
 			width: {
@@ -319,13 +319,13 @@ var border = {
 					h: 330,
 					s: 0,
 					l: 10.2,
-					alpha: .4
+					a: .4
 				},
 				dark: {
 					h: 330,
 					s: 0,
 					l: 99,
-					alpha: .5
+					a: .5
 				}
 			},
 			width: {
@@ -344,13 +344,13 @@ var border = {
 					h: 330,
 					s: 0,
 					l: 10.2,
-					alpha: .2
+					a: .2
 				},
 				dark: {
 					h: 330,
 					s: 0,
 					l: 99,
-					alpha: .2
+					a: .2
 				}
 			},
 			width: {
@@ -369,13 +369,13 @@ var border = {
 					h: 330,
 					s: 0,
 					l: 10.2,
-					alpha: .1
+					a: .1
 				},
 				dark: {
 					h: 330,
 					s: 0,
 					l: 99,
-					alpha: .1
+					a: .1
 				}
 			},
 			width: {
@@ -394,13 +394,13 @@ var border = {
 					h: 50.8,
 					s: 100,
 					l: 50,
-					alpha: 1
+					a: 1
 				},
 				dark: {
 					h: 50.8,
 					s: 100,
 					l: 50,
-					alpha: 1
+					a: 1
 				}
 			},
 			width: {
@@ -419,13 +419,13 @@ var border = {
 					h: 3.4,
 					s: 100,
 					l: 86.1,
-					alpha: 1
+					a: 1
 				},
 				dark: {
 					h: 348,
 					s: 94.3,
 					l: 20.8,
-					alpha: 1
+					a: 1
 				}
 			},
 			width: {
@@ -444,13 +444,13 @@ var border = {
 					h: 30.8,
 					s: 79.3,
 					l: 73.5,
-					alpha: 1
+					a: 1
 				},
 				dark: {
 					h: 13.1,
 					s: 66.1,
 					l: 23.1,
-					alpha: 1
+					a: 1
 				}
 			},
 			width: {
@@ -469,13 +469,13 @@ var border = {
 					h: 112,
 					s: 56.5,
 					l: 71.2,
-					alpha: 1
+					a: 1
 				},
 				dark: {
 					h: 123.7,
 					s: 46.7,
 					l: 20.6,
-					alpha: 1
+					a: 1
 				}
 			},
 			width: {
@@ -494,13 +494,13 @@ var border = {
 					h: 214.5,
 					s: 100,
 					l: 84.3,
-					alpha: 1
+					a: 1
 				},
 				dark: {
 					h: 210,
 					s: 50,
 					l: 27.5,
-					alpha: 1
+					a: 1
 				}
 			},
 			width: {
@@ -521,13 +521,13 @@ var border = {
 					h: 0,
 					s: 0,
 					l: 90.2,
-					alpha: 1
+					a: 1
 				},
 				dark: {
 					h: 0,
 					s: 0,
 					l: 32.2,
-					alpha: 1
+					a: 1
 				}
 			},
 			width: {
@@ -546,13 +546,13 @@ var border = {
 					h: 348,
 					s: 94.3,
 					l: 20.8,
-					alpha: 1
+					a: 1
 				},
 				dark: {
 					h: 2.6,
 					s: 100,
 					l: 72.4,
-					alpha: 1
+					a: 1
 				}
 			},
 			width: {
@@ -571,13 +571,13 @@ var border = {
 					h: 19,
 					s: 63.1,
 					l: 38.2,
-					alpha: 1
+					a: 1
 				},
 				dark: {
 					h: 49.1,
 					s: 99.1,
 					l: 43.7,
-					alpha: 1
+					a: 1
 				}
 			},
 			width: {
@@ -596,13 +596,13 @@ var border = {
 					h: 116.1,
 					s: 46.6,
 					l: 25.7,
-					alpha: 1
+					a: 1
 				},
 				dark: {
 					h: 106.5,
 					s: 42.6,
 					l: 54.9,
-					alpha: 1
+					a: 1
 				}
 			},
 			width: {
@@ -623,13 +623,13 @@ var border = {
 					h: 330,
 					s: 0,
 					l: 10.2,
-					alpha: .4
+					a: .4
 				},
 				dark: {
 					h: 330,
 					s: 0,
 					l: 99,
-					alpha: .4
+					a: .4
 				}
 			},
 			width: {
@@ -648,13 +648,13 @@ var border = {
 					h: 330,
 					s: 0,
 					l: 10.2,
-					alpha: .64
+					a: .64
 				},
 				dark: {
 					h: 330,
 					s: 0,
 					l: 99,
-					alpha: .58
+					a: .58
 				}
 			},
 			width: {
@@ -673,13 +673,13 @@ var border = {
 					h: 330,
 					s: 0,
 					l: 10.2,
-					alpha: .74
+					a: .74
 				},
 				dark: {
 					h: 330,
 					s: 0,
 					l: 99,
-					alpha: .68
+					a: .68
 				}
 			},
 			width: {
@@ -699,13 +699,13 @@ var border = {
 				h: 0,
 				s: 0,
 				l: 99,
-				alpha: 1
+				a: 1
 			},
 			dark: {
 				h: 0,
 				s: 0,
 				l: 99,
-				alpha: 1
+				a: 1
 			}
 		},
 		width: {
@@ -5654,9 +5654,13 @@ var _hoisted_3$1 = {
 };
 var _hoisted_4$1 = {
 	key: 1,
+	class: "dimension with-row-count-dropdown"
+};
+var _hoisted_5 = {
+	key: 2,
 	class: "dimension"
 };
-var _hoisted_5 = { class: "right" };
+var _hoisted_6 = { class: "right" };
 //#endregion
 //#region src/components/control/TableActionBar.vue
 var TableActionBar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -5688,19 +5692,24 @@ var TableActionBar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 		/**
 		* Renders "total" by default, and "current of total" only when `current` is
 		* given and strictly below `total`. The `current >= total` guard prevents an
-		* inconsistent "m of n" where m would not be smaller than n.
+		* inconsistent "m of n" where m would not be smaller than n. An unknown total
+		* (`null`) renders as "-".
 		*/
 		const formatCount = (label, total, current) => {
+			if (total === null) return `${label}: -`;
 			return `${label}: ${current !== void 0 && current < total ? `${current} of ${total}` : total}`;
 		};
-		const dimensionText = computed(() => {
-			const totalNumRows = __props.tableSizes?.totalNumRows ?? 0;
+		const rowText = computed(() => formatCount(__props.rowLabel, __props.tableSizes ? __props.tableSizes.totalNumRows : 0, __props.tableSizes?.currentNumRows));
+		const columnText = computed(() => {
 			const totalNumColumns = __props.tableSizes?.totalNumColumns ?? 0;
-			if (totalNumRows === 0 && totalNumColumns === 0) return "No data";
-			const rowText = formatCount(__props.rowLabel, totalNumRows, __props.tableSizes?.currentNumRows);
-			if (totalNumColumns < 2) return rowText;
-			return `${rowText}   |   ${formatCount("Cols", totalNumColumns, __props.tableSizes?.currentNumColumns)}`;
+			if (totalNumColumns < 2) return;
+			return formatCount("Cols", totalNumColumns, __props.tableSizes?.currentNumColumns);
 		});
+		const dimensionText = computed(() => {
+			if (columnText.value === void 0) return rowText.value;
+			return `${rowText.value}   |   ${columnText.value}`;
+		});
+		const showRowCountDropdown = computed(() => Boolean(__props.actionConfig.rowCountItems?.length));
 		const emit = __emit;
 		return (_ctx, _cache) => {
 			return hasContent.value ? (openBlock(), createElementBlock("div", {
@@ -5716,8 +5725,15 @@ var TableActionBar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 				createElementVNode("div", _hoisted_2$3, [isPreview.value ? (openBlock(), createElementBlock("div", _hoisted_3$1, [_cache[3] || (_cache[3] = createElementVNode("span", { class: "preview-label" }, "Preview", -1)), __props.actionState?.previewDescription ? (openBlock(), createBlock(unref(KdsInfoToggleButton), {
 					key: 0,
 					content: __props.actionState.previewDescription
-				}, null, 8, ["content"])) : createCommentVNode("", true)])) : createCommentVNode("", true), __props.showTableSize ? (openBlock(), createElementBlock("span", _hoisted_4$1, toDisplayString(dimensionText.value), 1)) : createCommentVNode("", true)]),
-				createElementVNode("div", _hoisted_5, [
+				}, null, 8, ["content"])) : createCommentVNode("", true)])) : createCommentVNode("", true), __props.showTableSize && showRowCountDropdown.value ? (openBlock(), createElementBlock("span", _hoisted_4$1, [createVNode(unref(KdsMenuButton), {
+					class: "row-count-menu-button",
+					label: rowText.value,
+					size: "small",
+					variant: "transparent",
+					"trailing-icon": "chevron-down",
+					items: __props.actionConfig.rowCountItems ?? []
+				}, null, 8, ["label", "items"]), columnText.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode(toDisplayString(`   |   ${columnText.value}`), 1)], 64)) : createCommentVNode("", true)])) : __props.showTableSize ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(dimensionText.value), 1)) : createCommentVNode("", true)]),
+				createElementVNode("div", _hoisted_6, [
 					__props.actionConfig.enableSearch ? (openBlock(), createBlock(unref(KdsSearchInput), {
 						key: 0,
 						ariaLabel: "Search table",
@@ -5745,7 +5761,7 @@ var TableActionBar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 			], 2)) : createCommentVNode("", true);
 		};
 	}
-}), [["__scopeId", "data-v-b0b2c849"]]);
+}), [["__scopeId", "data-v-6aefb7ab"]]);
 //#endregion
 //#region src/utils/columnHeaderActionButtons.ts
 /**