editing story to pull in react component instead of string

ui/src/components/table-data-table/story.js

@@ -7,35 +7,36 @@ const {
 
 const Table = require('./');
 
+const memberDetail = (name) => {
+  return (
+    <div>
+      <h4>{name}</h4>
+      <small>{name}@biztech.com</small>
+    </div>
+  );
+};
+
 const columns = [{
   title: 'Memeber',
-  dataID: 'member',
+  width: '50%'
-  dataKey: 'member',
-  width: ''
 }, {
   title: 'Status',
-  dataID: 'status',
+  width: '10%'
-  dataKey: 'status',
-  width: ''
 }, {
   title: 'Role',
-  dataID: 'role',
+  width: '20%'
-  dataKey: 'role',
-  width: ''
 }, {
   title: '',
-  dataID: 'delete',
+  width: '20%'
-  dataKey: 'delete',
-  width: ''
 }];
 
 const data = [{
-  name: 'Nicola',
+  name: memberDetail('Nicola'),
   status: 'Active',
   role: 'Owner',
   key: 1
 }, {
-  name: 'Alex',
+  name: memberDetail('Alex'),
   status: 'Inactive',
   role: 'Read Only',
   key: 2

ui/src/components/table-data-table/table-row.js

@@ -15,7 +15,7 @@ const StyledRow = styled.tr`
   border: solid ${remcalc(1)} #d8d8d8;
 `;
 
-const StyledTaleItem = styled.td`
+const StyledTableItem = styled.td`
   padding: ${remcalc(24)};
 `;
 
@@ -27,7 +27,7 @@ const Row = ({
   const rowItems = Object.keys(_dataItem).map( (item, i) => {
     const value = _dataItem[item];
 
-    return <StyledTaleItem key={i}>{value}</StyledTaleItem>;
+    return <StyledTableItem key={i}>{value}</StyledTableItem>;
   });
 
   return (