diff --git a/desk/src/components/HelpdeskTable.vue b/desk/src/components/HelpdeskTable.vue
index c727b67e4..f5665465b 100644
--- a/desk/src/components/HelpdeskTable.vue
+++ b/desk/src/components/HelpdeskTable.vue
@@ -63,7 +63,8 @@
         </div>
       </div>
       <div class="divide-y overflow-y-auto px-6 text-base">
-        <div
+        <component
+          :is="getRowClickComponent(row[rowKey])"
           v-for="row in data"
           :key="row[rowKey]"
           class="group flex h-11 w-full items-center gap-2 px-3 py-2 transition"
@@ -71,9 +72,8 @@
             'bg-gray-200': selection.has(row[rowKey]),
             'hover:bg-gray-300': selection.has(row[rowKey]),
             'hover:bg-gray-100': !selection.has(row[rowKey]),
-            'cursor-pointer': emitRowClick,
+            'cursor-pointer': rowClick.type !== 'none',
           }"
-          @click="onRowClick(row)"
         >
           <Input
             v-if="!hideCheckbox"
@@ -97,7 +97,7 @@
           <div v-if="slots['row-extra']" class="ml-auto">
             <slot name="row-extra" :data="row" />
           </div>
-        </div>
+        </component>
       </div>
     </div>
     <transition
@@ -152,7 +152,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, reactive, toRefs, useSlots } from "vue";
+import { computed, h, reactive, toRefs, useSlots } from "vue";
+import { RouteLocationOptions, RouterLink } from "vue-router";
 import { FeatherIcon, Popover, Switch } from "frappe-ui";
 import { isEmpty } from "lodash";
 import IconAdd from "~icons/espresso/add";
