From 4f684cc498048627c0941812ad2b16eb9d17123e Mon Sep 17 00:00:00 2001
From: Jack Westbrook <jack.westbrook@gmail.com>
Date: Wed, 3 Feb 2021 10:09:07 +0100
Subject: [PATCH] Grafana-ui: fixes no data message in Table component (#30821)

* Wip

* fix(grafana-ui): add no data message to Table component
---
 .../grafana-ui/src/components/Table/Table.tsx | 24 ++++++++++++-------
 .../grafana-ui/src/components/Table/styles.ts |  7 ++++++
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/packages/grafana-ui/src/components/Table/Table.tsx b/packages/grafana-ui/src/components/Table/Table.tsx
index 97e9fe59b3c..a892f51fef5 100644
--- a/packages/grafana-ui/src/components/Table/Table.tsx
+++ b/packages/grafana-ui/src/components/Table/Table.tsx
@@ -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>
diff --git a/packages/grafana-ui/src/components/Table/styles.ts b/packages/grafana-ui/src/components/Table/styles.ts
index 6f17b7400dc..a3a3fd22d88 100644
--- a/packages/grafana-ui/src/components/Table/styles.ts
+++ b/packages/grafana-ui/src/components/Table/styles.ts
@@ -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%;
+    `,
   };
 });