@knime/kds-table 7.0.0 → 7.1.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @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

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

@@ -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
 /**