@@ -167,23 +168,28 @@ type Column = {
 type RowKey = string;
 type SelectionKey = string | number;
 
-type P = {
+interface RowClick {
+  fn: (id: RowKey) => RouteLocationOptions | void;
+  type: "action" | "link" | "none";
+}
+
+interface P {
   columns: Column[];
   rowKey: string;
   data?: Record<string, any>[];
-  emitRowClick?: boolean;
+  rowClick?: RowClick;
   emptyMessage?: string;
   hideCheckbox?: boolean;
   hideColumnSelector?: boolean;
   selection?: Set<SelectionKey>;
-};
+}
 
 const props = withDefaults(defineProps<P>(), {
   data: () => [],
-  emitRowClick: false,
   emptyMessage: "No records",
   hideCheckbox: false,
   hideColumnSelector: false,
+  rowClick: () => ({ fn: () => ({}), type: "none" }),
   selection: () => new Set(),
 });
 
@@ -192,7 +198,7 @@ const emit = defineEmits<{
   (event: "update:selection", selection: Set<SelectionKey>): void;
 }>();
 
-const { columns, data, emitRowClick, rowKey, selection } = toRefs(props);
+const { columns, data, rowClick, rowKey, selection } = toRefs(props);
 const slots = useSlots();
 const allSelected = computed(() => selection.value.size === data.value.length);
 const togglableColumns = reactive(
@@ -209,6 +215,21 @@ const selectionText = computed(() => {
   return `${size} ${verb} selected`;
 });
 
+function getRowClickComponent(key: RowKey) {
+  switch (rowClick.value.type) {
+    case "link":
+      return h(RouterLink, {
+        to: rowClick.value.fn(key),
+      });
+    case "action":
+      return h("div", {
+        onClick: () => rowClick.value.fn(key),
+      });
+    default:
+      return "div";
+  }
+}
+
 function isColVisible(column: Column) {
   return !column.isTogglable || togglableColumns[column.colKey];
 }
@@ -231,10 +252,6 @@ function toggleAllRows(cond: boolean) {
   data.value.forEach((d) => selection.value.add(d[rowKey.value]));
   emit("update:selection", selection.value);
 }
-
-function onRowClick(row) {
-  if (emitRowClick.value) emit("row-click", row[rowKey.value]);
-}
 </script>
 
 <style scoped>
diff --git a/desk/src/pages/desk/canned_response/CannedResponseList.vue b/desk/src/pages/desk/canned_response/CannedResponseList.vue
index c30b532f9..05a5b107a 100644
--- a/desk/src/pages/desk/canned_response/CannedResponseList.vue
+++ b/desk/src/pages/desk/canned_response/CannedResponseList.vue
@@ -15,15 +15,15 @@
       </template>
     </PageTitle>
     <HelpdeskTable
-      class="grow"
       :columns="columns"
       :data="responses.list?.data || []"
       :empty-message="emptyMessage"
-      row-key="name"
-      :emit-row-click="true"
       :hide-checkbox="true"
       :hide-column-selector="true"
-      @row-click="gotoResponse"
+      :row-click="{
+        type: 'link',
+        fn: toResponse,
+      }"
     />
     <ListNavigation class="p-3" v-bind="responses" />
     <AddNewCannedResponsesDialog
@@ -34,7 +34,6 @@
 </template>
 <script setup lang="ts">
 import { ref } from "vue";
-import { useRouter } from "vue-router";
 import { AGENT_PORTAL_CANNED_RESPONSE_SINGLE } from "@/router";
 import { createListManager } from "@/composables/listManager";
 import PageTitle from "@/components/PageTitle.vue";
@@ -43,7 +42,6 @@ import ListNavigation from "@/components/ListNavigation.vue";
 import AddNewCannedResponsesDialog from "@/components/desk/global/AddNewCannedResponsesDialog.vue";
 import IconPlus from "~icons/lucide/plus";
 
-const router = useRouter();
 const showNewDialog = ref(false);
 const emptyMessage = "No Canned Responses Found";
 const columns = [
@@ -65,12 +63,12 @@ const responses = createListManager({
   auto: true,
 });
 
-function gotoResponse(id: string) {
-  router.push({
+function toResponse(id: string) {
+  return {
     name: AGENT_PORTAL_CANNED_RESPONSE_SINGLE,
     params: {
       id,
     },
-  });
+  };
 }
 </script>
diff --git a/desk/src/pages/desk/contact/ContactList.vue b/desk/src/pages/desk/contact/ContactList.vue
index 34c869354..89cf13e1e 100644
--- a/desk/src/pages/desk/contact/ContactList.vue
+++ b/desk/src/pages/desk/contact/ContactList.vue
@@ -15,15 +15,18 @@
       </template>
     </PageTitle>
     <HelpdeskTable
-      class="grow"
       :columns="columns"
       :data="contacts.list?.data || []"
-      row-key="name"
       :emit-row-click="true"
       :empty-message="emptyMessage"
       :hide-checkbox="true"
       :hide-column-selector="true"
-      @row-click="openContact"
+      :row-click="{
+        type: 'action',
+        fn: openContact,
+      }"
+      class="grow"
+      row-key="name"
     >
       <template #name="{ data }">
         <div class="flex items-center gap-2">
diff --git a/desk/src/pages/desk/customer/CustomerList.vue b/desk/src/pages/desk/customer/CustomerList.vue
index 8e0dd79d0..a599cedc6 100644
--- a/desk/src/pages/desk/customer/CustomerList.vue
+++ b/desk/src/pages/desk/customer/CustomerList.vue
@@ -20,10 +20,12 @@
       :data="customers.list?.data || []"
       :empty-message="emptyMessage"
       row-key="name"
-      :emit-row-click="true"
       :hide-checkbox="true"
       :hide-column-selector="true"
-      @row-click="openCustomer"
+      :row-click="{
+        type: 'action',
+        fn: openCustomer,
+      }"
     >
       <template #name="{ data }">
         <div class="flex items-center gap-2">
diff --git a/desk/src/pages/desk/email/EmailList.vue b/desk/src/pages/desk/email/EmailList.vue
index 8f2409974..0ba4a4f16 100644
--- a/desk/src/pages/desk/email/EmailList.vue
+++ b/desk/src/pages/desk/email/EmailList.vue
@@ -17,10 +17,12 @@
       :data="accounts.list?.data || []"
       :empty-message="emptyMessage"
       row-key="name"
-      :emit-row-click="true"
       :hide-checkbox="true"
       :hide-column-selector="true"
-      @row-click="gotoAccount"
+      :row-click="{
+        type: 'link',
+        fn: toAccount,
+      }"
     >
       <template #email_id="{ data }">
         <div class="flex justify-between">
@@ -107,12 +109,12 @@ const accounts = createListManager({
   auto: true,
 });
 
