diff --git a/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx b/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx index 33f0a8f3129..ffe386abfa8 100644 --- a/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx +++ b/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx @@ -462,25 +462,15 @@ export function TableNG(props: TableNGProps) { const cellColorStyles = getCellColorInlineStyles(cellOptions, displayValue, applyToRowBgFn != null); Object.assign(style, cellColorStyles); } + if (maxRowHeight != null) { + style.maxHeight = maxRowHeight; + } - return ( - - ); + return ; }; result.cellRootRenderers[displayName] = renderCellRoot; - const clampByMaxHeight = (maxHeight: number, children: ReactNode, cellStyles: string) => ( -
- {children} -
- ); - const renderBasicCellContent = (props: RenderCellProps): JSX.Element => { const rowIdx = props.row.__index; const value = props.row[props.column.key]; @@ -525,10 +515,6 @@ export function TableNG(props: TableNGProps) { ); - if (maxRowHeight != null) { - result = clampByMaxHeight(maxRowHeight, result, cellParentStyles); - } - return result; }; @@ -559,14 +545,7 @@ export function TableNG(props: TableNGProps) { const tooltipLinkStyles = getLinkStyles(theme, tooltipCanBeColorized); const tooltipClasses = getTooltipStyles(theme, textAlign); const tooltipBodyClasses = clsx(tooltipDefaultStyles, tooltipSpecificStyles, tooltipLinkStyles); - - let tooltipFieldRenderer = getCellRenderer(tooltipField, tooltipCellOptions); - if (maxRowHeight != null) { - const OrigCellRenderer = tooltipFieldRenderer; - tooltipFieldRenderer = (props) => - clampByMaxHeight(maxRowHeight, , tooltipBodyClasses); - } - + const tooltipFieldRenderer = getCellRenderer(tooltipField, tooltipCellOptions); const placement = field.config.custom?.tooltip?.placement ?? TableCellTooltipPlacement.Auto; const tooltipWidth = placement === TableCellTooltipPlacement.Left || placement === TableCellTooltipPlacement.Right @@ -678,7 +657,6 @@ export function TableNG(props: TableNGProps) { rows, setFilter, showTypeIcons, - styles.cellClamp, theme, timeRange, ] diff --git a/packages/grafana-ui/src/components/Table/TableNG/styles.ts b/packages/grafana-ui/src/components/Table/TableNG/styles.ts index 89c16e266a9..2e1c24420d1 100644 --- a/packages/grafana-ui/src/components/Table/TableNG/styles.ts +++ b/packages/grafana-ui/src/components/Table/TableNG/styles.ts @@ -80,10 +80,6 @@ export const getGridStyles = (theme: GrafanaTheme2, enablePagination?: boolean, marginBlock: TABLE.CELL_PADDING, }), cellNested: css({ '&[aria-selected=true]': { outline: 'none' } }), - cellClamp: css({ - overflowY: 'hidden', - justifyContent: 'flex-start !important', - }), noDataNested: css({ height: TABLE.NESTED_NO_DATA_HEIGHT, display: 'flex', diff --git a/packages/grafana-ui/src/components/Table/TableNG/utils.test.ts b/packages/grafana-ui/src/components/Table/TableNG/utils.test.ts index 5946b3865b6..769408a70a6 100644 --- a/packages/grafana-ui/src/components/Table/TableNG/utils.test.ts +++ b/packages/grafana-ui/src/components/Table/TableNG/utils.test.ts @@ -1171,8 +1171,7 @@ describe('TableNG utils', () => { const measurers = buildCellHeightMeasurers(fields, ctx); expect(measurers![0].measure!(fields[0].values[2], 20, fields[0], 2, 100)).toBeGreaterThan(50); - fields[0].config!.custom!.maxHeight = 50; - const measurersWithMax = buildCellHeightMeasurers(fields, ctx); + const measurersWithMax = buildCellHeightMeasurers(fields, ctx, 50); expect(measurersWithMax![0].measure!(fields[0].values[2], 20, fields[0], 2, 100)).toBe(50); }); });