From de9f55cb3e5789dd8c93cabac5d193bfeac742c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agn=C3=A8s=20Toulet?=
 <35176601+AgnesToulet@users.noreply.github.com>
Date: Thu, 8 Oct 2020 15:25:51 +0200
Subject: [PATCH] Table: don't format React components values (#28116)

---
 .../grafana-ui/src/components/Table/DefaultCell.tsx   | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-ui/src/components/Table/DefaultCell.tsx b/packages/grafana-ui/src/components/Table/DefaultCell.tsx
index a211ce197d7..bf9aa511b3f 100644
--- a/packages/grafana-ui/src/components/Table/DefaultCell.tsx
+++ b/packages/grafana-ui/src/components/Table/DefaultCell.tsx
@@ -1,4 +1,4 @@
-import React, { FC, MouseEventHandler } from 'react';
+import React, { FC, MouseEventHandler, ReactElement } from 'react';
 import { DisplayValue, Field, formattedValueToString, LinkModel } from '@grafana/data';
 
 import { TableCellDisplayMode, TableCellProps } from './types';
@@ -10,7 +10,14 @@ export const DefaultCell: FC<TableCellProps> = props => {
   const { field, cell, tableStyles, row, cellProps } = props;
 
   const displayValue = field.display!(cell.value);
-  const value = formattedValueToString(displayValue);
+
+  let value: string | ReactElement;
+  if (React.isValidElement(cell.value)) {
+    value = cell.value;
+  } else {
+    value = formattedValueToString(displayValue);
+  }
+
   const cellStyle = getCellStyle(tableStyles, field, displayValue);
   const showFilters = field.config.filterable;