From 680874e0d585a742d686454d0aa0b7c34c49e91f Mon Sep 17 00:00:00 2001
From: Alex Spencer <52186778+alexjonspencer1@users.noreply.github.com>
Date: Tue, 22 Apr 2025 08:15:48 -0600
Subject: [PATCH] TableNG: Fix sub table styles + expand/collapse (#104015)

* fix: sub table expand/collapse + styles

* chore: pass in datagrid styles differently

* chore: fix test lint

* chore: fix cell hover flicker

* chore: fix sub table height issue

* chore: fix background color hover issue

* chore: revert hover changes - separate PR incoming

* chore: fix sub table width + alignment

---------

Co-authored-by: Adela Almasan <adela.almasan@grafana.com>
---
 .../src/components/Table/TableNG/TableNG.tsx    | 17 ++++++++---------
 .../src/components/Table/TableNG/utils.test.ts  |  2 +-
 .../src/components/Table/TableNG/utils.ts       |  2 +-
 3 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx b/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx
index 01934d0da2e..d130cd6e441 100644
--- a/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx
+++ b/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx
@@ -399,12 +399,7 @@ export function TableNG(props: TableNGProps) {
     if (!expandedRows.includes(rowIdx)) {
       setExpandedRows([...expandedRows, rowIdx]);
     } else {
-      const currentExpandedRows = expandedRows;
-      const indexToRemove = currentExpandedRows.indexOf(rowIdx);
-      if (indexToRemove > -1) {
-        currentExpandedRows.splice(indexToRemove, 1);
-        setExpandedRows(currentExpandedRows);
-      }
+      setExpandedRows(expandedRows.filter((id) => id !== rowIdx));
     }
     setResizeTrigger((prev) => prev + 1);
   };
@@ -503,7 +498,10 @@ export function TableNG(props: TableNGProps) {
         return 0;
       } else if (Number(row.__depth) === 1 && expandedRows.includes(Number(row.__index))) {
         const headerCount = row?.data?.meta?.custom?.noHeader ? 0 : 1;
-        return defaultRowHeight * (row.data?.length ?? 0 + headerCount); // TODO this probably isn't very robust
+
+        // Ensure we have a minimum height for the nested table even if data is empty
+        const rowCount = row.data?.length ?? 0;
+        return Math.max(defaultRowHeight, defaultRowHeight * (rowCount + headerCount));
       }
       return getRowHeight(row, cellHeightCalc, avgCharWidth, defaultRowHeight, fieldsData);
     },
@@ -714,7 +712,7 @@ export function mapFrameToDataGrid({
             calcsRef,
             options: { ...options },
             handlers: { onCellExpand, onColumnResize },
-            availableWidth: availableWidth - COLUMN.EXPANDER_WIDTH,
+            availableWidth,
           });
           expandedRecords = frameToRecords(row.data);
         }
@@ -725,7 +723,8 @@ export function mapFrameToDataGrid({
             rows={expandedRecords}
             columns={expandedColumns}
             rowHeight={defaultRowHeight}
-            style={{ height: '100%', overflow: 'visible', marginLeft: COLUMN.EXPANDER_WIDTH }}
+            className={styles.dataGrid}
+            style={{ height: '100%', overflow: 'visible', marginLeft: COLUMN.EXPANDER_WIDTH - 1 }}
             headerRowHeight={row.data?.meta?.custom?.noHeader ? 0 : undefined}
           />
         );
diff --git a/packages/grafana-ui/src/components/Table/TableNG/utils.test.ts b/packages/grafana-ui/src/components/Table/TableNG/utils.test.ts
index 8577df697cb..46b47a27929 100644
--- a/packages/grafana-ui/src/components/Table/TableNG/utils.test.ts
+++ b/packages/grafana-ui/src/components/Table/TableNG/utils.test.ts
@@ -137,7 +137,7 @@ const mockOptions = {
   crossFilterOrder,
   crossFilterRows,
   isCountRowsSet: false,
-  styles: { cell: '', cellWrapped: '' },
+  styles: { cell: '', cellWrapped: '', dataGrid: '' },
   theme: createTheme(),
   setSortColumns: () => {},
   sortColumnsRef,
diff --git a/packages/grafana-ui/src/components/Table/TableNG/utils.ts b/packages/grafana-ui/src/components/Table/TableNG/utils.ts
index a9c5908dda4..40f8cd9b8ba 100644
--- a/packages/grafana-ui/src/components/Table/TableNG/utils.ts
+++ b/packages/grafana-ui/src/components/Table/TableNG/utils.ts
@@ -508,7 +508,7 @@ export interface MapFrameToGridOptions extends TableNGProps {
   setIsInspecting: (isInspecting: boolean) => void;
   setSortColumns: React.Dispatch<React.SetStateAction<readonly SortColumn[]>>;
   sortColumnsRef: React.MutableRefObject<readonly SortColumn[]>;
-  styles: { cell: string; cellWrapped: string };
+  styles: { cell: string; cellWrapped: string; dataGrid: string };
   textWraps: Record<string, boolean>;
   theme: GrafanaTheme2;
   showTypeIcons?: boolean;