diff --git a/frontend/src/components/Credentials/GCredentialDetailsItemContent.vue b/frontend/src/components/Credentials/GCredentialDetailsItemContent.vue
index 61204cc265..1203916db6 100644
--- a/frontend/src/components/Credentials/GCredentialDetailsItemContent.vue
+++ b/frontend/src/components/Credentials/GCredentialDetailsItemContent.vue
@@ -34,9 +34,7 @@ SPDX-License-Identifier: Apache-2.0
 </template>
 
 <script>
-import { decodeBase64 } from '@/utils'
-
-import get from 'lodash/get'
+import { secretDetails } from '@/composables/credential/helper'
 
 export default {
 
@@ -67,7 +65,7 @@ export default {
           },
         ]
       } else if (this.credential?.kind === 'Secret') {
-        const details = this.getCredentialDetails(this.credential)
+        const details = secretDetails(this.credential, this.providerType)
         if (details) {
           return details
         }
@@ -89,175 +87,5 @@ export default {
       ]
     },
   },
-  methods: {
-    getCredentialDetails (secret) {
-      const secretData = secret.data || {}
-      const getGCPProjectId = () => {
-        const serviceAccount = get(secretData, ['serviceaccount.json'])
-        return get(JSON.parse(decodeBase64(serviceAccount)), ['project_id'])
-      }
-      try {
-        switch (this.providerType) {
-          // infra
-          case 'openstack':
-            return [
-              {
-                label: 'Domain Name',
-                value: decodeBase64(secretData.domainName),
-              },
-              {
-                label: 'Tenant Name',
-                value: decodeBase64(secretData.tenantName),
-              },
-            ]
-          case 'vsphere':
-            return [
-              {
-                label: 'vSphere Username',
-                value: decodeBase64(secretData.vsphereUsername),
-              },
-              {
-                label: 'NSX-T Username',
-                value: decodeBase64(secretData.nsxtUsername),
-              },
-            ]
-          case 'aws':
-            return [
-              {
-                label: 'Access Key ID',
-                value: decodeBase64(secretData.accessKeyID),
-              },
-            ]
-          case 'azure':
-            return [
-              {
-                label: 'Subscription ID',
-                value: decodeBase64(secretData.subscriptionID),
-              },
-            ]
-          case 'gcp':
-            return [
-              {
-                label: 'Project',
-                value: getGCPProjectId(),
-              },
-            ]
-          case 'alicloud':
-            return [
-              {
-                label: 'Access Key ID',
-                value: decodeBase64(secretData.accessKeyID),
-              },
-            ]
-          case 'metal':
-            return [
-              {
-                label: 'API URL',
-                value: decodeBase64(secretData.metalAPIURL),
-              },
-            ]
-          case 'hcloud':
-            return [
-              {
-                label: 'Hetzner Cloud Token',
-                hidden: true,
-              },
-            ]
-          case 'openstack-designate':
-            return [
-              {
-                label: 'Domain Name',
-                value: decodeBase64(secretData.domainName),
-              },
-              {
-                label: 'Tenant Name',
-                value: decodeBase64(secretData.tenantName),
-              },
-            ]
-          // dns
-          case 'aws-route53':
-            return [
-              {
-                label: 'Access Key ID',
-                value: decodeBase64(secretData.accessKeyID),
-              },
-            ]
-          case 'azure-dns':
-          case 'azure-private-dns':
-            return [
-              {
-                label: 'Subscription ID',
-                value: decodeBase64(secretData.subscriptionID),
-              },
-            ]
-          case 'google-clouddns':
-            return [
-              {
-                label: 'Project',
-                value: decodeBase64(secretData.project),
-              },
-            ]
-          case 'alicloud-dns':
-            return [
-              {
-                label: 'Access Key ID',
-                value: decodeBase64(secretData.accessKeyID),
-              },
-            ]
-          case 'infoblox-dns':
-            return [
-              {
-                label: 'Infoblox Username',
-                value: decodeBase64(secretData.USERNAME),
-              },
-            ]
-          case 'cloudflare-dns':
-            return [
-              {
-                label: 'API Key',
-                hidden: true,
-              },
-            ]
-          case 'netlify-dns':
-            return [
-              {
-                label: 'API Key',
-                hidden: true,
-              },
-            ]
-          case 'rfc2136':
-            return [
-              {
-                label: 'Server',
-                value: decodeBase64(secretData.Server),
-              },
-              {
-                label: 'TSIG Key Name',
-                value: decodeBase64(secretData.TSIGKeyName),
-              },
-              {
-                label: 'Zone',
-                value: decodeBase64(secretData.Zone),
-              },
-            ]
-          case 'powerdns':
-            return [
-              {
-                label: 'Server',
-                value: decodeBase64(secretData.server),
-              },
-              {
-                label: 'API Key',
-                hidden: true,
-              },
-            ]
-          default:
-            return undefined
-        }
-      } catch (err) {
-        return undefined
-      }
-    },
-  },
 }
 </script>
