diff --git a/packages/grafana-ui/src/components/Table/DefaultCell.tsx b/packages/grafana-ui/src/components/Table/DefaultCell.tsx index e47af47559d..c392493d290 100644 --- a/packages/grafana-ui/src/components/Table/DefaultCell.tsx +++ b/packages/grafana-ui/src/components/Table/DefaultCell.tsx @@ -1,5 +1,5 @@ -import React, { FC, MouseEventHandler, ReactElement } from 'react'; -import { DisplayValue, Field, formattedValueToString, LinkModel } from '@grafana/data'; +import React, { FC, ReactElement } from 'react'; +import { DisplayValue, Field, formattedValueToString } from '@grafana/data'; import { TableCellDisplayMode, TableCellProps } from './types'; import tinycolor from 'tinycolor2'; @@ -8,7 +8,7 @@ import { FilterActions } from './FilterActions'; import { getTextColorForBackground } from '../../utils'; export const DefaultCell: FC = (props) => { - const { field, cell, tableStyles, row, cellProps } = props; + const { field, cell, tableStyles, cellProps } = props; const displayValue = field.display!(cell.value); @@ -22,33 +22,9 @@ export const DefaultCell: FC = (props) => { const cellStyle = getCellStyle(tableStyles, field, displayValue); const showFilters = field.config.filterable; - let link: LinkModel | undefined; - let onClick: MouseEventHandler | undefined; - - if (field.getLinks) { - link = field.getLinks({ - valueRowIndex: row.index, - })[0]; - } - - if (link && link.onClick) { - onClick = (event) => { - // Allow opening in new tab - if (!(event.ctrlKey || event.metaKey || event.shiftKey) && link!.onClick) { - event.preventDefault(); - link!.onClick(event); - } - }; - } - return (
- {!link &&
{value}
} - {link && ( - - {value} - - )} +
{value}
{showFilters && cell.value !== undefined && }
); diff --git a/packages/grafana-ui/src/components/Table/Table.tsx b/packages/grafana-ui/src/components/Table/Table.tsx index 9e1532dc967..d1524669bbc 100644 --- a/packages/grafana-ui/src/components/Table/Table.tsx +++ b/packages/grafana-ui/src/components/Table/Table.tsx @@ -166,8 +166,8 @@ export const Table: FC = memo((props: Props) => { const { fields } = data; const RenderRow = React.useCallback( - ({ index, style }) => { - const row = rows[index]; + ({ index: rowIndex, style }) => { + const row = rows[rowIndex]; prepareRow(row); return (
@@ -180,6 +180,7 @@ export const Table: FC = memo((props: Props) => { onCellFilterAdded={onCellFilterAdded} columnIndex={index} columnCount={row.cells.length} + rowIndex={rowIndex} /> ))}
diff --git a/packages/grafana-ui/src/components/Table/TableCell.tsx b/packages/grafana-ui/src/components/Table/TableCell.tsx index c2a400149d1..abbd77cfd9f 100644 --- a/packages/grafana-ui/src/components/Table/TableCell.tsx +++ b/packages/grafana-ui/src/components/Table/TableCell.tsx @@ -1,6 +1,6 @@ -import React, { FC } from 'react'; +import React, { FC, MouseEventHandler } from 'react'; import { Cell } from 'react-table'; -import { Field } from '@grafana/data'; +import { Field, LinkModel } from '@grafana/data'; import { TableFilterActionCallback } from './types'; import { TableStyles } from './styles'; @@ -11,9 +11,18 @@ export interface Props { onCellFilterAdded?: TableFilterActionCallback; columnIndex: number; columnCount: number; + rowIndex: number; } -export const TableCell: FC = ({ cell, field, tableStyles, onCellFilterAdded, columnIndex, columnCount }) => { +export const TableCell: FC = ({ + cell, + field, + tableStyles, + onCellFilterAdded, + columnIndex, + columnCount, + rowIndex, +}) => { const cellProps = cell.getCellProps(); if (!field.display) { @@ -32,15 +41,33 @@ export const TableCell: FC = ({ cell, field, tableStyles, onCellFilterAdd innerWidth -= tableStyles.lastChildExtraPadding; } - return ( - <> - {cell.render('Cell', { - field, - tableStyles, - onCellFilterAdded, - cellProps, - innerWidth, - })} - + const link: LinkModel | undefined = field.getLinks?.({ + valueRowIndex: rowIndex, + })[0]; + + let onClick: MouseEventHandler | undefined; + if (link?.onClick) { + onClick = (event) => { + // Allow opening in new tab + if (!(event.ctrlKey || event.metaKey || event.shiftKey) && link!.onClick) { + event.preventDefault(); + link!.onClick(event); + } + }; + } + + const renderedCell = cell.render('Cell', { + field, + tableStyles, + onCellFilterAdded, + cellProps, + innerWidth, + }); + return link ? ( + + {renderedCell} + + ) : ( + <>{renderedCell} ); }; diff --git a/packages/grafana-ui/src/components/Table/styles.ts b/packages/grafana-ui/src/components/Table/styles.ts index 02f43620116..653b8b6cba2 100644 --- a/packages/grafana-ui/src/components/Table/styles.ts +++ b/packages/grafana-ui/src/components/Table/styles.ts @@ -90,7 +90,6 @@ export const getTableStyles = stylesFactory((theme: GrafanaTheme) => { `, cellContainer: buildCellContainerStyle(), cellText: css` - cursor: text; overflow: hidden; text-overflow: ellipsis; user-select: text;