**Fix:** Allow using a react component as a DataTable cell (#1147)

* fix react cell for DataTable * Solution with better perf * Better code comments
contiamo · Jul 17, 2019 · 0333685 · 0333685
1 parent 903612e
commit 0333685
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git 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
@@ -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}