@knime/kds-table 0.4.1 → 0.5.1

package/dist/index.js

@@ -15261,7 +15261,7 @@ const _hoisted_4$2$1 = {
   key: 1,
   class: "kds-loading-skeleton-input-with-label"
 };
-const _hoisted_5$1$1 = { class: "kds-loading-skeleton-list-item-text" };
+const _hoisted_5$1 = { class: "kds-loading-skeleton-list-item-text" };
 const _sfc_main$9$1 = /* @__PURE__ */ defineComponent({
   __name: "KdsLoadingSkeleton",
   props: {
@@ -15310,7 +15310,7 @@ const _sfc_main$9$1 = /* @__PURE__ */ defineComponent({
               createVNode(LoadingSkeletonItem, {
                 shape: __props.variant.startsWith("list-item-large") ? "icon-large" : "icon-small"
               }, null, 8, ["shape"]),
-              createElementVNode("div", _hoisted_5$1$1, [
+              createElementVNode("div", _hoisted_5$1, [
                 createVNode(LoadingSkeletonItem, { shape: "text" }),
                 __props.variant.endsWith("subtext") ? (openBlock(), createBlock(LoadingSkeletonItem, {
                   key: 0,
@@ -16295,44 +16295,34 @@ const createEditingCellKeydownHandler = ({
   };
 };
 
-const _hoisted_1$c = {
-  key: 0,
-  class: "page-navigation"
-};
+const _hoisted_1$c = { class: "page-navigation" };
 const _hoisted_2$8 = { class: "navigation-buttons" };
 const _hoisted_3$5 = { class: "page-count" };
-const _hoisted_4$3 = { class: "navigation-buttons" };
+const _hoisted_4$2 = { class: "navigation-buttons" };
 const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "PageNavigation",
   props: {
-    currentItems: { default: 0 },
-    pageSize: { default: 0 },
-    currentPage: { default: 1 }
+    currentPage: { default: 1 },
+    totalPages: { default: 0 },
+    hasNextPage: { type: Boolean, default: false },
+    hasPreviousPage: { type: Boolean, default: false }
   },
   emits: ["pageChange"],
   setup(__props, { emit: __emit }) {
     const emit = __emit;
-    const totalPages = computed(() => {
-      if (!__props.pageSize || __props.currentItems <= 0) {
-        return 0;
-      }
-      return Math.ceil(__props.currentItems / __props.pageSize);
-    });
-    const hasNextPage = computed(() => __props.currentPage < totalPages.value);
-    const hasPreviousPage = computed(() => __props.currentPage > 1);
     const onPageChange = (newPageNumber) => {
       consola.debug("Page change", newPageNumber);
       emit("pageChange", newPageNumber);
     };
     return (_ctx, _cache) => {
-      return hasNextPage.value || hasPreviousPage.value ? (openBlock(), createElementBlock("div", _hoisted_1$c, [
+      return openBlock(), createElementBlock("div", _hoisted_1$c, [
         createElementVNode("div", _hoisted_2$8, [
           createVNode(unref(_sfc_main$1v), {
             variant: "transparent",
             size: "small",
             "leading-icon": "chevron-left-double",
             ariaLabel: "First page",
-            disabled: !hasPreviousPage.value,
+            disabled: !__props.hasPreviousPage,
             onClick: _cache[0] || (_cache[0] = ($event) => onPageChange(1))
           }, null, 8, ["disabled"]),
           createVNode(unref(_sfc_main$1v), {
@@ -16340,18 +16330,18 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             size: "small",
             "leading-icon": "chevron-left",
             ariaLabel: "Previous page",
-            disabled: !hasPreviousPage.value,
+            disabled: !__props.hasPreviousPage,
             onClick: _cache[1] || (_cache[1] = ($event) => onPageChange(__props.currentPage - 1))
           }, null, 8, ["disabled"])
         ]),
-        createElementVNode("span", _hoisted_3$5, toDisplayString(__props.currentPage) + " of " + toDisplayString(totalPages.value), 1),
-        createElementVNode("div", _hoisted_4$3, [
+        createElementVNode("span", _hoisted_3$5, toDisplayString(__props.currentPage) + " of " + toDisplayString(__props.totalPages), 1),
+        createElementVNode("div", _hoisted_4$2, [
           createVNode(unref(_sfc_main$1v), {
             variant: "transparent",
             size: "small",
             "leading-icon": "chevron-right",
             ariaLabel: "Next page",
-            disabled: !hasNextPage.value,
+            disabled: !__props.hasNextPage,
             onClick: _cache[2] || (_cache[2] = ($event) => onPageChange(__props.currentPage + 1))
           }, null, 8, ["disabled"]),
           createVNode(unref(_sfc_main$1v), {
@@ -16359,16 +16349,16 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             size: "small",
             "leading-icon": "chevron-right-double",
             ariaLabel: "Last page",
-            disabled: !hasNextPage.value,
-            onClick: _cache[3] || (_cache[3] = ($event) => onPageChange(totalPages.value))
+            disabled: !__props.hasNextPage,
+            onClick: _cache[3] || (_cache[3] = ($event) => onPageChange(__props.totalPages))
           }, null, 8, ["disabled"])
         ])
-      ])) : createCommentVNode("", true);
+      ]);
     };
   }
 });
 
-const PageNavigation = /* @__PURE__ */ _export_sfc$1(_sfc_main$h, [["__scopeId", "data-v-f8714af0"]]);
+const PageNavigation = /* @__PURE__ */ _export_sfc$1(_sfc_main$h, [["__scopeId", "data-v-95577571"]]);
 
 const _hoisted_1$b = {
   key: 0,
@@ -16379,11 +16369,11 @@ const _hoisted_2$7 = {
   class: "row-range-container"
 };
 const _hoisted_3$4 = { class: "subtle" };
-const _hoisted_4$2 = {
+const _hoisted_4$1 = {
   key: 0,
   class: "muted"
 };
-const _hoisted_5$1 = { class: "subtle" };
+const _hoisted_5 = { class: "subtle" };
 const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "PageRowRange",
   props: {
@@ -16408,8 +16398,8 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return __props.showTableSize && __props.currentItems === 0 ? (openBlock(), createElementBlock("span", _hoisted_1$b, "No data")) : (openBlock(), createElementBlock("div", _hoisted_2$7, [
         createElementVNode("span", _hoisted_3$4, toDisplayString(__props.rowLabel) + ":", 1),
-        hasMultiplePages.value && __props.currentItems ? (openBlock(), createElementBlock("span", _hoisted_4$2, toDisplayString(pageRangeStart.value) + "–" + toDisplayString(pageRangeEnd.value), 1)) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_5$1, toDisplayString(rowCountText.value), 1)
+        hasMultiplePages.value && __props.currentItems ? (openBlock(), createElementBlock("span", _hoisted_4$1, toDisplayString(pageRangeStart.value) + "–" + toDisplayString(pageRangeEnd.value), 1)) : createCommentVNode("", true),
+        createElementVNode("span", _hoisted_5, toDisplayString(rowCountText.value), 1)
       ]));
     };
   }
@@ -16448,6 +16438,24 @@ const _sfc_main$f = {
         id: pageSize.toString(),
         text: this.createText(pageSize)
       }));
+    },
+    currentItems() {
+      return this.tableState.tableSizes?.currentNumRows ?? 0;
+    },
+    totalPages() {
+      if (!this.pageConfig.pageSize || this.currentItems <= 0) {
+        return 0;
+      }
+      return Math.ceil(this.currentItems / this.pageConfig.pageSize);
+    },
+    hasNextPage() {
+      return this.pageState.currentPage < this.totalPages;
+    },
+    hasPreviousPage() {
+      return this.pageState.currentPage > 1;
+    },
+    showPageNavigation() {
+      return this.hasNextPage || this.hasPreviousPage;
     }
   },
   methods: {
@@ -16461,27 +16469,32 @@ const _sfc_main$f = {
   }
 };
 
-const _hoisted_1$a = { class: "page-controls" };
+const _hoisted_1$a = {
+  key: 0,
+  class: "page-controls"
+};
 const _hoisted_2$6 = { class: "page-size-menu" };
 function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_PageRowRange = resolveComponent("PageRowRange");
   const _component_PageNavigation = resolveComponent("PageNavigation");
   const _component_KdsMenuButton = resolveComponent("KdsMenuButton");
-  return openBlock(), createElementBlock("div", _hoisted_1$a, [
+  return $options.showPageNavigation || $options.pageSizeItems.length ? (openBlock(), createElementBlock("div", _hoisted_1$a, [
     createVNode(_component_PageRowRange, {
       class: "page-row-range",
-      "current-items": $props.tableState.currentSize,
+      "current-items": $props.tableState.tableSizes?.currentNumRows,
       "page-size": $props.pageConfig.pageSize,
       "current-page": $props.pageState.currentPage,
       "show-table-size": $props.tableConfig.showTableSize,
       "row-label": $props.tableConfig.rowLabel
     }, null, 8, ["current-items", "page-size", "current-page", "show-table-size", "row-label"]),
-    createVNode(_component_PageNavigation, {
-      "current-items": $props.tableState.currentSize,
-      "page-size": $props.pageConfig.pageSize,
+    $options.showPageNavigation ? (openBlock(), createBlock(_component_PageNavigation, {
+      key: 0,
       "current-page": $props.pageState.currentPage,
+      "total-pages": $options.totalPages,
+      "has-next-page": $options.hasNextPage,
+      "has-previous-page": $options.hasPreviousPage,
       onPageChange: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("pageChange", $event))
-    }, null, 8, ["current-items", "page-size", "current-page"]),
+    }, null, 8, ["current-page", "total-pages", "has-next-page", "has-previous-page"])) : createCommentVNode("", true),
     createElementVNode("div", _hoisted_2$6, [
       $options.pageSizeItems.length ? (openBlock(), createBlock(_component_KdsMenuButton, {
         key: 0,
@@ -16493,9 +16506,9 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
         onItemClick: $options.onPageSizeSelect
       }, null, 8, ["items", "label", "onItemClick"])) : createCommentVNode("", true)
     ])
-  ]);
+  ])) : createCommentVNode("", true);
 }
-const PageControls = /* @__PURE__ */ _export_sfc$1(_sfc_main$f, [["render", _sfc_render$4], ["__scopeId", "data-v-d15a282a"]]);
+const PageControls = /* @__PURE__ */ _export_sfc$1(_sfc_main$f, [["render", _sfc_render$4], ["__scopeId", "data-v-bf51fe76"]]);
 
 const defaultValueFor = (is) => {
   if (is === "ControlMultiselect") {
@@ -17014,22 +17027,15 @@ const SortControl = /* @__PURE__ */ _export_sfc$1(_sfc_main$b, [["__scopeId", "d
 const _hoisted_1$6 = { class: "left" };
 const _hoisted_2$3 = {
   key: 0,
-  class: "title"
-};
-const _hoisted_3$2 = {
-  key: 1,
   class: "dimension"
 };
-const _hoisted_4$1 = { class: "right" };
+const _hoisted_3$2 = { class: "right" };
 const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "TableActionBar",
   props: {
-    allRowsCount: { default: 0 },
-    filteredRowsCount: { default: 0 },
-    allColumnsCount: { default: 0 },
-    filteredColumnsCount: { default: 0 },
+    tableSizes: {},
     rowLabel: { default: "Rows" },
-    title: { default: "" },
+    viewType: { default: "DEFAULT" },
     showTableSize: { type: Boolean, default: true },
     actionConfig: {},
     colSortValues: { default: () => [] },
@@ -17039,36 +17045,35 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   },
   emits: ["resetTemporaryView", "columnFilter", "onColumnSort"],
   setup(__props, { expose: __expose, emit: __emit }) {
-    const isTemporaryView = computed(() => __props.title === "Temporary view");
-    const hasContent = computed(
-      () => Boolean(__props.title) || __props.showTableSize || __props.actionConfig.enableSorting || __props.actionConfig.enableFilters
+    const isTemporaryView = computed(
+      () => __props.viewType === "TEMP_VIEW" || __props.viewType === "PREVIEW"
     );
-    const hasRows = computed(() => __props.allRowsCount > 0);
-    const shouldAppendOfRows = computed(() => __props.filteredRowsCount < __props.allRowsCount);
-    const hasColumns = computed(() => __props.allColumnsCount > 0);
-    const hasLessThanTwoColumns = computed(() => __props.allColumnsCount < 2);
-    const shouldAppendOfColumns = computed(
-      () => __props.filteredColumnsCount < __props.allColumnsCount
+    const showResetButton = computed(() => __props.viewType === "TEMP_VIEW");
+    const hasContent = computed(
+      () => isTemporaryView.value || __props.showTableSize || __props.actionConfig.enableSorting || __props.actionConfig.enableFilters || __props.actionConfig.forceShow
     );
-    const formatCount = (label, filteredCount, totalCount, appendTotal) => `${label}: ${filteredCount}${appendTotal ? ` of ${totalCount}` : ""}`;
+    const formatCount = (label, total, current) => {
+      const appendTotal = current !== void 0 && current < total;
+      return `${label}: ${appendTotal ? `${current} of ${total}` : total}`;
+    };
     const dimensionText = computed(() => {
-      if (!hasRows.value && !hasColumns.value) {
+      const totalNumRows = __props.tableSizes?.totalNumRows ?? 0;
+      const totalNumColumns = __props.tableSizes?.totalNumColumns ?? 0;
+      if (totalNumRows === 0 && totalNumColumns === 0) {
         return "No data";
       }
       const rowText = formatCount(
         __props.rowLabel,
-        __props.filteredRowsCount,
-        __props.allRowsCount,
-        shouldAppendOfRows.value
+        totalNumRows,
+        __props.tableSizes?.currentNumRows
       );
-      if (hasLessThanTwoColumns.value) {
+      if (totalNumColumns < 2) {
         return rowText;
       }
       const columnText = formatCount(
         "Columns",
-        __props.filteredColumnsCount,
-        __props.allColumnsCount,
-        shouldAppendOfColumns.value
+        totalNumColumns,
+        __props.tableSizes?.currentNumColumns
       );
       return `${rowText}   |   ${columnText}`;
     });
@@ -17086,16 +17091,15 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["kds-table-action-bar", { "temporary-view": isTemporaryView.value }])
       }, [
         createElementVNode("div", _hoisted_1$6, [
-          __props.title ? (openBlock(), createElementBlock("span", _hoisted_2$3, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
-          __props.showTableSize ? (openBlock(), createElementBlock("span", _hoisted_3$2, toDisplayString(dimensionText.value), 1)) : createCommentVNode("", true),
+          __props.showTableSize ? (openBlock(), createElementBlock("span", _hoisted_2$3, toDisplayString(dimensionText.value), 1)) : createCommentVNode("", true),
           __props.actionConfig.enableSorting ? (openBlock(), createBlock(SortControl, {
-            key: 2,
+            key: 1,
             "col-sort-values": __props.colSortValues,
             "sort-control-options": __props.sortControlOptions,
             onColumnSort: _cache[0] || (_cache[0] = (columnId, colDir) => emit("onColumnSort", columnId, colDir))
           }, null, 8, ["col-sort-values", "sort-control-options"])) : createCommentVNode("", true),
           __props.actionConfig.enableFilters ? (openBlock(), createBlock(FilterControl, {
-            key: 3,
+            key: 2,
             ref_key: "filterControlRef",
             ref: filterControlRef,
             columns: __props.columns,
@@ -17103,7 +17107,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             onColumnFilter: _cache[1] || (_cache[1] = (colInd, value) => emit("columnFilter", colInd, value))
           }, null, 8, ["columns", "col-filter-values"])) : createCommentVNode("", true)
         ]),
-        createElementVNode("div", _hoisted_4$1, [
+        createElementVNode("div", _hoisted_3$2, [
           __props.actionConfig.settingsItems?.length ? (openBlock(), createBlock(unref(_sfc_main$1k), {
             key: 0,
             ariaLabel: "Table settings",
@@ -17112,7 +17116,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             "leading-icon": "parameter",
             items: __props.actionConfig.settingsItems
           }, null, 8, ["items"])) : createCommentVNode("", true),
-          isTemporaryView.value ? (openBlock(), createBlock(unref(_sfc_main$1v), {
+          showResetButton.value ? (openBlock(), createBlock(unref(_sfc_main$1v), {
             key: 1,
             ariaLabel: "Reset to Nodeoutput",
             size: "small",
@@ -17126,7 +17130,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   }
 });
 
-const TableActionBar = /* @__PURE__ */ _export_sfc$1(_sfc_main$a, [["__scopeId", "data-v-4a59722f"]]);
+const TableActionBar = /* @__PURE__ */ _export_sfc$1(_sfc_main$a, [["__scopeId", "data-v-4bc7ffb1"]]);
 
 const useHeaderMenuItems = ({
   enableSorting,
@@ -17277,7 +17281,6 @@ const _hoisted_4 = {
   key: 0,
   class: "delete-column-button"
 };
-const _hoisted_5 = { key: 1 };
 const columnMenuButtonRef = "columnMenuButton";
 const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "HeaderCell",
@@ -17317,12 +17320,19 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         clearFilter: () => emit("clearColumnFilter")
       })
     );
-    const hovered = ref(false);
-    const onPointerOver = () => {
-      hovered.value = true;
+    const resizeHandleHovered = ref(false);
+    const headerHovered = ref(false);
+    const menuOpen = ref(false);
+    const nativeFocusInsideHeader = ref(false);
+    const onThFocusOut = (event) => {
+      if (!columnHeader.value?.contains(event.relatedTarget)) {
+        nativeFocusInsideHeader.value = false;
+      }
     };
-    const onPointerLeave = () => {
-      hovered.value = false;
+    const onThFocusIn = (event) => {
+      if (event.target.matches(":focus-visible")) {
+        nativeFocusInsideHeader.value = true;
+      }
     };
     const dragging = ref(false);
     let columnSizeOnDragStart = 0;
@@ -17352,6 +17362,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     );
     const dragHandleHeight = (isDragging) => isDragging ? currentDragHandlerHeight : HEADER_HEIGHT;
     const onPointerDown = (event) => {
+      menuOpen.value = false;
       consola.debug("Resize via drag triggered: ", event);
       event.stopPropagation();
       event.target.setPointerCapture(event.pointerId);
@@ -17386,7 +17397,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       consola.debug("Resize via drag finished: ", event);
       stopAutoScroll();
       dragging.value = false;
-      hovered.value = false;
+      resizeHandleHovered.value = false;
     });
     const getHeaderCellWidth = () => {
       const widthCompleteHeader = Math.ceil(
@@ -17402,6 +17413,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       if (props.tableConfig.enableHeaderCellSelection || props.column.editable) {
         content.value?.focus();
       } else if (subMenuItems.value?.length) {
+        nativeFocusInsideHeader.value = true;
         columnMenuButton.value?.menuButtonEl?.$el?.focus();
       } else if (props.column.deletable) {
         columnDeleteButton.value?.$el?.focus();
@@ -17410,6 +17422,9 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     const isFocusable = () => Boolean(
       props.tableConfig.enableHeaderCellSelection || props.column.editable || subMenuItems.value?.length || props.column.deletable
     );
+    const showMenuButton = computed(() => {
+      return subMenuItems.value?.length && (headerHovered.value || menuOpen.value || nativeFocusInsideHeader.value) && !dragging.value;
+    });
     __expose({ getHeaderCellWidth, focus, isFocusable });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("th", {
@@ -17426,14 +17441,18 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             "colored-header": __props.column.headerColor,
             "header-focused": __props.focused || __props.selected
           }
-        ])
+        ]),
+        onPointerenter: _cache[19] || (_cache[19] = ($event) => headerHovered.value = true),
+        onPointerleave: _cache[20] || (_cache[20] = ($event) => headerHovered.value = false),
+        onFocusin: onThFocusIn,
+        onFocusout: onThFocusOut
       }, [
         createElementVNode("div", {
           ref_key: "content",
           ref: content,
           class: normalizeClass(["column-header-content", [
             {
-              "with-button-in-header": subMenuItems.value?.length || __props.column.deletable
+              "with-button-in-header": showMenuButton.value || __props.column.deletable
             }
           ]]),
           tabindex: __props.tableConfig.enableHeaderCellSelection || __props.column.editable ? 0 : -1,
@@ -17484,43 +17503,48 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             onKeydown: _cache[10] || (_cache[10] = withKeys(withModifiers(($event) => emit("onKeydownDown"), ["prevent", "stop"]), ["down"]))
           }, null, 512)
         ])) : createCommentVNode("", true),
-        subMenuItems.value?.length ? (openBlock(), createElementBlock("div", _hoisted_5, [
+        subMenuItems.value?.length ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          class: normalizeClass({ "menu-button-hidden": !showMenuButton.value })
+        }, [
           createVNode(unref(_sfc_main$1k), {
             ref: columnMenuButtonRef,
+            modelValue: menuOpen.value,
+            "onUpdate:modelValue": _cache[11] || (_cache[11] = ($event) => menuOpen.value = $event),
             ariaLabel: "Table column options",
             items: subMenuItems.value,
             size: "small",
             variant: "transparent",
             "leading-icon": "more-actions",
-            onKeydown: _cache[11] || (_cache[11] = withKeys(withModifiers(($event) => emit("onKeydownDown"), ["prevent", "stop"]), ["down"]))
-          }, null, 8, ["items"])
-        ])) : createCommentVNode("", true),
+            onKeydown: _cache[12] || (_cache[12] = withKeys(withModifiers(($event) => emit("onKeydownDown"), ["prevent", "stop"]), ["down"]))
+          }, null, 8, ["modelValue", "items"])
+        ], 2)) : createCommentVNode("", true),
         __props.tableConfig.enableColumnResizing ? (openBlock(), createElementBlock("div", {
           key: 2,
           class: normalizeClass([
             "resize-handle-area",
-            { hover: hovered.value && !__props.otherColumnResizing, drag: dragging.value }
+            { hover: resizeHandleHovered.value && !__props.otherColumnResizing, drag: dragging.value }
           ]),
           style: normalizeStyle({
             height: `${dragHandleHeight(dragging.value)}px`
           }),
-          onPointerover: onPointerOver,
-          onPointerleave: onPointerLeave,
-          onPointerdownPassive: _cache[12] || (_cache[12] = ($event) => onPointerDown($event)),
-          onPointerupPassive: _cache[13] || (_cache[13] = ($event) => onPointerUp($event)),
-          onPointermove: _cache[14] || (_cache[14] = //@ts-ignore
+          onPointerover: _cache[13] || (_cache[13] = ($event) => resizeHandleHovered.value = true),
+          onPointerleave: _cache[14] || (_cache[14] = ($event) => resizeHandleHovered.value = false),
+          onPointerdownPassive: _cache[15] || (_cache[15] = ($event) => onPointerDown($event)),
+          onPointerupPassive: _cache[16] || (_cache[16] = ($event) => onPointerUp($event)),
+          onPointermove: _cache[17] || (_cache[17] = //@ts-ignore
           (...args) => unref(onPointerMove) && unref(onPointerMove)(...args)),
-          onLostpointercapture: _cache[15] || (_cache[15] = //@ts-ignore
+          onLostpointercapture: _cache[18] || (_cache[18] = //@ts-ignore
           (...args) => unref(onLostPointerCapture) && unref(onLostPointerCapture)(...args))
-        }, [..._cache[16] || (_cache[16] = [
+        }, [..._cache[21] || (_cache[21] = [
           createElementVNode("span", { class: "resize-handle" }, null, -1)
         ])], 38)) : createCommentVNode("", true)
-      ], 6);
+      ], 38);
     };
   }
 });
 
-const HeaderCell = /* @__PURE__ */ _export_sfc$1(_sfc_main$9, [["__scopeId", "data-v-b99ef494"]]);
+const HeaderCell = /* @__PURE__ */ _export_sfc$1(_sfc_main$9, [["__scopeId", "data-v-34396642"]]);
 
 const _sfc_main$8 = {
   components: {
@@ -17857,7 +17881,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 6)) : createCommentVNode("", true)
   ]);
 }
-const Header = /* @__PURE__ */ _export_sfc$1(_sfc_main$8, [["render", _sfc_render$2], ["__scopeId", "data-v-8ffda8bd"]]);
+const Header = /* @__PURE__ */ _export_sfc$1(_sfc_main$8, [["render", _sfc_render$2], ["__scopeId", "data-v-faef4e27"]]);
 
 const _hoisted_1$3 = { class: "sticky-container" };
 const buttonRef = "button";
@@ -19643,11 +19667,8 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
     $props.actionConfig ? (openBlock(), createBlock(_component_TableActionBar, {
       key: 0,
       ref: "actionBar",
-      "all-rows-count": $props.tableState.tableSize,
-      "filtered-rows-count": $props.tableState.currentSize,
-      "all-columns-count": $props.tableState.columnCount,
-      "filtered-columns-count": $props.columns.length,
-      title: $props.actionState?.actionBarTitle,
+      "table-sizes": $props.tableState.tableSizes,
+      "view-type": $props.actionState?.viewType,
       "row-label": $props.tableConfig.rowLabel,
       "show-table-size": $props.tableConfig.showTableSize,
       "action-config": $props.actionConfig,
@@ -19658,7 +19679,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
       onResetTemporaryView: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("resetTemporaryView")),
       onColumnFilter: _cache[1] || (_cache[1] = (colInd, value) => _ctx.$emit("columnFilter", colInd, value)),
       onOnColumnSort: $options.onActionBarColumnSort
-    }, null, 8, ["all-rows-count", "filtered-rows-count", "all-columns-count", "filtered-columns-count", "title", "row-label", "show-table-size", "action-config", "col-sort-values", "col-filter-values", "sort-control-options", "columns", "onOnColumnSort"])) : createCommentVNode("", true),
+    }, null, 8, ["table-sizes", "view-type", "row-label", "show-table-size", "action-config", "col-sort-values", "col-filter-values", "sort-control-options", "columns", "onOnColumnSort"])) : createCommentVNode("", true),
     createElementVNode("table", {
       ref: "wrapper",
       tabindex: -1,
@@ -19846,7 +19867,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
     ], 544)
   ]);
 }
-const TableUI = /* @__PURE__ */ _export_sfc$1(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-aed49fa2"]]);
+const TableUI = /* @__PURE__ */ _export_sfc$1(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-4db02524"]]);
 
 const useTableReady = ({ onReady }) => {
   const autoSizesInitialized = ref(false);