From bfe7cef62792ffe3dd7fe625f707c86d28080dd9 Mon Sep 17 00:00:00 2001
From: Abhinav Raut <abhinavrautcs@gmail.com>
Date: Thu, 23 Apr 2026 03:12:52 +0530
Subject: [PATCH] add global search to datatable with per-table opt-out

---
 .../src/components/datatable/DataTable.vue    | 49 +++++++++++++++----
 .../features/admin/agents/dataTableColumns.js |  3 ++
 .../features/admin/macros/dataTableColumns.js |  4 ++
 .../features/admin/tags/dataTableColumns.js   |  2 +
 .../business-hours/BusinessHoursList.vue      |  2 +-
 .../admin/context-links/ContextLinkList.vue   |  2 +-
 .../custom-attributes/CustomAttributes.vue    |  4 +-
 .../main/src/views/admin/inbox/InboxList.vue  |  2 +-
 .../main/src/views/admin/oidc/OIDCList.vue    |  2 +-
 .../main/src/views/admin/roles/RoleList.vue   |  2 +-
 .../admin/shared-views/SharedViewList.vue     |  2 +-
 .../apps/main/src/views/admin/sla/SLAList.vue |  2 +-
 .../src/views/admin/status/StatusView.vue     |  2 +-
 .../main/src/views/admin/teams/TeamList.vue   |  2 +-
 .../views/admin/templates/TemplateList.vue    |  4 +-
 .../src/views/admin/webhooks/WebhookList.vue  |  2 +-
 16 files changed, 62 insertions(+), 24 deletions(-)

diff --git a/frontend/apps/main/src/components/datatable/DataTable.vue b/frontend/apps/main/src/components/datatable/DataTable.vue
index eeb2cfc2..0ea705ff 100644
--- a/frontend/apps/main/src/components/datatable/DataTable.vue
+++ b/frontend/apps/main/src/components/datatable/DataTable.vue
@@ -1,5 +1,14 @@
 <template>
-  <div class="w-full">
+  <div class="w-full space-y-3">
+    <div v-if="searchable" class="relative max-w-sm">
+      <Search class="absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+      <Input
+        v-model="globalFilter"
+        :placeholder="searchPlaceholder || t('globals.terms.search')"
+        class="pl-8"
+      />
+    </div>
+
     <div
       ref="scrollContainer"
       class="relative overflow-auto rounded-lg border border-border bg-card shadow-sm"
@@ -92,11 +101,17 @@
 </template>
 
 <script setup>
-import { FlexRender, getCoreRowModel, getSortedRowModel, useVueTable } from '@tanstack/vue-table'
+import {
+  FlexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getSortedRowModel,
+  useVueTable
+} from '@tanstack/vue-table'
 import { useVirtualizer } from '@tanstack/vue-virtual'
 import { useI18n } from 'vue-i18n'
 import { computed, ref } from 'vue'
