TablePanel: Makes footer not overlap table content (#44210)

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

@@ -9,30 +9,14 @@ import { EmptyCell, FooterCell } from './FooterCell';
 export interface FooterRowProps {
   totalColumnsWidth: number;
   footerGroups: HeaderGroup[];
-  footerValues?: FooterItem[];
+  footerValues: FooterItem[];
+  height: number;
 }
 
 export const FooterRow = (props: FooterRowProps) => {
-  const { totalColumnsWidth, footerGroups, footerValues } = props;
+  const { totalColumnsWidth, footerGroups, height } = props;
   const e2eSelectorsTable = selectors.components.Panels.Visualization.Table;
   const tableStyles = useStyles2(getTableStyles);
-  const EXTENDED_ROW_HEIGHT = 27;
-
-  if (!footerValues) {
-    return null;
-  }
-
-  let length = 0;
-  for (const fv of footerValues) {
-    if (Array.isArray(fv) && fv.length > length) {
-      length = fv.length;
-    }
-  }
-
-  let height: number | undefined;
-  if (footerValues && length > 1) {
-    height = EXTENDED_ROW_HEIGHT * length;
-  }
 
   return (
     <table

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

@@ -127,7 +127,30 @@ export const Table: FC<Props> = memo((props: Props) => {
     footerValues,
     showTypeIcons,
   } = props;
+
   const tableStyles = useStyles2(getTableStyles);
+  const headerHeight = noHeader ? 0 : tableStyles.cellHeight;
+
+  const footerHeight = useMemo(() => {
+    const EXTENDED_ROW_HEIGHT = 33;
+    let length = 0;
+
+    if (!footerValues) {
+      return 0;
+    }
+
+    for (const fv of footerValues) {
+      if (Array.isArray(fv) && fv.length > length) {
+        length = fv.length;
+      }
+    }
+
+    if (length > 1) {
+      return EXTENDED_ROW_HEIGHT * length;
+    }
+
+    return EXTENDED_ROW_HEIGHT;
+  }, [footerValues]);
 
   // React table data array. This data acts just like a dummy array to let react-table know how many rows exist
   // The cells use the field to look up values
@@ -197,7 +220,7 @@ export const Table: FC<Props> = memo((props: Props) => {
     [onCellFilterAdded, prepareRow, rows, tableStyles]
   );
 
-  const headerHeight = noHeader ? 0 : tableStyles.cellHeight;
+  const listHeight = height - (headerHeight + footerHeight);
 
   return (
     <div {...getTableProps()} className={tableStyles.table} aria-label={ariaLabel} role="table">
@@ -206,7 +229,7 @@ export const Table: FC<Props> = memo((props: Props) => {
           {!noHeader && <HeaderRow data={data} headerGroups={headerGroups} showTypeIcons={showTypeIcons} />}
           {rows.length > 0 ? (
             <FixedSizeList
-              height={height - headerHeight}
+              height={listHeight}
               itemCount={rows.length}
               itemSize={tableStyles.rowHeight}
               width={'100%'}
@@ -219,7 +242,14 @@ export const Table: FC<Props> = memo((props: Props) => {
               No data
             </div>
           )}
-          <FooterRow footerValues={footerValues} footerGroups={footerGroups} totalColumnsWidth={totalColumnsWidth} />
+          {footerValues && (
+            <FooterRow
+              height={footerHeight}
+              footerValues={footerValues}
+              footerGroups={footerGroups}
+              totalColumnsWidth={totalColumnsWidth}
+            />
+          )}
         </div>
       </CustomScrollbar>
     </div>

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

@@ -131,6 +131,10 @@ export const getTableStyles = (theme: GrafanaTheme2) => {
       &:hover {
         background-color: ${rowHoverBg};
       }
+
+      &:last-child {
+        border-bottom: 0;
+      }
     `,
     imageCell: css`
       height: 100%;

public/app/plugins/panel/table/TablePanel.tsx

@@ -126,7 +126,7 @@ export class TablePanel extends Component<Props> {
 
       return (
         <div className={tableStyles.wrapper}>
-          {this.renderTable(data.series[currentIndex], width, height - inputHeight - padding)}
+          {this.renderTable(data.series[currentIndex], width, height - inputHeight + padding)}
           <div className={tableStyles.selectWrapper}>
             <Select
               menuShouldPortal
@@ -139,7 +139,7 @@ export class TablePanel extends Component<Props> {
       );
     }
 
-    return this.renderTable(data.series[0], width, height - 12);
+    return this.renderTable(data.series[0], width, height);
   }
 }