Grafana-ui: fixes no data message in Table component (#30821)

* Wip

* fix(grafana-ui): add no data message to Table component
This commit is contained in:
Jack Westbrook 2021-02-03 10:09:07 +01:00 committed by GitHub
parent 9b4d4915b0
commit 4f684cc498
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 9 deletions

View File

@ -206,15 +206,21 @@ export const Table: FC<Props> = memo((props: Props) => {
})} })}
</div> </div>
)} )}
<FixedSizeList {rows.length > 0 ? (
height={height - headerHeight} <FixedSizeList
itemCount={rows.length} height={height - headerHeight}
itemSize={tableStyles.rowHeight} itemCount={rows.length}
width={'100%'} itemSize={tableStyles.rowHeight}
style={{ overflow: 'hidden auto' }} width={'100%'}
> style={{ overflow: 'hidden auto' }}
{RenderRow} >
</FixedSizeList> {RenderRow}
</FixedSizeList>
) : (
<div style={{ height: height - headerHeight }} className={tableStyles.noData}>
No data to show
</div>
)}
</div> </div>
</CustomScrollbar> </CustomScrollbar>
</div> </div>

View File

@ -157,6 +157,13 @@ export const getTableStyles = stylesFactory((theme: GrafanaTheme) => {
cursor: pointer; cursor: pointer;
padding: 0 ${theme.spacing.xxs}; padding: 0 ${theme.spacing.xxs};
`, `,
noData: css`
align-items: center;
display: flex;
height: 100%;
justify-content: center;
width: 100%;
`,
}; };
}); });