Table component: Fix sub-table rows not displaying correctly (#89082)

* Fix expanded height issue

* Prettier

* 🙅‍♂️ to console.log

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

@@ -15,7 +15,7 @@ import { TableCellProps, CustomCellRendererProps, TableCellOptions } from './typ
 import { getCellColors, getCellOptions } from './utils';
 
 export const DefaultCell = (props: TableCellProps) => {
-  const { field, cell, tableStyles, row, cellProps, frame, rowStyled, textWrapped, height } = props;
+  const { field, cell, tableStyles, row, cellProps, frame, rowStyled, rowExpanded, textWrapped, height } = props;
 
   const inspectEnabled = Boolean(field.config.custom?.inspect);
   const displayValue = field.display!(cell.value);
@@ -60,7 +60,8 @@ export const DefaultCell = (props: TableCellProps) => {
     isStringValue,
     textShouldWrap,
     textWrapped,
-    rowStyled
+    rowStyled,
+    rowExpanded
   );
 
   if (isStringValue) {
@@ -122,7 +123,8 @@ function getCellStyle(
   isStringValue = false,
   shouldWrapText = false,
   textWrapped = false,
-  rowStyled = false
+  rowStyled = false,
+  rowExpanded = false
 ) {
   // Setup color variables
   let textColor: string | undefined = undefined;
@@ -145,7 +147,8 @@ function getCellStyle(
     isStringValue,
     shouldWrapText,
     textWrapped,
-    rowStyled
+    rowStyled,
+    rowExpanded
   );
 }
 

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

@@ -267,6 +267,7 @@ export const RowsList = (props: RowsListProps) => {
       prepareRow(row);
 
       const expandedRowStyle = tableState.expanded[row.id] ? css({ '&:hover': { background: 'inherit' } }) : {};
+      const rowExpanded = nestedDataField && tableState.expanded[row.id];
 
       if (rowHighlightIndex !== undefined && row.index === rowHighlightIndex) {
         style = { ...style, backgroundColor: theme.components.table.rowHoverBackground };
@@ -304,7 +305,7 @@ export const RowsList = (props: RowsListProps) => {
           onMouseLeave={onRowLeave}
         >
           {/*add the nested data to the DOM first to prevent a 1px border CSS issue on the last cell of the row*/}
-          {nestedDataField && tableState.expanded[row.id] && (
+          {rowExpanded && (
             <ExpandedRow
               nestedData={nestedDataField}
               tableStyles={tableStyles}
@@ -326,6 +327,7 @@ export const RowsList = (props: RowsListProps) => {
               timeRange={timeRange}
               frame={data}
               rowStyled={rowBg !== undefined}
+              rowExpanded={rowExpanded}
               textWrapped={textWrapField !== undefined}
               height={Number(style.height)}
             />

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

@@ -16,6 +16,7 @@ export interface Props {
   userProps?: object;
   frame: DataFrame;
   rowStyled?: boolean;
+  rowExpanded?: boolean;
   textWrapped?: boolean;
   height?: number;
 }
@@ -28,6 +29,7 @@ export const TableCell = ({
   userProps,
   frame,
   rowStyled,
+  rowExpanded,
   textWrapped,
   height,
 }: Props) => {
@@ -57,6 +59,7 @@ export const TableCell = ({
         userProps,
         frame,
         rowStyled,
+        rowExpanded,
         textWrapped,
         height,
       })}

packages/grafana-ui/src/components/Table/styles.ts

@@ -19,14 +19,15 @@ export function useTableStyles(theme: GrafanaTheme2, cellHeightOption: TableCell
     asCellText?: boolean,
     textShouldWrap?: boolean,
     textWrapped?: boolean,
-    rowStyled?: boolean
+    rowStyled?: boolean,
+    rowExpanded?: boolean
   ) => {
     return css({
       label: overflowOnHover ? 'cellContainerOverflow' : 'cellContainerNoOverflow',
       padding: `${cellPadding}px`,
       width: '100%',
       // Cell height need to account for row border
-      height: `${rowHeight - 1}px`,
+      height: rowExpanded ? 'auto !important' : `${rowHeight - 1}px`,
       wordBreak: textWrapped ? 'break-all' : 'inherit',
 
       display: 'flex',