Table: Add default cell link style and tooltip to data links in table (#23818)

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

@@ -1,6 +1,7 @@
 import React, { FC } from 'react';
 import { TableCellProps } from './types';
 import { formattedValueToString, LinkModel } from '@grafana/data';
+import { Tooltip } from '../Tooltip/Tooltip';
 
 export const DefaultCell: FC<TableCellProps> = props => {
   const { field, cell, tableStyles, row } = props;
@@ -22,9 +23,11 @@ export const DefaultCell: FC<TableCellProps> = props => {
   return (
     <div className={tableStyles.tableCell}>
       {link ? (
-        <a href={link.href} target={link.target} title={link.title}>
-          {value}
-        </a>
+        <Tooltip content={link.title}>
+          <a href={link.href} target={link.target} title={link.title} className={tableStyles.tableCellLink}>
+            {value}
+          </a>
+        </Tooltip>
       ) : (
         value
       )}

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

@@ -12,6 +12,7 @@ export interface TableStyles {
   headerCell: string;
   tableCell: string;
   tableCellWrapper: string;
+  tableCellLink: string;
   row: string;
   theme: GrafanaTheme;
   resizeHandle: string;
@@ -75,6 +76,9 @@ export const getTableStyles = stylesFactory(
           border-right: none;
         }
       `,
+      tableCellLink: css`
+        text-decoration: underline;
+      `,
       tableCell: css`
         padding: ${padding}px 10px;
         text-overflow: ellipsis;

packages/grafana-ui/src/components/index.ts

@@ -44,6 +44,7 @@ export { ModalsProvider, ModalRoot, ModalsController } from './Modal/ModalsConte
 export { SetInterval } from './SetInterval/SetInterval';
 
 export { Table } from './Table/Table';
+export { TableCellDisplayMode } from './Table/types';
 export { TableInputCSV } from './TableInputCSV/TableInputCSV';
 export { TabsBar } from './Tabs/TabsBar';
 export { Tab } from './Tabs/Tab';

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

@@ -2,7 +2,7 @@ import { PanelPlugin } from '@grafana/data';
 import { TablePanel } from './TablePanel';
 import { CustomFieldConfig, Options } from './types';
 import { tablePanelChangedHandler, tableMigrationHandler } from './migrations';
-import { TableCellDisplayMode } from '@grafana/ui/src/components/Table/types';
+import { TableCellDisplayMode } from '@grafana/ui';
 
 export const plugin = new PanelPlugin<Options, CustomFieldConfig>(TablePanel)
   .setPanelChangeHandler(tablePanelChangedHandler)