From 1e28ee41ccdb79d0676c9ebe500ddebcdeec6732 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Thu, 15 Dec 2022 07:14:17 +0100
Subject: [PATCH] TablePanel: Improve and align table styles with rest of
 Grafana

---
 .../src/components/Table/HeaderRow.tsx        | 11 +++++---
 .../grafana-ui/src/components/Table/Table.tsx |  6 +++--
 .../grafana-ui/src/components/Table/styles.ts | 26 ++++++++++++-------
 public/app/plugins/panel/table/module.tsx     |  1 -
 4 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/packages/grafana-ui/src/components/Table/HeaderRow.tsx b/packages/grafana-ui/src/components/Table/HeaderRow.tsx
index 7d9147e4a41..ddd7c598692 100644
--- a/packages/grafana-ui/src/components/Table/HeaderRow.tsx
+++ b/packages/grafana-ui/src/components/Table/HeaderRow.tsx
@@ -21,7 +21,7 @@ export const HeaderRow = (props: HeaderRowProps) => {
   const tableStyles = useStyles2(getTableStyles);
 
   return (
-    <div role="rowgroup">
+    <div role="rowgroup" className={tableStyles.headerRow}>
       {headerGroups.map((headerGroup: HeaderGroup) => {
         const { key, ...headerGroupProps } = headerGroup.getHeaderGroupProps();
         return (
@@ -62,9 +62,12 @@ function renderHeaderCell(column: any, tableStyles: TableStyles, showTypeIcons?:
               <Icon name={getFieldTypeIcon(field)} title={field?.type} size="sm" className={tableStyles.typeIcon} />
             )}
             <div>{column.render('Header')}</div>
-            <div>
-              {column.isSorted && (column.isSortedDesc ? <Icon name="arrow-down" /> : <Icon name="arrow-up" />)}
-            </div>
+            {column.isSorted &&
+              (column.isSortedDesc ? (
+                <Icon size="lg" name="arrow-down" className={tableStyles.sortIcon} />
+              ) : (
+                <Icon name="arrow-up" size="lg" className={tableStyles.sortIcon} />
+              ))}
           </button>
           {column.canFilter && <Filter column={column} tableStyles={tableStyles} field={field} />}
         </>
diff --git a/packages/grafana-ui/src/components/Table/Table.tsx b/packages/grafana-ui/src/components/Table/Table.tsx
index e858c5af919..325004560ab 100644
--- a/packages/grafana-ui/src/components/Table/Table.tsx
+++ b/packages/grafana-ui/src/components/Table/Table.tsx
@@ -150,7 +150,7 @@ export const Table = memo((props: Props) => {
   const variableSizeListScrollbarRef = useRef<HTMLDivElement>(null);
   const tableStyles = useStyles2(getTableStyles);
   const theme = useTheme2();
-  const headerHeight = noHeader ? 0 : tableStyles.cellHeight;
+  const headerHeight = noHeader ? 0 : tableStyles.rowHeight;
   const [footerItems, setFooterItems] = useState<FooterItem[] | undefined>(footerValues);
   const [expandedIndexes, setExpandedIndexes] = useState<Set<number>>(new Set());
   const prevExpandedIndexes = usePrevious(expandedIndexes);
@@ -288,7 +288,9 @@ export const Table = memo((props: Props) => {
   if (enablePagination) {
     listHeight -= tableStyles.cellHeight;
   }
-  const pageSize = Math.round(listHeight / tableStyles.cellHeight) - 1;
+
+  const pageSize = Math.round(listHeight / tableStyles.rowHeight) - 1;
+
   useEffect(() => {
     // Don't update the page size if it is less than 1
     if (pageSize <= 0) {
diff --git a/packages/grafana-ui/src/components/Table/styles.ts b/packages/grafana-ui/src/components/Table/styles.ts
index ebc27d5b979..f96628f35b7 100644
--- a/packages/grafana-ui/src/components/Table/styles.ts
+++ b/packages/grafana-ui/src/components/Table/styles.ts
@@ -3,8 +3,7 @@ import { css, CSSObject } from '@emotion/css';
 import { GrafanaTheme2 } from '@grafana/data';
 
 export const getTableStyles = (theme: GrafanaTheme2) => {
-  const { colors } = theme;
-  const headerBg = theme.colors.background.secondary;
+  const footerBg = theme.colors.background.secondary;
   const borderColor = theme.colors.border.weak;
   const resizerColor = theme.colors.primary.border;
   const cellPadding = 6;
@@ -107,10 +106,9 @@ export const getTableStyles = (theme: GrafanaTheme2) => {
     `,
     thead: css`
       label: thead;
-      height: ${cellHeight}px;
+      height: ${rowHeight}px;
       overflow-y: auto;
       overflow-x: hidden;
-      background: ${headerBg};
       position: relative;
     `,
     tfoot: css`
@@ -118,15 +116,17 @@ export const getTableStyles = (theme: GrafanaTheme2) => {
       height: ${cellHeight}px;
       overflow-y: auto;
       overflow-x: hidden;
-      background: ${headerBg};
+      background: ${footerBg};
       position: relative;
     `,
+    headerRow: css`
+      label: row;
+      border-bottom: 1px solid ${borderColor};
+    `,
     headerCell: css`
       padding: ${cellPadding}px;
       overflow: hidden;
       white-space: nowrap;
-      color: ${colors.primary.text};
-      border-right: 1px solid ${theme.colors.border.weak};
       display: flex;
 
       &:last-child {
@@ -141,8 +141,15 @@ export const getTableStyles = (theme: GrafanaTheme2) => {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
+      font-weight: ${theme.typography.fontWeightMedium};
       display: flex;
+      align-items: center;
       margin-right: ${theme.spacing(0.5)};
+
+      &:hover {
+        text-decoration: underline;
+        color: ${theme.colors.text.link};
+      }
     `,
     cellContainer: buildCellContainerStyle(undefined, undefined, true),
     cellContainerNoOverflow: buildCellContainerStyle(undefined, undefined, false),
@@ -152,6 +159,9 @@ export const getTableStyles = (theme: GrafanaTheme2) => {
       user-select: text;
       white-space: nowrap;
     `,
+    sortIcon: css`
+      margin-left: ${theme.spacing(0.5)};
+    `,
     cellLink: css`
       cursor: pointer;
       overflow: hidden;
@@ -173,12 +183,10 @@ export const getTableStyles = (theme: GrafanaTheme2) => {
     `,
     paginationWrapper: css`
       display: flex;
-      background: ${headerBg};
       height: ${cellHeight}px;
       justify-content: center;
       align-items: center;
       width: 100%;
-      border-top: 1px solid ${theme.colors.border.weak};
       li {
         margin-bottom: 0;
       }
diff --git a/public/app/plugins/panel/table/module.tsx b/public/app/plugins/panel/table/module.tsx
index 5872e486f2b..5f81d88069d 100644
--- a/public/app/plugins/panel/table/module.tsx
+++ b/public/app/plugins/panel/table/module.tsx
@@ -20,7 +20,6 @@ const footerCategory = 'Table footer';
 export const plugin = new PanelPlugin<PanelOptions, TableFieldOptions>(TablePanel)
   .setPanelChangeHandler(tablePanelChangedHandler)
   .setMigrationHandler(tableMigrationHandler)
-  .setNoPadding()
   .useFieldConfig({
     useCustomConfig: (builder) => {
       builder