-function gotoAccount(id: string) {
-  router.push({
+function toAccount(id: string) {
+  return {
     name: AGENT_PORTAL_EMAIL_SINGLE,
     params: {
       emailAccountId: id,
     },
-  });
+  };
 }
 </script>
diff --git a/desk/src/pages/desk/escalation/EscalationRuleList.vue b/desk/src/pages/desk/escalation/EscalationRuleList.vue
index 84f71f9dd..1f6a79288 100644
--- a/desk/src/pages/desk/escalation/EscalationRuleList.vue
+++ b/desk/src/pages/desk/escalation/EscalationRuleList.vue
@@ -20,10 +20,12 @@
       :data="rules.list?.data || []"
       :empty-message="emptyMessage"
       row-key="name"
-      :emit-row-click="true"
       :hide-checkbox="true"
       :hide-column-selector="true"
-      @row-click="openDialog"
+      :row-click="{
+        type: 'action',
+        fn: openDialog,
+      }"
     >
       <template #is_enabled="{ data }">
         <Badge :theme="data.is_enabled ? 'green' : 'red'" variant="subtle">
diff --git a/desk/src/pages/desk/sla/SlaList.vue b/desk/src/pages/desk/sla/SlaList.vue
index 071c4d4b0..0cc380e16 100644
--- a/desk/src/pages/desk/sla/SlaList.vue
+++ b/desk/src/pages/desk/sla/SlaList.vue
@@ -17,10 +17,12 @@
       :data="policies.list?.data || []"
       :empty-message="emptyMessage"
       row-key="name"
-      :emit-row-click="true"
       :hide-checkbox="true"
       :hide-column-selector="true"
-      @row-click="gotoPolicy"
+      :row-click="{
+        type: 'link',
+        fn: toPolicy,
+      }"
     >
       <template #enabled="{ data }">
         <Badge :theme="data.enabled ? 'green' : 'gray'" variant="subtle">
@@ -37,7 +39,6 @@
   </div>
 </template>
 <script setup lang="ts">
-import { useRouter } from "vue-router";
 import { Badge } from "frappe-ui";
 import { AGENT_PORTAL_SLA_NEW, AGENT_PORTAL_SLA_SINGLE } from "@/router";
 import { createListManager } from "@/composables/listManager";
@@ -46,7 +47,6 @@ import HelpdeskTable from "@/components/HelpdeskTable.vue";
 import ListNavigation from "@/components/ListNavigation.vue";
 import IconPlus from "~icons/lucide/plus";
 
-const router = useRouter();
 const emptyMessage = "No Support Policies Found";
 const columns = [
   {
@@ -72,12 +72,12 @@ const policies = createListManager({
   auto: true,
 });
 
-function gotoPolicy(id: string) {
-  router.push({
+function toPolicy(id: string) {
+  return {
     name: AGENT_PORTAL_SLA_SINGLE,
     params: {
       id,
     },
-  });
+  };
 }
 </script>
diff --git a/desk/src/pages/desk/team/TeamList.vue b/desk/src/pages/desk/team/TeamList.vue
index 8620be1cd..3e1fe6f55 100644
--- a/desk/src/pages/desk/team/TeamList.vue
+++ b/desk/src/pages/desk/team/TeamList.vue
@@ -15,15 +15,17 @@
       </template>
     </PageTitle>
     <HelpdeskTable
-      class="grow"
       :columns="columns"
       :data="teams.list?.data || []"
       :empty-message="emptyMessage"
-      row-key="name"
-      :emit-row-click="true"
       :hide-checkbox="true"
       :hide-column-selector="true"
-      @row-click="gotoTeam"
+      :row-click="{
+        type: 'link',
+        fn: toTeam,
+      }"
+      class="grow"
+      row-key="name"
     />
     <ListNavigation class="p-3" v-bind="teams" />
     <Dialog
@@ -121,12 +123,12 @@ const newTeam = createResource({
   },
 });
 
-function gotoTeam(id: string) {
-  router.push({
+function toTeam(id: string) {
+  return {
     name: AGENT_PORTAL_TEAM_SINGLE,
     params: {
       teamId: id,
     },
-  });
+  };
 }
 </script>
diff --git a/desk/src/pages/desk/ticket-list/MainTable.vue b/desk/src/pages/desk/ticket-list/MainTable.vue
index d9ff97f9d..26d664df9 100644
--- a/desk/src/pages/desk/ticket-list/MainTable.vue
+++ b/desk/src/pages/desk/ticket-list/MainTable.vue
@@ -3,10 +3,12 @@
     v-model:selection="selection"
     :columns="columns"
     :data="tickets"
-    :emit-row-click="true"
     :empty-message="emptyMessage"
+    :row-click="{
+      fn: toTicket,
+      type: 'link',
+    }"
     row-key="name"
-    @row-click="toTicket"
   >
     <template #subject="{ data }">
       <TicketSummary
@@ -195,12 +197,12 @@ function assignOpts(selected: Set<number>) {
 }
 
 function toTicket(ticketId: string) {
-  router.push({
+  return {
     name: AGENT_PORTAL_TICKET,
     params: {
       ticketId,
     },
-  });
+  };
 }
 </script>
 
diff --git a/desk/src/pages/desk/ticket_type/TicketTypeList.vue b/desk/src/pages/desk/ticket_type/TicketTypeList.vue
index 1d4e32a92..aed46e34d 100644
--- a/desk/src/pages/desk/ticket_type/TicketTypeList.vue
+++ b/desk/src/pages/desk/ticket_type/TicketTypeList.vue
@@ -17,16 +17,17 @@
       :data="ticketTypes.list?.data || []"
       :empty-message="emptyMessage"
       row-key="name"
-      :emit-row-click="true"
       :hide-checkbox="true"
       :hide-column-selector="true"
-      @row-click="gotoTeam"
+      :row-click="{
+        type: 'link',
+        fn: toType,
+      }"
     />
     <ListNavigation class="p-3" v-bind="ticketTypes" />
   </div>
 </template>
 <script setup lang="ts">
