@knime/kds-table 0.6.0 → 0.6.2

package/dist/index.js

@@ -1,5 +1,5 @@
-import { computed, unref, watch, ref, isRef, watchEffect, getCurrentScope, onScopeDispose, getCurrentInstance, onMounted, inject, provide, defineComponent, openBlock, createElementBlock, withModifiers, renderSlot, toRef, normalizeStyle, normalizeClass, createCommentVNode, createVNode, Fragment, renderList, createElementVNode, createBlock, nextTick, withCtx, onBeforeUnmount, reactive, onUnmounted, toDisplayString, resolveComponent, useTemplateRef, createTextVNode, shallowRef, toValue, readonly, withKeys, mergeProps, useSlots, createSlots, normalizeProps, guardReactiveProps } from 'vue';
-import { KdsCheckbox, KdsLoadingSkeleton, KdsButton, KdsMenuButton, KdsDropdown, KdsTextInput, KdsMultiSelectDropdown, KdsToggleButton, KdsPopover, KdsIcon, KdsMissingValueIcon } from '@knime/kds-components';
+import { computed, unref, watch, ref, isRef, watchEffect, getCurrentScope, onScopeDispose, getCurrentInstance, onMounted, inject, provide, defineComponent, openBlock, createElementBlock, withModifiers, renderSlot, toRef, normalizeStyle, normalizeClass, createCommentVNode, createVNode, Fragment, renderList, createElementVNode, createBlock, nextTick, withCtx, onBeforeUnmount, reactive, onUnmounted, toDisplayString, resolveComponent, useTemplateRef, createTextVNode, shallowRef, toValue, shallowReadonly, withKeys, withDirectives, mergeProps, useSlots, createSlots, normalizeProps, guardReactiveProps } from 'vue';
+import { KdsCheckbox, KdsLoadingSkeleton, KdsButton, KdsMenuButton, KdsDropdown, KdsTextInput, KdsMultiSelectDropdown, KdsToggleButton, KdsPopover, KdsIcon, KdsSearchInput, vKdsTooltip, KdsMissingValueIcon } from '@knime/kds-components';
 
 import './index.css';const defaultPageSize = 10;
 const filterComponents = {
@@ -666,7 +666,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
           })
         }, [
           createVNode(unref(KdsCheckbox), {
-            title: "Selection",
+            tooltip: "Selection",
             disabled: "",
             class: "select-checkbox"
           })
@@ -690,7 +690,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
   }
 });
 
-const EmptyRow = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-732e42c3"]]);
+const EmptyRow = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-f722e2bf"]]);
 
 const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "PlaceholderRow",
@@ -1581,7 +1581,7 @@ const createEditingCellKeydownHandler = ({
 
 const _hoisted_1$c = { class: "page-navigation" };
 const _hoisted_2$8 = { class: "navigation-buttons" };
-const _hoisted_3$5 = { class: "page-count" };
+const _hoisted_3$4 = { class: "page-count" };
 const _hoisted_4$2 = { class: "navigation-buttons" };
 const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "PageNavigation",
@@ -1618,7 +1618,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             onClick: _cache[1] || (_cache[1] = ($event) => onPageChange(__props.currentPage - 1))
           }, null, 8, ["disabled"])
         ]),
