WIP:Feat/epinio 294 table component

dashboard/package.json

@@ -5,6 +5,7 @@
     "node": ">=20"
   },
   "dependencies": {
+    "@krumio/trailhand-ui": "^1.4.1",
     "@rancher/shell": "3.0.7",
     "@types/lodash": "^4.17.16",
     "eslint": "^9.28.0",
@@ -39,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"
 }

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;
   }
 };
 
@@ -83,6 +111,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