Explore: Expand table height to show sub-tables (#60359)

* Expand table height to show sub-tables when there isn't enough space

* Fix after merge

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

@@ -41,6 +41,7 @@ export const Table = memo((props: Props) => {
     data,
     subData,
     height,
+    maxHeight,
     onCellFilterAdded,
     width,
     columnMinWidth = COLUMN_MIN_WIDTH,
@@ -189,6 +190,18 @@ export const Table = memo((props: Props) => {
 
   const pageSize = Math.round(listHeight / tableStyles.rowHeight) - 1;
 
+  // Make sure we have room to show the sub-table
+  const expandedIndices = Object.keys(extendedState.expanded);
+  if (expandedIndices.length) {
+    const subTablesHeight = expandedIndices.reduce((sum, index) => {
+      const subLength = subData?.find((frame) => frame.meta?.custom?.parentRowIndex === parseInt(index, 10))?.length;
+      return subLength ? sum + tableStyles.rowHeight * (subLength + 1) : sum;
+    }, 0);
+    if (listHeight < subTablesHeight) {
+      listHeight = Math.min(listHeight + subTablesHeight, maxHeight || Number.MAX_SAFE_INTEGER);
+    }
+  }
+
   useEffect(() => {
     // Don't update the page size if it is less than 1
     if (pageSize <= 0) {
@@ -213,6 +226,7 @@ export const Table = memo((props: Props) => {
             position: 'absolute',
             bottom: 0,
           };
+
           return (
             <div style={subTableStyle}>
               <Table

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

@@ -65,6 +65,7 @@ export interface Props {
   data: DataFrame;
   width: number;
   height: number;
+  maxHeight?: number;
   /** Minimal column width specified in pixels */
   columnMinWidth?: number;
   noHeader?: boolean;

public/app/features/explore/TableContainer.tsx

@@ -99,6 +99,7 @@ export class TableContainer extends PureComponent<Props> {
             subData={subFrames}
             width={tableWidth}
             height={height}
+            maxHeight={600}
             onCellFilterAdded={onCellFilterAdded}
           />
         ) : (