@knime/kds-table 0.6.0 → 0.6.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @knime/kds-table
 
+## 0.6.1
+
+### Patch Changes
+
+- 3b4d3b8: Add search input in action bar
+- Updated dependencies [95a5069]
+- Updated dependencies [ccb4d18]
+  - @knime/kds-components@1.1.2
+  - @knime/kds-styles@1.1.2
+
 ## 0.6.0
 
 ### Minor Changes

package/dist/index.css

@@ -207,7 +207,7 @@ tr {
 }
 
 .kds-table-action-bar {
-&[data-v-4bc7ffb1] {
+&[data-v-96b1acf9] {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -216,24 +216,24 @@ tr {
   padding-left: var(--kds-spacing-container-0-5x);
   border-top: var(--kds-border-base-subtle);
 }
-&.temporary-view[data-v-4bc7ffb1] {
+&.temporary-view[data-v-96b1acf9] {
     background-color: var(--kds-color-background-static-info-muted);
 }
 & .left {
-&[data-v-4bc7ffb1] {
+&[data-v-96b1acf9] {
     display: flex;
     flex: 1 0 0;
     gap: var(--kds-spacing-container-0-5x);
     align-items: center;
     padding: var(--kds-spacing-container-0-12x) 0;
 }
-& .dimension[data-v-4bc7ffb1] {
+& .dimension[data-v-96b1acf9] {
       font: var(--kds-font-base-title-small);
       color: var(--kds-color-text-and-icon-muted);
       white-space: pre;
 }
 }
-& .right[data-v-4bc7ffb1] {
+& .right[data-v-96b1acf9] {
     display: flex;
     gap: var(--kds-spacing-container-0-25x);
     align-items: center;
@@ -243,7 +243,7 @@ tr {
 }
 
 .column-header {
-&[data-v-284bb866] {
+&[data-v-f64d6cbe] {
   /* Need to set position relative here to position the resize handle absolutely within the header cell */
   position: relative;
   display: flex;
@@ -257,62 +257,63 @@ tr {
   text-align: left;
   white-space: nowrap;
 }
-&.header-focused[data-v-284bb866] {
+&.header-focused[data-v-f64d6cbe] {
     background-color: var(--kds-color-focus-background);
 }
-&.colored-header[data-v-284bb866] {
-    /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties -- runtime variable set via inline :style */
+&.colored-header[data-v-f64d6cbe] {
+    /* stylelint-disable csstools/value-no-unknown-custom-properties -- runtime variable set via inline :style */
     background-image: linear-gradient(
       90deg,
       var(--data-cell-color),
       var(--data-cell-color)
     );
+    /* stylelint-enable csstools/value-no-unknown-custom-properties */
     background-repeat: no-repeat;
     background-size: var(--kds-spacing-container-0-25x);
 }
 & .column-header-content {
-&[data-v-284bb866] {
+&[data-v-f64d6cbe] {
     display: flex;
     flex-direction: column;
     justify-content: center;
     width: 100%;
 }
-&[data-v-284bb866]:focus {
+&[data-v-f64d6cbe]:focus {
       outline: none;
 }
-&.with-button-in-header[data-v-284bb866] {
+&.with-button-in-header[data-v-f64d6cbe] {
       width: calc(
         100% - var(--kds-dimension-component-width-1-5x)
       ); /* due to .sub-menu-select-header / .delete-column-button: width */
 }
 & .main-header {
-&[data-v-284bb866] {
+&[data-v-f64d6cbe] {
       display: flex;
 }
-& .header-text-container[data-v-284bb866] {
+& .header-text-container[data-v-f64d6cbe] {
         max-width: 100%;
         overflow: hidden;
         text-overflow: ellipsis;
         font: var(--kds-font-base-title-medium-strong);
 }
 }
-& .sub-header-text-container[data-v-284bb866] {
+& .sub-header-text-container[data-v-f64d6cbe] {
       overflow: hidden;
       text-overflow: ellipsis;
       font: var(--kds-font-base-subtext-small);
 }
 }
-& .menu-button-hidden[data-v-284bb866] {
+& .menu-button-hidden[data-v-f64d6cbe] {
     pointer-events: none;
     opacity: 0;
 }
-& .delete-column-button[data-v-284bb866] {
+& .delete-column-button[data-v-f64d6cbe] {
     display: flex;
     align-items: center;
     width: var(--kds-dimension-component-width-2x);
 }
 & .resize-handle-area {
-&[data-v-284bb866] {
+&[data-v-f64d6cbe] {
     position: absolute;
 
     /* resize handle should range into top border */
@@ -338,14 +339,14 @@ tr {
     cursor: col-resize;
     opacity: 0;
 }
-& .resize-handle[data-v-284bb866] {
+& .resize-handle[data-v-f64d6cbe] {
       border-right: var(--kds-border-resize-handle-hover);
       border-radius: var(--kds-border-radius-container-0-25x);
 }
-&.hover[data-v-284bb866] {
+&.hover[data-v-f64d6cbe] {
       opacity: 1;
 }
-&.drag[data-v-284bb866] {
+&.drag[data-v-f64d6cbe] {
       opacity: 1;
 }
 }
@@ -464,7 +465,7 @@ thead {
 }
 
 .data-cell {
-&[data-v-107a3a8b] {
+&[data-v-8ecc59ac] {
   display: flex;
   font: var(--kds-font-base-interactive-small);
   color: var(--kds-color-text-and-icon-neutral);
@@ -472,27 +473,28 @@ thead {
   user-select: none;
   background-clip: border-box;
 }
-&.in-cell-selection[data-v-107a3a8b] {
+&.in-cell-selection[data-v-8ecc59ac] {
     background-color: var(--kds-color-focus-background);
 }
-&.colored-cell[data-v-107a3a8b] {
-    /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties -- runtime variable set via inline :style */
+&.colored-cell[data-v-8ecc59ac] {
+    /* stylelint-disable csstools/value-no-unknown-custom-properties -- runtime variable set via inline :style */
     background-image: linear-gradient(
       90deg,
       var(--data-cell-color),
       var(--data-cell-color)
     );
+    /* stylelint-enable csstools/value-no-unknown-custom-properties */
     background-repeat: no-repeat;
     background-size: var(--kds-spacing-container-0-25x);
 }
-& .cell-content[data-v-107a3a8b] {
+& .cell-content[data-v-8ecc59ac] {
     display: flex;
     gap: var(--kds-spacing-container-0-25x);
     align-self: flex-start;
     justify-content: space-between;
     width: 100%;
 }
-& .cell-content .cell-text[data-v-107a3a8b] {
+& .cell-content .cell-text[data-v-8ecc59ac] {
     flex: 0 1 auto;
     min-width: 0;
     overflow: hidden;
@@ -501,33 +503,33 @@ thead {
 }
 }
 
-tr[data-v-a60d563f] {
+tr[data-v-8b00de21] {
   display: flex;
 }
 tr.row {
-&[data-v-a60d563f] {
+&[data-v-8b00de21] {
   border-bottom: var(--kds-border-base-subtle);
   }
 & td {
-&[data-v-a60d563f] {
+&[data-v-8b00de21] {
     padding: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     }
 &.select-cell {
-&[data-v-a60d563f] {
+&[data-v-8b00de21] {
       display: flex;
       justify-content: center;
       width: var(--kds-dimension-component-width-2x);
       min-width: var(--kds-dimension-component-width-2x);
       }
-& .select-checkbox[data-v-a60d563f] {
+& .select-checkbox[data-v-8b00de21] {
         /* With this added padding the checkbox appears centered initially */
         padding: var(--kds-spacing-container-0-10x);
 }
 }
 &.deletion-cell {
-&[data-v-a60d563f] {
+&[data-v-8b00de21] {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -535,11 +537,11 @@ tr.row {
       min-width: var(--kds-dimension-component-width-2x);
       opacity: 0;
       }
-&[data-v-a60d563f]:focus-within {
+&[data-v-8b00de21]:focus-within {
         opacity: 1;
 }
 }
-&.action[data-v-a60d563f] {
+&.action[data-v-8b00de21] {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -548,19 +550,21 @@ tr.row {
 }
 }
 &:hover {
-&[data-v-a60d563f] {
+&[data-v-8b00de21] {
     outline: none;
     background-color: var(--kds-color-background-neutral-hover);
+
+    /* stylelint-disable-next-line no-descending-specificity -- hover needs lower specificity but must come after base rule */
     }
-& .deletion-cell[data-v-a60d563f] {
+& .deletion-cell[data-v-8b00de21] {
       opacity: 1;
 }
 }
-& a[data-v-a60d563f] {
+& a[data-v-8b00de21] {
     outline: none;
 }
 }
-.row-drag-handle[data-v-a60d563f] {
+.row-drag-handle[data-v-8b00de21] {
   position: relative;
   bottom: var(--kds-spacing-container-0-37x);
   height: var(--kds-spacing-container-0-37x);
@@ -581,7 +585,7 @@ tr.row {
 }
 }
 
-.wrapper[data-v-ac1ccbfe] {
+.wrapper[data-v-51f46838] {
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -591,7 +595,7 @@ tr.row {
 }
 }
 table {
-&[data-v-ac1ccbfe] {
+&[data-v-51f46838] {
   position: relative;
   display: flex;
   flex-grow: 1;
@@ -599,10 +603,10 @@ table {
   width: 100%;
   min-height: 0;
   }
-&[data-v-ac1ccbfe]:focus {
+&[data-v-51f46838]:focus {
     outline: none;
 }
-& .new-row-footer[data-v-ac1ccbfe] {
+& .new-row-footer[data-v-51f46838] {
     width: 100%;
 }
 }

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, mergeProps, useSlots, createSlots, normalizeProps, guardReactiveProps } from 'vue';
+import { KdsCheckbox, KdsLoadingSkeleton, KdsButton, KdsMenuButton, KdsDropdown, KdsTextInput, KdsMultiSelectDropdown, KdsToggleButton, KdsPopover, KdsIcon, KdsSearchInput, KdsMissingValueIcon } from '@knime/kds-components';
 
 import './index.css';const defaultPageSize = 10;
 const filterComponents = {
@@ -2319,7 +2319,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   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;
@@ -2392,8 +2393,15 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           }, null, 8, ["columns", "col-filter-values"])) : createCommentVNode("", true)
         ]),
         createElementVNode("div", _hoisted_3$2, [
-          __props.actionConfig.settingsItems?.length ? (openBlock(), createBlock(unref(KdsMenuButton), {
+          __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
 	};
@@ -2915,7 +2921,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-f64d6cbe"]]);
 
 const _sfc_main$8 = {
   components: {
@@ -3503,7 +3509,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const CellRenderer = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-107a3a8b"]]);
+const CellRenderer = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-8ecc59ac"]]);
 
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "Cell",
@@ -3897,7 +3903,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-8b00de21"]]);
 
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "CellSelectionOverlay",
@@ -4186,6 +4192,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 +5052,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 +5062,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 +5094,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 +5144,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 +5200,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 +5229,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 +5248,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);