From db9dc77fe90331d4f37640cccf8bff59d5561c7a Mon Sep 17 00:00:00 2001
From: Hannah Brownson <hannahbrownson18@gmail.com>
Date: Thu, 11 Dec 2025 11:02:22 -0500
Subject: [PATCH 1/6] feat: Testing data-table component from trailhand-ui
 package

---
 dashboard/.npmrc                              |   2 +
 dashboard/package.json                        |   1 +
 dashboard/pkg/epinio/detail/applications.vue  | 258 ++++++++++--------
 .../pkg/epinio/detail/catalogservices.vue     |  94 ++++---
 dashboard/pkg/epinio/list/appcharts.vue       |  73 +++--
 dashboard/pkg/epinio/list/configurations.vue  | 142 +++++-----
 dashboard/pkg/epinio/list/namespaces.vue      |  46 ++--
 dashboard/pkg/epinio/list/services.vue        |  95 ++++---
 .../pages/c/_cluster/applications/index.vue   | 103 ++++---
 dashboard/pkg/epinio/pages/index.vue          |  96 ++++---
 dashboard/pkg/epinio/utils/table-helpers.ts   |  64 +++++
 dashboard/vue.config.js                       |  18 +-
 12 files changed, 599 insertions(+), 393 deletions(-)
 create mode 100644 dashboard/.npmrc
 create mode 100644 dashboard/pkg/epinio/utils/table-helpers.ts

diff --git a/dashboard/.npmrc b/dashboard/.npmrc
new file mode 100644
index 00000000..af6230aa
--- /dev/null
+++ b/dashboard/.npmrc
@@ -0,0 +1,2 @@
+@krumio:registry=https://npm.pkg.github.com
+# npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}
diff --git a/dashboard/package.json b/dashboard/package.json
index b09a612e..147f0f07 100644
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -5,6 +5,7 @@
     "node": ">=20"
   },
   "dependencies": {
+    "@krumio/trailhand-ui": "^1.1.3",
     "@rancher/shell": "3.0.7",
     "@types/lodash": "^4.17.16",
     "eslint": "^9.28.0",
diff --git a/dashboard/pkg/epinio/detail/applications.vue b/dashboard/pkg/epinio/detail/applications.vue
index 0717b8b2..fd4cd8e6 100644
--- a/dashboard/pkg/epinio/detail/applications.vue
+++ b/dashboard/pkg/epinio/detail/applications.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { ref, computed, defineProps, onMounted } from 'vue';
+import '@krumio/trailhand-ui/Components/data-table.js';
+import '@krumio/trailhand-ui/Components/action-menu.js';
+import { ref, computed, onMounted, nextTick, watch } from 'vue';
 import { useStore } from 'vuex';
 import day from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
@@ -10,17 +12,15 @@ import { GitUtils } from '@shell/utils/git';
 import { isArray } from '@shell/utils/array';
 import ConsumptionGauge from '@shell/components/ConsumptionGauge.vue';
 import { APPLICATION_MANIFEST_SOURCE_TYPE, EPINIO_TYPES } from '../types';
-import DataTable from '../components/tables/DataTable.vue';
 import type { DataTableColumn } from '../components/tables/types';
-import BadgeStateFormatter from '@shell/components/formatter/BadgeStateFormatter.vue';
 import PlusMinus from '@shell/components/form/PlusMinus.vue';
 import { epinioExceptionToErrorsArray } from '../utils/errors';
 import ApplicationCard from '../components/application/AppCardDetail.vue';
 import Tabbed from '@shell/components/Tabbed/index.vue';
 import Tab from '@shell/components/Tabbed/Tab.vue';
 import AppGitDeployment from '../components/application/AppGitDeployment.vue';
-import Link from '@shell/components/formatter/Link.vue';
 import Banner from '@components/Banner/Banner.vue';
+import { createDataTable, setupActionListener } from '../utils/table-helpers';
 
 day.extend(relativeTime);
 
@@ -32,6 +32,11 @@ const props = defineProps<{
 
 const store = useStore();
 
+const gitCommitsTableContainer = ref<HTMLElement | null>(null);
+const instancesTableContainer = ref<HTMLElement | null>(null);
+const servicesTableContainer = ref<HTMLElement | null>(null);
+const configsTableContainer = ref<HTMLElement | null>(null);
+
 const t = store.getters['i18n/t'];
 
 const saving = ref(false);
@@ -115,6 +120,14 @@ onMounted(async () => {
     await fetchRepoDetails();
     setCommitDetails();
   }
+
+  await nextTick();
+  createOrUpdateInstancesTable();
+  createOrUpdateServicesTable();
+  createOrUpdateConfigsTable();
+  if (preparedCommits.value.length) {
+    createOrUpdateGitCommitsTable();
+  }
 });
 
 async function updateInstances(newInstances: number) {
@@ -180,29 +193,6 @@ const preparedCommits = computed(() => {
   }));
 });
 