-import { useRouter } from "vue-router";
 import {
   AGENT_PORTAL_TICKET_TYPE_NEW,
   AGENT_PORTAL_TICKET_TYPE_SINGLE,
@@ -37,7 +38,6 @@ import HelpdeskTable from "@/components/HelpdeskTable.vue";
 import ListNavigation from "@/components/ListNavigation.vue";
 import IconPlus from "~icons/lucide/plus";
 
-const router = useRouter();
 const emptyMessage = "No Ticket Types Found";
 const columns = [
   {
@@ -58,12 +58,12 @@ const ticketTypes = createListManager({
   auto: true,
 });
 
-function gotoTeam(id: string) {
-  router.push({
+function toType(id: string) {
+  return {
     name: AGENT_PORTAL_TICKET_TYPE_SINGLE,
     params: {
       id,
     },
-  });
+  };
 }
 </script>
diff --git a/desk/src/pages/knowledge-base/KnowledgeBaseSubcategory.vue b/desk/src/pages/knowledge-base/KnowledgeBaseSubcategory.vue
index fb9604ddf..bed66b209 100644
--- a/desk/src/pages/knowledge-base/KnowledgeBaseSubcategory.vue
+++ b/desk/src/pages/knowledge-base/KnowledgeBaseSubcategory.vue
@@ -35,9 +35,12 @@
       :emit-row-click="true"
       :hide-checkbox="true"
       :hide-column-selector="true"
+      :row-click="{
+        type: 'link',
+        fn: toArticle,
+      }"
       class="grow"
       row-key="name"
-      @row-click="toArticle"
     >
       <template #title="{ data }">
         <div class="flex items-center gap-2">
@@ -175,12 +178,12 @@ const columns = [
 ];
 
 function toArticle(articleId: string) {
-  router.push({
+  return {
     name: AGENT_PORTAL_KNOWLEDGE_BASE_ARTICLE,
     params: {
       articleId,
     },
-  });
+  };
 }
 
 function toNewArticle() {
diff --git a/desk/src/pages/portal/TicketList.vue b/desk/src/pages/portal/TicketList.vue
index 53c710af3..1523b044d 100644
--- a/desk/src/pages/portal/TicketList.vue
+++ b/desk/src/pages/portal/TicketList.vue
@@ -38,10 +38,12 @@
         :columns="columns"
         :data="tickets.list?.data"
         row-key="name"
-        :emit-row-click="true"
         :hide-checkbox="true"
         :hide-column-selector="true"
-        @row-click="(ticketId) => handleRowClick(ticketId)"
+        :row-click="{
+          type: 'link',
+          fn: toTicket,
+        }"
       >
         <template #subject="{ data }">
           <div
@@ -160,8 +162,13 @@ function filter(title: string, filters: Record<string, any>) {
   dropdownTitle.value = title;
 }
 
-function handleRowClick(ticketId: number) {
-  router.push({ name: CUSTOMER_PORTAL_TICKET, params: { ticketId } });
+function toTicket(ticketId: number) {
+  return {
+    name: CUSTOMER_PORTAL_TICKET,
+    params: {
+      ticketId,
+    },
+  };
 }
 
 function transformStatus(status: string) {