Table: Make the height of the table include header cells (#21824)

* Mak table panel with padding

* Make table have a correct height

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

@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 import { DataFrame } from '@grafana/data';
 import { DataFrame } from '@grafana/data';
 import { useSortBy, useTable, useBlockLayout, Cell } from 'react-table';
 import { useSortBy, useTable, useBlockLayout, Cell } from 'react-table';
 import { FixedSizeList } from 'react-window';
 import { FixedSizeList } from 'react-window';
+import useMeasure from 'react-use/lib/useMeasure';
 import { getColumns, getTableRows } from './utils';
 import { getColumns, getTableRows } from './utils';
 import { useTheme } from '../../themes';
 import { useTheme } from '../../themes';
 import { TableFilterActionCallback } from './types';
 import { TableFilterActionCallback } from './types';
@@ -17,6 +18,7 @@ export interface Props {
 
 
 export const Table = ({ data, height, onCellClick, width }: Props) => {
 export const Table = ({ data, height, onCellClick, width }: Props) => {
   const theme = useTheme();
   const theme = useTheme();
+  const [ref, headerRowMeasurements] = useMeasure();
   const tableStyles = getTableStyles(theme);
   const tableStyles = getTableStyles(theme);
 
 
   const { getTableProps, headerGroups, rows, prepareRow } = useTable(
   const { getTableProps, headerGroups, rows, prepareRow } = useTable(
@@ -53,12 +55,17 @@ export const Table = ({ data, height, onCellClick, width }: Props) => {
     <div {...getTableProps()} className={tableStyles.table}>
     <div {...getTableProps()} className={tableStyles.table}>
       <div>
       <div>
         {headerGroups.map((headerGroup: any) => (
         {headerGroups.map((headerGroup: any) => (
-          <div className={tableStyles.thead} {...headerGroup.getHeaderGroupProps()}>
+          <div className={tableStyles.thead} {...headerGroup.getHeaderGroupProps()} ref={ref}>
             {headerGroup.headers.map((column: any) => renderHeaderCell(column, tableStyles.headerCell))}
             {headerGroup.headers.map((column: any) => renderHeaderCell(column, tableStyles.headerCell))}
           </div>
           </div>
         ))}
         ))}
       </div>
       </div>
-      <FixedSizeList height={height} itemCount={rows.length} itemSize={tableStyles.rowHeight} width={width}>
+      <FixedSizeList
+        height={height - headerRowMeasurements.height}
+        itemCount={rows.length}
+        itemSize={tableStyles.rowHeight}
+        width={width}
+      >
         {RenderRow}
         {RenderRow}
       </FixedSizeList>
       </FixedSizeList>
     </div>
     </div>

public/app/plugins/panel/table2/module.tsx

@@ -4,7 +4,4 @@ import { TablePanelEditor } from './TablePanelEditor';
 import { TablePanel } from './TablePanel';
 import { TablePanel } from './TablePanel';
 import { Options, defaults } from './types';
 import { Options, defaults } from './types';
 
 
-export const plugin = new PanelPlugin<Options>(TablePanel)
-  .setNoPadding()
-  .setDefaults(defaults)
-  .setEditor(TablePanelEditor);
+export const plugin = new PanelPlugin<Options>(TablePanel).setDefaults(defaults).setEditor(TablePanelEditor);