-const gitCommitsColumns = computed<DataTableColumn[]>(() => [
-  {
-    field: 'sha',
-    label: t(`gitPicker.${gitType.value}.tableHeaders.sha.label`),
-    width: '100px'
-  },
-  {
-    field: 'author.login',
-    label: t(`gitPicker.${gitType.value}.tableHeaders.author.label`),
-    width: '190px'
-  },
-  {
-    field: 'message',
-    label: t(`gitPicker.${gitType.value}.tableHeaders.message.label`)
-  },
-  {
-    field: 'date',
-    label: t(`gitPicker.${gitType.value}.tableHeaders.date.label`),
-    width: '220px',
-    formatter: 'dateTime'
-  }
-]);
-
 const sourceIcon = computed(() => props.value.appSourceInfo?.icon || 'icon-epinio');
 
 const commitPosition = computed(() => {
@@ -230,6 +220,132 @@ const commitPosition = computed(() => {
     position: idx
   };
 });
+
+// Custom formatters for git commits table
+const formatAuthorLogin = (value: any, row: any) => {
+  if (row.author) {
+    return `
+      <div class="sortable-table-avatar" style="display: flex; align-items: center;">
+        <img src="${row.author.avatarUrl}" alt="" style="width: 30px; height: 30px; border-radius: 4px; margin-right: 10px;">
+        <a href="${row.author.htmlUrl}" target="_blank" rel="nofollow noopener noreferrer">${row.author.name}</a>
+      </div>
+    `;
+  }
+  return t(`gitPicker.${gitType.value}.tableHeaders.author.unknown`);
+};
+
+const formatSha = (value: any, row: any) => {
+  const isDeployed = row.commitId === gitDeployment.value.deployedCommit.long;
+  const deployedIcon = isDeployed
+    ? `<i class="icon icon-fw icon-commit" title="${t('epinio.applications.detail.deployment.details.git.deployed')}"></i>`
+    : '';
+  return `
+    <div class="sortable-table-commit" style="display: flex;">
+      <a href="${row.htmlUrl}" target="_blank" rel="noopener noreferrer">${row.sha}</a>
+      ${deployedIcon}
+    </div>
+  `;
+};
+
+// Create and update tables
+const createOrUpdateGitCommitsTable = () => {
+  if (!gitCommitsTableContainer.value || !preparedCommits.value.length) return;
+
+  gitCommitsTableContainer.value.innerHTML = '';
+
+  const cols = [
+    {
+      field: 'sha',
+      label: t(`gitPicker.${gitType.value}.tableHeaders.sha.label`),
+      width: '100px',
+      formatter: formatSha
+    },
+    {
+      field: 'author.login',
+      label: t(`gitPicker.${gitType.value}.tableHeaders.author.label`),
+      width: '190px',
+      formatter: formatAuthorLogin
+    },
+    {
+      field: 'message',
+      label: t(`gitPicker.${gitType.value}.tableHeaders.message.label`)
+    },
+    {
+      field: 'date',
+      label: t(`gitPicker.${gitType.value}.tableHeaders.date.label`),
+      width: '220px',
+      formatter: 'dateTime'
+    }
+  ];
+
+  const tableElement = createDataTable(cols, preparedCommits.value, {
+    searchable: true,
+    paginated: true,
+    rowsPerPage: 10
+  });
+  setupActionListener(tableElement);
+  gitCommitsTableContainer.value.appendChild(tableElement);
+};
+
+const createOrUpdateInstancesTable = () => {
+  if (!instancesTableContainer.value) return;
+
+  instancesTableContainer.value.innerHTML = '';
+
+  const tableElement = createDataTable(instanceColumns, props.value.instances || [], {
+    searchable: false,
+    paginated: false
+  });
+  setupActionListener(tableElement);
+  instancesTableContainer.value.appendChild(tableElement);
+};
+
+const createOrUpdateServicesTable = () => {
+  if (!servicesTableContainer.value) return;
+
+  servicesTableContainer.value.innerHTML = '';
+
+  const tableElement = createDataTable(serviceColumns, props.value.services || [], {
+    searchable: false,
+    paginated: false
+  });
+  setupActionListener(tableElement);
+  servicesTableContainer.value.appendChild(tableElement);
+};
+
+const createOrUpdateConfigsTable = () => {
+  if (!configsTableContainer.value) return;
+
+  configsTableContainer.value.innerHTML = '';
+
+  const tableElement = createDataTable(configColumns, props.value.baseConfigurations || [], {
+    searchable: false,
+    paginated: false
+  });
+  setupActionListener(tableElement);
+  configsTableContainer.value.appendChild(tableElement);
+};
+
+// Watch for data changes
+watch(() => props.value.instances, async () => {
+  await nextTick();
+  createOrUpdateInstancesTable();
+}, { deep: true });
+
+watch(() => props.value.services, async () => {
+  await nextTick();
+  createOrUpdateServicesTable();
+}, { deep: true });
+
+watch(() => props.value.baseConfigurations, async () => {
+  await nextTick();
+  createOrUpdateConfigsTable();
+}, { deep: true });
+
+watch(preparedCommits, async () => {
+  await nextTick();
+  createOrUpdateGitCommitsTable();
+}, { deep: true });
 </script>
 
 <template>
@@ -448,51 +564,7 @@ const commitPosition = computed(() => {
           >
             {{ t('epinio.applications.detail.deployment.commits.redeploy') }}
           </Banner>
-          <DataTable
-            v-if="preparedCommits"
-            :rows="preparedCommits"
-            :columns="gitCommitsColumns"
-            key-field="sha"
-            :searchable="true"
-            :paginated="true"
-            :rows-per-page="10"
-          >
-            <template #cell:author.login="{row}">
-              <div class="sortable-table-avatar">
-                <template v-if="row.author">
-                  <img
-                    :src="row.author.avatarUrl"
-                    alt=""
-                  >
-                  <a
-                    :href="row.author.htmlUrl"
-                    target="_blank"
-                    rel="nofollow noopener noreferrer"
-                  >
-                    {{ row.author.name }}
-                  </a>
-                </template>
-                <template v-else>
-                  {{ t(`gitPicker.${ gitType }.tableHeaders.author.unknown`) }}
-                </template>
-              </div>
-            </template>
-
-            <template #cell:sha="{row}">
-              <div class="sortable-table-commit">
-                <Link
-                  v-model:value="row.sha"
-                  :row="row"
-                  url-key="htmlUrl"
-                />
-                <i
-                  v-if="row.commitId === gitDeployment.deployedCommit.long"
-                  v-tooltip="t('epinio.applications.detail.deployment.details.git.deployed')"
-                  class="icon icon-fw icon-commit"
-                />
-              </div>
-            </template>
-          </DataTable>
+          <div ref="gitCommitsTableContainer"></div>
         </Tab>
       </Tabbed>
     </div>
@@ -508,57 +580,21 @@ const commitPosition = computed(() => {
           name="instances"
           :weight="3"
         >
-          <DataTable
-            :columns="instanceColumns"
-            :rows="value.instances"
-            :searchable="false"
-            :paginated="false"
-          >
-            <template #cell:stateDisplay="{ row }">
-              <BadgeStateFormatter
-                :row="row"
-                :value="row.stateDisplay"
-              />
-            </template>
-          </DataTable>
+          <div ref="instancesTableContainer"></div>
         </Tab>
         <Tab
           label-key="epinio.applications.detail.tables.services"
           name="services"
           :weight="2"
         >
-          <DataTable
-            :columns="serviceColumns"
-            :rows="value.services"
-            :searchable="false"
-            :paginated="false"
-          >
-            <template #cell:stateDisplay="{ row }">
-              <BadgeStateFormatter
-                :row="row"
-                :value="row.stateDisplay"
-              />
-            </template>
-          </DataTable>
+          <div ref="servicesTableContainer"></div>
         </Tab>
         <Tab
           label-key="epinio.applications.detail.tables.configs"
           name="configs"
           :weight="1"
         >
-          <DataTable
-            :columns="configColumns"
-            :rows="value.baseConfigurations"
-            :searchable="false"
-            :paginated="false"
-          >
-            <template #cell:stateDisplay="{ row }">
-              <BadgeStateFormatter
-                :row="row"
-                :value="row.stateDisplay"
-              />
-            </template>
-          </DataTable>
+          <div ref="configsTableContainer"></div>
         </Tab>
       </Tabbed>
     </div>
diff --git a/dashboard/pkg/epinio/detail/catalogservices.vue b/dashboard/pkg/epinio/detail/catalogservices.vue
index 39149477..dda63152 100644
--- a/dashboard/pkg/epinio/detail/catalogservices.vue
+++ b/dashboard/pkg/epinio/detail/catalogservices.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
+import '@krumio/trailhand-ui/Components/data-table.js';
+import '@krumio/trailhand-ui/Components/action-menu.js';
 import { useStore } from 'vuex';
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, nextTick, watch } from 'vue';
 
 import EpinioCatalogServiceModel from '../models/catalogservices';
 import { EPINIO_TYPES } from '../types';
 
-import DataTable from '../components/tables/DataTable.vue';
 import type { DataTableColumn } from '../components/tables/types';
-import BadgeStateFormatter from '@shell/components/formatter/BadgeStateFormatter.vue';
-import LinkDetail from '@shell/components/formatter/LinkDetail.vue';
+import { createDataTable, setupActionListener } from '../utils/table-helpers';
 
 const store = useStore();
 
@@ -17,12 +17,40 @@ const t = store.getters['i18n/t'];
 const props = defineProps<{ value: EpinioCatalogServiceModel }>();
 
 const pending = ref<boolean>(true);
+const tableContainer = ref<HTMLElement | null>(null);
 
 onMounted(async () => {
   await store.dispatch(`epinio/findAll`, { type: EPINIO_TYPES.SERVICE_INSTANCE });
   pending.value = false;
+
+  await nextTick();
+  createOrUpdateTable();
 });
 
+// Watch for changes to the services
+watch(() => props.value.services, async () => {
+  await nextTick();
+  createOrUpdateTable();
+}, { deep: true });
+
+// Custom formatters
+const formatCatalogService = (value: any, row: any) => {
+  if (row.serviceLocation) {
+    const url = row.serviceLocation.detailLocation;
+    return `<a href="${url}">${row.catalog_service}</a>`; // TODO: this is not displaying correctly as the web component does not render HTML inside cells
+  }
+  return row.catalog_service;
+};
+
+const formatBoundApps = (value: any, row: any) => {
+  if (row.applications && row.applications.length) {
+    return row.applications
+      .map((app: any) => `<a href="${app.detailLocation}">${app.meta.name}</a>`)
+      .join(', ');
+  }
+  return '<span class="text-muted">&nbsp;</span>'; // TODO: this is not displaying correctly as the web component does not render HTML inside cells
+};
+
 const columns: DataTableColumn[] = [
   {
     field: 'stateDisplay',
@@ -40,7 +68,8 @@ const columns: DataTableColumn[] = [
   {
     field: 'catalog_service',
     label: 'Service',
-    sortable: false
+    sortable: false,
+    formatter: formatCatalogService
   },
   {
     field: 'catalog_service_version',
@@ -49,7 +78,8 @@ const columns: DataTableColumn[] = [
   {
     field: 'boundApps',
     label: 'Bound Apps',
-    sortable: false
+    sortable: false,
+    formatter: formatBoundApps
   },
   {
     field: 'metadata.created_at',
@@ -57,6 +87,17 @@ const columns: DataTableColumn[] = [
     formatter: 'age'
   }
 ];
+
+// Create and update table
+const createOrUpdateTable = () => {
+  if (!tableContainer.value || pending.value) return;
+
+  tableContainer.value.innerHTML = '';
+
+  const tableElement = createDataTable(columns, props.value.services || []);
+  setupActionListener(tableElement);
+  tableContainer.value.appendChild(tableElement);
+};
 </script>
 
 <template>
@@ -64,44 +105,7 @@ const columns: DataTableColumn[] = [
     <h2 class="mt-20">
       {{ t('epinio.catalogService.detail.servicesTitle', { catalogService: props.value.name }) }}
     </h2>
-    <DataTable
-      :rows="props.value.services"
-      :columns="columns"
-      :loading="pending"
-    >
-      <template #cell:stateDisplay="{ row }">
-        <BadgeStateFormatter
-          :row="row"
-          :value="row.stateDisplay"
-        />
-      </template>
-      <template #cell:catalog_service="{ row }">
-        <LinkDetail
-          v-if="row.serviceLocation"
-          :row="row.serviceLocation"
-          :value="row.catalog_service"
-        />
-        <span v-else>{{ row.catalog_service }}</span>
-      </template>
-      <template #cell:boundApps="{ row }">
-        <span v-if="row.applications && row.applications.length">
-          <template v-for="(app, index) in row.applications" :key="app.id">
-            <LinkDetail
-              :row="app"
-              :value="app.meta.name"
-            />
-            <span
-              v-if="index < row.applications.length - 1"
-              :key="app.id + 'i'"
-            >, </span>
-          </template>
-        </span>
-        <span
-          v-else
-          class="text-muted"
-        >&nbsp;</span>
-      </template>
-
-    </DataTable>
+    <div v-if="pending">Loading...</div>
+    <div v-else ref="tableContainer"></div>
   </div>
 </template>
diff --git a/dashboard/pkg/epinio/list/appcharts.vue b/dashboard/pkg/epinio/list/appcharts.vue
index b605a71b..cab34f21 100644
--- a/dashboard/pkg/epinio/list/appcharts.vue
+++ b/dashboard/pkg/epinio/list/appcharts.vue
@@ -1,29 +1,20 @@
 <script setup lang="ts">
+import '@krumio/trailhand-ui/Components/data-table.js';
+import '@krumio/trailhand-ui/Components/action-menu.js';
+import type { DataTableColumn } from '../components/tables/types';
 import { EPINIO_TYPES } from '../types';
+
 import { useStore } from 'vuex';
-import DataTable from '../components/tables/DataTable.vue';
-import type { DataTableColumn } from '../components/tables/types';
-import BadgeStateFormatter from '@shell/components/formatter/BadgeStateFormatter.vue';
-import { ref, onMounted, onUnmounted, computed } from 'vue';
+import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
 import { startPolling, stopPolling } from '../utils/polling';
-
-const pending = ref<boolean>(true);
-defineProps<{ schema: object }>(); // Keep for compatibility
+import { createDataTable, setupActionListener } from '../utils/table-helpers';
 
 const store = useStore();
 
-onMounted(async () => {
-  await store.dispatch(
-    `epinio/findAll`,
-    { type: EPINIO_TYPES.APP_CHARTS }
-  );
-  pending.value = false;
-  startPolling(["appcharts"], store);
-});
+defineProps<{ schema: object }>(); // Keep for compatibility
 
-onUnmounted(() => {
-  stopPolling(["appcharts"]);
-});
+const pending = ref<boolean>(true);
+const tableContainer = ref<HTMLElement | null>(null);
 
 const rows = computed(() => {
   return store.getters['epinio/all'](EPINIO_TYPES.APP_CHARTS);
@@ -48,19 +39,41 @@ const columns: DataTableColumn[] = [
     formatter: 'age'
   }
 ];
+
+// Create and update table
+const createOrUpdateTable = () => {
+  if (!tableContainer.value) return;
+
+  tableContainer.value.innerHTML = '';
+
+  const tableElement = createDataTable(columns, rows.value);
+  setupActionListener(tableElement);
+  tableContainer.value.appendChild(tableElement);
+};
+
+// Watch for data changes
+watch(rows, async () => {
+  await nextTick();
+  createOrUpdateTable();
+}, { deep: true });
+
+onMounted(async () => {
+  await store.dispatch(`epinio/findAll`, { type: EPINIO_TYPES.APP_CHARTS });
+
+  pending.value = false;
+
+  await nextTick();
+  createOrUpdateTable();
+
+  startPolling(["appcharts"], store);
+});
+
+onUnmounted(() => {
+  stopPolling(["appcharts"]);
+});
 </script>
 
 <template>
-  <DataTable
-    :rows="rows"
-    :columns="columns"
-    :loading="pending"
-  >
-    <template #cell:stateDisplay="{ row }">
-      <BadgeStateFormatter
-        :row="row"
-        :value="row.stateDisplay"
-      />
-    </template>
-  </DataTable>
+  <div v-if="pending">Loading...</div>
+  <div v-else ref="tableContainer"></div>
 </template>
diff --git a/dashboard/pkg/epinio/list/configurations.vue b/dashboard/pkg/epinio/list/configurations.vue
index 5a7506fd..e2cacb73 100644
--- a/dashboard/pkg/epinio/list/configurations.vue
+++ b/dashboard/pkg/epinio/list/configurations.vue
@@ -1,49 +1,37 @@
 <script setup lang="ts">
-import DataTable from '../components/tables/DataTable.vue';
+import '@krumio/trailhand-ui/Components/data-table.js';
+import '@krumio/trailhand-ui/Components/action-menu.js';
 import type { DataTableColumn } from '../components/tables/types';
 import { EPINIO_TYPES } from '../types';
-import LinkDetail from '@shell/components/formatter/LinkDetail.vue';
-import BadgeStateFormatter from '@shell/components/formatter/BadgeStateFormatter.vue';
 
 import { useStore } from 'vuex';
-import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
 import { startPolling, stopPolling } from '../utils/polling';
+import { createDataTable, setupActionListener } from '../utils/table-helpers';
 
 const store = useStore();
 
 defineProps<{ schema: object }>(); // Keep for compatibility
 
 const pending = ref<boolean>(true);
-
-onMounted(async () => {
-  store.dispatch(`epinio/findAll`, { type: EPINIO_TYPES.APP });
-  store.dispatch(`epinio/findAll`, { type: EPINIO_TYPES.SERVICE_INSTANCE });
-  await store.dispatch(`epinio/findAll`, { type: EPINIO_TYPES.CONFIGURATION });
-
-  pending.value = false;
-  startPolling([
-    "applications",
-    "namespaces",
-    "appcharts",
-    "configurations",
-    "services"
-  ], store);
-});
-
-onUnmounted(() => {
-  stopPolling([
-    "applications",
-    "namespaces",
-    "appcharts",
-    "configurations",
-    "services"
-  ]);
-});
+const tableContainer = ref<HTMLElement | null>(null);
 
 const rows = computed(() => {
   return store.getters['epinio/all'](EPINIO_TYPES.CONFIGURATION);
 });
 
+// Custom formatters
+const formatBoundApps = (value: any, row: any) => {
+  if (!row.applications || row.applications.length === 0) {
+    return '-';
+  }
+  return row.applications.map((app: any) => app.meta.name).join(', ');
+};
+
+const formatService = (value: any, row: any) => {
+  return row.service ? row.service.meta.name : '-';
+};
+
 const columns: DataTableColumn[] = [
   {
     field: 'nameDisplay',
@@ -56,12 +44,14 @@ const columns: DataTableColumn[] = [
   {
     field: 'boundApps',
     label: 'Bound Apps',
-    sortable: false
+    sortable: false,
+    formatter: formatBoundApps
   },
   {
     field: 'service',
     label: 'Service',
-    sortable: false
+    sortable: false,
+    formatter: formatService
   },
   {
     field: 'variableCount',
@@ -73,49 +63,55 @@ const columns: DataTableColumn[] = [
     formatter: 'age'
   }
 ];
+
+// Create and update table
+const createOrUpdateTable = () => {
+  if (!tableContainer.value) return;
+
+  tableContainer.value.innerHTML = '';
+
+  const tableElement = createDataTable(columns, rows.value);
+  setupActionListener(tableElement);
+  tableContainer.value.appendChild(tableElement);
+};
+
+// Watch for data changes
+watch(rows, async () => {
+  await nextTick();
+  createOrUpdateTable();
+}, { deep: true });
+
+onMounted(async () => {
+  store.dispatch(`epinio/findAll`, { type: EPINIO_TYPES.APP });
+  store.dispatch(`epinio/findAll`, { type: EPINIO_TYPES.SERVICE_INSTANCE });
+  await store.dispatch(`epinio/findAll`, { type: EPINIO_TYPES.CONFIGURATION });
+
+  pending.value = false;
+
+  await nextTick();
+  createOrUpdateTable();
+
+  startPolling([
+    "applications",
+    "namespaces",
+    "appcharts",
+    "configurations",
+    "services"
+  ], store);
+});
+
+onUnmounted(() => {
+  stopPolling([
+    "applications",
+    "namespaces",
+    "appcharts",
+    "configurations",
+    "services"
+  ]);
+});
 </script>
 
 <template>
-  <DataTable
-    :rows="rows"
-    :columns="columns"
-    :loading="pending"
-  >
-    <template #cell:stateDisplay="{ row }">
-      <BadgeStateFormatter
-        :row="row"
-        :value="row.stateDisplay"
-      />
-    </template>
-    <template #cell:service="{ row }">
-      <LinkDetail
-        v-if="row.service"
-        :key="row.service.id"
-        :row="row.service"
-        :value="row.service.meta.name"
-      />
-      <span
-        v-else
-        class="text-muted"
-      >&nbsp;</span>
-    </template>
-    <template #cell:boundApps="{ row }">
-      <span v-if="row.applications && row.applications.length">
-        <template v-for="(app, index) in row.applications" :key="app.id">
-          <LinkDetail
-            :row="app"
-            :value="app.meta.name"
-          />
-          <span
-            v-if="index < row.applications.length - 1"
-            :key="app.id + 'i'"
-          >, </span>
-        </template>
-      </span>
-      <span
-        v-else
-        class="text-muted"
-      >&nbsp;</span>
-    </template>
-  </DataTable>
+  <div v-if="pending">Loading...</div>
+  <div v-else ref="tableContainer"></div>
 </template>
diff --git a/dashboard/pkg/epinio/list/namespaces.vue b/dashboard/pkg/epinio/list/namespaces.vue
index 11648e0e..abc4451b 100644
--- a/dashboard/pkg/epinio/list/namespaces.vue
+++ b/dashboard/pkg/epinio/list/namespaces.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import '@krumio/trailhand-ui/Components/data-table.js';
+import '@krumio/trailhand-ui/Components/action-menu.js';
 import { useStore } from 'vuex';
 import { ref, onMounted, onUnmounted, computed, watch, nextTick, useAttrs } from 'vue';
 import { EPINIO_TYPES } from '../types';
@@ -6,16 +8,15 @@ import { Card } from '@components/Card';
 import Banner from '@components/Banner/Banner.vue';
 import { _CREATE } from '@shell/config/query-params';
 import AsyncButton from '@shell/components/AsyncButton';
-import DataTable from '../components/tables/DataTable.vue';
 import type { DataTableColumn } from '../components/tables/types';
-import BadgeStateFormatter from '@shell/components/formatter/BadgeStateFormatter.vue';
 import Masthead from '@shell/components/ResourceList/Masthead';
 import { epinioExceptionToErrorsArray } from '../utils/errors';
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 import { validateKubernetesName } from '@shell/utils/validators/kubernetes-name';
 import { startPolling, stopPolling } from '../utils/polling';
+import { createDataTable, setupActionListener } from '../utils/table-helpers';
 
-defineProps<{
+const props = defineProps<{
   schema: object,
   rows: Array,
 }>();
@@ -24,15 +25,16 @@ const attrs = useAttrs();
 const store = useStore();
 const t = store.getters['i18n/t'];
 
-const errors = ref<Array>([]);
+const errors = ref<Array<any>>([]);
 const namespaceName = ref('namespaceName');
 const showCreateModal = ref<boolean>(false);
 const creatingNamespace = ref<boolean>(false);
 const touched = ref<boolean>(false);
+const tableContainer = ref<HTMLElement | null>(null);
 
 const mode: string = _CREATE;
 const resource: string = EPINIO_TYPES.NAMESPACE;
-const value = ref<Array>({ meta: { name: '' } });
+const value = ref<any>({ meta: { name: '' } });
 
 const showPromptRemove = computed(() => {
   return store.state['action-menu'].showPromptRemove
@@ -48,12 +50,33 @@ const validationPassed = computed(() => {
   return errors.value?.length === 0;
 });
 
+// Create and update table
+const createOrUpdateTable = () => {
+  if (!tableContainer.value) return;
+
+  tableContainer.value.innerHTML = '';
+
+  const tableElement = createDataTable(columns, props.rows);
+  setupActionListener(tableElement);
+  tableContainer.value.appendChild(tableElement);
+};
+
+// Watch for data changes
+watch(() => props.rows, async () => {
+  await nextTick();
+  createOrUpdateTable();
+}, { deep: true });
+
 onMounted(() => {
   // Opens the create namespace modal if the query is passed as query param
   if (store.$router.currentRoute._value.query.mode === 'openModal') {
     openCreateModal();
   }
 
+  nextTick(() => {
+    createOrUpdateTable();
+  });
+
   startPolling(["namespaces", "applications", "configurations"], store);
 });
 
@@ -181,18 +204,7 @@ const columns: DataTableColumn[] = [
         </button>
       </template>
     </Masthead>
-    <DataTable
-      :rows="rows"
-      :columns="columns"
-      key-field="_key"
-    >
-      <template #cell:stateDisplay="{ row }">
-        <BadgeStateFormatter
-          :row="row"
-          :value="row.stateDisplay"
-        />
-      </template>
-    </DataTable>
+    <div ref="tableContainer"></div>
     <div
       v-if="showCreateModal"
       class="modal"
diff --git a/dashboard/pkg/epinio/list/services.vue b/dashboard/pkg/epinio/list/services.vue
index d5682754..dd98ccdf 100644
--- a/dashboard/pkg/epinio/list/services.vue
+++ b/dashboard/pkg/epinio/list/services.vue
@@ -1,16 +1,17 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed } from 'vue';
+import { ref, onMounted, onUnmounted, computed, nextTick, watch } from 'vue';
+import '@krumio/trailhand-ui/Components/data-table.js';
+import '@krumio/trailhand-ui/Components/action-menu.js';
 
 import { EPINIO_TYPES } from '../types';
-import DataTable from '../components/tables/DataTable.vue';
 import type { DataTableColumn } from '../components/tables/types';
-import LinkDetail from '@shell/components/formatter/LinkDetail.vue';
-import BadgeStateFormatter from '@shell/components/formatter/BadgeStateFormatter.vue';
 import { useStore } from 'vuex';
 import { startPolling, stopPolling } from '../utils/polling';
+import { createDataTable, setupActionListener } from '../utils/table-helpers';
 
 const pending = ref(true);
 const store = useStore();
+const tableContainer = ref<HTMLElement | null>(null);
 
 onMounted(async () => {
   await Promise.all([
@@ -35,6 +36,14 @@ const rows = computed(() => {
   return store.getters['epinio/all'](EPINIO_TYPES.SERVICE_INSTANCE);
 });
 
+// Custom formatters
+const formatBoundApps = (value: any, row: any) => {
+  if (!row.applications || row.applications.length === 0) {
+    return '-';
+  }
+  return row.applications.map((app: any) => app.meta.name).join(', ');
+};
+
 const columns: DataTableColumn[] = [
   {
     field: 'stateDisplay',
@@ -61,7 +70,8 @@ const columns: DataTableColumn[] = [
   {
     field: 'boundApps',
     label: 'Bound Apps',
-    sortable: false
+    sortable: false,
+    formatter: formatBoundApps
   },
   {
     field: 'meta.createdAt',
@@ -69,45 +79,44 @@ const columns: DataTableColumn[] = [
     formatter: 'age'
   }
 ];
+
+// Create and update table
+const createOrUpdateTable = () => {
+  if (!tableContainer.value) return;
+
+  tableContainer.value.innerHTML = '';
+
+  const tableElement = createDataTable(columns, rows.value);
+  setupActionListener(tableElement);
+  tableContainer.value.appendChild(tableElement);
+};
+
+// Watch for data changes
+watch(rows, async () => {
+  await nextTick();
+  createOrUpdateTable();
+}, { deep: true });
+
+onMounted(async () => {
+  await Promise.all([
+    store.dispatch(`epinio/findAll`, { type: EPINIO_TYPES.APP }),
+    store.dispatch(
+      `epinio/findAll`,
+      { type: EPINIO_TYPES.SERVICE_INSTANCE }
+    ),
+  ]);
+  pending.value = false;
+
+  await nextTick();
+  createOrUpdateTable();
+
+  // Catalog services are static - only poll on initial load, not continuously
+  // They're loaded above but don't need frequent updates
+  startPolling(["namespaces", "applications"], store);
+});
 </script>
 <template>
-  <DataTable
-    :rows="rows"
-    :columns="columns"
-    :loading="pending"
-  >
-    <template #cell:stateDisplay="{ row }">
-      <BadgeStateFormatter
-        :row="row"
-        :value="row.stateDisplay"
-      />
-    </template>
-    <template #cell:catalog_service="{ row }">
-      <LinkDetail
-        v-if="row.serviceLocation"
-        :row="row.serviceLocation"
-        :value="row.catalog_service"
-      />
-      <span v-else>{{ row.catalog_service }}</span>
-    </template>
-    <template #cell:boundApps="{ row }">
-      <span v-if="row.applications && row.applications.length">
-        <template v-for="(app, index) in row.applications" :key="app.id">
-          <LinkDetail
-            :row="app"
-            :value="app.meta.name"
-          />
-          <span
-            v-if="index < row.applications.length - 1"
-            :key="app.id + 'i'"
-          >, </span>
-        </template>
-      </span>
-      <span
-        v-else
-        class="text-muted"
-      >&nbsp;</span>
-    </template>
-  </DataTable>
+  <div v-if="pending">Loading...</div>
+  <div v-else ref="tableContainer"></div>
 </template>
 
diff --git a/dashboard/pkg/epinio/pages/c/_cluster/applications/index.vue b/dashboard/pkg/epinio/pages/c/_cluster/applications/index.vue
index de4e0dbc..7cd8e668 100644
--- a/dashboard/pkg/epinio/pages/c/_cluster/applications/index.vue
+++ b/dashboard/pkg/epinio/pages/c/_cluster/applications/index.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
 import { useStore } from 'vuex';
+import '@krumio/trailhand-ui/Components/data-table.js';
+import '@krumio/trailhand-ui/Components/action-menu.js';
 
-import DataTable from '../../../../components/tables/DataTable.vue';
 import type { DataTableColumn } from '../../../../components/tables/types';
 import Loading from '@shell/components/Loading';
 import Masthead from '@shell/components/ResourceList/Masthead';
-import LinkDetail from '@shell/components/formatter/LinkDetail.vue';
-import BadgeStateFormatter from '@shell/components/formatter/BadgeStateFormatter.vue';
 
 import { EPINIO_TYPES } from '../../../../types';
 import { createEpinioRoute } from '../../../../utils/custom-routing';
@@ -47,6 +46,14 @@ const groupedByNamespace = computed(() => {
 
 const pending = ref(true);
 
+// Custom formatter for routes
+const formatRoutes = (value: any, row: any) => {
+  if (!row.routes || row.routes.length === 0) {
+    return '-';
+  }
+  return row.routes.map((route: string) => `https://${route}`).join(', ');
+};
+
 const columns: DataTableColumn[] = [
   {
     field: 'stateDisplay',
@@ -62,9 +69,10 @@ const columns: DataTableColumn[] = [
     label: 'Status'
   },
   {
-    field: 'route',
+    field: 'routes',
     label: 'Routes',
-    sortable: false
+    sortable: false,
+    formatter: formatRoutes
   },
   {
     field: 'deployment.username',
@@ -77,6 +85,48 @@ const columns: DataTableColumn[] = [
   }
 ];
 
+// Store references to table elements for each namespace
+const tableRefs = ref<Record<string, HTMLElement>>({});
+
+// Function to create/update table for a namespace
+const createOrUpdateTable = (namespace: string, apps: any[]) => {
+  const container = tableRefs.value[namespace];
+  if (!container) return;
+
+  // Remove existing table if any
+  container.innerHTML = '';
+
+  // Create new table element
+  const tableElement = document.createElement('data-table');
+  (tableElement as any).columns = columns;
+  (tableElement as any).rows = apps;
+  (tableElement as any).rowActions = true; // Enable actions
+  container.appendChild(tableElement);
+
+  // Listen for action menu events
+  tableElement.addEventListener('action-click', ((event: CustomEvent) => {
+    const { action, resource } = event.detail;
+    handleAction(action, resource);
+  }) as EventListener);
+};
+
+// Handle action menu clicks
+const handleAction = (action: any, resource: any) => {
+  // action.action is the method name (e.g., 'showAppShell')
+  const actionMethod = action.action;
+  if (resource && actionMethod && typeof resource[actionMethod] === 'function') {
+    resource[actionMethod]();
+  }
+};
+
+// Watch for changes in grouped data
+watch(groupedByNamespace, async (newGroups) => {
+  await nextTick();
+  Object.keys(newGroups).forEach(namespace => {
+    createOrUpdateTable(namespace, newGroups[namespace]);
+  });
+}, { deep: true });
+
 onMounted(async () => {
   await store.dispatch('epinio/findAll', { type: EPINIO_TYPES.APP });
   // Non-blocking fetch
@@ -84,6 +134,13 @@ onMounted(async () => {
   store.dispatch('epinio/findAll', { type: EPINIO_TYPES.SERVICE_INSTANCE });
 
   pending.value = false;
+
+  // Create tables after data is loaded
+  await nextTick();
+  Object.keys(groupedByNamespace.value).forEach(namespace => {
+    createOrUpdateTable(namespace, groupedByNamespace.value[namespace]);
+  });
+
   // Removed 'catalogservices' - catalog services are static and don't need frequent polling
   // They're loaded on initial mount if needed, but don't change frequently
   startPolling(
@@ -133,39 +190,7 @@ onUnmounted(() => {
         Namespace: <span class="namespace-name">{{ namespace }}</span>
       </h3>
 
-      <DataTable
-        :rows="apps"
-        :columns="columns"
-      >
-        <template #cell:stateDisplay="{ row }">
-          <BadgeStateFormatter
-            :row="row"
-            :value="row.stateDisplay"
-          />
-        </template>
-        <template #cell:route="{ row }">
-          <span v-if="row.routes && row.routes.length" class="route">
-            <template
-              v-for="(route, index) in row.routes"
-              :key="route.id || route"
-            >
-              <a
-                v-if="row.state === 'running'"
-                :href="`https://${route}`"
-                target="_blank"
-                rel="noopener noreferrer nofollow"
-              >
-                {{ `https://${route}` }}
-              </a>
-              <span v-else>
-                {{ `https://${route}` }}
-              </span>
-              <span v-if="index !== row.routes.length - 1">, </span>
-            </template>
-          </span>
-          <span v-else class="text-muted">&nbsp;</span>
-        </template>
-      </DataTable>
+      <div :ref="el => { if (el) tableRefs[namespace] = el as HTMLElement }"></div>
     </div>
   </div>
 </template>
diff --git a/dashboard/pkg/epinio/pages/index.vue b/dashboard/pkg/epinio/pages/index.vue
index c61a6c19..5d047163 100644
--- a/dashboard/pkg/epinio/pages/index.vue
+++ b/dashboard/pkg/epinio/pages/index.vue
@@ -1,17 +1,18 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import '@krumio/trailhand-ui/Components/data-table.js';
+import '@krumio/trailhand-ui/Components/action-menu.js';
+import { ref, onMounted, nextTick, watch } from 'vue';
 import { useStore } from 'vuex';
 
 import Loading from '@shell/components/Loading.vue';
-import DataTable from '../components/tables/DataTable.vue';
 import type { DataTableColumn } from '../components/tables/types';
 import AsyncButton from '@shell/components/AsyncButton.vue';
-import Link from '@shell/components/formatter/Link.vue';
 
 import { EPINIO_MGMT_STORE, EPINIO_TYPES } from '../types';
 import { _MERGE } from '@shell/plugins/dashboard-store/actions';
 import EpinioCluster, { EpinioInfoPath } from '../models/epiniomgmt/epinio.io.management.cluster';
 import epinioAuth, { EpinioAuthTypes } from '../utils/auth';
+import { createDataTable, setupActionListener } from '../utils/table-helpers';
 
 const store = useStore();
 const t = store.getters['i18n/t'];
@@ -21,7 +22,8 @@ let clusters: EpinioCluster[] = [];
 let clustersSchema: any = null;
 
 const loading = ref(true);
-const error = ref<Error | null>(null)
+const error = ref<Error | null>(null);
+const tableContainer = ref<HTMLElement | null>(null);
 
 onMounted(async () => {
   loading.value = true
@@ -35,9 +37,17 @@ onMounted(async () => {
     error.value = err as Error
   } finally {
     loading.value = false
+    await nextTick();
+    createOrUpdateTable();
   }
 })
 
+// Watch for clusters changes
+watch(() => clusters, async () => {
+  await nextTick();
+  createOrUpdateTable();
+}, { deep: true });
+
 const canRediscover = () => {
   return !clusters.find((c: EpinioCluster) => c.state === 'updating');
 }
@@ -106,6 +116,8 @@ const testCluster = (c: EpinioCluster) => {
       'available',
       { state: { transitioning: false, error: false, message: "" } },
     );
+    // Trigger table update
+    createOrUpdateTable();
   })
   .catch((e: Error) => {
     if (e.message === 'Network Error') {
@@ -126,9 +138,26 @@ const testCluster = (c: EpinioCluster) => {
         }
       });
     }
+    // Trigger table update
+    createOrUpdateTable();
   });
 }
 
+// Custom formatters
+const formatName = (value: any, row: any) => {
+  if (row.state === 'available') {
+    return `<a style="cursor: pointer;" data-cluster-id="${row.id}">${row.name}</a>`;
+  }
+  return row.name;
+};
+
+const formatApi = (value: any, row: any) => {
+  if (row.state !== 'available') {
+    return `<a href="${row.infoUrl}" target="_blank" rel="noopener noreferrer">${row.api}</a>`;
+  }
+  return row.api;
+};
+
 const columns: DataTableColumn[] = [
   {
     field: 'stateDisplay',
@@ -137,17 +166,43 @@ const columns: DataTableColumn[] = [
   },
   {
     field: 'name',
-    label: 'Name'
+    label: 'Name',
+    formatter: formatName
   },
   {
     field: 'api',
-    label: 'API'
+    label: 'API',
+    formatter: formatApi
   },
   {
     field: 'version',
     label: 'Version'
   }
 ];
+
+// Create and update table
+const createOrUpdateTable = () => {
+  if (!tableContainer.value) return;
+
+  tableContainer.value.innerHTML = '';
+
+  const tableElement = createDataTable(columns, clusters);
+  setupActionListener(tableElement);
+  tableContainer.value.appendChild(tableElement);
+
+  // Add click listener for name links
+  tableContainer.value.addEventListener('click', (e: Event) => {
+    const target = e.target as HTMLElement;
+    if (target.tagName === 'A' && target.hasAttribute('data-cluster-id')) {
+      e.preventDefault();
+      const clusterId = target.getAttribute('data-cluster-id');
+      const cluster = clusters.find((c: EpinioCluster) => c.id === clusterId);
+      if (cluster) {
+        login(cluster);
+      }
+    }
+  });
+};
 </script>
 
 <template>
@@ -177,34 +232,7 @@ const columns: DataTableColumn[] = [
           @click="rediscover"
         />
       </div>
-      <DataTable
-        :rows="clusters"
-        :columns="columns"
-      >
-        <template #cell:name="{row}">
-          <div class="epinio-row">
-            <a
-              v-if="row.state === 'available'"
-              @click="login(row)"
-            >{{ row.name }}</a>
-            <template v-else>
-              {{ row.name }}
-            </template>
-          </div>
-        </template>
-        <template #cell:api="{row}">
-          <div class="epinio-row">
-            <Link
-              v-if="row.state !== 'available'"
-              :row="row"
-              :value="{ text: row.api, url: row.infoUrl }"
-            />
-            <template v-else>
-              {{ row.api }}
-            </template>
-          </div>
-        </template>
-      </DataTable>
+      <div ref="tableContainer"></div>
 
     </div>
 
diff --git a/dashboard/pkg/epinio/utils/table-helpers.ts b/dashboard/pkg/epinio/utils/table-helpers.ts
new file mode 100644
index 00000000..557c614e
--- /dev/null
+++ b/dashboard/pkg/epinio/utils/table-helpers.ts
@@ -0,0 +1,64 @@
+/**
+ * Helper utilities for working with trailhand-ui data-table component
+ */
+
+/**
+ * Create a data-table element with the given configuration
+ * @param columns - Column definitions
+ * @param rows - Data rows
+ * @param options - Additional table options
+ * @returns The created table element
+ */
+export function createDataTable(
+  columns: any[],
+  rows: any[],
+  options: {
+    rowActions?: boolean;
+    searchable?: boolean;
+    sortable?: boolean;
+    paginated?: boolean;
+    rowsPerPage?: number;
+  } = {}
+): HTMLElement {
+  const tableElement = document.createElement('data-table');
+
+  (tableElement as any).columns = columns;
+  (tableElement as any).rows = rows;
+  (tableElement as any).rowActions = options.rowActions ?? true;
+  (tableElement as any).searchable = options.searchable ?? true;
+  (tableElement as any).sortable = options.sortable ?? true;
+  (tableElement as any).paginated = options.paginated ?? true;
+
+  if (options.rowsPerPage) {
+    (tableElement as any).rowsPerPage = options.rowsPerPage;
+  }
+
+  return tableElement;
+}
+
+/**
+ * Handle action menu clicks
+ * @param action - The action object with action method name
+ * @param resource - The resource object
+ */
+export function handleActionClick(action: any, resource: any): void {
+  const actionMethod = action.action;
+  if (resource && actionMethod && typeof resource[actionMethod] === 'function') {
+    resource[actionMethod]();
+  }
+}
+
+/**
+ * Setup action click event listener on a table element
+ * @param tableElement - The table element
+ * @param handler - Optional custom handler, defaults to handleActionClick
+ */
+export function setupActionListener(
+  tableElement: HTMLElement,
+  handler: (action: any, resource: any) => void = handleActionClick
+): void {
+  tableElement.addEventListener('action-click', ((event: CustomEvent) => {
+    const { action, resource } = event.detail;
+    handler(action, resource);
+  }) as EventListener);
+}
diff --git a/dashboard/vue.config.js b/dashboard/vue.config.js
index cea72163..06a801b8 100644
--- a/dashboard/vue.config.js
+++ b/dashboard/vue.config.js
@@ -1,6 +1,22 @@
 const config = require('@rancher/shell/vue.config'); // eslint-disable-line @typescript-eslint/no-var-requires
 
-module.exports = config(__dirname, {
+const baseConfig = config(__dirname, {
   excludes: [],
   // excludes: ['fleet', 'example']
 });
+
+// custom element configuration for web components
+baseConfig.chainWebpack = (config) => {
+  config.module
+    .rule('vue')
+    .use('vue-loader')
+    .tap(options => ({
+      ...options,
+      compilerOptions: {
+        ...(options.compilerOptions || {}),
+        isCustomElement: tag => tag === 'data-table' || tag === 'action-menu' || tag === 'iconify-icon'
+      }
+    }));
+};
+
+module.exports = baseConfig;

From 8eda6304811dc0b7a2f4e00c3534719e8b065fbd Mon Sep 17 00:00:00 2001
From: Hannah Brownson <hannahbrownson18@gmail.com>
Date: Fri, 12 Dec 2025 13:34:12 -0500
Subject: [PATCH 2/6] feat: implement trailhand table and action menu
 components, implemented navigation listners and link resolver util to fix
 issue with links in the table not appearing

---
 dashboard/package.json                        |  2 +-
 .../pkg/epinio/components/tables/types.ts     | 16 +++++++
 .../pkg/epinio/detail/catalogservices.vue     | 34 ++++++--------
 dashboard/pkg/epinio/list/configurations.vue  | 29 ++++++------
 dashboard/pkg/epinio/list/namespaces.vue      |  2 +-
 dashboard/pkg/epinio/list/services.vue        | 23 +++++-----
 .../pages/c/_cluster/applications/index.vue   | 43 +++++++++++++++---
 dashboard/pkg/epinio/utils/table-helpers.ts   | 45 +++++++++++++++++++
 8 files changed, 142 insertions(+), 52 deletions(-)

diff --git a/dashboard/package.json b/dashboard/package.json
index 147f0f07..73b84a98 100644
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -5,7 +5,7 @@
     "node": ">=20"
   },
   "dependencies": {
-    "@krumio/trailhand-ui": "^1.1.3",
+    "@krumio/trailhand-ui": "^1.3.0",
     "@rancher/shell": "3.0.7",
     "@types/lodash": "^4.17.16",
     "eslint": "^9.28.0",
diff --git a/dashboard/pkg/epinio/components/tables/types.ts b/dashboard/pkg/epinio/components/tables/types.ts
index 0768f30b..a0db1ede 100644
--- a/dashboard/pkg/epinio/components/tables/types.ts
+++ b/dashboard/pkg/epinio/components/tables/types.ts
@@ -83,6 +83,22 @@ export interface DataTableColumn {
    */
   formatter?: string | ((value: any, row: DataTableRow) => any);
 
+  /**
+   * Link URL for the column. Can be:
+   * - A string field name to access the URL from row data
+   * - A function (row) => URL string
+   * When provided, the cell value will be rendered as a clickable link
+   * @param row - The entire row object
+   * @returns The URL for the link
+   */
+  link?: string | ((row: DataTableRow) => string | null | undefined);
+
+  /**
+   * Target attribute for links (default: '_self')
+   * Use '_blank' to open links in a new tab
+   */
+  linkTarget?: '_self' | '_blank' | '_parent' | '_top';
+
   /**
    * Custom sort function for this column
    * @param a - First row to compare
diff --git a/dashboard/pkg/epinio/detail/catalogservices.vue b/dashboard/pkg/epinio/detail/catalogservices.vue
index dda63152..313f0e5a 100644
--- a/dashboard/pkg/epinio/detail/catalogservices.vue
+++ b/dashboard/pkg/epinio/detail/catalogservices.vue
@@ -2,15 +2,17 @@
 import '@krumio/trailhand-ui/Components/data-table.js';
 import '@krumio/trailhand-ui/Components/action-menu.js';
 import { useStore } from 'vuex';
+import { useRouter } from 'vue-router';
 import { ref, onMounted, nextTick, watch } from 'vue';
 
 import EpinioCatalogServiceModel from '../models/catalogservices';
 import { EPINIO_TYPES } from '../types';
 
 import type { DataTableColumn } from '../components/tables/types';
-import { createDataTable, setupActionListener } from '../utils/table-helpers';
+import { createDataTable, setupActionListener, setupNavigationListener, createLinkResolver } from '../utils/table-helpers';
 
 const store = useStore();
+const router = useRouter();
 
 const t = store.getters['i18n/t'];
 
@@ -34,21 +36,13 @@ watch(() => props.value.services, async () => {
 }, { deep: true });
 
 // Custom formatters
-const formatCatalogService = (value: any, row: any) => {
-  if (row.serviceLocation) {
-    const url = row.serviceLocation.detailLocation;
-    return `<a href="${url}">${row.catalog_service}</a>`; // TODO: this is not displaying correctly as the web component does not render HTML inside cells
-  }
-  return row.catalog_service;
-};
-
-const formatBoundApps = (value: any, row: any) => {
+const formatBoundApps = (_value: any, row: any) => {
   if (row.applications && row.applications.length) {
     return row.applications
-      .map((app: any) => `<a href="${app.detailLocation}">${app.meta.name}</a>`)
+      .map((app: any) => app.meta.name)
       .join(', ');
   }
-  return '<span class="text-muted">&nbsp;</span>'; // TODO: this is not displaying correctly as the web component does not render HTML inside cells
+  return '-';
 };
 
 const columns: DataTableColumn[] = [
@@ -59,25 +53,22 @@ const columns: DataTableColumn[] = [
   },
   {
     field: 'nameDisplay',
-    label: 'Name'
-  },
-  {
-    field: 'metadata.namespace',
-    label: 'Namespace'
+    label: 'Name',
+    link: createLinkResolver(router, 'detailLocation')
   },
   {
     field: 'catalog_service',
-    label: 'Service',
+    label: 'Catalog Service',
     sortable: false,
-    formatter: formatCatalogService
+    link: createLinkResolver(router, 'serviceLocation')
   },
   {
     field: 'catalog_service_version',
-    label: 'Service Version'
+    label: 'Catalog Service Version'
   },
   {
     field: 'boundApps',
-    label: 'Bound Apps',
+    label: 'Bound Applications',
     sortable: false,
     formatter: formatBoundApps
   },
@@ -96,6 +87,7 @@ const createOrUpdateTable = () => {
 
   const tableElement = createDataTable(columns, props.value.services || []);
   setupActionListener(tableElement);
+  setupNavigationListener(tableElement, router);
   tableContainer.value.appendChild(tableElement);
 };
 </script>
diff --git a/dashboard/pkg/epinio/list/configurations.vue b/dashboard/pkg/epinio/list/configurations.vue
index e2cacb73..59fb0f9e 100644
--- a/dashboard/pkg/epinio/list/configurations.vue
+++ b/dashboard/pkg/epinio/list/configurations.vue
@@ -5,11 +5,13 @@ import type { DataTableColumn } from '../components/tables/types';
 import { EPINIO_TYPES } from '../types';
 
 import { useStore } from 'vuex';
+import { useRouter } from 'vue-router';
 import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
 import { startPolling, stopPolling } from '../utils/polling';
-import { createDataTable, setupActionListener } from '../utils/table-helpers';
+import { createDataTable, setupActionListener, setupNavigationListener, createLinkResolver } from '../utils/table-helpers';
 
 const store = useStore();
+const router = useRouter();
 
 defineProps<{ schema: object }>(); // Keep for compatibility
 
@@ -28,22 +30,15 @@ const formatBoundApps = (value: any, row: any) => {
   return row.applications.map((app: any) => app.meta.name).join(', ');
 };
 
-const formatService = (value: any, row: any) => {
-  return row.service ? row.service.meta.name : '-';
-};
-
 const columns: DataTableColumn[] = [
   {
     field: 'nameDisplay',
-    label: 'Name'
-  },
-  {
-    field: 'meta.namespace',
-    label: 'Namespace'
+    label: 'Name',
+    link: createLinkResolver(router, 'detailLocation')
   },
   {
     field: 'boundApps',
-    label: 'Bound Apps',
+    label: 'Bound Applications',
     sortable: false,
     formatter: formatBoundApps
   },
@@ -51,11 +46,18 @@ const columns: DataTableColumn[] = [
     field: 'service',
     label: 'Service',
     sortable: false,
-    formatter: formatService
+    link: createLinkResolver(router, 'service.detailLocation'),
+    formatter: (_value: any, row: any) => {
+      return row.service ? row.service.meta.name : '-';
+    }
   },
   {
     field: 'variableCount',
-    label: 'Variable Count'
+    label: 'No. of Variables'
+  },
+  {
+    field: 'meta.createdBy',
+    label: 'Created By'
   },
   {
     field: 'meta.createdAt',
@@ -72,6 +74,7 @@ const createOrUpdateTable = () => {
 
   const tableElement = createDataTable(columns, rows.value);
   setupActionListener(tableElement);
+  setupNavigationListener(tableElement, router);
   tableContainer.value.appendChild(tableElement);
 };
 
diff --git a/dashboard/pkg/epinio/list/namespaces.vue b/dashboard/pkg/epinio/list/namespaces.vue
index abc4451b..f1cb9be9 100644
--- a/dashboard/pkg/epinio/list/namespaces.vue
+++ b/dashboard/pkg/epinio/list/namespaces.vue
@@ -179,7 +179,7 @@ const columns: DataTableColumn[] = [
   },
   {
     field: 'configCount',
-    label: 'Configurations'
+    label: 'Configs'
   },
   {
     field: 'meta.createdAt',
diff --git a/dashboard/pkg/epinio/list/services.vue b/dashboard/pkg/epinio/list/services.vue
index dd98ccdf..1525cfef 100644
--- a/dashboard/pkg/epinio/list/services.vue
+++ b/dashboard/pkg/epinio/list/services.vue
@@ -6,11 +6,13 @@ import '@krumio/trailhand-ui/Components/action-menu.js';
 import { EPINIO_TYPES } from '../types';
 import type { DataTableColumn } from '../components/tables/types';
 import { useStore } from 'vuex';
+import { useRouter } from 'vue-router';
 import { startPolling, stopPolling } from '../utils/polling';
-import { createDataTable, setupActionListener } from '../utils/table-helpers';
+import { createDataTable, setupActionListener, setupNavigationListener, createLinkResolver } from '../utils/table-helpers';
 
 const pending = ref(true);
 const store = useStore();
+const router = useRouter();
 const tableContainer = ref<HTMLElement | null>(null);
 
 onMounted(async () => {
@@ -37,7 +39,7 @@ const rows = computed(() => {
 });
 
 // Custom formatters
-const formatBoundApps = (value: any, row: any) => {
+const formatBoundApps = (_value: any, row: any) => {
   if (!row.applications || row.applications.length === 0) {
     return '-';
   }
@@ -52,24 +54,22 @@ const columns: DataTableColumn[] = [
   },
   {
     field: 'nameDisplay',
-    label: 'Name'
-  },
-  {
-    field: 'metadata.namespace',
-    label: 'Namespace'
+    label: 'Name',
+    link: createLinkResolver(router, 'detailLocation')
   },
   {
     field: 'catalog_service',
-    label: 'Service',
-    sortable: false
+    label: 'Catalog Service',
+    sortable: false,
+    link: createLinkResolver(router, 'serviceLocation')
   },
   {
     field: 'catalog_service_version',
-    label: 'Service Version'
+    label: 'Catalog Service Version'
   },
   {
     field: 'boundApps',
-    label: 'Bound Apps',
+    label: 'Bound Applications',
     sortable: false,
     formatter: formatBoundApps
   },
@@ -88,6 +88,7 @@ const createOrUpdateTable = () => {
 
   const tableElement = createDataTable(columns, rows.value);
   setupActionListener(tableElement);
+  setupNavigationListener(tableElement, router);
   tableContainer.value.appendChild(tableElement);
 };
 
diff --git a/dashboard/pkg/epinio/pages/c/_cluster/applications/index.vue b/dashboard/pkg/epinio/pages/c/_cluster/applications/index.vue
index 7cd8e668..34532133 100644
--- a/dashboard/pkg/epinio/pages/c/_cluster/applications/index.vue
+++ b/dashboard/pkg/epinio/pages/c/_cluster/applications/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
 import { useStore } from 'vuex';
+import { useRouter } from 'vue-router';
 import '@krumio/trailhand-ui/Components/data-table.js';
 import '@krumio/trailhand-ui/Components/action-menu.js';
 
@@ -12,8 +13,10 @@ import { EPINIO_TYPES } from '../../../../types';
 import { createEpinioRoute } from '../../../../utils/custom-routing';
 
 import { startPolling, stopPolling } from '../../../../utils/polling';
+import { createLinkResolver, setupNavigationListener } from '../../../../utils/table-helpers';
 
 const store = useStore();
+const router = useRouter();
 const t = store.getters['i18n/t'];
 
 const resource = EPINIO_TYPES.APP;
@@ -46,12 +49,26 @@ const groupedByNamespace = computed(() => {
 
 const pending = ref(true);
 
-// Custom formatter for routes
-const formatRoutes = (value: any, row: any) => {
+// Custom formatters
+const formatRoutes = (_value: any, row: any) => {
   if (!row.routes || row.routes.length === 0) {
     return '-';
   }
-  return row.routes.map((route: string) => `https://${route}`).join(', ');
+  return row.routes.map((route: string) => route).join(', ');
+};
+
+const formatBoundConfigs = (_value: any, row: any) => {
+  if (!row.allConfigurations || row.allConfigurations.length === 0) {
+    return '-';
+  }
+  return row.allConfigurations.map((config: any) => config.meta.name).join(', ');
+};
+
+const formatBoundServices = (_value: any, row: any) => {
+  if (!row.services || row.services.length === 0) {
+    return '-';
+  }
+  return row.services.map((service: any) => service.meta.name).join(', ');
 };
 
 const columns: DataTableColumn[] = [
@@ -62,7 +79,8 @@ const columns: DataTableColumn[] = [
   },
   {
     field: 'nameDisplay',
-    label: 'Name'
+    label: 'Name',
+    link: createLinkResolver(router, 'detailLocation')
   },
   {
     field: 'deployment.status',
@@ -74,9 +92,21 @@ const columns: DataTableColumn[] = [
     sortable: false,
     formatter: formatRoutes
   },
+  {
+    field: 'boundConfigs',
+    label: 'Bound Configs',
+    sortable: false,
+    formatter: formatBoundConfigs
+  },
+  {
+    field: 'boundServices',
+    label: 'Bound Services',
+    sortable: false,
+    formatter: formatBoundServices
+  },
   {
     field: 'deployment.username',
-    label: 'Last Deployed by'
+    label: 'Last Deployed By'
   },
   {
     field: 'meta.createdAt',
@@ -108,6 +138,9 @@ const createOrUpdateTable = (namespace: string, apps: any[]) => {
     const { action, resource } = event.detail;
     handleAction(action, resource);
   }) as EventListener);
+
+  // Listen for navigation events
+  setupNavigationListener(tableElement, router);
 };
 
 // Handle action menu clicks
diff --git a/dashboard/pkg/epinio/utils/table-helpers.ts b/dashboard/pkg/epinio/utils/table-helpers.ts
index 557c614e..a4c94da3 100644
--- a/dashboard/pkg/epinio/utils/table-helpers.ts
+++ b/dashboard/pkg/epinio/utils/table-helpers.ts
@@ -2,6 +2,33 @@
  * Helper utilities for working with trailhand-ui data-table component
  */
 
+import type { Router } from 'vue-router';
+
+/**
+ * Create a link resolver function for data-table columns
+ * This resolves Vue Router route objects to URL strings
+ * @param router - Vue Router instance
+ * @param locationProperty - Property path to the route location (e.g., 'detailLocation', 'namespaceLocation')
+ * @returns A function that can be used as a column's link property
+ */
+export function createLinkResolver(router: Router, locationProperty: string) {
+  return (row: any) => {
+    // Support nested properties like 'service.detailLocation'
+    const location = locationProperty.split('.').reduce((obj, key) => obj?.[key], row);
+
+    if (location) {
+      try {
+        const resolved = router.resolve(location);
+        return resolved.href;
+      } catch (e) {
+        console.error(`Failed to resolve route for ${locationProperty}:`, e);
+        return null;
+      }
+    }
+    return null;
+  };
+}
+
 /**
  * Create a data-table element with the given configuration
  * @param columns - Column definitions
@@ -62,3 +89,21 @@ export function setupActionListener(
     handler(action, resource);
   }) as EventListener);
 }
+
+/**
+ * Setup navigation event listener on a table element
+ * This handles link clicks and navigates using Vue Router instead of page reloads
+ * @param tableElement - The table element
+ * @param router - Vue Router instance
+ */
+export function setupNavigationListener(
+  tableElement: HTMLElement,
+  router: Router
+): void {
+  tableElement.addEventListener('navigate', ((event: CustomEvent) => {
+    const { url } = event.detail;
+    if (url) {
+      router.push(url);
+    }
+  }) as EventListener);
+}

From 032b056525e3e5ce8d83eec2ea7ad400c3894db4 Mon Sep 17 00:00:00 2001
From: Hannah Brownson <hannahbrownson18@gmail.com>
Date: Mon, 15 Dec 2025 09:52:15 -0500
Subject: [PATCH 3/6] fix: udpated trailhand package version

---
 dashboard/package.json | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/dashboard/package.json b/dashboard/package.json
index 73b84a98..96bd8408 100644
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -5,7 +5,7 @@
     "node": ">=20"
   },
   "dependencies": {
-    "@krumio/trailhand-ui": "^1.3.0",
+    "@krumio/trailhand-ui": "^1.3.1",
     "@rancher/shell": "3.0.7",
     "@types/lodash": "^4.17.16",
     "eslint": "^9.28.0",
@@ -41,5 +41,6 @@
     "@vue/eslint-config-standard": "5.1.2",
     "@vue/eslint-config-typescript": "^11.0.3",
     "globals": "^16.2.0"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

From 12f1bf4c6475dca13b531e1d55330df47c180099 Mon Sep 17 00:00:00 2001
From: Hannah Brownson <hannahbrownson18@gmail.com>
Date: Mon, 15 Dec 2025 09:52:55 -0500
Subject: [PATCH 4/6] fix: remove local value

---
 dashboard/package.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/dashboard/package.json b/dashboard/package.json
index 96bd8408..45dbbdbc 100644
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -41,6 +41,5 @@
     "@vue/eslint-config-standard": "5.1.2",
     "@vue/eslint-config-typescript": "^11.0.3",
     "globals": "^16.2.0"
-  },
-  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+  }
 }

From 36511cd0b45c0c65b09324c23842652ca9602ca8 Mon Sep 17 00:00:00 2001
From: Hannah Brownson <hannahbrownson18@gmail.com>
Date: Tue, 13 Jan 2026 13:06:59 -0500
Subject: [PATCH 5/6] chore: updating trailhand configuration to account for
 the typescript migration. Made appropriate fixes that came up when making the
 change

---
 dashboard/package.json                        |  6 ++-
 .../pkg/epinio/components/tables/types.ts     | 28 ++++++++++++++
 dashboard/pkg/epinio/detail/applications.vue  | 37 ++++++++++++++-----
 .../pkg/epinio/detail/catalogservices.vue     |  4 +-
 dashboard/pkg/epinio/list/appcharts.vue       |  9 +++--
 dashboard/pkg/epinio/list/configurations.vue  | 11 +++---
 dashboard/pkg/epinio/list/namespaces.vue      |  4 +-
 dashboard/pkg/epinio/list/services.vue        |  9 +++--
 .../pages/c/_cluster/applications/index.vue   |  9 +++--
 dashboard/pkg/epinio/pages/index.vue          |  4 +-
 dashboard/pkg/epinio/utils/table-helpers.ts   | 31 ++++++++++++++++
 11 files changed, 117 insertions(+), 35 deletions(-)

diff --git a/dashboard/package.json b/dashboard/package.json
index 45dbbdbc..acd01422 100644
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -5,7 +5,7 @@
     "node": ">=20"
   },
   "dependencies": {
-    "@krumio/trailhand-ui": "^1.3.1",
+    "@krumio/trailhand-ui": "^1.4.1",
     "@rancher/shell": "3.0.7",
     "@types/lodash": "^4.17.16",
     "eslint": "^9.28.0",
@@ -40,6 +40,8 @@
     "@types/vue": "^1.0.31",
     "@vue/eslint-config-standard": "5.1.2",
     "@vue/eslint-config-typescript": "^11.0.3",
+    "esbuild-loader": "^4.4.2",
     "globals": "^16.2.0"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }
diff --git a/dashboard/pkg/epinio/components/tables/types.ts b/dashboard/pkg/epinio/components/tables/types.ts
index a0db1ede..42a5b2d6 100644
--- a/dashboard/pkg/epinio/components/tables/types.ts
+++ b/dashboard/pkg/epinio/components/tables/types.ts
@@ -44,6 +44,34 @@ export const dataTableFormatters = {
   dateTime: (value: any): string => {
     if (!value) return '-';
     return new Date(value).toLocaleString();
+  },
+
+  /**
+   * Format memory bytes to human readable format (B, KB, MB, GB, TB)
+   */
+  memory: (value: any): string => {
+    if (!value || value === 0) return '0 B';
+
+    const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+    let val = Number(value);
+    let unitIndex = 0;
+
+    while (val >= 1024 && unitIndex < units.length - 1) {
+      val = val / 1024;
+      unitIndex++;
+    }
+
+    return `${Math.round(val)} ${units[unitIndex]}`;
+  },
+
+  /**
+   * Format millicpus value
+   */
+  milliCPUs: (value: any): string => {
+    if (!value || value === 0) return '0';
+
+    const formatted = Math.round(Number(value)).toString();
+    return formatted === '0' ? '0' : formatted;
   }
 };
 
diff --git a/dashboard/pkg/epinio/detail/applications.vue b/dashboard/pkg/epinio/detail/applications.vue
index fd4cd8e6..8e31fff6 100644
--- a/dashboard/pkg/epinio/detail/applications.vue
+++ b/dashboard/pkg/epinio/detail/applications.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import '@krumio/trailhand-ui/Components/data-table.js';
-import '@krumio/trailhand-ui/Components/action-menu.js';
+import '@krumio/trailhand-ui/data-table';
+import '@krumio/trailhand-ui/action-menu';
 import { ref, computed, onMounted, nextTick, watch } from 'vue';
 import { useStore } from 'vuex';
 import day from 'dayjs';
@@ -57,7 +57,21 @@ const instanceColumns: DataTableColumn[] = [
     label: 'Name'
   },
   {
-    field: 'meta.createdAt',
+    field: 'millicpus',
+    label: 'Mill CPUs',
+    formatter: 'milliCPUs'
+  },
+  {
+    field: 'memoryBytes',
+    label: 'RAM',
+    formatter: 'memory'
+  },
+  {
+    field: 'restarts',
+    label: 'Restarts'
+  },
+  {
+    field: 'createdAt',
     label: 'Age',
     formatter: 'age'
   }
@@ -75,11 +89,11 @@ const serviceColumns: DataTableColumn[] = [
   },
   {
     field: 'catalog_service',
-    label: 'Service'
+    label: 'Catalog Service'
   },
   {
     field: 'catalog_service_version',
-    label: 'Service Version'
+    label: 'Catalog Service Version'
   },
   {
     field: 'meta.createdAt',
@@ -89,15 +103,18 @@ const serviceColumns: DataTableColumn[] = [
 ];
 
 const configColumns: DataTableColumn[] = [
-  {
-    field: 'stateDisplay',
-    label: 'State',
-    width: '100px'
-  },
   {
     field: 'nameDisplay',
     label: 'Name'
   },
+  {
+    field: 'variableCount',
+    label: 'No. of Variables'
+  },
+  {
+    field: 'createdBy',
+    label: 'Created By'
+  },
   {
     field: 'meta.createdAt',
     label: 'Age',
diff --git a/dashboard/pkg/epinio/detail/catalogservices.vue b/dashboard/pkg/epinio/detail/catalogservices.vue
index 313f0e5a..76895847 100644
--- a/dashboard/pkg/epinio/detail/catalogservices.vue
+++ b/dashboard/pkg/epinio/detail/catalogservices.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import '@krumio/trailhand-ui/Components/data-table.js';
-import '@krumio/trailhand-ui/Components/action-menu.js';
+import '@krumio/trailhand-ui/data-table';
+import '@krumio/trailhand-ui/action-menu';
 import { useStore } from 'vuex';
 import { useRouter } from 'vue-router';
 import { ref, onMounted, nextTick, watch } from 'vue';
diff --git a/dashboard/pkg/epinio/list/appcharts.vue b/dashboard/pkg/epinio/list/appcharts.vue
index cab34f21..05de8b4d 100644
--- a/dashboard/pkg/epinio/list/appcharts.vue
+++ b/dashboard/pkg/epinio/list/appcharts.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import '@krumio/trailhand-ui/Components/data-table.js';
-import '@krumio/trailhand-ui/Components/action-menu.js';
+import '@krumio/trailhand-ui/data-table';
+import '@krumio/trailhand-ui/action-menu';
 import type { DataTableColumn } from '../components/tables/types';
 import { EPINIO_TYPES } from '../types';
 
 import { useStore } from 'vuex';
 import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
 import { startPolling, stopPolling } from '../utils/polling';
-import { createDataTable, setupActionListener } from '../utils/table-helpers';
+import { createDataTable, setupActionListener, applyNamespaceFilter } from '../utils/table-helpers';
 
 const store = useStore();
 
@@ -17,7 +17,8 @@ const pending = ref<boolean>(true);
 const tableContainer = ref<HTMLElement | null>(null);
 
 const rows = computed(() => {
-  return store.getters['epinio/all'](EPINIO_TYPES.APP_CHARTS);
+  const allRows = store.getters['epinio/all'](EPINIO_TYPES.APP_CHARTS);
+  return applyNamespaceFilter(store, allRows);
 });
 
 const columns: DataTableColumn[] = [
diff --git a/dashboard/pkg/epinio/list/configurations.vue b/dashboard/pkg/epinio/list/configurations.vue
index 59fb0f9e..0c244f48 100644
--- a/dashboard/pkg/epinio/list/configurations.vue
+++ b/dashboard/pkg/epinio/list/configurations.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import '@krumio/trailhand-ui/Components/data-table.js';
-import '@krumio/trailhand-ui/Components/action-menu.js';
+import '@krumio/trailhand-ui/data-table';
+import '@krumio/trailhand-ui/action-menu';
 import type { DataTableColumn } from '../components/tables/types';
 import { EPINIO_TYPES } from '../types';
 
@@ -8,7 +8,7 @@ import { useStore } from 'vuex';
 import { useRouter } from 'vue-router';
 import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
 import { startPolling, stopPolling } from '../utils/polling';
-import { createDataTable, setupActionListener, setupNavigationListener, createLinkResolver } from '../utils/table-helpers';
+import { createDataTable, setupActionListener, setupNavigationListener, createLinkResolver, applyNamespaceFilter } from '../utils/table-helpers';
 
 const store = useStore();
 const router = useRouter();
@@ -19,7 +19,8 @@ const pending = ref<boolean>(true);
 const tableContainer = ref<HTMLElement | null>(null);
 
 const rows = computed(() => {
-  return store.getters['epinio/all'](EPINIO_TYPES.CONFIGURATION);
+  const allRows = store.getters['epinio/all'](EPINIO_TYPES.CONFIGURATION);
+  return applyNamespaceFilter(store, allRows);
 });
 
 // Custom formatters
@@ -56,7 +57,7 @@ const columns: DataTableColumn[] = [
     label: 'No. of Variables'
   },
   {
-    field: 'meta.createdBy',
+    field: 'configuration.user',
     label: 'Created By'
   },
   {
diff --git a/dashboard/pkg/epinio/list/namespaces.vue b/dashboard/pkg/epinio/list/namespaces.vue
index f1cb9be9..889f9f5c 100644
--- a/dashboard/pkg/epinio/list/namespaces.vue
+++ b/dashboard/pkg/epinio/list/namespaces.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import '@krumio/trailhand-ui/Components/data-table.js';
-import '@krumio/trailhand-ui/Components/action-menu.js';
+import '@krumio/trailhand-ui/data-table';
+import '@krumio/trailhand-ui/action-menu';
 import { useStore } from 'vuex';
 import { ref, onMounted, onUnmounted, computed, watch, nextTick, useAttrs } from 'vue';
 import { EPINIO_TYPES } from '../types';
diff --git a/dashboard/pkg/epinio/list/services.vue b/dashboard/pkg/epinio/list/services.vue
index 1525cfef..1f45d893 100644
--- a/dashboard/pkg/epinio/list/services.vue
+++ b/dashboard/pkg/epinio/list/services.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, computed, nextTick, watch } from 'vue';
-import '@krumio/trailhand-ui/Components/data-table.js';
-import '@krumio/trailhand-ui/Components/action-menu.js';
+import '@krumio/trailhand-ui/data-table';
+import '@krumio/trailhand-ui/action-menu';
 
 import { EPINIO_TYPES } from '../types';
 import type { DataTableColumn } from '../components/tables/types';
 import { useStore } from 'vuex';
 import { useRouter } from 'vue-router';
 import { startPolling, stopPolling } from '../utils/polling';
-import { createDataTable, setupActionListener, setupNavigationListener, createLinkResolver } from '../utils/table-helpers';
+import { createDataTable, setupActionListener, setupNavigationListener, createLinkResolver, applyNamespaceFilter } from '../utils/table-helpers';
 
 const pending = ref(true);
 const store = useStore();
@@ -35,7 +35,8 @@ onUnmounted(() => {
 });
 
 const rows = computed(() => {
-  return store.getters['epinio/all'](EPINIO_TYPES.SERVICE_INSTANCE);
+  const allRows = store.getters['epinio/all'](EPINIO_TYPES.SERVICE_INSTANCE);
+  return applyNamespaceFilter(store, allRows);
 });
 
 // Custom formatters
diff --git a/dashboard/pkg/epinio/pages/c/_cluster/applications/index.vue b/dashboard/pkg/epinio/pages/c/_cluster/applications/index.vue
index 34532133..d102fb81 100644
--- a/dashboard/pkg/epinio/pages/c/_cluster/applications/index.vue
+++ b/dashboard/pkg/epinio/pages/c/_cluster/applications/index.vue
@@ -2,8 +2,8 @@
 import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
 import { useStore } from 'vuex';
 import { useRouter } from 'vue-router';
-import '@krumio/trailhand-ui/Components/data-table.js';
-import '@krumio/trailhand-ui/Components/action-menu.js';
+import '@krumio/trailhand-ui/data-table';
+import '@krumio/trailhand-ui/action-menu';
 
 import type { DataTableColumn } from '../../../../components/tables/types';
 import Loading from '@shell/components/Loading';
@@ -13,7 +13,7 @@ import { EPINIO_TYPES } from '../../../../types';
 import { createEpinioRoute } from '../../../../utils/custom-routing';
 
 import { startPolling, stopPolling } from '../../../../utils/polling';
-import { createLinkResolver, setupNavigationListener } from '../../../../utils/table-helpers';
+import { createLinkResolver, setupNavigationListener, applyNamespaceFilter } from '../../../../utils/table-helpers';
 
 const store = useStore();
 const router = useRouter();
@@ -34,9 +34,10 @@ const rows = computed(() => store.getters['epinio/all'](resource));
 
 // Group applications by namespace
 const groupedByNamespace = computed(() => {
+  const filteredRows = applyNamespaceFilter(store, rows.value);
   const groups: Record<string, any[]> = {};
 
-  rows.value.forEach((app: any) => {
+  filteredRows.forEach((app: any) => {
     const namespace = app.meta?.namespace || 'default';
     if (!groups[namespace]) {
       groups[namespace] = [];
diff --git a/dashboard/pkg/epinio/pages/index.vue b/dashboard/pkg/epinio/pages/index.vue
index 3a6cb6c1..3eff98b8 100644
--- a/dashboard/pkg/epinio/pages/index.vue
+++ b/dashboard/pkg/epinio/pages/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import '@krumio/trailhand-ui/Components/data-table.js';
-import '@krumio/trailhand-ui/Components/action-menu.js';
+import '@krumio/trailhand-ui/data-table';
+import '@krumio/trailhand-ui/action-menu';
 import { ref, onMounted, nextTick, watch } from 'vue';
 import { useStore } from 'vuex';
 
diff --git a/dashboard/pkg/epinio/utils/table-helpers.ts b/dashboard/pkg/epinio/utils/table-helpers.ts
index a4c94da3..a717d69c 100644
--- a/dashboard/pkg/epinio/utils/table-helpers.ts
+++ b/dashboard/pkg/epinio/utils/table-helpers.ts
@@ -3,6 +3,7 @@
  */
 
 import type { Router } from 'vue-router';
+import type { Store } from 'vuex';
 
 /**
  * Create a link resolver function for data-table columns
@@ -107,3 +108,33 @@ export function setupNavigationListener(
     }
   }) as EventListener);
 }
+
+/**
+ * Apply namespace filtering to a list of rows
+ * Uses the Vuex store's activeNamespaceCache to filter rows by namespace
+ * @param store - Vuex store instance
+ * @param allRows - All rows to filter
+ * @returns Filtered rows based on active namespace selection
+ */
+export function applyNamespaceFilter(store: Store<any>, allRows: any[]): any[] {
+  // Access the cache key to trigger reactivity on namespace filter changes
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const cacheKey = store.state.activeNamespaceCacheKey;
+  const activeNamespaces = store.state.activeNamespaceCache;
+
+  // If no namespace filter exists, or if it's empty (no namespaces loaded yet), show all rows
+  if (!activeNamespaces || Object.keys(activeNamespaces).length === 0) {
+    return allRows;
+  }
+
+  // Filter rows by namespace
+  return allRows.filter((row: any) => {
+    const namespace = row.meta?.namespace;
+    // If row has no namespace, show it by default
+    if (!namespace) {
+      return true;
+    }
+    // Check if this namespace is in the active filter
+    return activeNamespaces[namespace];
+  });
+}

From eb82d0879b083962b1c1702f25cd01dc30aeef53 Mon Sep 17 00:00:00 2001
From: Hannah Brownson <hannahbrownson18@gmail.com>
Date: Tue, 27 Jan 2026 14:17:13 -0500
Subject: [PATCH 6/6] removing unnecessary file

---
 dashboard/.npmrc | 2 --
 1 file changed, 2 deletions(-)
 delete mode 100644 dashboard/.npmrc

diff --git a/dashboard/.npmrc b/dashboard/.npmrc
deleted file mode 100644
index af6230aa..00000000
--- a/dashboard/.npmrc
+++ /dev/null
@@ -1,2 +0,0 @@
-@krumio:registry=https://npm.pkg.github.com
-# npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}