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,6 +206,7 @@ export const Table: FC<Props> = memo((props: Props) => {
               })}
             </div>
           )}
+          {rows.length > 0 ? (
             <FixedSizeList
               height={height - headerHeight}
               itemCount={rows.length}
@@ -215,6 +216,11 @@ export const Table: FC<Props> = memo((props: Props) => {
             >
               {RenderRow}
             </FixedSizeList>
+          ) : (
+            <div style={{ height: height - headerHeight }} className={tableStyles.noData}>
+              No data to show
+            </div>
+          )}
         </div>
       </CustomScrollbar>
     </div>

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