diff --git a/sql/core/src/main/resources/org/apache/spark/sql/execution/ui/static/spark-sql-viz.js b/sql/core/src/main/resources/org/apache/spark/sql/execution/ui/static/spark-sql-viz.js
index ac266bd63d080..a287f5da9acac 100644
--- a/sql/core/src/main/resources/org/apache/spark/sql/execution/ui/static/spark-sql-viz.js
+++ b/sql/core/src/main/resources/org/apache/spark/sql/execution/ui/static/spark-sql-viz.js
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-/* global $, d3, dagreD3, graphlibDot, uiRoot, appBasePath */
+/* global $, d3, dagreD3, graphlibDot, uiRoot, appBasePath, sorttable */
 
 var PlanVizConstants = {
   svgMarginX: 16,
@@ -441,7 +441,7 @@ function updateDetailsPanel(nodeId, nodeDetails) {
 
   var html = "";
   if (details.metrics && details.metrics.length > 0) {
-    html += buildMetricsTable(details.metrics, showStageTask);
+    html += buildMetricsTable(details.metrics, showStageTask, true);
   } else if (!details.children) {
     html += '<p class="text-muted mb-0">No metrics</p>';
   }
@@ -453,7 +453,7 @@ function updateDetailsPanel(nodeId, nodeDetails) {
       if (child) {
         html += '<h6 class="mt-2 mb-1 fw-bold">' + htmlEscape(child.name) + '</h6>';
         if (child.metrics && child.metrics.length > 0) {
-          html += buildMetricsTable(child.metrics, showStageTask);
+          html += buildMetricsTable(child.metrics, showStageTask, true);
         } else {
           html += '<p class="text-muted mb-0">No metrics</p>';
         }
@@ -461,6 +461,13 @@ function updateDetailsPanel(nodeId, nodeDetails) {
     });
   }
   bodyEl.innerHTML = html;
+
+  // Initialize sorttable on dynamically injected metrics tables
+  if (typeof sorttable !== "undefined") {
+    bodyEl.querySelectorAll("table.sortable").forEach(function (table) {
+      sorttable.makeSortable(table);
+    });
+  }
 }
 
 function htmlEscape(str) {
@@ -471,8 +478,9 @@ function htmlEscape(str) {
 /*
  * Build an HTML metrics table from a metrics array.
  */
-function buildMetricsTable(metrics, showStageTask) {
-  var html = '<table class="table table-sm table-bordered mb-0">';
+function buildMetricsTable(metrics, showStageTask, enableSort) {
+  var cls = "table table-sm table-bordered mb-0" + (enableSort ? " sortable" : "");
+  var html = '<table class="' + cls + '">';
   html += "<thead><tr><th>Metric</th><th>Value</th></tr></thead><tbody>";
   metrics.forEach(function (m) {
     var name = htmlEscape(m.name);
@@ -643,7 +651,7 @@ function rerenderWithDetailedLabels() {
         if (details.metrics && details.metrics.length > 0) {
           var html = '<div style="padding:4px;text-align:left;font-size:10px;">';
           html += '<strong>' + htmlEscape(details.name) + '</strong>';
-          html += buildMetricsTable(details.metrics, showStageTask);
+          html += buildMetricsTable(details.metrics, showStageTask, false);
           html += '</div>';
           node.labelType = "html";
           node.label = html;