diff --git a/frontend/src/components/Credentials/GCredentialRowDns.vue b/frontend/src/components/Credentials/GCredentialRowDns.vue
index 18dfbbc7b8..d73ed81749 100644
--- a/frontend/src/components/Credentials/GCredentialRowDns.vue
+++ b/frontend/src/components/Credentials/GCredentialRowDns.vue
@@ -11,43 +11,43 @@ SPDX-License-Identifier: Apache-2.0
   >
     <td v-if="selectedHeaders.name">
       <div class="d-flex">
-        {{ binding.metadata.name }}
+        {{ item.binding.metadata.name }}
         <g-shared-credential-icon
-          v-if="isSharedCredential"
-          :namespace="credentialNamespace"
+          v-if="item.isSharedCredential"
+          :namespace="item.credentialNamespace"
         />
         <g-orphaned-credential-icon
-          v-if="isOrphanedCredential"
-          :binding="binding"
+          v-if="item.isOrphanedCredential"
+          :binding="item.binding"
         />
       </div>
     </td>
     <td v-if="selectedHeaders.kind">
-      <g-credential-icon :binding="binding" />
+      <g-credential-icon :binding="item.binding" />
     </td>
     <td v-if="selectedHeaders.dnsProvider">
       <g-vendor
         extended
-        :provider-type="binding.provider.type"
+        :provider-type="item.binding.provider.type"
       />
     </td>
     <td v-if="selectedHeaders.details">
       <g-credential-details-item-content
         class="py-1"
-        :credential="credential"
-        :shared="isSharedCredential"
-        :provider-type="binding.provider.type"
+        :credential="item.credential"
+        :shared="item.isSharedCredential"
+        :provider-type="item.binding.provider.type"
       />
     </td>
     <td v-if="selectedHeaders.credentialUsageCount">
-      <g-credential-used-by-label :used-by="credentialUsageCount" />
+      <g-credential-used-by-label :used-by="item.credentialUsageCount" />
     </td>
     <td
       v-if="selectedHeaders.actions"
       class="text-action-button"
     >
       <g-credential-row-actions
-        :binding="binding"
+        :binding="item.binding"
         @update="onUpdate"
         @delete="onDelete"
       />
@@ -58,7 +58,7 @@ SPDX-License-Identifier: Apache-2.0
 <script setup>
 import {
   computed,
-  toRef,
+  toRefs,
 } from 'vue'
 
 import GVendor from '@/components/GVendor'
@@ -69,12 +69,10 @@ import GCredentialUsedByLabel from '@/components/Credentials/GCredentialUsedByLa
 import GSharedCredentialIcon from '@/components/Credentials/GSharedCredentialIcon.vue'
 import GOrphanedCredentialIcon from '@/components/Credentials/GOrphanedCredentialIcon.vue'
 
