From 033368547c3c904c6484aa6d5031c1f1d5137e54 Mon Sep 17 00:00:00 2001
From: Mikhail Potomin <639406+mpotomin@users.noreply.github.com>
Date: Wed, 17 Jul 2019 15:14:56 +0200
Subject: [PATCH] **Fix:** Allow using a react component as a DataTable cell
 (#1147)

* fix react cell for DataTable

* Solution with better perf

* Better code comments
---
 src/DataTable/DataTable.tsx |  7 ++++++-
 src/DataTable/README.md     | 15 ++++++++++++---
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/DataTable/DataTable.tsx b/src/DataTable/DataTable.tsx
index 0560bca25..e995f6269 100644
--- a/src/DataTable/DataTable.tsx
+++ b/src/DataTable/DataTable.tsx
@@ -40,6 +40,11 @@ export interface DataTableProps<Columns, Rows> {
   className?: string
 }
 
+const stringifyIfNeeded = (value: any) => {
+  // We compare booleans like this and without typeof for perf
+  return value === true || value === false ? String(value) : value
+}
+
 export function DataTable<Columns extends any[][], Rows extends any[][]>({
   columns,
   rows,
@@ -121,7 +126,7 @@ export function DataTable<Columns extends any[][], Rows extends any[][]>({
                 cell={cellIndex + 1}
                 height={rowHeight}
               >
-                {truncate(maxCharactersInCell)(String(cell))}
+                {truncate(maxCharactersInCell)(stringifyIfNeeded(cell))}
               </Cell>
             ))}
         </Row>
diff --git a/src/DataTable/README.md b/src/DataTable/README.md
index 55df62206..39d10aa06 100644
--- a/src/DataTable/README.md
+++ b/src/DataTable/README.md
@@ -5,10 +5,18 @@ Our DataTable is used to render tabular data structures. For a basic use case, g
 - `columns` is an array (X) of arrays (Y), where X contains a column, and Y contains a stack of headers in each column.
 - `rows` is an array (A) of arrays (B), where A is the entire row, and B is a single cell.
 
-Additionally, supply a `height` prop to limit the height of the table.
+Supply a `height` prop to limit the height of the table.
+
+Additionally, you can supply a component as a cell to customize the styling and functionality.
 
 ```jsx
-import { DataTable, DataTableSelect, DataTableInput, Checkbox } from "@operational/components"
+import * as React from "react"
+import { DataTable, DataTableSelect, DataTableInput, Checkbox, styled } from "@operational/components"
+
+const CustomCell = styled.span`
+  color: red;
+`
+
 ;<DataTable
   columns={[
     [
@@ -22,7 +30,7 @@ import { DataTable, DataTableSelect, DataTableInput, Checkbox } from "@operation
     [String(Math.random()).repeat(1000), "Imogen Mason", "Good Stuff", true],
     [String(Math.random()).repeat(1000), "Fabien Bernard", "🥖🥐🧀🍷", false],
     [String(Math.random()).repeat(1000), "STEREO BOOSTER", "☕️", true],
-    [String(Math.random()).repeat(1000), "Mischa Potomin", "null", false],
+    [String(Math.random()).repeat(1000), <CustomCell>Mischa Potomin</CustomCell>, "null", false],
     [String(Math.random()).repeat(1000), "Tejas Kumar", "🍗🍖🥓🥩", true],
   ]}
 />
@@ -33,6 +41,7 @@ import { DataTable, DataTableSelect, DataTableInput, Checkbox } from "@operation
 Sometimes, we wish to render a _lot_ more data and have more of it visible. For this, we set `rowHeight="compact"` to enable compact mode.
 
 ```jsx
+import * as React from "react"
 import { DataTable, DataTableSelect, DataTableInput, Checkbox } from "@operational/components"
 ;<DataTable
   height={225}