-        createElementVNode("span", _hoisted_3$5, toDisplayString(__props.currentPage) + " of " + toDisplayString(__props.totalPages), 1),
+        createElementVNode("span", _hoisted_3$4, toDisplayString(__props.currentPage) + " of " + toDisplayString(__props.totalPages), 1),
         createElementVNode("div", _hoisted_4$2, [
           createVNode(unref(KdsButton), {
             variant: "transparent",
@@ -1652,7 +1652,7 @@ const _hoisted_2$7 = {
   key: 1,
   class: "row-range-container"
 };
-const _hoisted_3$4 = { class: "subtle" };
+const _hoisted_3$3 = { class: "subtle" };
 const _hoisted_4$1 = {
   key: 0,
   class: "muted"
@@ -1681,7 +1681,7 @@ 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),
+        createElementVNode("span", _hoisted_3$3, toDisplayString(__props.rowLabel) + ":", 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)
       ]));
@@ -2050,14 +2050,14 @@ const _sfc_main$d = {  };
 
 const _hoisted_1$8 = { class: "popover" };
 const _hoisted_2$4 = { class: "header" };
-const _hoisted_3$3 = { class: "body" };
+const _hoisted_3$2 = { class: "body" };
 
 function _sfc_render$3(_ctx, _cache) {
   return (openBlock(), createElementBlock("div", _hoisted_1$8, [
     createElementVNode("span", _hoisted_2$4, [
       renderSlot(_ctx.$slots, "header", {}, undefined, true)
     ]),
-    createElementVNode("div", _hoisted_3$3, [
+    createElementVNode("div", _hoisted_3$2, [
       renderSlot(_ctx.$slots, "body", {}, undefined, true)
     ])
   ]))
@@ -2313,13 +2313,13 @@ const _hoisted_2$3 = {
   key: 0,
   class: "dimension"
 };
-const _hoisted_3$2 = { class: "right" };
+const _hoisted_3$1 = { class: "right" };
 const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "TableActionBar",
   props: {
     tableSizes: {},
     rowLabel: { default: "Rows" },
-    viewType: { default: "DEFAULT" },
+    actionState: {},
     showTableSize: { type: Boolean, default: true },
     actionConfig: {},
     colSortValues: { default: () => [] },
@@ -2327,14 +2327,15 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     sortControlOptions: {},
     columns: {}
   },
-  emits: ["resetTemporaryView", "columnFilter", "onColumnSort"],
+  emits: ["resetTemporaryView", "columnFilter", "onColumnSort", "update:searchTerm"],
   setup(__props, { expose: __expose, emit: __emit }) {
+    const viewType = computed(() => __props.actionState?.viewType ?? "DEFAULT");
     const isTemporaryView = computed(
-      () => __props.viewType === "TEMP_VIEW" || __props.viewType === "PREVIEW"
+      () => viewType.value === "TEMP_VIEW" || viewType.value === "PREVIEW"
     );
-    const showResetButton = computed(() => __props.viewType === "TEMP_VIEW");
+    const showResetButton = computed(() => viewType.value === "TEMP_VIEW");
     const hasContent = computed(
-      () => isTemporaryView.value || __props.showTableSize || __props.actionConfig.enableSorting || __props.actionConfig.enableFilters || __props.actionConfig.forceShow
+      () => isTemporaryView.value || __props.showTableSize || __props.actionConfig.enableSearch || __props.actionConfig.enableSorting || __props.actionConfig.enableFilters || __props.actionConfig.forceShow
     );
     const formatCount = (label, total, current) => {
       const appendTotal = current !== void 0 && current < total;
@@ -2391,9 +2392,16 @@ 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_3$2, [
-          __props.actionConfig.settingsItems?.length ? (openBlock(), createBlock(unref(KdsMenuButton), {
+        createElementVNode("div", _hoisted_3$1, [
+          __props.actionConfig.enableSearch ? (openBlock(), createBlock(unref(KdsSearchInput), {
             key: 0,
+            ariaLabel: "Search table",
+            size: "small",
+            "model-value": __props.actionState?.searchTerm ?? "",
+            "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _ctx.$emit("update:searchTerm", $event))
+          }, null, 8, ["model-value"])) : createCommentVNode("", true),
+          __props.actionConfig.settingsItems?.length ? (openBlock(), createBlock(unref(KdsMenuButton), {
+            key: 1,
             ariaLabel: "Table settings",
             size: "small",
             variant: "transparent",
@@ -2401,12 +2409,12 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             items: __props.actionConfig.settingsItems
           }, null, 8, ["items"])) : createCommentVNode("", true),
           showResetButton.value ? (openBlock(), createBlock(unref(KdsButton), {
-            key: 1,
+            key: 2,
             ariaLabel: "Reset to Nodeoutput",
             size: "small",
             variant: "transparent",
             "leading-icon": "x-close",
-            onClick: _cache[2] || (_cache[2] = ($event) => emit("resetTemporaryView"))
+            onClick: _cache[3] || (_cache[3] = ($event) => emit("resetTemporaryView"))
           })) : createCommentVNode("", true)
         ])
       ], 2)) : createCommentVNode("", true);
@@ -2414,7 +2422,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   }
 });
 
-const TableActionBar = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-4bc7ffb1"]]);
+const TableActionBar = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-96b1acf9"]]);
 
 const useHeaderMenuItems = ({
   enableSorting,
@@ -2516,7 +2524,6 @@ function tryOnScopeDispose(fn, failSilently) {
 	}
 	return false;
 }
-
 //#endregion
 //#region utils/is.ts
 const isClient = typeof window !== "undefined" && typeof document !== "undefined";
@@ -2525,7 +2532,6 @@ typeof WorkerGlobalScope !== "undefined" && globalThis instanceof WorkerGlobalSc
 //#endregion
 //#region _configurable.ts
 const defaultWindow = isClient ? window : void 0;
-
 //#endregion
 //#region useRafFn/index.ts
 /**
@@ -2536,7 +2542,7 @@ const defaultWindow = isClient ? window : void 0;
 * @param options
 */
 function useRafFn(fn, options = {}) {
-	const { immediate = true, fpsLimit = null, window: window$1 = defaultWindow, once = false } = options;
+	const { immediate = true, fpsLimit = null, window = defaultWindow, once = false } = options;
 	const isActive = shallowRef(false);
 	const intervalLimit = computed(() => {
 		const limit = toValue(fpsLimit);
@@ -2544,44 +2550,44 @@ function useRafFn(fn, options = {}) {
 	});
 	let previousFrameTimestamp = 0;
 	let rafId = null;
-	function loop(timestamp$1) {
-		if (!isActive.value || !window$1) return;
-		if (!previousFrameTimestamp) previousFrameTimestamp = timestamp$1;
-		const delta = timestamp$1 - previousFrameTimestamp;
+	function loop(timestamp) {
+		if (!isActive.value || !window) return;
+		if (!previousFrameTimestamp) previousFrameTimestamp = timestamp;
+		const delta = timestamp - previousFrameTimestamp;
 		if (intervalLimit.value && delta < intervalLimit.value) {
-			rafId = window$1.requestAnimationFrame(loop);
+			rafId = window.requestAnimationFrame(loop);
 			return;
 		}
-		previousFrameTimestamp = timestamp$1;
+		previousFrameTimestamp = timestamp;
 		fn({
 			delta,
-			timestamp: timestamp$1
+			timestamp
 		});
 		if (once) {
 			isActive.value = false;
 			rafId = null;
 			return;
 		}
-		rafId = window$1.requestAnimationFrame(loop);
+		rafId = window.requestAnimationFrame(loop);
 	}
 	function resume() {
-		if (!isActive.value && window$1) {
+		if (!isActive.value && window) {
 			isActive.value = true;
 			previousFrameTimestamp = 0;
-			rafId = window$1.requestAnimationFrame(loop);
+			rafId = window.requestAnimationFrame(loop);
 		}
 	}
 	function pause() {
 		isActive.value = false;
-		if (rafId != null && window$1) {
-			window$1.cancelAnimationFrame(rafId);
+		if (rafId != null && window) {
+			window.cancelAnimationFrame(rafId);
 			rafId = null;
 		}
 	}
 	if (immediate) resume();
 	tryOnScopeDispose(pause);
 	return {
-		isActive: readonly(isActive),
+		isActive: shallowReadonly(isActive),
 		pause,
 		resume
 	};
@@ -2641,8 +2647,8 @@ const useAutoScrollOnRightEdge = ({
 };
 
 const _hoisted_1$5 = ["tabindex"];
-const _hoisted_2$2 = ["title"];
-const _hoisted_3$1 = {
+const _hoisted_2$2 = { class: "header-text-container" };
+const _hoisted_3 = {
   key: 0,
   class: "sub-header-text-container"
 };
@@ -2844,17 +2850,16 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             ref: mainHeader,
             class: "main-header"
           }, [
-            createElementVNode("div", {
-              class: "header-text-container",
-              title: __props.column.header
-            }, [
+            withDirectives((openBlock(), createElementBlock("div", _hoisted_2$2, [
               createElementVNode("span", {
                 ref_key: "headerText",
                 ref: headerText
               }, toDisplayString(__props.column.header), 513)
-            ], 8, _hoisted_2$2)
+            ])), [
+              [unref(vKdsTooltip), __props.column.header, "truncated"]
+            ])
           ], 512),
-          __props.column.subHeader ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
+          __props.column.subHeader ? (openBlock(), createElementBlock("div", _hoisted_3, [
             renderSlot(_ctx.$slots, "subHeader", {
               subHeader: __props.column.subHeader
             }, () => [
@@ -2915,7 +2920,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const HeaderCell = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-284bb866"]]);
+const HeaderCell = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-6fb1af81"]]);
 
 const _sfc_main$8 = {
   components: {
@@ -3182,7 +3187,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
         createVNode(_component_KdsCheckbox, {
           ref: "selection-checkbox",
           class: "select-checkbox",
-          title: "Select all rows",
+          tooltip: "Select all rows",
           "model-value": $props.isSelected,
           disabled: $props.tableConfig.disableSelection,
           "onUpdate:modelValue": $options.onSelect
@@ -3254,7 +3259,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 6)) : createCommentVNode("", true)
   ]);
 }
-const Header = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$2], ["__scopeId", "data-v-14546b00"]]);
+const Header = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$2], ["__scopeId", "data-v-302dfb0e"]]);
 
 const _hoisted_1$3 = { class: "sticky-container" };
 const buttonRef = "button";
@@ -3313,12 +3318,11 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
 
 const CellExpandButton = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-f204ddf3"]]);
 
-const _hoisted_1$2 = ["title"];
-const _hoisted_2$1 = {
+const _hoisted_1$2 = {
   ref: "cell-content",
   class: "cell-content"
 };
-const _hoisted_3 = {
+const _hoisted_2$1 = {
   key: 3,
   class: "cell-text"
 };
@@ -3333,7 +3337,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     noPaddingTopBottom: { type: Boolean },
     noPaddingLeftRight: { type: Boolean },
     text: {},
-    title: {},
+    tooltip: {},
     color: {},
     selectOnMove: { type: Boolean },
     colSizeCssVar: {},
@@ -3454,7 +3458,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     watch(() => props.isToBeExpanded, changeExpandedCellViewIfNecessary);
     onMounted(changeExpandedCellViewIfNecessary);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("td", {
+      return withDirectives((openBlock(), createElementBlock("td", {
         class: normalizeClass([
           "data-cell",
           {
@@ -3471,7 +3475,6 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           ...paddingTopBottom.value,
           ...dataCellColorStyle.value
         }),
-        title: __props.title === null || __props.isSlotted && !__props.isMissing ? void 0 : __props.title,
         onDblclick: _cache[0] || (_cache[0] = (event) => __props.enableExpand && expandAndSelect(event)),
         onPointerenter: _cache[1] || (_cache[1] = ($event) => isHovered.value = true),
         onPointerleave: _cache[2] || (_cache[2] = ($event) => isHovered.value = false),
@@ -3480,7 +3483,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         onPointerdown: onPointerDown,
         onInput: _cache[4] || (_cache[4] = (val) => emit("input", { value: val, cell: _ctx.$el }))
       }, [
-        createElementVNode("div", _hoisted_2$1, [
+        createElementVNode("div", _hoisted_1$2, [
           __props.isEditing ? renderSlot(_ctx.$slots, "editable-cell", {
             key: 0,
             cellElement: _ctx.$el
@@ -3490,7 +3493,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           })) : __props.isSlotted ? renderSlot(_ctx.$slots, "default", {
             key: 2,
             width: __props.size - props.defaultLeftRightPadding * 2 - (showCellExpandButton.value ? unref(EXPAND_BUTTON_WIDTH) : 0)
-          }, void 0, true) : (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(__props.text), 1)),
+          }, void 0, true) : (openBlock(), createElementBlock("span", _hoisted_2$1, toDisplayString(__props.text), 1)),
           showCellExpandButton.value ? (openBlock(), createBlock(CellExpandButton, {
             key: 4,
             toggled: isExpanded.value,
@@ -3498,12 +3501,17 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
             onClick: onExpandButtonClick
           }, null, 8, ["toggled"])) : createCommentVNode("", true)
         ], 512)
-      ], 46, _hoisted_1$2);
+      ], 38)), [
+        [
+          unref(vKdsTooltip),
+          props.tooltip === null || __props.isSlotted && !__props.isMissing ? void 0 : props.tooltip
+        ]
+      ]);
     };
   }
 });
 
-const CellRenderer = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-107a3a8b"]]);
+const CellRenderer = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-2b17463f"]]);
 
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "Cell",
@@ -3530,7 +3538,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     const unpackedValue = computed(
       () => unpackObjectRepresentation(props.cellData)
     );
-    const title = computed(() => {
+    const tooltip = computed(() => {
       const { cellData } = props;
       if (isMissingValue(cellData)) {
         return getMissingValueMessage(cellData);
@@ -3555,7 +3563,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         "is-missing": isMissing.value,
         "is-slotted": __props.column.hasSlotContent ?? false,
         text: unpackedValue.value,
-        title: title.value,
+        tooltip: tooltip.value,
         color: color.value,
         "select-on-move": __props.selectOnMove,
         "default-top-bottom-padding": __props.defaultTopBottomPadding,
@@ -3582,7 +3590,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             ])
           };
         })
-      ]), 1032, ["is-missing", "is-slotted", "text", "title", "color", "select-on-move", "default-top-bottom-padding", "default-left-right-padding", "no-padding-left-right", "no-padding-top-bottom", "col-size-css-var", "size", "enable-expand", "is-selected", "is-in-cell-selection", "is-to-be-expanded", "is-editing"]);
+      ]), 1032, ["is-missing", "is-slotted", "text", "tooltip", "color", "select-on-move", "default-top-bottom-padding", "default-left-right-padding", "no-padding-left-right", "no-padding-top-bottom", "col-size-css-var", "size", "enable-expand", "is-selected", "is-in-cell-selection", "is-to-be-expanded", "is-editing"]);
     };
   }
 });
