@knime/kds-table 0.6.3 → 0.7.0

package/dist/index.js

@@ -1,21 +1,7 @@
-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 { 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, useSlots, shallowRef, toValue, shallowReadonly, withKeys, withDirectives, mergeProps, createSlots, normalizeProps, guardReactiveProps } from 'vue';
+import { KdsCheckbox, KdsLoadingSkeleton, KdsButton, KdsMenuButton, KdsToggleButton, KdsPopover, KdsDropdown, KdsIcon, KdsSearchInput, vKdsTooltip, KdsMissingValueIcon } from '@knime/kds-components';
 
 import './index.css';const defaultPageSize = 10;
-const filterComponents = {
-  Multiselect: {
-    is: "ControlMultiselect",
-    getInitialValue: () => []
-  },
-  InputField: {
-    is: "FilterInputField",
-    getInitialValue: () => ""
-  },
-  Dropdown: {
-    is: "ControlDropdown",
-    getInitialValue: () => ""
-  }
-};
 const columnTypes = {
   Nominal: "Nominal",
   String: "String",
@@ -27,19 +13,6 @@ const columnTypes = {
   Object: "Object",
   Image: "Image"
 };
-const columnFilterConfigs = {
-  [columnTypes.Nominal]: filterComponents.Multiselect,
-  [columnTypes.String]: filterComponents.InputField,
-  [columnTypes.DateTime]: filterComponents.InputField,
-  [columnTypes.Duration]: filterComponents.InputField,
-  [columnTypes.Number]: filterComponents.InputField,
-  [columnTypes.Boolean]: filterComponents.Dropdown,
-  [columnTypes.Array]: filterComponents.InputField,
-  [columnTypes.Object]: filterComponents.InputField,
-  [columnTypes.Image]: filterComponents.InputField,
-  // @ts-expect-error - undefined key to assign default filter component
-  [void 0]: filterComponents.InputField
-};
 const columnSortText = {
   [columnTypes.Nominal]: {
     ascending: "A to Z",
@@ -2710,8 +2683,6 @@ const modeDefinitions = [
   }
 ];
 Object.assign({}, ...modeDefinitions.map((obj) => ({ [obj.id]: obj })));
-
-const isMac = () => navigator?.userAgent?.toLowerCase()?.includes("mac");
 const yearsPart = "(\\d+)\\s*y(?:ears?)?";
 const monthsPart = "(\\d+)\\s*m(?:o(?:nths?)?)?";
 const weeksPart = "(\\d+)\\s*w(?:eeks?)?";
@@ -2739,6 +2710,8 @@ new RegExp(
 function sleep(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
+
+const isMac = () => navigator?.userAgent?.toLowerCase()?.includes("mac");
 const getMetaOrCtrlKey = () => {
   return isMac() ? "metaKey" : "ctrlKey";
 };
@@ -2776,7 +2749,7 @@ const useStartEditingKeydown = ({
   return { onKeydown };
 };
 
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "TableBodyNavigatable",
   emits: ["moveSelection", "clearSelection", "expandSelectedCell", "startEditing", "bodyFocusin", "bodyFocusout"],
   setup(__props, { emit: __emit }) {
@@ -2859,7 +2832,7 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 
-const TableBodyNavigatable = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-70f2c330"]]);
+const TableBodyNavigatable = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-70f2c330"]]);
 
 const injectionKey$3 = /* @__PURE__ */ Symbol(
   "useHorizontalIndicesAndStyles.ts"
@@ -2964,11 +2937,11 @@ const injectColumnSizes = () => {
   return context;
 };
 
-const _hoisted_1$d = {
+const _hoisted_1$c = {
   key: 0,
   class: "deletion-cell-spacer"
 };
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "EmptyRow",
   props: {
     height: {},
@@ -2992,7 +2965,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
           height: `${__props.height}px`
         })
       }, [
-        __props.tableConfig.enableRowDeletion ? (openBlock(), createElementBlock("td", _hoisted_1$d)) : createCommentVNode("", true),
+        __props.tableConfig.enableRowDeletion ? (openBlock(), createElementBlock("td", _hoisted_1$c)) : createCommentVNode("", true),
         __props.tableConfig.showSelection ? (openBlock(), createElementBlock("td", {
           key: 1,
           class: "select-cell",
@@ -3026,9 +2999,9 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
   }
 });
 
-const EmptyRow = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-f722e2bf"]]);
+const EmptyRow = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-f722e2bf"]]);
 
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "PlaceholderRow",
   props: {
     height: {}
@@ -3045,9 +3018,9 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
   }
 });
 
-const PlaceholderRow = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-df158652"]]);
+const PlaceholderRow = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-df158652"]]);
 
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "VirtualRow",
   props: {
     dataItem: {},
@@ -3212,7 +3185,7 @@ const useResizeScrollSpacer = ({
 };
 
 const HORIZONTAL_BUFFER_PX = 1e3;
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "TableCoreVirtual",
   props: {
     scrollData: {},
@@ -3365,7 +3338,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
               style: normalizeStyle(__props.tableConfig.forceRenderAll ? {} : unref(verticalStyles))
             }, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(renderedRowIndices.value, (rowInd) => {
-                return openBlock(), createBlock(_sfc_main$k, {
+                return openBlock(), createBlock(_sfc_main$i, {
                   key: rowInd,
                   "row-height": __props.scrollConfig.itemSize,
                   compact: __props.scrollConfig.compact,
@@ -3407,7 +3380,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
   }
 });
 
-const TableCoreVirtual = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-45a530bb"]]);
+const TableCoreVirtual = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-45a530bb"]]);
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -3563,7 +3536,7 @@ const useAvailableWidth = ({
   return { innerWidthToBodyWidth, fitsInsideTotalWidth };
 };
 
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "TableCore",
   props: {
     scrollData: {},
@@ -3915,11 +3888,11 @@ const createEditingCellKeydownHandler = ({
   };
 };
 
-const _hoisted_1$c = { class: "page-navigation" };
-const _hoisted_2$8 = { class: "navigation-buttons" };
+const _hoisted_1$b = { class: "page-navigation" };
+const _hoisted_2$7 = { class: "navigation-buttons" };
 const _hoisted_3$4 = { class: "page-count" };
 const _hoisted_4$2 = { class: "navigation-buttons" };
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "PageNavigation",
   props: {
     currentPage: { default: 1 },
@@ -3935,8 +3908,8 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       emit("pageChange", newPageNumber);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$c, [
-        createElementVNode("div", _hoisted_2$8, [
+      return openBlock(), createElementBlock("div", _hoisted_1$b, [
+        createElementVNode("div", _hoisted_2$7, [
           createVNode(unref(KdsButton), {
             variant: "transparent",
             size: "small",
@@ -3978,13 +3951,13 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
   }
 });
 
-const PageNavigation = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-95577571"]]);
+const PageNavigation = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-95577571"]]);
 
-const _hoisted_1$b = {
+const _hoisted_1$a = {
   key: 0,
   class: "subtle"
 };
-const _hoisted_2$7 = {
+const _hoisted_2$6 = {
   key: 1,
   class: "row-range-container"
 };
@@ -3994,7 +3967,7 @@ const _hoisted_4$1 = {
   class: "muted"
 };
 const _hoisted_5 = { class: "subtle" };
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "PageRowRange",
   props: {
     currentItems: { default: 0 },
@@ -4016,7 +3989,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       () => hasMultiplePages.value && __props.currentItems ? `of ${__props.currentItems}` : __props.currentItems
     );
     return (_ctx, _cache) => {
-      return __props.showTableSize && __props.currentItems === 0 ? (openBlock(), createElementBlock("span", _hoisted_1$b, "No data")) : (openBlock(), createElementBlock("div", _hoisted_2$7, [
+      return __props.showTableSize && __props.currentItems === 0 ? (openBlock(), createElementBlock("span", _hoisted_1$a, "No data")) : (openBlock(), createElementBlock("div", _hoisted_2$6, [
         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)
@@ -4025,9 +3998,9 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
   }
 });
 
-const PageRowRange = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-6cdf0c06"]]);
+const PageRowRange = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-6cdf0c06"]]);
 
-const _sfc_main$f = {
+const _sfc_main$d = {
   components: {
     PageNavigation,
     PageRowRange,
@@ -4089,16 +4062,16 @@ const _sfc_main$f = {
   }
 };
 
-const _hoisted_1$a = {
+const _hoisted_1$9 = {
   key: 0,
   class: "page-controls"
 };
-const _hoisted_2$6 = { class: "page-size-menu" };
+const _hoisted_2$5 = { 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 $options.showPageNavigation || $options.pageSizeItems.length ? (openBlock(), createElementBlock("div", _hoisted_1$a, [
+  return $options.showPageNavigation || $options.pageSizeItems.length ? (openBlock(), createElementBlock("div", _hoisted_1$9, [
     createVNode(_component_PageRowRange, {
       class: "page-row-range",
       "current-items": $props.tableState.tableSizes?.currentNumRows,
@@ -4115,7 +4088,7 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
       "has-previous-page": $options.hasPreviousPage,
       onPageChange: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("pageChange", $event))
     }, null, 8, ["current-page", "total-pages", "has-next-page", "has-previous-page"])) : createCommentVNode("", true),
-    createElementVNode("div", _hoisted_2$6, [
+    createElementVNode("div", _hoisted_2$5, [
       $options.pageSizeItems.length ? (openBlock(), createBlock(_component_KdsMenuButton, {
         key: 0,
         items: $options.pageSizeItems,
@@ -4128,261 +4101,9 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ])) : createCommentVNode("", true);
 }
-const PageControls = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$4], ["__scopeId", "data-v-bf51fe76"]]);
+const PageControls = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$4], ["__scopeId", "data-v-bf51fe76"]]);
 
-const defaultValueFor = (is) => {
-  if (is === "ControlMultiselect") {
-    return [];
-  }
-  return "";
-};
-const missingValueFor = (is) => {
-  if (is === "ControlMultiselect") {
-    return [null];
-  }
-  return null;
-};
-const isMissingMode = (config, value) => {
-  if (config.is === "ControlMultiselect") {
-    return Array.isArray(value) && value.length === 1 && value[0] === null;
-  }
-  return value === null;
-};
-const isActive = (config, value) => {
-  if (!config) {
-    return false;
-  }
-  if (isMissingMode(config, value)) {
-    return true;
-  }
-  if (config.is === "ControlMultiselect") {
-    return Array.isArray(value) && value.length > 0;
-  }
-  return value !== void 0 && value !== "";
-};
-
-const _hoisted_1$9 = {
-  key: 0,
-  class: "rows"
-};
-const _hoisted_2$5 = {
-  key: 1,
-  class: "value"
-};
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
-  __name: "FilterControlBody",
-  props: {
-    columns: {},
-    colFilterValues: {}
-  },
-  emits: ["columnFilter"],
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const MODE_OPTIONS = [
-      { id: "contains", text: "contains" },
-      { id: "missing", text: "is missing" }
-    ];
-    const withFilteredPossibleValues = (config) => {
-      if (config.is === "ControlDropdown" || config.is === "ControlMultiselect") {
-        return {
-          ...config,
-          possibleValues: config.possibleValues.filter(
-            (option) => option.id !== null && option.id !== void 0
-          )
-        };
-      }
-      return config;
-    };
-    const filterableColumnIndices = computed(
-      () => (props.columns ?? []).map((column, index) => ({ config: column.filterConfig, index })).filter(({ config }) => config !== void 0).map(({ index }) => index)
-    );
-    const trackedIndices = ref([]);
-    onMounted(() => {
-      trackedIndices.value = (props.columns ?? []).map((column, index) => ({
-        index,
-        config: column.filterConfig,
-        value: props.colFilterValues[column.id]
-      })).filter(({ config, value }) => isActive(config, value)).map(({ index }) => index);
-    });
-    const visibleFilters = computed(
-      () => trackedIndices.value.map((index, rowPosition) => {
-        const column = props.columns?.[index];
-        const config = column?.filterConfig;
-        const value = props.colFilterValues[column.id];
-        if (!config) {
-          return null;
-        }
-        return {
-          rowPosition,
-          index,
-          config: withFilteredPossibleValues(config),
-          value
-        };
-      }).filter(
-        (entry) => entry !== null
-      )
-    );
-    const canAddMore = computed(
-      () => trackedIndices.value.length < filterableColumnIndices.value.length
-    );
-    const columnDropdownOptionsFor = (currentIndex) => filterableColumnIndices.value.filter(
-      (idx) => idx === currentIndex || !trackedIndices.value.includes(idx)
-    ).map((idx) => ({
-      id: String(idx),
-      text: props.columns?.[idx]?.header ?? ""
-    }));
-    const onColumnChange = (rowPosition, newIdAsString) => {
-      const newIndex = Number(newIdAsString);
-      const oldIndex = trackedIndices.value[rowPosition];
-      if (oldIndex === newIndex) {
-        return;
-      }
-      const oldColumn = props.columns?.[oldIndex];
-      const oldConfig = oldColumn?.filterConfig;
-      const oldValue = props.colFilterValues[oldColumn?.id];
-      if (oldConfig && isActive(oldConfig, oldValue)) {
-        emit("columnFilter", oldIndex, defaultValueFor(oldConfig.is));
-      }
-      trackedIndices.value = trackedIndices.value.map(
-        (idx, pos) => pos === rowPosition ? newIndex : idx
-      );
-    };
-    const onModeChange = (index, config, newMode) => {
-      if (newMode === "missing") {
-        emit("columnFilter", index, missingValueFor(config.is));
-      } else {
-        emit("columnFilter", index, defaultValueFor(config.is));
-      }
-    };
-    const onAddCriterion = () => {
-      const nextFree = filterableColumnIndices.value.find(
-        (idx) => !trackedIndices.value.includes(idx)
-      );
-      if (nextFree === void 0) {
-        return;
-      }
-      trackedIndices.value = [...trackedIndices.value, nextFree];
-    };
-    const onDeleteRow = (rowPosition) => {
-      const index = trackedIndices.value[rowPosition];
-      const column = props.columns?.[index];
-      const config = column?.filterConfig;
-      const value = props.colFilterValues[column?.id];
-      if (isActive(config, value)) {
-        emit("columnFilter", index, defaultValueFor(config.is));
-      }
-      trackedIndices.value = trackedIndices.value.filter(
-        (_, pos) => pos !== rowPosition
-      );
-    };
-    const valueRefs = /* @__PURE__ */ new Map();
-    const setValueRef = (columnIndex, el) => {
-      if (el) {
-        valueRefs.set(columnIndex, el);
-      } else {
-        valueRefs.delete(columnIndex);
-      }
-    };
-    const focusValueOfColumn = (columnIndex) => {
-      valueRefs.get(columnIndex)?.focus?.();
-    };
-    const addAndFocusColumn = async (columnIndex) => {
-      if (!filterableColumnIndices.value.includes(columnIndex)) {
-        return;
-      }
-      if (!trackedIndices.value.includes(columnIndex)) {
-        trackedIndices.value = [...trackedIndices.value, columnIndex];
-        await nextTick();
-      }
-      focusValueOfColumn(columnIndex);
-    };
-    __expose({ addAndFocusColumn });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
-        visibleFilters.value.length ? (openBlock(), createElementBlock("div", _hoisted_1$9, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(visibleFilters.value, ({ rowPosition, index, config, value }) => {
-            return openBlock(), createElementBlock("div", {
-              key: index,
-              class: "row"
-            }, [
-              createVNode(unref(KdsDropdown), {
-                class: "column",
-                "model-value": String(index),
-                placeholder: "Select",
-                "possible-values": columnDropdownOptionsFor(index),
-                ariaLabel: "Select column to filter",
-                "onUpdate:modelValue": ($event) => onColumnChange(rowPosition, $event)
-              }, null, 8, ["model-value", "possible-values", "onUpdate:modelValue"]),
-              createVNode(unref(KdsDropdown), {
-                class: "mode",
-                "model-value": unref(isMissingMode)(config, value) ? "missing" : "contains",
-                placeholder: "Mode",
-                "possible-values": MODE_OPTIONS,
-                ariaLabel: "Select filter mode",
-                "onUpdate:modelValue": ($event) => onModeChange(index, config, $event)
-              }, null, 8, ["model-value", "onUpdate:modelValue"]),
-              !unref(isMissingMode)(config, value) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                config.is === "FilterInputField" ? (openBlock(), createBlock(unref(KdsTextInput), {
-                  key: 0,
-                  ref_for: true,
-                  ref: (el) => setValueRef(index, el),
-                  class: "value",
-                  "model-value": value ?? "",
-                  placeholder: "value",
-                  ariaLabel: "Enter filter value",
-                  "onUpdate:modelValue": ($event) => emit("columnFilter", index, $event)
-                }, null, 8, ["model-value", "onUpdate:modelValue"])) : config.is === "ControlDropdown" ? (openBlock(), createBlock(unref(KdsDropdown), {
-                  key: 1,
-                  ref_for: true,
-                  ref: (el) => setValueRef(index, el),
-                  class: "value",
-                  "model-value": value ?? "",
-                  placeholder: "value",
-                  "possible-values": config.possibleValues,
-                  ariaLabel: "Select filter value",
-                  "onUpdate:modelValue": ($event) => emit("columnFilter", index, $event)
-                }, null, 8, ["model-value", "possible-values", "onUpdate:modelValue"])) : config.is === "ControlMultiselect" ? (openBlock(), createBlock(unref(KdsMultiSelectDropdown), {
-                  key: 2,
-                  ref_for: true,
-                  ref: (el) => setValueRef(index, el),
-                  class: "value",
-                  "model-value": value ?? [],
-                  placeholder: "value",
-                  "possible-values": config.possibleValues,
-                  ariaLabel: "Select filter values",
-                  "onUpdate:modelValue": ($event) => emit("columnFilter", index, $event)
-                }, null, 8, ["model-value", "possible-values", "onUpdate:modelValue"])) : createCommentVNode("", true)
-              ], 64)) : (openBlock(), createElementBlock("span", _hoisted_2$5)),
-              createVNode(unref(KdsButton), {
-                class: "trash",
-                "aria-label": "Remove filter",
-                "leading-icon": "trash",
-                size: "medium",
-                variant: "transparent",
-                ariaLabel: "Remove filter criterion",
-                onClick: ($event) => onDeleteRow(rowPosition)
-              }, null, 8, ["onClick"])
-            ]);
-          }), 128))
-        ])) : createCommentVNode("", true),
-        canAddMore.value ? (openBlock(), createBlock(unref(KdsButton), {
-          key: 1,
-          class: "add",
-          label: "Add criterion",
-          "leading-icon": "plus",
-          size: "small",
-          variant: "outlined",
-          onClick: onAddCriterion
-        })) : createCommentVNode("", true)
-      ], 64);
-    };
-  }
-});
-
-const FilterControlBody = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-e5d5e963"]]);
-
-const _sfc_main$d = {  };
+const _sfc_main$c = {  };
 
 const _hoisted_1$8 = { class: "popover" };
 const _hoisted_2$4 = { class: "header" };
@@ -4398,7 +4119,7 @@ function _sfc_render$3(_ctx, _cache) {
     ])
   ]))
 }
-const PopoverContainer = /*#__PURE__*/_export_sfc(_sfc_main$d, [['render',_sfc_render$3],['__scopeId',"data-v-349cd3ba"]]);
+const PopoverContainer = /*#__PURE__*/_export_sfc(_sfc_main$c, [['render',_sfc_render$3],['__scopeId',"data-v-349cd3ba"]]);
 
 const useButtonPopoverInteraction = ({
   keepButtonActive
@@ -4429,98 +4150,6 @@ const useButtonPopoverInteraction = ({
   };
 };
 
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
-  __name: "FilterControl",
-  props: {
-    columns: {},
-    colFilterValues: {}
-  },
-  emits: ["columnFilter"],
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const filterPopoverRef = useTemplateRef("filterPopoverRef");
-    const filterBodyRef = useTemplateRef("filterBodyRef");
-    const hasActiveFilter = computed(
-      () => props.columns?.some(
-        (column) => isActive(column.filterConfig, props.colFilterValues[column.id])
-      ) ?? false
-    );
-    const {
-      buttonIsActive,
-      showPopover,
-      onButtonClick,
-      onPopoverToggle,
-      openPopover: openPopoverInternal
-    } = useButtonPopoverInteraction({ keepButtonActive: hasActiveFilter });
-    const openPopover = async (columnIndex) => {
-      openPopoverInternal();
-      if (columnIndex === void 0) {
-        return;
-      }
-      await nextTick();
-      filterBodyRef.value?.addAndFocusColumn(columnIndex);
-    };
-    __expose({ openPopover });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(unref(KdsToggleButton), {
-          modelValue: unref(buttonIsActive),
-          "onUpdate:modelValue": [
-            _cache[0] || (_cache[0] = ($event) => isRef(buttonIsActive) ? buttonIsActive.value = $event : null),
-            unref(onButtonClick)
-          ],
-          label: "Filter",
-          size: "small",
-          variant: "transparent",
-          "leading-icon": "filter",
-          style: normalizeStyle(filterPopoverRef.value?.anchorStyle),
-          "aria-controls": filterPopoverRef.value?.popoverId,
-          "aria-expanded": unref(showPopover),
-          "aria-haspopup": "dialog"
-        }, null, 8, ["modelValue", "style", "aria-controls", "aria-expanded", "onUpdate:modelValue"]),
-        createVNode(unref(KdsPopover), {
-          ref_key: "filterPopoverRef",
-          ref: filterPopoverRef,
-          modelValue: unref(showPopover),
-          "onUpdate:modelValue": [
-            _cache[2] || (_cache[2] = ($event) => isRef(showPopover) ? showPopover.value = $event : null),
-            unref(onPopoverToggle)
-          ],
-          "aria-label": "Filter",
-          "popover-type": "auto",
-          role: "dialog",
-          "stretch-inline": "",
-          "max-inline-size": "var(--kds-dimension-component-width-32x)"
-        }, {
-          default: withCtx(() => [
-            createVNode(PopoverContainer, null, {
-              header: withCtx(() => [
-                createVNode(unref(KdsIcon), {
-                  name: "filter",
-                  size: "small"
-                }),
-                _cache[3] || (_cache[3] = createTextVNode(" Filter ", -1))
-              ]),
-              body: withCtx(() => [
-                createVNode(FilterControlBody, {
-                  ref_key: "filterBodyRef",
-                  ref: filterBodyRef,
-                  columns: __props.columns,
-                  "col-filter-values": __props.colFilterValues,
-                  onColumnFilter: _cache[1] || (_cache[1] = (colInd, value) => emit("columnFilter", colInd, value))
-                }, null, 8, ["columns", "col-filter-values"])
-              ]),
-              _: 1
-            })
-          ]),
-          _: 1
-        }, 8, ["modelValue", "onUpdate:modelValue"])
-      ], 64);
-    };
-  }
-});
-
 const _hoisted_1$7 = { class: "body" };
 const NONE_COLUMN_VALUE = "None";
 const _sfc_main$b = /* @__PURE__ */ defineComponent({
@@ -4659,19 +4288,18 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     showTableSize: { type: Boolean, default: true },
     actionConfig: {},
     colSortValues: { default: () => [] },
-    colFilterValues: {},
-    sortControlOptions: {},
-    columns: {}
+    sortControlOptions: {}
   },
-  emits: ["resetTemporaryView", "columnFilter", "onColumnSort", "update:searchTerm"],
-  setup(__props, { expose: __expose, emit: __emit }) {
+  emits: ["resetTemporaryView", "onColumnSort", "update:searchTerm"],
+  setup(__props, { emit: __emit }) {
+    const slots = useSlots();
     const viewType = computed(() => __props.actionState?.viewType ?? "DEFAULT");
     const isTemporaryView = computed(
       () => viewType.value === "TEMP_VIEW" || viewType.value === "PREVIEW"
     );
     const showResetButton = computed(() => viewType.value === "TEMP_VIEW");
     const hasContent = computed(
-      () => isTemporaryView.value || __props.showTableSize || __props.actionConfig.enableSearch || __props.actionConfig.enableSorting || __props.actionConfig.enableFilters || __props.actionConfig.forceShow
+      () => isTemporaryView.value || __props.showTableSize || __props.actionConfig.enableSearch || __props.actionConfig.enableSorting || __props.actionConfig.forceShow || Boolean(slots["action-bar-left"])
     );
     const formatCount = (label, total, current) => {
       const appendTotal = current !== void 0 && current < total;
@@ -4699,13 +4327,6 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       return `${rowText}   |   ${columnText}`;
     });
     const emit = __emit;
-    const filterControlRef = useTemplateRef("filterControlRef");
-    const openFilterControl = (columnIndex) => {
-      filterControlRef.value?.openPopover(columnIndex);
-    };
-    __expose({
-      openFilterControl
-    });
     return (_ctx, _cache) => {
       return hasContent.value ? (openBlock(), createElementBlock("div", {
         key: 0,
@@ -4719,14 +4340,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             "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(_sfc_main$c, {
-            key: 2,
-            ref_key: "filterControlRef",
-            ref: filterControlRef,
-            columns: __props.columns,
-            "col-filter-values": __props.colFilterValues,
-            onColumnFilter: _cache[1] || (_cache[1] = (colInd, value) => emit("columnFilter", colInd, value))
-          }, null, 8, ["columns", "col-filter-values"])) : createCommentVNode("", true)
+          renderSlot(_ctx.$slots, "action-bar-left", {}, void 0, true)
         ]),
         createElementVNode("div", _hoisted_3$1, [
           __props.actionConfig.enableSearch ? (openBlock(), createBlock(unref(KdsSearchInput), {
@@ -4734,7 +4348,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             ariaLabel: "Search table",
             size: "small",
             "model-value": __props.actionState?.searchTerm ?? "",
-            "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _ctx.$emit("update:searchTerm", $event))
+            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.$emit("update:searchTerm", $event))
           }, null, 8, ["model-value"])) : createCommentVNode("", true),
           __props.actionConfig.settingsItems?.length ? (openBlock(), createBlock(unref(KdsMenuButton), {
             key: 1,
@@ -4750,7 +4364,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             size: "small",
             variant: "transparent",
             "leading-icon": "x-close",
-            onClick: _cache[3] || (_cache[3] = ($event) => emit("resetTemporaryView"))
+            onClick: _cache[2] || (_cache[2] = ($event) => emit("resetTemporaryView"))
           })) : createCommentVNode("", true)
         ])
       ], 2)) : createCommentVNode("", true);
@@ -4758,24 +4372,16 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   }
 });
 
-const TableActionBar = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-9181ec3b"]]);
+const TableActionBar = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-a70d7b02"]]);
 
 const useHeaderMenuItems = ({
   enableSorting,
-  enableFilters,
-  filterConfig,
-  filterValue,
   sortDirection,
-  headerSubMenuItems,
   sortTexts,
-  onColumnSort,
-  openFilterControl,
-  clearFilter
+  additionalMenuItems,
+  onColumnSort
 }) => {
   const staticItems = [];
-  const hasDynamicItems = Boolean(headerSubMenuItems?.length);
-  const showFilterItem = enableFilters && filterConfig !== void 0;
-  const filterIsActive = showFilterItem && isActive(filterConfig, filterValue);
   if (enableSorting) {
     staticItems.push({
       id: "table-header-sort",
@@ -4784,7 +4390,6 @@ const useHeaderMenuItems = ({
         type: "icon",
         name: "sort-ascending"
       },
-      separator: !showFilterItem && hasDynamicItems,
       children: [
         {
           id: "sort-asc",
@@ -4813,36 +4418,7 @@ const useHeaderMenuItems = ({
       ]
     });
   }
-  if (showFilterItem) {
-    if (filterIsActive) {
-      staticItems.push({
-        id: "table-header-clear-filter",
-        text: "Clear filter",
-        separator: hasDynamicItems,
-        accessory: {
-          type: "icon",
-          name: "filter"
-        },
-        handler: (_item, _event) => {
-          clearFilter();
-        }
-      });
-    } else {
-      staticItems.push({
-        id: "table-header-filter",
-        text: "Filter by this column",
-        separator: hasDynamicItems,
-        accessory: {
-          type: "icon",
-          name: "filter"
-        },
-        handler: (_item, _event) => {
-          openFilterControl();
-        }
-      });
-    }
-  }
-  const menuItems = [...staticItems, ...headerSubMenuItems ?? []];
+  const menuItems = [...staticItems, ...additionalMenuItems ?? []];
   return menuItems.length ? menuItems : void 0;
 };
 
@@ -4997,7 +4573,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "HeaderCell",
   props: {
     column: {},
-    colFilterValue: {},
+    additionalMenuItems: {},
     tableConfig: {},
     actionConfig: {},
     sortDirection: {},
@@ -5007,7 +4583,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     otherColumnResizing: { type: Boolean },
     getDragHandleHeight: { type: Function }
   },
-  emits: ["onColumnSort", "openActionBarFilterControl", "clearColumnFilter", "onHeaderCellFocus", "onHeaderCellBlur", "onHeaderClick", "onKeydownTab", "onKeydownLeft", "onKeydownRight", "onKeydownDown", "onHeaderCellKeydown", "onDeleteColumn", "columnResizeStart", "columnResizeEnd", "columnResize", "allColumnsResize"],
+  emits: ["onColumnSort", "onHeaderCellFocus", "onHeaderCellBlur", "onHeaderClick", "onKeydownTab", "onKeydownLeft", "onKeydownRight", "onKeydownDown", "onHeaderCellKeydown", "onDeleteColumn", "columnResizeStart", "columnResizeEnd", "columnResize", "allColumnsResize"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const colSizeCSSVar = computed(() => getColSizeCSSVar(props.index));
@@ -5021,16 +4597,11 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     const columnMenuButton = useTemplateRef(columnMenuButtonRef);
     const subMenuItems = computed(
       () => useHeaderMenuItems({
-        enableFilters: Boolean(props.actionConfig.enableFilters),
-        filterConfig: props.column.filterConfig,
-        filterValue: props.colFilterValue,
         enableSorting: Boolean(props.actionConfig.enableSorting) && !props.column.isNotSortable,
         sortDirection: props.sortDirection,
         sortTexts: columnSortText[props.column.type ?? "default"],
-        headerSubMenuItems: props.column.headerSubMenuItems,
-        onColumnSort: (direction) => emit("onColumnSort", direction),
-        openFilterControl: () => emit("openActionBarFilterControl"),
-        clearFilter: () => emit("clearColumnFilter")
+        additionalMenuItems: props.additionalMenuItems,
+        onColumnSort: (direction) => emit("onColumnSort", direction)
       })
     );
     const resizeHandleHovered = ref(false);
@@ -5256,7 +4827,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const HeaderCell = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-04d0c31b"]]);
+const HeaderCell = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-31a6758f"]]);
 
 const _sfc_main$8 = {
   components: {
@@ -5277,9 +4848,9 @@ const _sfc_main$8 = {
       type: Array,
       default: () => []
     },
-    colFilterValues: {
-      type: Object,
-      default: () => ({})
+    additionalHeaderMenuItems: {
+      type: Array,
+      default: () => []
     },
     colSortValues: {
       type: Array,
@@ -5312,8 +4883,6 @@ const _sfc_main$8 = {
     columnResizeStart: () => true,
     allColumnsResize: (newSize) => true,
     columnSort: (index, direction) => true,
-    openActionBarFilterControl: (index) => true,
-    clearColumnFilter: (index) => true,
     moveDownFromHeaderCell: (index) => true,
     headerCellSelect: (index) => true,
     "update:newColumnButtonWidth": (width) => true,
@@ -5436,12 +5005,6 @@ const _sfc_main$8 = {
     onColumnSort(columnIndex, direction) {
       this.$emit("columnSort", columnIndex, direction);
     },
-    onOpenActionBarFilterControl(columnIndex) {
-      this.$emit("openActionBarFilterControl", columnIndex);
-    },
-    onClearColumnFilter(columnIndex) {
-      this.$emit("clearColumnFilter", columnIndex);
-    },
     onNewColumnButtonClick(event) {
       this.$emit("newColumnButtonClick", event);
     },
@@ -5535,7 +5098,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
           ref_for: true,
           ref: `headerCell-${ind}`,
           column,
-          "col-filter-value": $props.colFilterValues[column.id],
+          "additional-menu-items": $props.additionalHeaderMenuItems[ind] ?? [],
           "table-config": $props.tableConfig,
           "action-config": $props.actionConfig,
           "sort-direction": $options.sortDirection(ind),
@@ -5554,8 +5117,6 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
           onOnHeaderCellKeydown: ($event) => $setup.onHeaderCellKeydown($event, ind),
           onOnDeleteColumn: ($event) => $options.onDeleteColumn(ind),
           onOnColumnSort: ($event) => $options.onColumnSort(ind, $event),
-          onOpenActionBarFilterControl: ($event) => $options.onOpenActionBarFilterControl(ind),
-          onClearColumnFilter: ($event) => $options.onClearColumnFilter(ind),
           onColumnResizeStart: ($event) => $options.onColumnResizeStart(ind),
           onColumnResizeEnd: $options.onColumnResizeEnd,
           onColumnResize: ($event) => $options.onColumnResize(ind, $event),
@@ -5565,7 +5126,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
             renderSlot(_ctx.$slots, "subHeader", mergeProps({ ref_for: true }, slotProps, { columnIndex: ind }), void 0, true)
           ]),
           _: 2
-        }, 1032, ["column", "col-filter-value", "table-config", "action-config", "sort-direction", "index", "focused", "selected", "other-column-resizing", "get-drag-handle-height", "onOnHeaderCellFocus", "onOnHeaderCellBlur", "onOnHeaderClick", "onOnKeydownTab", "onOnKeydownLeft", "onOnKeydownRight", "onOnKeydownDown", "onOnHeaderCellKeydown", "onOnDeleteColumn", "onOnColumnSort", "onOpenActionBarFilterControl", "onClearColumnFilter", "onColumnResizeStart", "onColumnResizeEnd", "onColumnResize", "onAllColumnsResize"]);
+        }, 1032, ["column", "additional-menu-items", "table-config", "action-config", "sort-direction", "index", "focused", "selected", "other-column-resizing", "get-drag-handle-height", "onOnHeaderCellFocus", "onOnHeaderCellBlur", "onOnHeaderClick", "onOnKeydownTab", "onOnKeydownLeft", "onOnKeydownRight", "onOnKeydownDown", "onOnHeaderCellKeydown", "onOnDeleteColumn", "onOnColumnSort", "onColumnResizeStart", "onColumnResizeEnd", "onColumnResize", "onAllColumnsResize"]);
       }), 128)),
       $props.showNewColumnButton ? (openBlock(), createElementBlock("th", {
         key: 2,
@@ -5595,7 +5156,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-302dfb0e"]]);
+const Header = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$2], ["__scopeId", "data-v-a97dc625"]]);
 
 const _hoisted_1$3 = { class: "sticky-container" };
 const buttonRef = "button";
@@ -5847,7 +5408,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const CellRenderer = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-2b17463f"]]);
+const CellRenderer = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-e7fb7b49"]]);
 
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "Cell",
@@ -6406,7 +5967,7 @@ const _sfc_main$1 = {
     Row,
     // TablePopover,
     CellSelectionOverlay,
-    TableCore: _sfc_main$i,
+    TableCore: _sfc_main$g,
     NewRowButton,
     TableActionBar
   },
@@ -6456,10 +6017,10 @@ const _sfc_main$1 = {
       type: Array,
       required: true
     },
-    /** Per-column filter values, keyed by column id. */
-    colFilterValues: {
-      type: Object,
-      default: () => ({})
+    /** Additional per-column header menu items (index-aligned with columns), appended after sort items. */
+    additionalHeaderMenuItems: {
+      type: Array,
+      default: () => []
     },
     /** Active sorts, ordered by sort priority. */
     colSortValues: {
@@ -6520,7 +6081,6 @@ const _sfc_main$1 = {
     pageChange: (newPageNumber) => true,
     pageSizeUpdate: (newPageSize) => true,
     columnSort: (colInd, sortDirection) => true,
-    columnFilter: (colInd, value) => true,
     selectAll: (selected) => true,
     rowSelect: (selected, rowInd, groupInd, isTop) => true,
     tableInput: (event) => true,
@@ -7363,15 +6923,6 @@ const _sfc_main$1 = {
     onNewColumnButtonClick(event) {
       event.stopPropagation();
       this.$emit("newColumnButtonClick");
-    },
-    openActionBarFilterControl(columnIndex) {
-      this.$refs.actionBar?.openFilterControl(columnIndex);
-    },
-    clearColumnFilter(columnIndex) {
-      const config = this.columns[columnIndex].filterConfig;
-      if (config) {
-        this.$emit("columnFilter", columnIndex, defaultValueFor(config.is));
-      }
     }
   }
 };
@@ -7388,32 +6939,36 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", _hoisted_1, [
     $props.actionConfig ? (openBlock(), createBlock(_component_TableActionBar, {
       key: 0,
-      ref: "actionBar",
       "table-sizes": $props.tableState.tableSizes,
       "action-state": $props.actionState,
       "row-label": $props.tableConfig.rowLabel,
       "show-table-size": $props.tableConfig.showTableSize,
       "action-config": $props.actionConfig,
       "col-sort-values": $props.colSortValues,
-      "col-filter-values": $props.colFilterValues,
       "sort-control-options": $options.sortControlOptions,
-      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,
-      "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),
+      "onUpdate:searchTerm": _cache[1] || (_cache[1] = ($event) => _ctx.$emit("update:searchTerm", $event))
+    }, createSlots({ _: 2 }, [
+      _ctx.$slots["action-bar-left"] ? {
+        name: "action-bar-left",
+        fn: withCtx(() => [
+          renderSlot(_ctx.$slots, "action-bar-left", {}, void 0, true)
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1032, ["table-sizes", "action-state", "row-label", "show-table-size", "action-config", "col-sort-values", "sort-control-options", "onOnColumnSort"])) : createCommentVNode("", true),
     createElementVNode("table", {
       ref: "wrapper",
       tabindex: -1,
-      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()),
+      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()),
       onKeydown: [
-        _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"]))
+        _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"]))
       ]
     }, [
       createVNode(_component_TableCore, {
@@ -7432,13 +6987,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[9] || (_cache[9] = ($event) => _ctx.$emit("update:available-width", $event)),
+        "onUpdate:availableWidth": _cache[8] || (_cache[8] = ($event) => _ctx.$emit("update:available-width", $event)),
         onMoveSelection: $options.onKeyboardMoveSelection,
         onClearSelection: $setup.clearCellSelection,
         onExpandSelectedCell: $options.expandSelectedCell,
         onStartEditing: $options.onStartEditingCell,
-        onBodyFocusin: _cache[10] || (_cache[10] = ($event) => $setup.changeFocus(true)),
-        onBodyFocusout: _cache[11] || (_cache[11] = ($event) => $options.onTableBodyFocusOut())
+        onBodyFocusin: _cache[9] || (_cache[9] = ($event) => $setup.changeFocus(true)),
+        onBodyFocusout: _cache[10] || (_cache[10] = ($event) => $options.onTableBodyFocusOut())
       }, {
         row: withCtx(({ row, groupInd, rowInd }) => [
           createVNode(_component_Row, {
@@ -7482,10 +7037,10 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
                 colInd: ind,
                 initialValue: $setup.editingCellInitialValue,
                 cellElement,
-                onKeydown: _cache[3] || (_cache[3] = (event) => $setup.createEditingCellKeydownHandler({
+                onKeydown: _cache[2] || (_cache[2] = (event) => $setup.createEditingCellKeydownHandler({
                   moveSelection: $options.onKeyboardMoveSelectionFromEditingCell
                 })(event)),
-                onClickAway: _cache[4] || (_cache[4] = (...args) => $setup.stopEditingCell && $setup.stopEditingCell(...args))
+                onClickAway: _cache[3] || (_cache[3] = (...args) => $setup.stopEditingCell && $setup.stopEditingCell(...args))
               }, void 0, true)
             ]),
             _: 2
@@ -7514,7 +7069,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
             "table-config": $props.tableConfig,
             "action-config": $props.actionConfig,
             columns: $props.columns,
-            "col-filter-values": $props.colFilterValues,
+            "additional-header-menu-items": $props.additionalHeaderMenuItems,
             "col-sort-values": $props.colSortValues,
             "is-selected": Boolean($props.tableState.totalSelected),
             "get-drag-handle-height": getDragHandleHeight,
@@ -7528,8 +7083,6 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
             "selected-header-index": $options.selectedHeaderIndex,
             onHeaderSelect: $options.onSelectAll,
             onColumnSort: $options.onColumnSort,
-            onOpenActionBarFilterControl: $options.openActionBarFilterControl,
-            onClearColumnFilter: $options.clearColumnFilter,
             onDeleteColumn: $options.onDeleteColumn,
             onColumnResize: $options.onColumnResize,
             onAllColumnsResize: $options.onAllColumnsResize,
@@ -7538,17 +7091,17 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
             onMoveDownFromHeaderCell: $options.onMoveDownFromHeaderCell,
             onHeaderCellSelect: $options.onHeaderCellSelect,
             onHeaderCellDeselect: $options.onHeaderCellDeselect,
-            onHeaderCellStartEditing: _cache[5] || (_cache[5] = (columnIndex, initialValue) => _ctx.$emit("headerCellStartEditing", columnIndex, initialValue)),
+            onHeaderCellStartEditing: _cache[4] || (_cache[4] = (columnIndex, initialValue) => _ctx.$emit("headerCellStartEditing", columnIndex, initialValue)),
             "onUpdate:newColumnButtonWidth": $options.onUpdateNewColumnButtonWidth,
             onNewColumnButtonClick: $options.onNewColumnButtonClick,
-            onSelectionKeydownDown: _cache[6] || (_cache[6] = ($event) => $options.onHeaderSelectionKeydownDown()),
-            onNewColumnButtonKeydownLeft: _cache[7] || (_cache[7] = ($event) => $options.onMoveIntoBodyFromRight())
+            onSelectionKeydownDown: _cache[5] || (_cache[5] = ($event) => $options.onHeaderSelectionKeydownDown()),
+            onNewColumnButtonKeydownLeft: _cache[6] || (_cache[6] = ($event) => $options.onMoveIntoBodyFromRight())
           }, {
             subHeader: withCtx((slotProps) => [
               renderSlot(_ctx.$slots, "subHeader", normalizeProps(guardReactiveProps(slotProps)), void 0, true)
             ]),
             _: 3
-          }, 8, ["style", "table-config", "action-config", "columns", "col-filter-values", "col-sort-values", "is-selected", "get-drag-handle-height", "class", "show-new-column-button", "selected-header-index", "onHeaderSelect", "onColumnSort", "onOpenActionBarFilterControl", "onClearColumnFilter", "onDeleteColumn", "onColumnResize", "onAllColumnsResize", "onColumnResizeStart", "onColumnResizeEnd", "onMoveDownFromHeaderCell", "onHeaderCellSelect", "onHeaderCellDeselect", "onUpdate:newColumnButtonWidth", "onNewColumnButtonClick"])
+          }, 8, ["style", "table-config", "action-config", "columns", "additional-header-menu-items", "col-sort-values", "is-selected", "get-drag-handle-height", "class", "show-new-column-button", "selected-header-index", "onHeaderSelect", "onColumnSort", "onDeleteColumn", "onColumnResize", "onAllColumnsResize", "onColumnResizeStart", "onColumnResizeEnd", "onMoveDownFromHeaderCell", "onHeaderCellSelect", "onHeaderCellDeselect", "onUpdate:newColumnButtonWidth", "onNewColumnButtonClick"])
         ]),
         "cell-selection-overlay": withCtx(() => [
           $setup.rectMinMax && !$setup.isEditingCell && $options.selectedHeaderIndex === null ? (openBlock(), createBlock(_component_CellSelectionOverlay, {
@@ -7567,7 +7120,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
             key: 0,
             ref: "new-row-button",
             onClick: $options.onNewRowButtonClick,
-            onPointerdown: _cache[8] || (_cache[8] = withModifiers(() => {
+            onPointerdown: _cache[7] || (_cache[7] = withModifiers(() => {
             }, ["stop"])),
             onKeydownUp: $options.onMoveIntoBodyFromBottom
           }, null, 8, ["onClick", "onKeydownUp"])) : createCommentVNode("", true)
@@ -7586,7 +7139,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-5dec2b59"]]);
+const TableUI = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-d531fa0a"]]);
 
 const useTableReady = ({ onReady }) => {
   const autoSizesInitialized = ref(false);
@@ -7660,9 +7213,9 @@ const _sfc_main = {
       type: Object,
       default: void 0
     },
-    colFilterValues: {
-      type: Object,
-      default: () => ({})
+    additionalHeaderMenuItems: {
+      type: Array,
+      default: () => []
     },
     colSortValues: {
       type: Array,
@@ -8055,7 +7608,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       "current-selection": $props.currentSelection,
       "current-bottom-selection": $props.currentBottomSelection,
       columns: $props.columns,
-      "col-filter-values": $props.colFilterValues,
+      "additional-header-menu-items": $props.additionalHeaderMenuItems,
       "col-sort-values": $props.colSortValues,
       "num-rows-above": $props.numRowsAbove,
       "num-rows-below": $props.numRowsBelow,
@@ -8079,7 +7632,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           ])
         };
       })
-    ]), 1040, ["style", "data", "current-selection", "current-bottom-selection", "columns", "col-filter-values", "col-sort-values", "num-rows-above", "num-rows-below", "bottom-data", "row-config", "table-config", "table-state", "page-config", "page-state", "action-config", "action-state", "sub-menu-config", "disable-row-height-transition", "onUpdate:availableWidth"]),
+    ]), 1040, ["style", "data", "current-selection", "current-bottom-selection", "columns", "additional-header-menu-items", "col-sort-values", "num-rows-above", "num-rows-below", "bottom-data", "row-config", "table-config", "table-state", "page-config", "page-state", "action-config", "action-state", "sub-menu-config", "disable-row-height-transition", "onUpdate:availableWidth"]),
     $options.mountTableUIForAutoSizeCalculation ? (openBlock(), createBlock(_component_TableUI, {
       key: 0,
       ref: "tableUIForAutoSize",
@@ -8102,7 +7655,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ]), 1032, ["data", "current-selection", "columns", "row-config", "table-config", "onVnodeMounted"])) : createCommentVNode("", true)
   ], 64);
 }
-const TableUIWithAutoSizeCalculation = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-29efd9ce"]]);
+const TableUIWithAutoSizeCalculation = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-11d56c71"]]);
 
-export { TableActionBar, TableUI, TableUIWithAutoSizeCalculation, columnFilterConfigs, columnSortText, columnTypes, constants, defaultPageSize, filterComponents, getMissingValueMessage, isMissingValue, unpackObjectRepresentation, useColumnSizes };
+export { PopoverContainer, TableActionBar, TableUI, TableUIWithAutoSizeCalculation, columnSortText, columnTypes, constants, defaultPageSize, getMissingValueMessage, isMissingValue, unpackObjectRepresentation, useButtonPopoverInteraction, useColumnSizes };
 //# sourceMappingURL=index.js.map