diff --git a/.changeset/dry-canyons-ring.md b/.changeset/dry-canyons-ring.md
new file mode 100644
index 0000000000..0dbb3e491b
--- /dev/null
+++ b/.changeset/dry-canyons-ring.md
@@ -0,0 +1,5 @@
+---
+"sit-onyx": minor
+---
+
+feat(OnyxDataGrid) implemented a column search inside the hideColumns feature.
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-hide-button-chrome-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-hide-button-chrome-linux.png
index 71421f601a..9bcff6251b 100644
Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-hide-button-chrome-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-hide-button-chrome-linux.png differ
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-hide-button-firefox-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-hide-button-firefox-linux.png
index 9e3ac85567..e70cf5a5d8 100644
Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-hide-button-firefox-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-hide-button-firefox-linux.png differ
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-hide-button-webkit-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-hide-button-webkit-linux.png
index 4bc861eee1..5a553073cd 100644
Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-hide-button-webkit-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-hide-button-webkit-linux.png differ
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-initial-chrome-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-initial-chrome-linux.png
index d468409f9f..ed30cf4067 100644
Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-initial-chrome-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-initial-chrome-linux.png differ
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-initial-firefox-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-initial-firefox-linux.png
index 79fa39d8e2..24d24202b4 100644
Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-initial-firefox-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-initial-firefox-linux.png differ
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-initial-webkit-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-initial-webkit-linux.png
index 395f57c8f8..9ff3a43428 100644
Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-initial-webkit-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-initial-webkit-linux.png differ
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-last-column-not-hidable-chrome-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-last-column-not-hidable-chrome-linux.png
index b8df8bfa07..ee492026a7 100644
Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-last-column-not-hidable-chrome-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-last-column-not-hidable-chrome-linux.png differ
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-last-column-not-hidable-firefox-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-last-column-not-hidable-firefox-linux.png
index 9871845c8f..0864199144 100644
Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-last-column-not-hidable-firefox-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-last-column-not-hidable-firefox-linux.png differ
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-last-column-not-hidable-webkit-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-last-column-not-hidable-webkit-linux.png
index 5cfde9b1a3..9d1cc89408 100644
Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-last-column-not-hidable-webkit-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-last-column-not-hidable-webkit-linux.png differ
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-reveal-button-chrome-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-reveal-button-chrome-linux.png
index b3d2189e7c..b12ed60c71 100644
Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-reveal-button-chrome-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-reveal-button-chrome-linux.png differ
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-reveal-button-firefox-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-reveal-button-firefox-linux.png
index d121ab53b0..628fd651e0 100644
Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-reveal-button-firefox-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-reveal-button-firefox-linux.png differ
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-reveal-button-webkit-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-reveal-button-webkit-linux.png
index 84dafb5f2f..fe447724e0 100644
Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-reveal-button-webkit-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-reveal-button-webkit-linux.png differ
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-revealed-columns-should-be-last-chrome-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-revealed-columns-should-be-last-chrome-linux.png
index 4d2cf37cd8..868ba77cc4 100644
Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-revealed-columns-should-be-last-chrome-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-revealed-columns-should-be-last-chrome-linux.png differ
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-revealed-columns-should-be-last-firefox-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-revealed-columns-should-be-last-firefox-linux.png
index 0adab36ecd..34cc1d89d7 100644
Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-revealed-columns-should-be-last-firefox-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-revealed-columns-should-be-last-firefox-linux.png differ
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-revealed-columns-should-be-last-webkit-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-revealed-columns-should-be-last-webkit-linux.png
index 80c4056418..f3e90f74e2 100644
Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-revealed-columns-should-be-last-webkit-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-revealed-columns-should-be-last-webkit-linux.png differ
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-search-filtered-chrome-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-search-filtered-chrome-linux.png
new file mode 100644
index 0000000000..6354c2f2d4
Binary files /dev/null and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-search-filtered-chrome-linux.png differ
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-search-filtered-firefox-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-search-filtered-firefox-linux.png
new file mode 100644
index 0000000000..00e4781442
Binary files /dev/null and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-search-filtered-firefox-linux.png differ
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-search-filtered-webkit-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-search-filtered-webkit-linux.png
new file mode 100644
index 0000000000..e6d5fb847b
Binary files /dev/null and b/packages/sit-onyx/playwright/snapshots/components/OnyxDataGrid/features/hideColumns/data-grid-hide-columns-search-filtered-webkit-linux.png differ
diff --git a/packages/sit-onyx/src/components/OnyxDataGrid/features/hideColumns/TestCase.ct.vue b/packages/sit-onyx/src/components/OnyxDataGrid/features/hideColumns/TestCase.ct.vue
index d51805df89..53f41183db 100644
--- a/packages/sit-onyx/src/components/OnyxDataGrid/features/hideColumns/TestCase.ct.vue
+++ b/packages/sit-onyx/src/components/OnyxDataGrid/features/hideColumns/TestCase.ct.vue
@@ -38,5 +38,11 @@ const features = computed(() => [withHideColumns.value]);
-
+
+
+
diff --git a/packages/sit-onyx/src/components/OnyxDataGrid/features/hideColumns/hideColumns.ct.tsx b/packages/sit-onyx/src/components/OnyxDataGrid/features/hideColumns/hideColumns.ct.tsx
index a139189494..b8feaa03b1 100644
--- a/packages/sit-onyx/src/components/OnyxDataGrid/features/hideColumns/hideColumns.ct.tsx
+++ b/packages/sit-onyx/src/components/OnyxDataGrid/features/hideColumns/hideColumns.ct.tsx
@@ -70,6 +70,49 @@ test("should hide and show columns", async ({ mount }) => {
});
});
+test("should filter hidden columns via search", async ({ mount }) => {
+ const state = ref<(keyof Entry)[]>([]);
+ // ARRANGE
+ const component = await mount(
+ (state.value = newState)} allHidable />,
+ );
+ const revealButton = component.getByRole("button", { name: "Show hidden columns" });
+ const menuItem = component.getByRole("menuitem", { name: "Hide column" });
+ const openMoreActions = async (name: string) =>
+ component
+ .getByRole("columnheader", { name: `${name} Toggle column actions`, exact: true })
+ .getByLabel("Toggle column actions")
+ .click();
+
+ await openMoreActions("a");
+ await component.getByRole("menuitem", { name: "Hide column" }).click();
+ await openMoreActions("c");
+ await menuItem.click();
+
+ await revealButton.click();
+
+ const searchInput = component.getByRole("textbox", { name: "Filter the list items" });
+
+ await test.step("Filter the list", async () => {
+ await searchInput.fill("a");
+
+ await expect(component.getByRole("menuitem", { name: "a", exact: true })).toBeVisible();
+ await expect(component.getByRole("menuitem", { name: "c", exact: true })).toBeHidden();
+ await expect(component).toHaveScreenshot("data-grid-hide-columns-search-filtered.png");
+ });
+
+ await test.step("Clear search via clear button", async () => {
+ await component.getByRole("button", { name: "Clear" }).click();
+ await expect(searchInput).toHaveValue("");
+ await expect(component.getByRole("menuitem", { name: "c", exact: true })).toBeVisible();
+ });
+
+ await test.step("Search with no results", async () => {
+ await searchInput.fill("non-existent-column");
+ await expect(component.getByRole("menuitem")).toHaveCount(0);
+ });
+});
+
test("last Column should not be hidable", async ({ mount }) => {
const state = ref<(keyof Entry)[]>([]);
diff --git a/packages/sit-onyx/src/components/OnyxDataGrid/features/hideColumns/hideColumns.ts b/packages/sit-onyx/src/components/OnyxDataGrid/features/hideColumns/hideColumns.ts
index 60fc9da3f1..4bf17c7912 100644
--- a/packages/sit-onyx/src/components/OnyxDataGrid/features/hideColumns/hideColumns.ts
+++ b/packages/sit-onyx/src/components/OnyxDataGrid/features/hideColumns/hideColumns.ts
@@ -1,7 +1,9 @@
import { iconCircleInformation, iconEyeDisabled, iconPlusSmall } from "@sit-onyx/icons";
import { computed, h, ref, toRef, type AriaAttributes, type Ref } from "vue";
import type { ComponentSlots } from "vue-component-type-helpers";
+import { normalizedIncludes } from "../../../../utils/strings.js";
import OnyxIcon from "../../../OnyxIcon/OnyxIcon.vue";
+import OnyxMiniSearch from "../../../OnyxMiniSearch/OnyxMiniSearch.vue";
import OnyxFlyoutMenu from "../../../OnyxNavBar/modules/OnyxFlyoutMenu/OnyxFlyoutMenu.vue";
import OnyxMenuItem from "../../../OnyxNavBar/modules/OnyxMenuItem/OnyxMenuItem.vue";
import OnyxSystemButton from "../../../OnyxSystemButton/OnyxSystemButton.vue";
@@ -32,6 +34,8 @@ export const useHideColumns = (
columnConfig.value.filter((c) => hiddenColumnKeys.value.has(c.key)),
);
+ const searchTerm = ref("");
+
const flyoutMenu = () =>
h(
OnyxFlyoutMenu,
@@ -50,17 +54,30 @@ export const useHideColumns = (
...trigger,
}),
options: () => {
- return Array.from(hiddenColumns.value)
- .sort((a, b) => Intl.Collator(i18n.locale.value).compare(a.label, b.label))
- .map(({ key, label }) =>
- h(
- OnyxMenuItem,
- {
- onClick: () => hiddenColumnKeys.value.delete(key),
- },
- () => label,
+ return [
+ h(OnyxMiniSearch, {
+ label: i18n.t.value("select.searchInputLabel"),
+ modelValue: searchTerm.value,
+ "onUpdate:modelValue": (value: string) => (searchTerm.value = value),
+ onClear: () => (searchTerm.value = ""),
+ autofocus: true,
+ }),
+ Array.from(hiddenColumns.value)
+ .filter(({ label }) => {
+ if (!searchTerm.value) return true;
+ return normalizedIncludes(label, searchTerm.value);
+ })
+ .sort((a, b) => Intl.Collator(i18n.locale.value).compare(a.label, b.label))
+ .map(({ key, label }) =>
+ h(
+ OnyxMenuItem,
+ {
+ onClick: () => hiddenColumnKeys.value.delete(key),
+ },
+ () => label,
+ ),
),
- );
+ ];
},
} satisfies ComponentSlots,
);
diff --git a/packages/sit-onyx/src/components/OnyxMiniSearch/OnyxMiniSearch.vue b/packages/sit-onyx/src/components/OnyxMiniSearch/OnyxMiniSearch.vue
index 410a257db2..6ca3941567 100644
--- a/packages/sit-onyx/src/components/OnyxMiniSearch/OnyxMiniSearch.vue
+++ b/packages/sit-onyx/src/components/OnyxMiniSearch/OnyxMiniSearch.vue
@@ -55,6 +55,7 @@ defineExpose({
:class="['onyx-component', 'onyx-mini-search', densityClass]"
v-bind="rootAttrs"
:style="{ '--onyx-placeholder-character-count': placeholder.length }"
+ @click.stop
>