@@ -3808,7 +3816,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
             createVNode(unref(KdsCheckbox), {
               ref_key: "selectionCheckbox",
               ref: selectionCheckbox,
-              title: "Select row",
+              tooltip: "Select row",
               class: "select-checkbox",
               "model-value": __props.isSelected,
               disabled: __props.tableConfig.disableSelection,
@@ -3897,7 +3905,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const Row = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-a60d563f"]]);
+const Row = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-52ed7e13"]]);
 
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "CellSelectionOverlay",
@@ -4186,6 +4194,7 @@ const _sfc_main$1 = {
     columnResizeStart: () => true,
     columnResizeEnd: () => true,
     "update:available-width": (newAvailableWidth) => true,
+    "update:searchTerm": (newSearchTerm) => true,
     rowHeightUpdate: (newRowHeight) => true,
     copySelection: (copySelectionParams) => true,
     pasteSelection: (pasteSelectionParams) => true,
@@ -5045,7 +5054,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
       key: 0,
       ref: "actionBar",
       "table-sizes": $props.tableState.tableSizes,
-      "view-type": $props.actionState?.viewType,
+      "action-state": $props.actionState,
       "row-label": $props.tableConfig.rowLabel,
       "show-table-size": $props.tableConfig.showTableSize,
       "action-config": $props.actionConfig,
@@ -5055,19 +5064,20 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
       columns: $props.columns,
       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, ["table-sizes", "view-type", "row-label", "show-table-size", "action-config", "col-sort-values", "col-filter-values", "sort-control-options", "columns", "onOnColumnSort"])) : createCommentVNode("", true),
+      onOnColumnSort: $options.onActionBarColumnSort,
+      "onUpdate:searchTerm": _cache[2] || (_cache[2] = ($event) => _ctx.$emit("update:searchTerm", $event))
+    }, null, 8, ["table-sizes", "action-state", "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,
-      onPointerleave: _cache[11] || (_cache[11] = (...args) => $setup.selectCellsOnMove.setFalse && $setup.selectCellsOnMove.setFalse(...args)),
-      onPointerdownPassive: _cache[12] || (_cache[12] = withModifiers(($event) => $event.button === 0 && $setup.selectCellsOnMove.setTrue(), ["stop"])),
-      onPointerupPassive: _cache[13] || (_cache[13] = ($event) => $event.button === 0 && $setup.selectCellsOnMove.setFalse()),
+      onPointerleave: _cache[12] || (_cache[12] = (...args) => $setup.selectCellsOnMove.setFalse && $setup.selectCellsOnMove.setFalse(...args)),
+      onPointerdownPassive: _cache[13] || (_cache[13] = withModifiers(($event) => $event.button === 0 && $setup.selectCellsOnMove.setTrue(), ["stop"])),
+      onPointerupPassive: _cache[14] || (_cache[14] = ($event) => $event.button === 0 && $setup.selectCellsOnMove.setFalse()),
       onKeydown: [
-        _cache[14] || (_cache[14] = withKeys(withModifiers((...args) => $setup.handleCopyOnKeydown && $setup.handleCopyOnKeydown(...args), ["ctrl", "shift", "exact"]), ["c"])),
-        _cache[15] || (_cache[15] = withKeys(withModifiers((...args) => $setup.handleCopyOnKeydown && $setup.handleCopyOnKeydown(...args), ["meta", "shift", "exact"]), ["c"])),
-        _cache[16] || (_cache[16] = withKeys(withModifiers((...args) => $setup.handleDeleteSelection && $setup.handleDeleteSelection(...args), ["exact"]), ["delete"])),
-        _cache[17] || (_cache[17] = withKeys(withModifiers((...args) => $setup.clearCellSelectionAndStopPropagation && $setup.clearCellSelectionAndStopPropagation(...args), ["exact"]), ["escape"]))
+        _cache[15] || (_cache[15] = withKeys(withModifiers((...args) => $setup.handleCopyOnKeydown && $setup.handleCopyOnKeydown(...args), ["ctrl", "shift", "exact"]), ["c"])),
+        _cache[16] || (_cache[16] = withKeys(withModifiers((...args) => $setup.handleCopyOnKeydown && $setup.handleCopyOnKeydown(...args), ["meta", "shift", "exact"]), ["c"])),
+        _cache[17] || (_cache[17] = withKeys(withModifiers((...args) => $setup.handleDeleteSelection && $setup.handleDeleteSelection(...args), ["exact"]), ["delete"])),
+        _cache[18] || (_cache[18] = withKeys(withModifiers((...args) => $setup.clearCellSelectionAndStopPropagation && $setup.clearCellSelectionAndStopPropagation(...args), ["exact"]), ["escape"]))
       ]
     }, [
       createVNode(_component_TableCore, {
@@ -5086,13 +5096,13 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
         "current-row-height": $options.currentRowHeight,
         "new-column-button-width": $setup.newColumnButtonWidth,
         onScrollerUpdate: $options.onScroll,
-        "onUpdate:availableWidth": _cache[8] || (_cache[8] = ($event) => _ctx.$emit("update:available-width", $event)),
+        "onUpdate:availableWidth": _cache[9] || (_cache[9] = ($event) => _ctx.$emit("update:available-width", $event)),
         onMoveSelection: $options.onKeyboardMoveSelection,
         onClearSelection: $setup.clearCellSelection,
         onExpandSelectedCell: $options.expandSelectedCell,
         onStartEditing: $options.onStartEditingCell,
-        onBodyFocusin: _cache[9] || (_cache[9] = ($event) => $setup.changeFocus(true)),
-        onBodyFocusout: _cache[10] || (_cache[10] = ($event) => $options.onTableBodyFocusOut())
+        onBodyFocusin: _cache[10] || (_cache[10] = ($event) => $setup.changeFocus(true)),
+        onBodyFocusout: _cache[11] || (_cache[11] = ($event) => $options.onTableBodyFocusOut())
       }, {
         row: withCtx(({ row, groupInd, rowInd }) => [
           createVNode(_component_Row, {
@@ -5136,10 +5146,10 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
                 colInd: ind,
                 initialValue: $setup.editingCellInitialValue,
                 cellElement,
-                onKeydown: _cache[2] || (_cache[2] = (event) => $setup.createEditingCellKeydownHandler({
+                onKeydown: _cache[3] || (_cache[3] = (event) => $setup.createEditingCellKeydownHandler({
                   moveSelection: $options.onKeyboardMoveSelectionFromEditingCell
                 })(event)),
-                onClickAway: _cache[3] || (_cache[3] = (...args) => $setup.stopEditingCell && $setup.stopEditingCell(...args))
+                onClickAway: _cache[4] || (_cache[4] = (...args) => $setup.stopEditingCell && $setup.stopEditingCell(...args))
               }, void 0, true)
             ]),
             _: 2
@@ -5192,11 +5202,11 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
             onMoveDownFromHeaderCell: $options.onMoveDownFromHeaderCell,
             onHeaderCellSelect: $options.onHeaderCellSelect,
             onHeaderCellDeselect: $options.onHeaderCellDeselect,
-            onHeaderCellStartEditing: _cache[4] || (_cache[4] = (columnIndex, initialValue) => _ctx.$emit("headerCellStartEditing", columnIndex, initialValue)),
+            onHeaderCellStartEditing: _cache[5] || (_cache[5] = (columnIndex, initialValue) => _ctx.$emit("headerCellStartEditing", columnIndex, initialValue)),
             "onUpdate:newColumnButtonWidth": $options.onUpdateNewColumnButtonWidth,
             onNewColumnButtonClick: $options.onNewColumnButtonClick,
-            onSelectionKeydownDown: _cache[5] || (_cache[5] = ($event) => $options.onHeaderSelectionKeydownDown()),
-            onNewColumnButtonKeydownLeft: _cache[6] || (_cache[6] = ($event) => $options.onMoveIntoBodyFromRight())
+            onSelectionKeydownDown: _cache[6] || (_cache[6] = ($event) => $options.onHeaderSelectionKeydownDown()),
+            onNewColumnButtonKeydownLeft: _cache[7] || (_cache[7] = ($event) => $options.onMoveIntoBodyFromRight())
           }, {
             subHeader: withCtx((slotProps) => [
               renderSlot(_ctx.$slots, "subHeader", normalizeProps(guardReactiveProps(slotProps)), void 0, true)
@@ -5221,7 +5231,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
             key: 0,
             ref: "new-row-button",
             onClick: $options.onNewRowButtonClick,
-            onPointerdown: _cache[7] || (_cache[7] = withModifiers(() => {
+            onPointerdown: _cache[8] || (_cache[8] = withModifiers(() => {
             }, ["stop"])),
             onKeydownUp: $options.onMoveIntoBodyFromBottom
           }, null, 8, ["onClick", "onKeydownUp"])) : createCommentVNode("", true)
@@ -5240,7 +5250,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
     ], 544)
   ]);
 }
-const TableUI = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-ac1ccbfe"]]);
+const TableUI = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-51f46838"]]);
 
 const useTableReady = ({ onReady }) => {
   const autoSizesInitialized = ref(false);