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

* Wip

* fix(grafana-ui): add no data message to Table component

packages/grafana-ui/src/components/Table/Table.tsx

@@ -206,15 +206,21 @@ export const Table: FC<Props> = memo((props: Props) => {
               })}
               })}
             </div>
             </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>
         </div>
       </CustomScrollbar>
       </CustomScrollbar>
     </div>
     </div>

packages/grafana-ui/src/components/Table/styles.ts

@@ -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%;
+    `,
   };
   };
 });
 });