add global search to datatable with per-table opt-out

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)

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'))
     },

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(

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'))
     },

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>