From 906004c7ae458e597a1a881a8cbaf4427fda2dfe Mon Sep 17 00:00:00 2001
From: Alex Spencer <52186778+alexjonspencer1@users.noreply.github.com>
Date: Fri, 11 Apr 2025 05:47:40 -0600
Subject: [PATCH] TableNg: Fix a few bugs found in K8s land (#103829)

* fix: a few bugs found in K8s land

* fix: column width buggy behavior

* fix: column width try again
---
 .../Table/TableNG/Cells/TableCellNG.tsx       |  2 ++
 .../src/components/Table/TableNG/TableNG.tsx  | 32 +++++++++----------
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/packages/grafana-ui/src/components/Table/TableNG/Cells/TableCellNG.tsx b/packages/grafana-ui/src/components/Table/TableNG/Cells/TableCellNG.tsx
index 3e3138e55ef..1a1c3bbca5a 100644
--- a/packages/grafana-ui/src/components/Table/TableNG/Cells/TableCellNG.tsx
+++ b/packages/grafana-ui/src/components/Table/TableNG/Cells/TableCellNG.tsx
@@ -159,6 +159,7 @@ export function TableCellNG(props: TableCellNGProps) {
       tableCellDiv?.style.setProperty('min-height', `100%`);
       tableCellDiv?.style.setProperty('height', `fit-content`);
       tableCellDiv?.style.setProperty('background', colors.bgHoverColor || 'none');
+      tableCellDiv?.style.setProperty('min-width', 'min-content');
     }
   };
 
@@ -173,6 +174,7 @@ export function TableCellNG(props: TableCellNGProps) {
       tableCellDiv?.style.removeProperty('min-height');
       tableCellDiv?.style.removeProperty('height');
       tableCellDiv?.style.removeProperty('background');
+      tableCellDiv?.style.removeProperty('min-width');
     }
   };
 
diff --git a/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx b/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx
index 446c5023645..01934d0da2e 100644
--- a/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx
+++ b/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx
@@ -865,28 +865,26 @@ export function mapFrameToDataGrid({
     });
   });
 
-  // INFO: This loop calculates the width for each column in less than a millisecond.
+  // set columns that are at minimum width
   let sharedWidth = availableWidth / fieldCountWithoutWidth;
-
-  // First pass: Assign minimum widths to columns that need it
-  columns.forEach((column) => {
-    if (!column.width && column.minWidth! > sharedWidth) {
-      column.width = column.minWidth;
-      availableWidth -= column.width!;
-      fieldCountWithoutWidth -= 1;
+  for (let i = fieldCountWithoutWidth; i > 0; i--) {
+    for (const column of columns) {
+      if (!column.width && column.minWidth! > sharedWidth) {
+        column.width = column.minWidth;
+        availableWidth -= column.width!;
+        fieldCountWithoutWidth -= 1;
+        sharedWidth = availableWidth / fieldCountWithoutWidth;
+      }
     }
-  });
+  }
 
-  // Recalculate shared width after assigning minimum widths
-  sharedWidth = availableWidth / fieldCountWithoutWidth;
-
-  // Second pass: Assign shared width to remaining columns
-  columns.forEach((column) => {
+  // divide up the rest of the space
+  for (const column of columns) {
     if (!column.width) {
       column.width = sharedWidth;
     }
-    column.minWidth = COLUMN.MIN_WIDTH; // Ensure min-width is always set
-  });
+    column.minWidth = COLUMN.MIN_WIDTH;
+  }
 
   return columns;
 }
@@ -980,6 +978,8 @@ const getStyles = (theme: GrafanaTheme2) => ({
       '--rdg-summary-border-color': theme.colors.border.medium,
 
       '.rdg-cell': {
+        // Prevent collisions with custom cell components
+        zIndex: 2,
         borderRight: 'none',
       },
     },