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
This commit is contained in:
Andre Pereira 2023-01-10 11:58:49 +00:00 committed by GitHub
parent 5dbbaab3f1
commit bda13a1b5d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 0 deletions

View File

@ -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

View File

@ -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;

View File

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