[release-12.0.1] TableNG: Fix sub table styles + expand/collapse (#104322)

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

---------


(cherry picked from commit 680874e0d5)

Co-authored-by: Alex Spencer <52186778+alexjonspencer1@users.noreply.github.com>
Co-authored-by: Adela Almasan <adela.almasan@grafana.com>

packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx

@@ -432,12 +432,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);
   };
@@ -535,7 +530,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);
     },
@@ -746,7 +744,7 @@ export function mapFrameToDataGrid({
             calcsRef,
             options: { ...options },
             handlers: { onCellExpand, onColumnResize },
-            availableWidth: availableWidth - COLUMN.EXPANDER_WIDTH,
+            availableWidth,
           });
           expandedRecords = frameToRecords(row.data);
         }
@@ -757,7 +755,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}
           />
         );

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,

packages/grafana-ui/src/components/Table/TableNG/utils.ts

@@ -507,7 +507,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;