-import { ArrowUpDown, ChevronDown, ChevronUp, Ghost } from 'lucide-vue-next'
+import { ArrowUpDown, ChevronDown, ChevronUp, Ghost, Search } from 'lucide-vue-next'
 import {
   TableBody,
   TableCell,
@@ -104,6 +119,7 @@ import {
   TableHeader,
   TableRow
 } from '@shared-ui/components/ui/table'
+import { Input } from '@shared-ui/components/ui/input'
 
 const { t } = useI18n()
 
@@ -125,16 +141,21 @@ const props = defineProps({
   estimatedRowHeight: {
     type: Number,
     default: 52
+  },
+  searchable: {
+    type: Boolean,
+    default: true
+  },
+  searchPlaceholder: {
+    type: String,
+    default: ''
   }
 })
 
-const emptyText = computed(
-  () =>
-    props.emptyText ||
-    t('globals.messages.noResultsFound')
-)
-
 const sorting = ref([])
+const globalFilter = ref('')
+
+const emptyText = computed(() => props.emptyText || t('globals.messages.noResultsFound'))
 
 const table = useVueTable({
   get data() {
@@ -146,6 +167,9 @@ const table = useVueTable({
   state: {
     get sorting() {
       return sorting.value
+    },
+    get globalFilter() {
+      return globalFilter.value
     }
   },
   enableSortingRemoval: false,
@@ -153,8 +177,13 @@ const table = useVueTable({
     sorting.value =
       typeof updaterOrValue === 'function' ? updaterOrValue(sorting.value) : updaterOrValue
   },
+  onGlobalFilterChange: (updaterOrValue) => {
+    globalFilter.value =
+      typeof updaterOrValue === 'function' ? updaterOrValue(globalFilter.value) : updaterOrValue
+  },
   getCoreRowModel: getCoreRowModel(),
-  getSortedRowModel: getSortedRowModel()
+  getSortedRowModel: getSortedRowModel(),
+  getFilteredRowModel: getFilteredRowModel()
 })
 
 const scrollContainer = ref(null)
diff --git a/frontend/apps/main/src/features/admin/agents/dataTableColumns.js b/frontend/apps/main/src/features/admin/agents/dataTableColumns.js
index 6f4476fe..cceab6ef 100644
--- a/frontend/apps/main/src/features/admin/agents/dataTableColumns.js
+++ b/frontend/apps/main/src/features/admin/agents/dataTableColumns.js
@@ -32,6 +32,7 @@ export const createColumns = (t) => [
   },
   {
     accessorKey: 'enabled',
+    enableGlobalFilter: false,
     header: function () {
       return h('div', { class: 'text-center' }, t('globals.terms.enabled'))
     },
@@ -50,6 +51,7 @@ export const createColumns = (t) => [
   },
   {
     accessorKey: 'created_at',
+    enableGlobalFilter: false,
     header: function () {
       return h('div', { class: 'text-center' }, t('globals.terms.createdAt'))
     },
@@ -63,6 +65,7 @@ export const createColumns = (t) => [
   },
   {
     accessorKey: 'updated_at',
+    enableGlobalFilter: false,
     header: function () {
       return h('div', { class: 'text-center' }, t('globals.terms.updatedAt'))
     },
diff --git a/frontend/apps/main/src/features/admin/macros/dataTableColumns.js b/frontend/apps/main/src/features/admin/macros/dataTableColumns.js
index 6f5597eb..b03c2ae1 100644
--- a/frontend/apps/main/src/features/admin/macros/dataTableColumns.js
+++ b/frontend/apps/main/src/features/admin/macros/dataTableColumns.js
@@ -32,6 +32,7 @@ export const createColumns = (t) => [
   },
   {
     accessorKey: 'usage_count',
+    enableGlobalFilter: false,
     header: function () {
       return h('div', { class: 'text-center' }, t('globals.terms.usage'))
     },
@@ -41,6 +42,7 @@ export const createColumns = (t) => [
   },
   {
     accessorKey: 'created_at',
+    enableGlobalFilter: false,
     header: function () {
       return h('div', { class: 'text-center' }, t('globals.terms.createdAt'))
     },
@@ -50,6 +52,7 @@ export const createColumns = (t) => [
   },
   {
     accessorKey: 'updated_at',
+    enableGlobalFilter: false,
     header: function () {
       return h('div', { class: 'text-center' }, t('globals.terms.updatedAt'))
     },
@@ -61,6 +64,7 @@ export const createColumns = (t) => [
     id: 'actions',
     enableHiding: false,
     enableSorting: false,
+    enableGlobalFilter: false,
     cell: ({ row }) => {
       const macro = row.original
       return h(
diff --git a/frontend/apps/main/src/features/admin/tags/dataTableColumns.js b/frontend/apps/main/src/features/admin/tags/dataTableColumns.js
index 15d8c4dc..30c451f4 100644
--- a/frontend/apps/main/src/features/admin/tags/dataTableColumns.js
+++ b/frontend/apps/main/src/features/admin/tags/dataTableColumns.js
@@ -21,6 +21,7 @@ export const createColumns = (t, { onEdit } = {}) => [
   },
   {
     accessorKey: 'created_at',
+    enableGlobalFilter: false,
     header: function () {
       return h('div', { class: 'text-center' }, t('globals.terms.createdAt'))
     },
@@ -30,6 +31,7 @@ export const createColumns = (t, { onEdit } = {}) => [
   },
   {
     accessorKey: 'updated_at',
+    enableGlobalFilter: false,
     header: function () {
       return h('div', { class: 'text-center' }, t('globals.terms.updatedAt'))
     },
diff --git a/frontend/apps/main/src/views/admin/business-hours/BusinessHoursList.vue b/frontend/apps/main/src/views/admin/business-hours/BusinessHoursList.vue
index c203f005..15b68d3f 100644
--- a/frontend/apps/main/src/views/admin/business-hours/BusinessHoursList.vue
+++ b/frontend/apps/main/src/views/admin/business-hours/BusinessHoursList.vue
@@ -13,7 +13,7 @@
       </div>
     </div>
     <div>
-      <DataTable :columns="createColumns(t)" :data="businessHours" :loading="isLoading" />
+      <DataTable :columns="createColumns(t)" :data="businessHours" :loading="isLoading" :searchable="false" />
     </div>
   </LoadingOverlay>
 </template>
diff --git a/frontend/apps/main/src/views/admin/context-links/ContextLinkList.vue b/frontend/apps/main/src/views/admin/context-links/ContextLinkList.vue
index 20c68ab8..134711bc 100644
--- a/frontend/apps/main/src/views/admin/context-links/ContextLinkList.vue
+++ b/frontend/apps/main/src/views/admin/context-links/ContextLinkList.vue
@@ -9,7 +9,7 @@
       </div>
     </div>
     <div>
-      <DataTable :columns="createColumns(t)" :data="links" :loading="isLoading" />
+      <DataTable :columns="createColumns(t)" :data="links" :loading="isLoading" :searchable="false" />
     </div>
   </LoadingOverlay>
 </template>
diff --git a/frontend/apps/main/src/views/admin/custom-attributes/CustomAttributes.vue b/frontend/apps/main/src/views/admin/custom-attributes/CustomAttributes.vue
index 6d265f71..a2b6f6f1 100644
--- a/frontend/apps/main/src/views/admin/custom-attributes/CustomAttributes.vue
+++ b/frontend/apps/main/src/views/admin/custom-attributes/CustomAttributes.vue
@@ -51,10 +51,10 @@
                 </TabsTrigger>
               </TabsList>
               <TabsContent value="contact">
-                <DataTable :columns="createColumns(t, { onEdit: editCustomAttribute })" :data="customAttributes" :loading="isLoading" />
+                <DataTable :columns="createColumns(t, { onEdit: editCustomAttribute })" :data="customAttributes" :loading="isLoading" :searchable="false" />
               </TabsContent>
               <TabsContent value="conversation">
-                <DataTable :columns="createColumns(t, { onEdit: editCustomAttribute })" :data="customAttributes" :loading="isLoading" />
+                <DataTable :columns="createColumns(t, { onEdit: editCustomAttribute })" :data="customAttributes" :loading="isLoading" :searchable="false" />
               </TabsContent>
             </Tabs>
           </div>
diff --git a/frontend/apps/main/src/views/admin/inbox/InboxList.vue b/frontend/apps/main/src/views/admin/inbox/InboxList.vue
index 0269465c..8a4133f7 100644
--- a/frontend/apps/main/src/views/admin/inbox/InboxList.vue
+++ b/frontend/apps/main/src/views/admin/inbox/InboxList.vue
@@ -11,7 +11,7 @@
       </router-link>
     </div>
     <div>
-      <DataTable :columns="columns" :data="data" :loading="isLoading" />
+      <DataTable :columns="columns" :data="data" :loading="isLoading" :searchable="false" />
     </div>
   </LoadingOverlay>
 </template>
diff --git a/frontend/apps/main/src/views/admin/oidc/OIDCList.vue b/frontend/apps/main/src/views/admin/oidc/OIDCList.vue
index bbe71ce4..19f7b6ee 100644
--- a/frontend/apps/main/src/views/admin/oidc/OIDCList.vue
+++ b/frontend/apps/main/src/views/admin/oidc/OIDCList.vue
@@ -11,7 +11,7 @@
       </div>
     </div>
     <div>
-      <DataTable :columns="createColumns(t)" :data="oidc" :loading="isLoading" />
+      <DataTable :columns="createColumns(t)" :data="oidc" :loading="isLoading" :searchable="false" />
     </div>
   </LoadingOverlay>
 </template>
diff --git a/frontend/apps/main/src/views/admin/roles/RoleList.vue b/frontend/apps/main/src/views/admin/roles/RoleList.vue
index 18514bfb..4768a3dc 100644
--- a/frontend/apps/main/src/views/admin/roles/RoleList.vue
+++ b/frontend/apps/main/src/views/admin/roles/RoleList.vue
@@ -10,7 +10,7 @@
       </router-link>
     </div>
     <div>
-      <DataTable :columns="createColumns(t)" :data="roles" :loading="isLoading" />
+      <DataTable :columns="createColumns(t)" :data="roles" :loading="isLoading" :searchable="false" />
     </div>
   </LoadingOverlay>
 </template>
diff --git a/frontend/apps/main/src/views/admin/shared-views/SharedViewList.vue b/frontend/apps/main/src/views/admin/shared-views/SharedViewList.vue
index 53202f83..7a5d3b8d 100644
--- a/frontend/apps/main/src/views/admin/shared-views/SharedViewList.vue
+++ b/frontend/apps/main/src/views/admin/shared-views/SharedViewList.vue
@@ -10,7 +10,7 @@
       </router-link>
     </div>
     <div>
-      <DataTable :columns="createColumns(t)" :data="sharedViews" :loading="formLoading" />
+      <DataTable :columns="createColumns(t)" :data="sharedViews" :loading="formLoading" :searchable="false" />
     </div>
   </LoadingOverlay>
 </template>
diff --git a/frontend/apps/main/src/views/admin/sla/SLAList.vue b/frontend/apps/main/src/views/admin/sla/SLAList.vue
index 51d58810..c89af3a3 100644
--- a/frontend/apps/main/src/views/admin/sla/SLAList.vue
+++ b/frontend/apps/main/src/views/admin/sla/SLAList.vue
@@ -13,7 +13,7 @@
       </div>
     </div>
     <div>
-      <DataTable :columns="createColumns(t)" :data="slas" :loading="isLoading" />
+      <DataTable :columns="createColumns(t)" :data="slas" :loading="isLoading" :searchable="false" />
     </div>
   </LoadingOverlay>
 </template>
diff --git a/frontend/apps/main/src/views/admin/status/StatusView.vue b/frontend/apps/main/src/views/admin/status/StatusView.vue
index ded7be74..80e9f3f3 100644
--- a/frontend/apps/main/src/views/admin/status/StatusView.vue
+++ b/frontend/apps/main/src/views/admin/status/StatusView.vue
@@ -40,7 +40,7 @@
             </div>
           </div>
           <div>
-            <DataTable :columns="createColumns(t, { onEdit: editStatus })" :data="statuses" :loading="isLoading" />
+            <DataTable :columns="createColumns(t, { onEdit: editStatus })" :data="statuses" :loading="isLoading" :searchable="false" />
           </div>
         </LoadingOverlay>
       </template>
diff --git a/frontend/apps/main/src/views/admin/teams/TeamList.vue b/frontend/apps/main/src/views/admin/teams/TeamList.vue
index 58263d81..03f55f99 100644
--- a/frontend/apps/main/src/views/admin/teams/TeamList.vue
+++ b/frontend/apps/main/src/views/admin/teams/TeamList.vue
@@ -6,7 +6,7 @@
       </router-link>
     </div>
     <div>
-      <DataTable :columns="columns" :data="data" :loading="isLoading" />
+      <DataTable :columns="columns" :data="data" :loading="isLoading" :searchable="false" />
     </div>
   </LoadingOverlay>
 </template>
diff --git a/frontend/apps/main/src/views/admin/templates/TemplateList.vue b/frontend/apps/main/src/views/admin/templates/TemplateList.vue
index 5d2d4f87..f7fbd025 100644
--- a/frontend/apps/main/src/views/admin/templates/TemplateList.vue
+++ b/frontend/apps/main/src/views/admin/templates/TemplateList.vue
@@ -24,10 +24,10 @@
           </TabsTrigger>
         </TabsList>
         <TabsContent value="email_outgoing">
-          <DataTable :columns="createOutgoingEmailTableColumns(t)" :data="templates" :loading="isLoading" />
+          <DataTable :columns="createOutgoingEmailTableColumns(t)" :data="templates" :loading="isLoading" :searchable="false" />
         </TabsContent>
         <TabsContent value="email_notification">
-          <DataTable :columns="createEmailNotificationTableColumns(t)" :data="templates" :loading="isLoading" />
+          <DataTable :columns="createEmailNotificationTableColumns(t)" :data="templates" :loading="isLoading" :searchable="false" />
         </TabsContent>
       </Tabs>
     </div>
diff --git a/frontend/apps/main/src/views/admin/webhooks/WebhookList.vue b/frontend/apps/main/src/views/admin/webhooks/WebhookList.vue
index b3a6abcd..f4ef357d 100644
--- a/frontend/apps/main/src/views/admin/webhooks/WebhookList.vue
+++ b/frontend/apps/main/src/views/admin/webhooks/WebhookList.vue
@@ -11,7 +11,7 @@
       </div>
     </div>
     <div>
-      <DataTable :columns="createColumns(t)" :data="webhooks" :loading="isLoading" />
+      <DataTable :columns="createColumns(t)" :data="webhooks" :loading="isLoading" :searchable="false" />
     </div>
   </LoadingOverlay>
 </template>