diff --git a/packages/grafana-ui/src/components/Table/Table.tsx b/packages/grafana-ui/src/components/Table/Table.tsx index ee0e8da53df..03d2586920f 100644 --- a/packages/grafana-ui/src/components/Table/Table.tsx +++ b/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 (