IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/grafana-ui/src/components/Table/Table.tsx
View File

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

7
packages/grafana-ui/src/components/Table/styles.ts
View File

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