-import { useCloudProviderBinding } from '@/composables/credential/useCloudProviderBinding'
-
 import { mapTableHeader } from '@/utils'
 
 const props = defineProps({
-  binding: {
+  item: {
     type: Object,
     required: true,
   },
@@ -88,19 +86,15 @@ const props = defineProps({
   },
 })
 
-const binding = toRef(props, 'binding')
-
 const {
-  isSharedCredential,
-  credentialNamespace,
-  credentialUsageCount,
-  isOrphanedCredential,
-  credential,
-} = useCloudProviderBinding(binding)
+  item,
+  highlighted,
+  headers,
+} = toRefs(props)
 
 const emit = defineEmits(['update', 'delete'])
 
-const selectedHeaders = computed(() => mapTableHeader(props.headers, 'selected'))
+const selectedHeaders = computed(() => mapTableHeader(headers.value, 'selected'))
 
 function onUpdate (value) {
   emit('update', value)
diff --git a/frontend/src/components/Credentials/GCredentialRowInfra.vue b/frontend/src/components/Credentials/GCredentialRowInfra.vue
index bed1905b9f..a5cbb2b59e 100644
--- a/frontend/src/components/Credentials/GCredentialRowInfra.vue
+++ b/frontend/src/components/Credentials/GCredentialRowInfra.vue
@@ -11,43 +11,43 @@ SPDX-License-Identifier: Apache-2.0
   >
     <td v-if="selectedHeaders.name">
       <div class="d-flex">
-        {{ binding.metadata.name }}
+        {{ item.binding.metadata.name }}
         <g-shared-credential-icon
-          v-if="isSharedCredential"
-          :namespace="credentialNamespace"
+          v-if="item.isSharedCredential"
+          :namespace="item.credentialNamespace"
         />
         <g-orphaned-credential-icon
-          v-if="isOrphanedCredential"
-          :binding="binding"
+          v-if="item.isOrphanedCredential"
+          :binding="item.binding"
         />
       </div>
     </td>
     <td v-if="selectedHeaders.kind">
-      <g-credential-icon :binding="binding" />
+      <g-credential-icon :binding="item.binding" />
     </td>
     <td v-if="selectedHeaders.infrastructure">
       <g-vendor
         extended
-        :provider-type="binding.provider.type"
+        :provider-type="item.binding.provider.type"
       />
     </td>
     <td v-if="selectedHeaders.details">
       <g-credential-details-item-content
         class="py-1"
-        :credential="credential"
-        :shared="isSharedCredential"
-        :provider-type="binding.provider.type"
+        :credential="item.credential"
+        :shared="item.isSharedCredential"
+        :provider-type="item.binding.provider.type"
       />
     </td>
     <td v-if="selectedHeaders.credentialUsageCount">
-      <g-credential-used-by-label :used-by="credentialUsageCount" />
+      <g-credential-used-by-label :used-by="item.credentialUsageCount" />
     </td>
     <td
       v-if="selectedHeaders.actions"
       class="text-action-button"
     >
       <g-credential-row-actions
-        :binding="binding"
+        :binding="item.binding"
         @update="onUpdate"
         @delete="onDelete"
       />
@@ -58,7 +58,7 @@ SPDX-License-Identifier: Apache-2.0
 <script setup>
 import {
   computed,
-  toRef,
+  toRefs,
 } from 'vue'
 
 import GVendor from '@/components/GVendor'
@@ -69,12 +69,10 @@ import GCredentialUsedByLabel from '@/components/Credentials/GCredentialUsedByLa
 import GSharedCredentialIcon from '@/components/Credentials/GSharedCredentialIcon.vue'
 import GOrphanedCredentialIcon from '@/components/Credentials/GOrphanedCredentialIcon.vue'
 
-import { useCloudProviderBinding } from '@/composables/credential/useCloudProviderBinding'
-
 import { mapTableHeader } from '@/utils'
 
 const props = defineProps({
-  binding: {
+  item: {
     type: Object,
     required: true,
   },
@@ -88,20 +86,16 @@ const props = defineProps({
   },
 })
 
-const binding = toRef(props, 'binding')
-
 const {
-  isSharedCredential,
-  credentialNamespace,
-  credentialUsageCount,
-  isOrphanedCredential,
-  credential,
-} = useCloudProviderBinding(binding)
+  item,
+  highlighted,
+  headers,
+} = toRefs(props)
 
 const emit = defineEmits(['update', 'delete'])
 
 const selectedHeaders = computed(() =>
-  mapTableHeader(props.headers, 'selected'),
+  mapTableHeader(headers.value, 'selected'),
 )
 
 function onUpdate (value) {
@@ -111,6 +105,7 @@ function onUpdate (value) {
 function onDelete (value) {
   emit('delete', value)
 }
+
 </script>
 
 <style lang="scss" scoped>
diff --git a/frontend/src/composables/credential/helper.js b/frontend/src/composables/credential/helper.js
index f26c595c27..2931ef5d9b 100644
--- a/frontend/src/composables/credential/helper.js
+++ b/frontend/src/composables/credential/helper.js
@@ -4,6 +4,10 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+import { decodeBase64 } from '@/utils'
+
+import get from 'lodash/get'
+
 export function isSecretBinding (binding) {
   return binding?.kind === 'SecretBinding'
 }
@@ -51,3 +55,172 @@ export function isInfrastructureBinding (binding, sortedProviderTypeList) {
 export function isDnsBinding (binding, dnsProviderTypes) {
   return dnsProviderTypes.includes(binding?.provider?.type)
 }
+
+export function secretDetails (secret, providerType) {
+  const secretData = secret.data || {}
+  const getGCPProjectId = () => {
+    const serviceAccount = get(secretData, ['serviceaccount.json'])
+    return get(JSON.parse(decodeBase64(serviceAccount)), ['project_id'])
+  }
+  try {
+    switch (providerType) {
+      // infra
+      case 'openstack':
+        return [
+          {
+            label: 'Domain Name',
+            value: decodeBase64(secretData.domainName),
+          },
+          {
+            label: 'Tenant Name',
+            value: decodeBase64(secretData.tenantName),
+          },
+        ]
+      case 'vsphere':
+        return [
+          {
+            label: 'vSphere Username',
+            value: decodeBase64(secretData.vsphereUsername),
+          },
+          {
+            label: 'NSX-T Username',
+            value: decodeBase64(secretData.nsxtUsername),
+          },
+        ]
+      case 'aws':
+        return [
+          {
+            label: 'Access Key ID',
+            value: decodeBase64(secretData.accessKeyID),
+          },
+        ]
+      case 'azure':
+        return [
+          {
+            label: 'Subscription ID',
+            value: decodeBase64(secretData.subscriptionID),
+          },
+        ]
+      case 'gcp':
+        return [
+          {
+            label: 'Project',
+            value: getGCPProjectId(),
+          },
+        ]
+      case 'alicloud':
+        return [
+          {
+            label: 'Access Key ID',
+            value: decodeBase64(secretData.accessKeyID),
+          },
+        ]
+      case 'metal':
+        return [
+          {
+            label: 'API URL',
+            value: decodeBase64(secretData.metalAPIURL),
+          },
+        ]
+      case 'hcloud':
+        return [
+          {
+            label: 'Hetzner Cloud Token',
+            hidden: true,
+          },
+        ]
+      case 'openstack-designate':
+        return [
+          {
+            label: 'Domain Name',
+            value: decodeBase64(secretData.domainName),
+          },
+          {
+            label: 'Tenant Name',
+            value: decodeBase64(secretData.tenantName),
+          },
+        ]
+        // dns
+      case 'aws-route53':
+        return [
+          {
+            label: 'Access Key ID',
+            value: decodeBase64(secretData.accessKeyID),
+          },
+        ]
+      case 'azure-dns':
+      case 'azure-private-dns':
+        return [
+          {
+            label: 'Subscription ID',
+            value: decodeBase64(secretData.subscriptionID),
+          },
+        ]
+      case 'google-clouddns':
+        return [
+          {
+            label: 'Project',
+            value: decodeBase64(secretData.project),
+          },
+        ]
+      case 'alicloud-dns':
+        return [
+          {
+            label: 'Access Key ID',
+            value: decodeBase64(secretData.accessKeyID),
+          },
+        ]
+      case 'infoblox-dns':
+        return [
+          {
+            label: 'Infoblox Username',
+            value: decodeBase64(secretData.USERNAME),
+          },
+        ]
+      case 'cloudflare-dns':
+        return [
+          {
+            label: 'API Key',
+            hidden: true,
+          },
+        ]
+      case 'netlify-dns':
+        return [
+          {
+            label: 'API Key',
+            hidden: true,
+          },
+        ]
+      case 'rfc2136':
+        return [
+          {
+            label: 'Server',
+            value: decodeBase64(secretData.Server),
+          },
+          {
+            label: 'TSIG Key Name',
+            value: decodeBase64(secretData.TSIGKeyName),
+          },
+          {
+            label: 'Zone',
+            value: decodeBase64(secretData.Zone),
+          },
+        ]
+      case 'powerdns':
+        return [
+          {
+            label: 'Server',
+            value: decodeBase64(secretData.server),
+          },
+          {
+            label: 'API Key',
+            hidden: true,
+          },
+        ]
+      default:
+        return undefined
+    }
+  } catch (err) {
+    return undefined
+  }
+}
diff --git a/frontend/src/composables/credential/useCloudProviderBinding.js b/frontend/src/composables/credential/useCloudProviderBinding.js
index 897fa8d8ec..b57d586e52 100644
--- a/frontend/src/composables/credential/useCloudProviderBinding.js
+++ b/frontend/src/composables/credential/useCloudProviderBinding.js
@@ -25,6 +25,7 @@ import {
   credentialNamespace as _credentialNameSpace,
   credentialRef as _credentialRef,
   credentialKind as _credentialKind,
+  secretDetails as _secretDetails,
 } from './helper'
 
 import filter from 'lodash/filter'
@@ -101,6 +102,13 @@ export const useCloudProviderBinding = (binding, options = {}) => {
     return undefined
   })
 
+  const credentialDetails = computed(() => {
+    if (isSecret.value && credential.value) {
+      return _secretDetails(credential.value, binding.value?.provider?.type)
+    }
+    return undefined
+  })
+
   // Usage & Orphan Detection
   const hasOwnSecret = computed(() =>
     isSecret.value && credential.value !== undefined,
@@ -194,6 +202,7 @@ export const useCloudProviderBinding = (binding, options = {}) => {
     credentialName,
     credentialKind,
     credential,
+    credentialDetails,
 
     // Usage/orphan checks
     hasOwnSecret,
diff --git a/frontend/src/store/credential.js b/frontend/src/store/credential.js
index ce994b0814..c964b5bac1 100644
--- a/frontend/src/store/credential.js
+++ b/frontend/src/store/credential.js
@@ -185,6 +185,7 @@ export const useCredentialStore = defineStore('credential', () => {
   }
 
   return {
+    state,
     cloudProviderBindingList,
     quotaList,
     fetchCredentials,
diff --git a/frontend/src/views/GCredentials.vue b/frontend/src/views/GCredentials.vue
index b3d3e30c05..45d87492a8 100644
--- a/frontend/src/views/GCredentials.vue
+++ b/frontend/src/views/GCredentials.vue
@@ -105,9 +105,11 @@ SPDX-License-Identifier: Apache-2.0
         v-model:sort-by="infraCredentialSortBy"
         :headers="visibleInfraCredentialTableHeaders"
         :items="infrastructureCredentialSortedItems"
+        :item-key="getItemKey"
         :custom-key-sort="disableCustomKeySort(visibleInfraCredentialTableHeaders)"
         must-sort
         hover
+        :custom-filter="customFilter"
         :search="infraCredentialFilter"
         density="compact"
         class="g-table"
@@ -116,10 +118,9 @@ SPDX-License-Identifier: Apache-2.0
       >
         <template #item="{ item, itemRef }">
           <g-credential-row-infra
-            :key="`${item.credentialNamespace}/${item.credentialName}`"
             :ref="itemRef"
-            :binding="item"
-            :highlighted="isHighlighted(item)"
+            :item="item"
+            :highlighted="isHighlighted(item.binding)"
             :headers="infraCredentialTableHeaders"
             @delete="onRemoveCredential"
             @update="onUpdateCredential"
@@ -223,9 +224,11 @@ SPDX-License-Identifier: Apache-2.0
         v-model:sort-by="dnsCredentialSortBy"
         :headers="visibleDnsCredentialTableHeaders"
         :items="dnsCredentialSortedItems"
+        :item-key="getItemKey"
         :custom-key-sort="disableCustomKeySort(visibleDnsCredentialTableHeaders)"
         must-sort
         hover
+        :custom-filter="customFilter"
         :search="dnsCredentialFilter"
         density="compact"
         class="g-table"
@@ -234,10 +237,9 @@ SPDX-License-Identifier: Apache-2.0
       >
         <template #item="{ item, itemRef }">
           <g-credential-row-dns
-            :key="`${item.credentialNamespace}/${item.credentialName}`"
             :ref="itemRef"
-            :binding="item"
-            :highlighted="isHighlighted(item)"
+            :item="item"
+            :highlighted="isHighlighted(item.binding)"
             :headers="dnsCredentialTableHeaders"
             @delete="onRemoveCredential"
             @update="onUpdateCredential"
@@ -269,6 +271,7 @@ import {
 import { useUrlSearchParams } from '@vueuse/core'
 import {
   toRef,
+  unref,
   computed,
 } from 'vue'
 
@@ -300,6 +303,7 @@ import head from 'lodash/head'
 import filter from 'lodash/filter'
 import get from 'lodash/get'
 import findIndex from 'lodash/findIndex'
+import toLower from 'lodash/toLower'
 
 export default {
   components: {
@@ -421,9 +425,12 @@ export default {
     visibleInfraCredentialTableHeaders () {
       return filter(this.infraCredentialTableHeaders, ['selected', true])
     },
+    infrastructureItems () {
+      return map(this.infrastructureBindingList, this.computeItem)
+    },
     infrastructureCredentialSortedItems () {
       const secondSortCriteria = 'name'
-      return this.sortItems(this.infrastructureBindingList, this.infraCredentialSortBy, secondSortCriteria)
+      return this.sortItems(this.infrastructureItems, this.infraCredentialSortBy, secondSortCriteria)
     },
     dnsCredentialTableHeaders () {
       const headers = [
@@ -478,9 +485,12 @@ export default {
     visibleDnsCredentialTableHeaders () {
       return filter(this.dnsCredentialTableHeaders, ['selected', true])
     },
+    dnsItems () {
+      return map(this.dnsBindingList, this.computeItem)
+    },
     dnsCredentialSortedItems () {
       const secondSortCriteria = 'name'
-      return this.sortItems(this.dnsBindingList, this.dnsCredentialSortBy, secondSortCriteria)
+      return this.sortItems(this.dnsItems, this.dnsCredentialSortBy, secondSortCriteria)
     },
   },
   watch: {
@@ -492,7 +502,7 @@ export default {
         setTimeout(() => {
           // Cannot start scrolling before the table is rendered
           const scrollToItem = (items, tableRef) => {
-            const itemIndex = findIndex(items, ['metadata.uid', value])
+            const itemIndex = findIndex(items, ['binding.metadata.uid', value])
             if (itemIndex !== -1) {
               tableRef.scrollToIndex(itemIndex)
             }
@@ -506,6 +516,26 @@ export default {
     },
   },
   methods: {
+    computeItem (binding) {
+      const {
+        credentialUsageCount,
+        isSharedCredential,
+        isOrphanedCredential,
+        credentialNamespace,
+        credential,
+        credentialDetails,
+      } = useCloudProviderBinding(toRef(binding))
+
+      return {
+        binding,
+        credentialUsageCount: unref(credentialUsageCount),
+        isSharedCredential: unref(isSharedCredential),
+        isOrphanedCredential: unref(isOrphanedCredential),
+        credentialNamespace: unref(credentialNamespace),
+        credential: unref(credential),
+        credentialDetails: unref(credentialDetails),
+      }
+    },
     openCredentialAddDialog (providerType) {
       this.selectedBinding = undefined
       this.visibleCredentialDialog = providerType
@@ -549,21 +579,24 @@ export default {
 
       const sortBy = sortByObj.key
       const sortOrder = sortByObj.order
+
       return orderBy(items, [item => this.getRawVal(item, sortBy), secondSortCriteria], [sortOrder, 'asc'])
     },
     getRawVal (item, column) {
       const {
-        credentialUsageCount,
         credentialKind,
-      } = useCloudProviderBinding(toRef(item))
+        credentialUsageCount,
+        binding,
+      } = item
+
       switch (column) {
         case 'name':
-          return item.metadata.name
+          return binding.metadata.name
         case 'infrastructure':
         case 'dnsProvider':
-          return item.provider.type
+          return binding.provider.type
         case 'kind':
-          return `${item.kind} (${credentialKind.value})`
+          return `${binding.kind} (${credentialKind.value})`
         case 'credentialUsageCount':
           return credentialUsageCount.value
       }
@@ -576,6 +609,31 @@ export default {
     isHighlighted (binding) {
       return this.highlightedUid && this.highlightedUid === binding.metadata.uid
     },
+    customFilter (_, query, item) {
+      const {
+        credentialDetails,
+        binding,
+      } = item.raw
+
+      const detailValues = map(credentialDetails, 'value')
+
+      const values = [
+        binding.metadata.name,
+        binding.provider.type,
+        binding.kind,
+        ...detailValues,
+      ]
+
+      return values.some(value => {
+        if (value) {
+          return toLower(value).includes(toLower(query))
+        }
+        return false
+      })
+    },
+    getItemKey (item, fallback) {
+      return get(item, ['raw', 'binding', 'metadata', 'uid'], fallback)
+    },
   },
 }
 </script>