From 2b25582af0c60a131cef41972f072d8aa0a3d452 Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Thu, 19 Jan 2017 14:59:59 +0000
Subject: [PATCH 01/11] implimenting simple table component

---
 ui/src/components/table/index.js      |  8 +++
 ui/src/components/table/readme.md     | 41 +++++++++++++
 ui/src/components/table/story.js      | 87 +++++++++++++++++++++++++++
 ui/src/components/table/table-body.js | 39 ++++++++++++
 ui/src/components/table/table-cell.js |  0
 ui/src/components/table/table-head.js | 58 ++++++++++++++++++
 ui/src/components/table/table-item.js | 28 +++++++++
 ui/src/components/table/table-row.js  | 54 +++++++++++++++++
 ui/src/components/table/table.js      | 29 +++++++++
 ui/src/shared/composers.js            | 13 +++-
 10 files changed, 356 insertions(+), 1 deletion(-)
 create mode 100644 ui/src/components/table/index.js
 create mode 100644 ui/src/components/table/readme.md
 create mode 100644 ui/src/components/table/story.js
 create mode 100644 ui/src/components/table/table-body.js
 create mode 100644 ui/src/components/table/table-cell.js
 create mode 100644 ui/src/components/table/table-head.js
 create mode 100644 ui/src/components/table/table-item.js
 create mode 100644 ui/src/components/table/table-row.js
 create mode 100644 ui/src/components/table/table.js

diff --git a/ui/src/components/table/index.js b/ui/src/components/table/index.js
new file mode 100644
index 00000000..0a5e1d71
--- /dev/null
+++ b/ui/src/components/table/index.js
@@ -0,0 +1,8 @@
+module.exports = {
+  Table: require('./table'),
+  TableHead: require('./table-head'),
+  TableBody: require('./table-body'),
+  TableCell: require('./table-cell'),
+  TableRow: require('./table-row'),
+  TableItem: require('./table-item'),
+};
diff --git a/ui/src/components/table/readme.md b/ui/src/components/table/readme.md
new file mode 100644
index 00000000..13c2ad83
--- /dev/null
+++ b/ui/src/components/table/readme.md
@@ -0,0 +1,41 @@
+# `<Avatar>`
+
+## demo
+
+```embed
+const React = require('react');
+const ReactDOM = require('react-dom/server');
+const Base = require('../base');
+const Container = require('../container');
+const Row = require('../row');
+const Column = require('../column');
+const Avatar = require('./index.js');
+const styles = require('./style.css');
+
+nmodule.exports = ReactDOM.renderToString(
+  <Base>
+    <Row>
+      <Column>
+        <Avatar color='#35a8c0' name='Alex' />
+      </Column>
+      <Column>
+        <Avatar color='#ef6176' name='Alex' src='https://openclipart.org/image/2400px/svg_to_png/177482/ProfilePlaceholderSuit.png' />
+      </Column>
+    </Row>
+  </Base>
+);
+```
+
+## usage
+
+```js
+const React = require('react');
+const Avatar = require('ui/avatar');
+
+module.exports = () => {
+  return (
+    <Avatar color='#35a8c0' name='Alex' />
+    <Avatar color='#ef6176' name='Alex' src='path/to/image.png' />
+  );
+}
+```
diff --git a/ui/src/components/table/story.js b/ui/src/components/table/story.js
new file mode 100644
index 00000000..5bc35e02
--- /dev/null
+++ b/ui/src/components/table/story.js
@@ -0,0 +1,87 @@
+const React = require('react');
+const Base = require('../base');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const _table = require('./');
+
+const {
+  Table,
+  TableHead,
+  TableBody,
+  TableRow,
+  TableItem
+} = _table;
+
+const columns = [{
+  title: 'Memeber',
+  dataID: 'member',
+  dataKey: 'member',
+  width: ''
+}, {
+  title: 'Status',
+  dataID: 'status',
+  dataKey: 'status',
+  width: ''
+}, {
+  title: 'Role',
+  dataID: 'role',
+  dataKey: 'role',
+  width: ''
+}, {
+  title: '',
+  dataID: 'delete',
+  dataKey: 'delete',
+  width: ''
+}];
+
+const data = [{
+  name: 'Nicola',
+  status: 'Active',
+  role: 'Ownder',
+}];
+
+storiesOf('Table', module)
+  .add('Table', () => (
+    <Base>
+      <Table>
+        <TableHead>
+          <TableItem>Member</TableItem>
+          <TableItem>Status</TableItem>
+          <TableItem>Role</TableItem>
+          <TableItem>{/*Empty last Column*/}</TableItem>
+        </TableHead>
+
+        <TableBody>
+          <TableRow>
+            <TableItem>
+              <h4>Nicola (You)</h4>
+              <p>nicola@biztech.com</p>
+            </TableItem>
+            <TableItem>Active</TableItem>
+            <TableItem>Owner</TableItem>
+            <TableItem>🗑️</TableItem>
+          </TableRow>
+          <TableRow>
+            <TableItem>
+              <h4>Nicola (You)</h4>
+              <p>nicola@biztech.com</p>
+            </TableItem>
+            <TableItem>Active</TableItem>
+            <TableItem>Owner</TableItem>
+            <TableItem>🗑️</TableItem>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </Base>
+  ))
+  .add('Table New', () => (
+    <Base>
+      <Table
+        columns={columns}
+        data={data}
+      />
+    </Base>
+  ));
diff --git a/ui/src/components/table/table-body.js b/ui/src/components/table/table-body.js
new file mode 100644
index 00000000..62066e6a
--- /dev/null
+++ b/ui/src/components/table/table-body.js
@@ -0,0 +1,39 @@
+const composers = require('../../shared/composers');
+
+const React = require('react');
+const Styled = require('styled-components');
+
+const {
+  default: styled,
+} = Styled;
+
+const {
+  clearfix
+} = composers;
+
+const StyledTableBody = styled.article`
+  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
+  
+  ${clearfix}
+`;
+
+const TableBody = ({
+  children
+}) => {
+
+  const itemCount = children.length;
+
+  if (itemCount <= 1) return;
+
+  return (
+    <StyledTableBody itemCount={itemCount}>
+      {children}
+    </StyledTableBody>
+  );
+};
+
+TableBody.propTypes = {
+  children: React.PropTypes.node
+};
+
+module.exports = StyledTableBody;
\ No newline at end of file
diff --git a/ui/src/components/table/table-cell.js b/ui/src/components/table/table-cell.js
new file mode 100644
index 00000000..e69de29b
diff --git a/ui/src/components/table/table-head.js b/ui/src/components/table/table-head.js
new file mode 100644
index 00000000..2b80b85f
--- /dev/null
+++ b/ui/src/components/table/table-head.js
@@ -0,0 +1,58 @@
+const fns = require('../../shared/functions');
+const composers = require('../../shared/composers');
+
+const React = require('react');
+const Styled = require('styled-components');
+
+const {
+  remcalc
+} = fns;
+
+const {
+  default: styled,
+  css
+} = Styled;
+
+const {
+  clearfix
+} = composers;
+
+const StyledTableHead = styled.header`
+  background: #fafafa;
+  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
+  padding: ${remcalc(24)} 0;
+  
+  ${clearfix}
+  
+  & > .table-item {
+    text-align: center;
+    
+    ${props => {
+      const width = 100 / props.itemCount;
+      return css`
+        width: ${width}%;  
+      `;
+    }}
+  }
+`;
+
+const TableHead = ({
+  children
+}) => {
+
+  const itemCount = children.length;
+
+  if (itemCount <= 1) return;
+
+  return (
+    <StyledTableHead itemCount={itemCount}>
+      {children}
+    </StyledTableHead>
+  );
+};
+
+TableHead.propTypes = {
+  children: React.PropTypes.node
+};
+
+module.exports = TableHead;
\ No newline at end of file
diff --git a/ui/src/components/table/table-item.js b/ui/src/components/table/table-item.js
new file mode 100644
index 00000000..e43bc69b
--- /dev/null
+++ b/ui/src/components/table/table-item.js
@@ -0,0 +1,28 @@
+const React = require('react');
+const Styled = require('styled-components');
+
+const {
+  default: styled
+} = Styled;
+
+const Item = styled.div`
+  display: inline-block;
+  float: left;
+`;
+
+const TableItem = ({
+  children
+}) => {
+
+  return (
+    <Item className="table-item">
+      {children}
+    </Item>
+  );
+};
+
+TableItem.propTypes = {
+  children: React.PropTypes.node
+};
+
+module.exports = TableItem;
\ No newline at end of file
diff --git a/ui/src/components/table/table-row.js b/ui/src/components/table/table-row.js
new file mode 100644
index 00000000..3817b656
--- /dev/null
+++ b/ui/src/components/table/table-row.js
@@ -0,0 +1,54 @@
+const fns = require('../../shared/functions');
+const composers = require('../../shared/composers');
+
+const React = require('react');
+const Styled = require('styled-components');
+
+const {
+  default: styled,
+  css
+} = Styled;
+
+const {
+  clearfix
+} = composers;
+
+const {
+  remcalc
+} = fns;
+
+const StyledTableRow = styled.div`
+  ${clearfix}
+  
+  padding: ${remcalc(24)} 0;
+  border-bottom: solid 1px #d8d8d8;
+  
+  & > .table-item {
+    text-align: center;
+    
+    ${props => {
+      const width = 100 / props.itemCount;
+      return css`
+        width: ${width}%;  
+      `;
+    }}
+  }
+`;
+
+const TableRow = ({
+  children
+}) => {
+  const itemCount = children.length;
+
+  return (
+    <StyledTableRow itemCount={itemCount}>
+      {children}
+    </StyledTableRow>
+  );
+};
+
+TableRow.propTypes = {
+  children: React.PropTypes.node
+};
+
+module.exports = TableRow;
\ No newline at end of file
diff --git a/ui/src/components/table/table.js b/ui/src/components/table/table.js
new file mode 100644
index 00000000..b77c2207
--- /dev/null
+++ b/ui/src/components/table/table.js
@@ -0,0 +1,29 @@
+const React = require('react');
+const Styled = require('styled-components');
+
+const {
+  default: styled
+} = Styled;
+
+const StyledTable = styled.section`
+  border: solid 1px #d8d8d8
+  font-family: 'LibreFranklin', sans-serif;
+	font-style: normal;
+`;
+
+const Table = ({
+  children
+}) => {
+
+  return (
+    <StyledTable>
+      {children}
+    </StyledTable>
+  );
+};
+
+Table.propTypes = {
+  children: React.PropTypes.node
+};
+
+module.exports = Table;
diff --git a/ui/src/shared/composers.js b/ui/src/shared/composers.js
index 517b2eeb..457975c4 100644
--- a/ui/src/shared/composers.js
+++ b/ui/src/shared/composers.js
@@ -47,5 +47,16 @@ module.exports = {
     right: ${positions.right || 'auto'};
     bottom: ${positions.bottom || 'auto'};
     left: ${positions.left || 'auto'};
-  `
+  `,
+  clearfix: css` 
+    &:before,
+    &:after {
+      content:"";
+      display:table;
+    }
+    
+    &:after {
+      clear:both;
+    }
+  `,
 };

From c43832c2d0675b600b06b7d572b43deaf3369c93 Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Fri, 20 Jan 2017 10:33:52 +0000
Subject: [PATCH 02/11] working on table by passing in js object

---
 ui/src/components/table-new/index.js      |  8 +++
 ui/src/components/table-new/readme.md     | 41 ++++++++++++++
 ui/src/components/table-new/story.js      | 56 +++++++++++++++++++
 ui/src/components/table-new/table-body.js | 57 ++++++++++++++++++++
 ui/src/components/table-new/table-cell.js |  0
 ui/src/components/table-new/table-head.js | 56 +++++++++++++++++++
 ui/src/components/table-new/table-item.js | 28 ++++++++++
 ui/src/components/table-new/table-row.js  | 54 +++++++++++++++++++
 ui/src/components/table-new/table.js      | 66 +++++++++++++++++++++++
 ui/src/components/table/table.js          | 30 +++++++++--
 10 files changed, 391 insertions(+), 5 deletions(-)
 create mode 100644 ui/src/components/table-new/index.js
 create mode 100644 ui/src/components/table-new/readme.md
 create mode 100644 ui/src/components/table-new/story.js
 create mode 100644 ui/src/components/table-new/table-body.js
 create mode 100644 ui/src/components/table-new/table-cell.js
 create mode 100644 ui/src/components/table-new/table-head.js
 create mode 100644 ui/src/components/table-new/table-item.js
 create mode 100644 ui/src/components/table-new/table-row.js
 create mode 100644 ui/src/components/table-new/table.js

diff --git a/ui/src/components/table-new/index.js b/ui/src/components/table-new/index.js
new file mode 100644
index 00000000..0a5e1d71
--- /dev/null
+++ b/ui/src/components/table-new/index.js
@@ -0,0 +1,8 @@
+module.exports = {
+  Table: require('./table'),
+  TableHead: require('./table-head'),
+  TableBody: require('./table-body'),
+  TableCell: require('./table-cell'),
+  TableRow: require('./table-row'),
+  TableItem: require('./table-item'),
+};
diff --git a/ui/src/components/table-new/readme.md b/ui/src/components/table-new/readme.md
new file mode 100644
index 00000000..13c2ad83
--- /dev/null
+++ b/ui/src/components/table-new/readme.md
@@ -0,0 +1,41 @@
+# `<Avatar>`
+
+## demo
+
+```embed
+const React = require('react');
+const ReactDOM = require('react-dom/server');
+const Base = require('../base');
+const Container = require('../container');
+const Row = require('../row');
+const Column = require('../column');
+const Avatar = require('./index.js');
+const styles = require('./style.css');
+
+nmodule.exports = ReactDOM.renderToString(
+  <Base>
+    <Row>
+      <Column>
+        <Avatar color='#35a8c0' name='Alex' />
+      </Column>
+      <Column>
+        <Avatar color='#ef6176' name='Alex' src='https://openclipart.org/image/2400px/svg_to_png/177482/ProfilePlaceholderSuit.png' />
+      </Column>
+    </Row>
+  </Base>
+);
+```
+
+## usage
+
+```js
+const React = require('react');
+const Avatar = require('ui/avatar');
+
+module.exports = () => {
+  return (
+    <Avatar color='#35a8c0' name='Alex' />
+    <Avatar color='#ef6176' name='Alex' src='path/to/image.png' />
+  );
+}
+```
diff --git a/ui/src/components/table-new/story.js b/ui/src/components/table-new/story.js
new file mode 100644
index 00000000..9b1c0207
--- /dev/null
+++ b/ui/src/components/table-new/story.js
@@ -0,0 +1,56 @@
+const React = require('react');
+const Base = require('../base');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const _table = require('./');
+
+const {
+  Table,
+  TableHead,
+  TableBody,
+  TableRow,
+  TableItem
+} = _table;
+
+const columns = [{
+  title: 'Memeber',
+  dataID: 'member',
+  dataKey: 'member',
+  width: ''
+}, {
+  title: 'Status',
+  dataID: 'status',
+  dataKey: 'status',
+  width: ''
+}, {
+  title: 'Role',
+  dataID: 'role',
+  dataKey: 'role',
+  width: ''
+}, {
+  title: '',
+  dataID: 'delete',
+  dataKey: 'delete',
+  width: ''
+}];
+
+const data = [{
+  name: 'Nicola',
+  status: 'Active',
+  role: 'Owner',
+  key: 1
+}];
+
+storiesOf('Table New', module)
+  .add('Table New', () => (
+    <Base>
+      <Table
+        title="This is the table title"
+        columns={columns}
+        data={data}
+      />
+    </Base>
+  ));
diff --git a/ui/src/components/table-new/table-body.js b/ui/src/components/table-new/table-body.js
new file mode 100644
index 00000000..6d0916da
--- /dev/null
+++ b/ui/src/components/table-new/table-body.js
@@ -0,0 +1,57 @@
+const composers = require('../../shared/composers');
+
+const React = require('react');
+const Styled = require('styled-components');
+
+const {
+  default: styled,
+} = Styled;
+
+const {
+  clearfix
+} = composers;
+
+const Row = ({st
+  dataItem
+}) => {
+  const _dataItem = dataItem;
+
+
+  Object.keys(_dataItem).forEach( (item, i) => {
+    const value = _dataItem[item];
+
+    return <td key={i}>{value}</td>;
+  });
+};
+
+const TableRows = ({
+  columns,
+  data
+}) => {
+
+  const rows = columns.map( (column, index) => {
+    return <Row dataItem={data[index]} key={index} />
+  });
+
+  return (
+    <tbody>
+      {rows}
+    </tbody>
+  );
+};
+
+const TableBody = ({
+  columns,
+  data
+}) => {
+  return (
+    <TableRows data={data} columns={columns} />
+  );
+};
+
+TableBody.propTypes = {
+  columns: React.PropTypes.array,
+  data: React.PropTypes.array
+};
+
+module.exports = TableBody;
\ No newline at end of file
diff --git a/ui/src/components/table-new/table-cell.js b/ui/src/components/table-new/table-cell.js
new file mode 100644
index 00000000..e69de29b
diff --git a/ui/src/components/table-new/table-head.js b/ui/src/components/table-new/table-head.js
new file mode 100644
index 00000000..85bb50ae
--- /dev/null
+++ b/ui/src/components/table-new/table-head.js
@@ -0,0 +1,56 @@
+const fns = require('../../shared/functions');
+const composers = require('../../shared/composers');
+
+const React = require('react');
+const Styled = require('styled-components');
+
+const {
+  remcalc
+} = fns;
+
+const {
+  default: styled,
+  css
+} = Styled;
+
+const {
+  clearfix
+} = composers;
+
+const StyledTableHead = styled.header`
+  background: #fafafa;
+  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
+  padding: ${remcalc(24)} 0;
+  
+  ${clearfix}
+  
+  & > .table-item {
+    text-align: center;
+    
+    ${props => {
+      const width = 100 / props.itemCount;
+      return css`
+        width: ${width}%;  
+      `;
+    }}
+  }
+`;
+
+const TableHeader = (columns) => {
+
+  columns.map( (column) => {
+    return (
+      <td>{column.title}</td>
+    )
+  });
+
+  return (
+    <thead></thead>
+  );
+};
+
+TableHeader.propTypes = {
+  children: React.PropTypes.node
+};
+
+module.exports = TableHeader;
\ No newline at end of file
diff --git a/ui/src/components/table-new/table-item.js b/ui/src/components/table-new/table-item.js
new file mode 100644
index 00000000..e43bc69b
--- /dev/null
+++ b/ui/src/components/table-new/table-item.js
@@ -0,0 +1,28 @@
+const React = require('react');
+const Styled = require('styled-components');
+
+const {
+  default: styled
+} = Styled;
+
+const Item = styled.div`
+  display: inline-block;
+  float: left;
+`;
+
+const TableItem = ({
+  children
+}) => {
+
+  return (
+    <Item className="table-item">
+      {children}
+    </Item>
+  );
+};
+
+TableItem.propTypes = {
+  children: React.PropTypes.node
+};
+
+module.exports = TableItem;
\ No newline at end of file
diff --git a/ui/src/components/table-new/table-row.js b/ui/src/components/table-new/table-row.js
new file mode 100644
index 00000000..3817b656
--- /dev/null
+++ b/ui/src/components/table-new/table-row.js
@@ -0,0 +1,54 @@
+const fns = require('../../shared/functions');
+const composers = require('../../shared/composers');
+
+const React = require('react');
+const Styled = require('styled-components');
+
+const {
+  default: styled,
+  css
+} = Styled;
+
+const {
+  clearfix
+} = composers;
+
+const {
+  remcalc
+} = fns;
+
+const StyledTableRow = styled.div`
+  ${clearfix}
+  
+  padding: ${remcalc(24)} 0;
+  border-bottom: solid 1px #d8d8d8;
+  
+  & > .table-item {
+    text-align: center;
+    
+    ${props => {
+      const width = 100 / props.itemCount;
+      return css`
+        width: ${width}%;  
+      `;
+    }}
+  }
+`;
+
+const TableRow = ({
+  children
+}) => {
+  const itemCount = children.length;
+
+  return (
+    <StyledTableRow itemCount={itemCount}>
+      {children}
+    </StyledTableRow>
+  );
+};
+
+TableRow.propTypes = {
+  children: React.PropTypes.node
+};
+
+module.exports = TableRow;
\ No newline at end of file
diff --git a/ui/src/components/table-new/table.js b/ui/src/components/table-new/table.js
new file mode 100644
index 00000000..ee67ac7b
--- /dev/null
+++ b/ui/src/components/table-new/table.js
@@ -0,0 +1,66 @@
+const React = require('react');
+const Styled = require('styled-components');
+
+const TableBody = require('./table-body');
+const TableHeader = require('./table-head');
+
+const {
+  default: styled
+} = Styled;
+
+const StyledTableWrapper = styled.section`
+  font-family: 'LibreFranklin', sans-serif;
+	font-style: normal;
+`;
+
+const StyledTableHead = styled.thead``;
+const StyledTableBody = styled.tbody``;
+
+const StyledTitle = styled.h3`
+  text-align: center
+`;
+
+const TableContent = ({
+  columns,
+  data,
+  hasHeader = false,
+  hasBody = data.length >= 1,
+  width = '100%'
+}) => {
+
+  return (
+    <table>
+      {hasHeader ? <TableHeader columns={columns} /> : null}
+      {hasBody ? <TableBody data={data} columns={columns} /> : null}
+    </table>
+  )
+};
+
+const Table = ({
+  children,
+  columns = [],
+  data = [],
+  title,
+}) => {
+
+  return (
+
+    <StyledTableWrapper>
+      <StyledTitle>{title}</StyledTitle>
+
+      <TableContent
+        columns={columns}
+        data={data}
+      />
+    </StyledTableWrapper>
+  );
+};
+
+Table.propTypes = {
+  children: React.PropTypes.node,
+  columns: React.PropTypes.array,
+  data: React.PropTypes.array,
+  title: React.PropTypes.string,
+};
+
+module.exports = Table;
diff --git a/ui/src/components/table/table.js b/ui/src/components/table/table.js
index b77c2207..dca22a41 100644
--- a/ui/src/components/table/table.js
+++ b/ui/src/components/table/table.js
@@ -5,25 +5,45 @@ const {
   default: styled
 } = Styled;
 
-const StyledTable = styled.section`
+const StyledTableWrapper = styled.section`
   border: solid 1px #d8d8d8
   font-family: 'LibreFranklin', sans-serif;
 	font-style: normal;
 `;
 
+const StyledTableHead = styled.thead``;
+const StyledTableBody = styled.tbody``;
+
+const renderTable = ({
+  hasHeader = false,
+  hasBody = true,
+  width = '100%'
+}) => {
+
+  const tableBody = () => {
+
+    return (
+      <StyledTableBody />
+    )
+  }
+
+}
+
 const Table = ({
-  children
+  children,
+  title,
 }) => {
 
   return (
-    <StyledTable>
+    <StyledTableWrapper>
       {children}
-    </StyledTable>
+    </StyledTableWrapper>
   );
 };
 
 Table.propTypes = {
-  children: React.PropTypes.node
+  children: React.PropTypes.node,
+  title: React.PropTypes.string,
 };
 
 module.exports = Table;

From 5dd5bc9498bce00e4f1361d2bacd0bdc74103abf Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Fri, 20 Jan 2017 11:29:13 +0000
Subject: [PATCH 03/11] fixing unassigned object and changing forEach to map,
 plus fixing lintingst

---
 ui/src/components/table-new/story.js      | 10 +--
 ui/src/components/table-new/table-body.js | 44 +++++++++-----
 ui/src/components/table-new/table-head.js | 74 +++++++++++------------
 ui/src/components/table-new/table.js      | 16 +++--
 ui/src/components/table/table.js          | 32 +++++-----
 5 files changed, 97 insertions(+), 79 deletions(-)

diff --git a/ui/src/components/table-new/story.js b/ui/src/components/table-new/story.js
index 9b1c0207..9555e22e 100644
--- a/ui/src/components/table-new/story.js
+++ b/ui/src/components/table-new/story.js
@@ -9,10 +9,10 @@ const _table = require('./');
 
 const {
   Table,
-  TableHead,
-  TableBody,
-  TableRow,
-  TableItem
+  // TableHead,
+  // TableBody,
+  // TableRow,
+  // TableItem
 } = _table;
 
 const columns = [{
@@ -48,9 +48,9 @@ storiesOf('Table New', module)
   .add('Table New', () => (
     <Base>
       <Table
-        title="This is the table title"
         columns={columns}
         data={data}
+        title="This is the table title"
       />
     </Base>
   ));
diff --git a/ui/src/components/table-new/table-body.js b/ui/src/components/table-new/table-body.js
index 6d0916da..48c26c05 100644
--- a/ui/src/components/table-new/table-body.js
+++ b/ui/src/components/table-new/table-body.js
@@ -1,27 +1,36 @@
-const composers = require('../../shared/composers');
+// const composers = require('../../shared/composers');
 
 const React = require('react');
-const Styled = require('styled-components');
+// const Styled = require('styled-components');
+//
+// const {
+//   default: styled,
+// } = Styled;
 
-const {
-  default: styled,
-} = Styled;
+// const {
+//   clearfix
+// } = composers;
 
-const {
-  clearfix
-} = composers;
-
-const Row = ({st
-  dataItem
+const Row = ({
+  dataItem = {}
 }) => {
   const _dataItem = dataItem;
 
-
-  Object.keys(_dataItem).forEach( (item, i) => {
+  const rowItems = Object.keys(_dataItem).map( (item, i) => {
     const value = _dataItem[item];
 
     return <td key={i}>{value}</td>;
   });
+
+  return (
+    <tr>
+      {rowItems}
+    </tr>
+  );
+};
+
+Row.propTypes = {
+  dataItem: React.PropTypes.object
 };
 
 const TableRows = ({
@@ -30,7 +39,7 @@ const TableRows = ({
 }) => {
 
   const rows = columns.map( (column, index) => {
-    return <Row dataItem={data[index]} key={index} />
+    return <Row dataItem={data[index]} key={index} />;
   });
 
   return (
@@ -40,12 +49,17 @@ const TableRows = ({
   );
 };
 
+TableRows.propTypes = {
+  columns: React.PropTypes.array,
+  data: React.PropTypes.array
+};
+
 const TableBody = ({
   columns,
   data
 }) => {
   return (
-    <TableRows data={data} columns={columns} />
+    <TableRows columns={columns} data={data} />
   );
 };
 
diff --git a/ui/src/components/table-new/table-head.js b/ui/src/components/table-new/table-head.js
index 85bb50ae..1faf44bc 100644
--- a/ui/src/components/table-new/table-head.js
+++ b/ui/src/components/table-new/table-head.js
@@ -1,56 +1,52 @@
-const fns = require('../../shared/functions');
-const composers = require('../../shared/composers');
+// const fns = require('../../shared/functions');
+// const composers = require('../../shared/composers');
 
 const React = require('react');
-const Styled = require('styled-components');
+// const Styled = require('styled-components');
 
-const {
-  remcalc
-} = fns;
+// const {
+//   remcalc
+// } = fns;
 
-const {
-  default: styled,
-  css
-} = Styled;
+// const {
+//   default: styled,
+//   css
+// } = Styled;
 
-const {
-  clearfix
-} = composers;
+// const {
+//   clearfix
+// } = composers;
 
-const StyledTableHead = styled.header`
-  background: #fafafa;
-  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
-  padding: ${remcalc(24)} 0;
-  
-  ${clearfix}
-  
-  & > .table-item {
-    text-align: center;
-    
-    ${props => {
-      const width = 100 / props.itemCount;
-      return css`
-        width: ${width}%;  
-      `;
-    }}
-  }
-`;
+// const StyledTableHead = styled.header`
+//   background: #fafafa;
+//   box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
+//   padding: ${remcalc(24)} 0;
+//
+//   ${clearfix}
+//
+//   & > .table-item {
+//     text-align: center;
+//
+//     ${props => {
+//       const width = 100 / props.itemCount;
+//       return css`
+//         width: ${width}%;
+//       `;
+//     }}
+//   }
+// `;
 
 const TableHeader = (columns) => {
 
-  columns.map( (column) => {
+  columns.map( (column, i) => {
     return (
-      <td>{column.title}</td>
-    )
+      <td key={i}>{column.title}</td>
+    );
   });
 
   return (
-    <thead></thead>
+    <thead />
   );
 };
 
-TableHeader.propTypes = {
-  children: React.PropTypes.node
-};
-
 module.exports = TableHeader;
\ No newline at end of file
diff --git a/ui/src/components/table-new/table.js b/ui/src/components/table-new/table.js
index ee67ac7b..560073f0 100644
--- a/ui/src/components/table-new/table.js
+++ b/ui/src/components/table-new/table.js
@@ -13,8 +13,8 @@ const StyledTableWrapper = styled.section`
 	font-style: normal;
 `;
 
-const StyledTableHead = styled.thead``;
-const StyledTableBody = styled.tbody``;
+// const StyledTableHead = styled.thead``;
+// const StyledTableBody = styled.tbody``;
 
 const StyledTitle = styled.h3`
   text-align: center
@@ -31,9 +31,17 @@ const TableContent = ({
   return (
     <table>
       {hasHeader ? <TableHeader columns={columns} /> : null}
-      {hasBody ? <TableBody data={data} columns={columns} /> : null}
+      {hasBody ? <TableBody columns={columns} data={data} /> : null}
     </table>
-  )
+  );
+};
+
+TableContent.propTypes = {
+  columns: React.PropTypes.array,
+  data: React.PropTypes.array,
+  hasBody: React.PropTypes.bool,
+  hasHeader: React.PropTypes.bool,
+  width: React.PropTypes.string,
 };
 
 const Table = ({
diff --git a/ui/src/components/table/table.js b/ui/src/components/table/table.js
index dca22a41..434b0e3a 100644
--- a/ui/src/components/table/table.js
+++ b/ui/src/components/table/table.js
@@ -11,23 +11,23 @@ const StyledTableWrapper = styled.section`
 	font-style: normal;
 `;
 
-const StyledTableHead = styled.thead``;
-const StyledTableBody = styled.tbody``;
+// const StyledTableHead = styled.thead``;
+// const StyledTableBody = styled.tbody``;
 
-const renderTable = ({
-  hasHeader = false,
-  hasBody = true,
-  width = '100%'
-}) => {
-
-  const tableBody = () => {
-
-    return (
-      <StyledTableBody />
-    )
-  }
-
-}
+// const renderTable = ({
+//   hasHeader = false,
+//   hasBody = true,
+//   width = '100%'
+// }) => {
+//
+//   const tableBody = () => {
+//
+//     return (
+//       <StyledTableBody />
+//     )
+//   }
+//
+// }
 
 const Table = ({
   children,

From fb579ac3787c2851191c2c9baf6610b54031ae5e Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Fri, 20 Jan 2017 11:51:49 +0000
Subject: [PATCH 04/11] adding table head to new table

---
 ui/src/components/table-new/story.js      |  5 +++
 ui/src/components/table-new/table-head.js | 40 ++++++++++++++++++-----
 ui/src/components/table-new/table.js      | 10 ++++--
 3 files changed, 43 insertions(+), 12 deletions(-)

diff --git a/ui/src/components/table-new/story.js b/ui/src/components/table-new/story.js
index 9555e22e..2e128b6a 100644
--- a/ui/src/components/table-new/story.js
+++ b/ui/src/components/table-new/story.js
@@ -42,6 +42,11 @@ const data = [{
   status: 'Active',
   role: 'Owner',
   key: 1
+}, {
+  name: 'Alex',
+  status: 'Inactive',
+  role: 'Read Only',
+  key: 2
 }];
 
 storiesOf('Table New', module)
diff --git a/ui/src/components/table-new/table-head.js b/ui/src/components/table-new/table-head.js
index 1faf44bc..7bdc2531 100644
--- a/ui/src/components/table-new/table-head.js
+++ b/ui/src/components/table-new/table-head.js
@@ -2,16 +2,16 @@
 // const composers = require('../../shared/composers');
 
 const React = require('react');
-// const Styled = require('styled-components');
+const Styled = require('styled-components');
 
 // const {
 //   remcalc
 // } = fns;
 
-// const {
-//   default: styled,
-//   css
-// } = Styled;
+const {
+  default: styled,
+  // css
+} = Styled;
 
 // const {
 //   clearfix
@@ -36,17 +36,39 @@ const React = require('react');
 //   }
 // `;
 
-const TableHeader = (columns) => {
+const StyledTableHeadItem = styled.td`
+  ${props => `width: ${props.width}`}
+`;
+
+const TableHeader = ({
+  columns
+}) => {
+
+  const fallBackWidth = `${100 / parseInt(columns.length)}%`;
+
+  const titles = columns.map( (column, i) => {
 
-  columns.map( (column, i) => {
     return (
-      <td key={i}>{column.title}</td>
+      <StyledTableHeadItem
+        key={i}
+        width={column.width || fallBackWidth}
+      >
+        {column.title}
+      </StyledTableHeadItem>
     );
   });
 
   return (
-    <thead />
+    <thead>
+      <tr>
+        {titles}
+      </tr>
+    </thead>
   );
 };
 
+TableHeader.propTypes = {
+  columns: React.PropTypes.object
+};
+
 module.exports = TableHeader;
\ No newline at end of file
diff --git a/ui/src/components/table-new/table.js b/ui/src/components/table-new/table.js
index 560073f0..a99c44cb 100644
--- a/ui/src/components/table-new/table.js
+++ b/ui/src/components/table-new/table.js
@@ -20,19 +20,23 @@ const StyledTitle = styled.h3`
   text-align: center
 `;
 
+const StyledTable = styled.table`
+  width: 100%;
+`;
+
 const TableContent = ({
   columns,
   data,
-  hasHeader = false,
+  hasHeader = columns.length >= 1,
   hasBody = data.length >= 1,
   width = '100%'
 }) => {
 
   return (
-    <table>
+    <StyledTable>
       {hasHeader ? <TableHeader columns={columns} /> : null}
       {hasBody ? <TableBody columns={columns} data={data} /> : null}
-    </table>
+    </StyledTable>
   );
 };
 

From 186353111b2cd853fdac2f91fc17e7e33532c4d4 Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Fri, 20 Jan 2017 13:23:52 +0000
Subject: [PATCH 05/11] refactoring, removing comments and unused files for new
 table

---
 ui/src/components/table-new/index.js          | 52 +++++++++++++---
 ui/src/components/table-new/story.js          | 10 +---
 ui/src/components/table-new/table-body.js     | 50 +---------------
 ui/src/components/table-new/table-cell.js     |  0
 .../table-new/{table.js => table-content.js}  | 41 +------------
 ui/src/components/table-new/table-head.js     | 33 +----------
 ui/src/components/table-new/table-item.js     | 28 ---------
 ui/src/components/table-new/table-row.js      | 59 +++++--------------
 8 files changed, 65 insertions(+), 208 deletions(-)
 delete mode 100644 ui/src/components/table-new/table-cell.js
 rename ui/src/components/table-new/{table.js => table-content.js} (52%)
 delete mode 100644 ui/src/components/table-new/table-item.js

diff --git a/ui/src/components/table-new/index.js b/ui/src/components/table-new/index.js
index 0a5e1d71..a665420b 100644
--- a/ui/src/components/table-new/index.js
+++ b/ui/src/components/table-new/index.js
@@ -1,8 +1,46 @@
-module.exports = {
-  Table: require('./table'),
-  TableHead: require('./table-head'),
-  TableBody: require('./table-body'),
-  TableCell: require('./table-cell'),
-  TableRow: require('./table-row'),
-  TableItem: require('./table-item'),
+const React = require('react');
+const Styled = require('styled-components');
+
+const TableContent = require('./table-content');
+
+const {
+  default: styled
+} = Styled;
+
+const StyledTitle = styled.h3`
+  text-align: center
+`;
+
+const StyledTableWrapper = styled.section`
+  font-family: 'LibreFranklin', sans-serif;
+	font-style: normal;
+`;
+
+const Table = ({
+  children,
+  columns = [],
+  data = [],
+  title,
+}) => {
+
+  return (
+
+    <StyledTableWrapper>
+      <StyledTitle>{title}</StyledTitle>
+
+      <TableContent
+        columns={columns}
+        data={data}
+      />
+    </StyledTableWrapper>
+  );
 };
+
+Table.propTypes = {
+  children: React.PropTypes.node,
+  columns: React.PropTypes.array,
+  data: React.PropTypes.array,
+  title: React.PropTypes.string,
+};
+
+module.exports = Table;
diff --git a/ui/src/components/table-new/story.js b/ui/src/components/table-new/story.js
index 2e128b6a..da8f34ca 100644
--- a/ui/src/components/table-new/story.js
+++ b/ui/src/components/table-new/story.js
@@ -5,15 +5,7 @@ const {
   storiesOf
 } = require('@kadira/storybook');
 
-const _table = require('./');
-
-const {
-  Table,
-  // TableHead,
-  // TableBody,
-  // TableRow,
-  // TableItem
-} = _table;
+const Table = require('./');
 
 const columns = [{
   title: 'Memeber',
diff --git a/ui/src/components/table-new/table-body.js b/ui/src/components/table-new/table-body.js
index 48c26c05..a1dbd7fd 100644
--- a/ui/src/components/table-new/table-body.js
+++ b/ui/src/components/table-new/table-body.js
@@ -1,43 +1,11 @@
-// const composers = require('../../shared/composers');
-
 const React = require('react');
-// const Styled = require('styled-components');
-//
-// const {
-//   default: styled,
-// } = Styled;
 
-// const {
-//   clearfix
-// } = composers;
+const Row = require('./table-row');
 
-const Row = ({
-  dataItem = {}
-}) => {
-  const _dataItem = dataItem;
-
-  const rowItems = Object.keys(_dataItem).map( (item, i) => {
-    const value = _dataItem[item];
-
-    return <td key={i}>{value}</td>;
-  });
-
-  return (
-    <tr>
-      {rowItems}
-    </tr>
-  );
-};
-
-Row.propTypes = {
-  dataItem: React.PropTypes.object
-};
-
-const TableRows = ({
+const TableBody = ({
   columns,
   data
 }) => {
-
   const rows = columns.map( (column, index) => {
     return <Row dataItem={data[index]} key={index} />;
   });
@@ -49,20 +17,6 @@ const TableRows = ({
   );
 };
 
-TableRows.propTypes = {
-  columns: React.PropTypes.array,
-  data: React.PropTypes.array
-};
-
-const TableBody = ({
-  columns,
-  data
-}) => {
-  return (
-    <TableRows columns={columns} data={data} />
-  );
-};
-
 TableBody.propTypes = {
   columns: React.PropTypes.array,
   data: React.PropTypes.array
diff --git a/ui/src/components/table-new/table-cell.js b/ui/src/components/table-new/table-cell.js
deleted file mode 100644
index e69de29b..00000000
diff --git a/ui/src/components/table-new/table.js b/ui/src/components/table-new/table-content.js
similarity index 52%
rename from ui/src/components/table-new/table.js
rename to ui/src/components/table-new/table-content.js
index a99c44cb..0bb3d16c 100644
--- a/ui/src/components/table-new/table.js
+++ b/ui/src/components/table-new/table-content.js
@@ -8,18 +8,6 @@ const {
   default: styled
 } = Styled;
 
-const StyledTableWrapper = styled.section`
-  font-family: 'LibreFranklin', sans-serif;
-	font-style: normal;
-`;
-
-// const StyledTableHead = styled.thead``;
-// const StyledTableBody = styled.tbody``;
-
-const StyledTitle = styled.h3`
-  text-align: center
-`;
-
 const StyledTable = styled.table`
   width: 100%;
 `;
@@ -48,31 +36,4 @@ TableContent.propTypes = {
   width: React.PropTypes.string,
 };
 
-const Table = ({
-  children,
-  columns = [],
-  data = [],
-  title,
-}) => {
-
-  return (
-
-    <StyledTableWrapper>
-      <StyledTitle>{title}</StyledTitle>
-
-      <TableContent
-        columns={columns}
-        data={data}
-      />
-    </StyledTableWrapper>
-  );
-};
-
-Table.propTypes = {
-  children: React.PropTypes.node,
-  columns: React.PropTypes.array,
-  data: React.PropTypes.array,
-  title: React.PropTypes.string,
-};
-
-module.exports = Table;
+module.exports = TableContent;
diff --git a/ui/src/components/table-new/table-head.js b/ui/src/components/table-new/table-head.js
index 7bdc2531..2a46b547 100644
--- a/ui/src/components/table-new/table-head.js
+++ b/ui/src/components/table-new/table-head.js
@@ -1,41 +1,10 @@
-// const fns = require('../../shared/functions');
-// const composers = require('../../shared/composers');
-
 const React = require('react');
 const Styled = require('styled-components');
 
-// const {
-//   remcalc
-// } = fns;
-
 const {
-  default: styled,
-  // css
+  default: styled
 } = Styled;
 
-// const {
-//   clearfix
-// } = composers;
-
-// const StyledTableHead = styled.header`
-//   background: #fafafa;
-//   box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
-//   padding: ${remcalc(24)} 0;
-//
-//   ${clearfix}
-//
-//   & > .table-item {
-//     text-align: center;
-//
-//     ${props => {
-//       const width = 100 / props.itemCount;
-//       return css`
-//         width: ${width}%;
-//       `;
-//     }}
-//   }
-// `;
-
 const StyledTableHeadItem = styled.td`
   ${props => `width: ${props.width}`}
 `;
diff --git a/ui/src/components/table-new/table-item.js b/ui/src/components/table-new/table-item.js
deleted file mode 100644
index e43bc69b..00000000
--- a/ui/src/components/table-new/table-item.js
+++ /dev/null
@@ -1,28 +0,0 @@
-const React = require('react');
-const Styled = require('styled-components');
-
-const {
-  default: styled
-} = Styled;
-
-const Item = styled.div`
-  display: inline-block;
-  float: left;
-`;
-
-const TableItem = ({
-  children
-}) => {
-
-  return (
-    <Item className="table-item">
-      {children}
-    </Item>
-  );
-};
-
-TableItem.propTypes = {
-  children: React.PropTypes.node
-};
-
-module.exports = TableItem;
\ No newline at end of file
diff --git a/ui/src/components/table-new/table-row.js b/ui/src/components/table-new/table-row.js
index 3817b656..226f38c5 100644
--- a/ui/src/components/table-new/table-row.js
+++ b/ui/src/components/table-new/table-row.js
@@ -1,54 +1,25 @@
-const fns = require('../../shared/functions');
-const composers = require('../../shared/composers');
-
 const React = require('react');
-const Styled = require('styled-components');
 
-const {
-  default: styled,
-  css
-} = Styled;
-
-const {
-  clearfix
-} = composers;
-
-const {
-  remcalc
-} = fns;
-
-const StyledTableRow = styled.div`
-  ${clearfix}
-  
-  padding: ${remcalc(24)} 0;
-  border-bottom: solid 1px #d8d8d8;
-  
-  & > .table-item {
-    text-align: center;
-    
-    ${props => {
-      const width = 100 / props.itemCount;
-      return css`
-        width: ${width}%;  
-      `;
-    }}
-  }
-`;
-
-const TableRow = ({
-  children
+const Row = ({
+  dataItem = {}
 }) => {
-  const itemCount = children.length;
+  const _dataItem = dataItem;
+
+  const rowItems = Object.keys(_dataItem).map( (item, i) => {
+    const value = _dataItem[item];
+
+    return <td key={i}>{value}</td>;
+  });
 
   return (
-    <StyledTableRow itemCount={itemCount}>
-      {children}
-    </StyledTableRow>
+    <tr>
+      {rowItems}
+    </tr>
   );
 };
 
-TableRow.propTypes = {
-  children: React.PropTypes.node
+Row.propTypes = {
+  dataItem: React.PropTypes.object
 };
 
-module.exports = TableRow;
\ No newline at end of file
+module.export = Row;
\ No newline at end of file

From d80933c9dccbbc08456c60b9a8997b86d4e56b64 Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Fri, 20 Jan 2017 13:33:37 +0000
Subject: [PATCH 06/11] removing old storybook story

---
 ui/src/components/table/story.js | 40 ++------------------------------
 1 file changed, 2 insertions(+), 38 deletions(-)

diff --git a/ui/src/components/table/story.js b/ui/src/components/table/story.js
index 5bc35e02..3afc85ff 100644
--- a/ui/src/components/table/story.js
+++ b/ui/src/components/table/story.js
@@ -10,39 +10,11 @@ const _table = require('./');
 const {
   Table,
   TableHead,
+  TableItem,
   TableBody,
-  TableRow,
-  TableItem
+  TableRow
 } = _table;
 
-const columns = [{
-  title: 'Memeber',
-  dataID: 'member',
-  dataKey: 'member',
-  width: ''
-}, {
-  title: 'Status',
-  dataID: 'status',
-  dataKey: 'status',
-  width: ''
-}, {
-  title: 'Role',
-  dataID: 'role',
-  dataKey: 'role',
-  width: ''
-}, {
-  title: '',
-  dataID: 'delete',
-  dataKey: 'delete',
-  width: ''
-}];
-
-const data = [{
-  name: 'Nicola',
-  status: 'Active',
-  role: 'Ownder',
-}];
-
 storiesOf('Table', module)
   .add('Table', () => (
     <Base>
@@ -76,12 +48,4 @@ storiesOf('Table', module)
         </TableBody>
       </Table>
     </Base>
-  ))
-  .add('Table New', () => (
-    <Base>
-      <Table
-        columns={columns}
-        data={data}
-      />
-    </Base>
   ));

From 18b724390a1bcb791c6d0314a09c269d6a459a02 Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Fri, 20 Jan 2017 13:50:07 +0000
Subject: [PATCH 07/11] renaming directories. Table >> Simple Table and Table
 New >> Data Table

---
 ui/src/components/{table-new => table-data-table}/index.js    | 0
 ui/src/components/{table-new => table-data-table}/readme.md   | 0
 ui/src/components/{table-new => table-data-table}/story.js    | 4 ++--
 .../components/{table-new => table-data-table}/table-body.js  | 0
 .../{table-new => table-data-table}/table-content.js          | 0
 .../components/{table-new => table-data-table}/table-head.js  | 0
 .../components/{table-new => table-data-table}/table-row.js   | 2 +-
 ui/src/components/{table => table-simple-table}/index.js      | 0
 ui/src/components/{table => table-simple-table}/readme.md     | 0
 ui/src/components/{table => table-simple-table}/story.js      | 4 ++--
 ui/src/components/{table => table-simple-table}/table-body.js | 0
 ui/src/components/{table => table-simple-table}/table-cell.js | 0
 ui/src/components/{table => table-simple-table}/table-head.js | 0
 ui/src/components/{table => table-simple-table}/table-item.js | 0
 ui/src/components/{table => table-simple-table}/table-row.js  | 0
 ui/src/components/{table => table-simple-table}/table.js      | 0
 16 files changed, 5 insertions(+), 5 deletions(-)
 rename ui/src/components/{table-new => table-data-table}/index.js (100%)
 rename ui/src/components/{table-new => table-data-table}/readme.md (100%)
 rename ui/src/components/{table-new => table-data-table}/story.js (92%)
 rename ui/src/components/{table-new => table-data-table}/table-body.js (100%)
 rename ui/src/components/{table-new => table-data-table}/table-content.js (100%)
 rename ui/src/components/{table-new => table-data-table}/table-head.js (100%)
 rename ui/src/components/{table-new => table-data-table}/table-row.js (94%)
 rename ui/src/components/{table => table-simple-table}/index.js (100%)
 rename ui/src/components/{table => table-simple-table}/readme.md (100%)
 rename ui/src/components/{table => table-simple-table}/story.js (94%)
 rename ui/src/components/{table => table-simple-table}/table-body.js (100%)
 rename ui/src/components/{table => table-simple-table}/table-cell.js (100%)
 rename ui/src/components/{table => table-simple-table}/table-head.js (100%)
 rename ui/src/components/{table => table-simple-table}/table-item.js (100%)
 rename ui/src/components/{table => table-simple-table}/table-row.js (100%)
 rename ui/src/components/{table => table-simple-table}/table.js (100%)

diff --git a/ui/src/components/table-new/index.js b/ui/src/components/table-data-table/index.js
similarity index 100%
rename from ui/src/components/table-new/index.js
rename to ui/src/components/table-data-table/index.js
diff --git a/ui/src/components/table-new/readme.md b/ui/src/components/table-data-table/readme.md
similarity index 100%
rename from ui/src/components/table-new/readme.md
rename to ui/src/components/table-data-table/readme.md
diff --git a/ui/src/components/table-new/story.js b/ui/src/components/table-data-table/story.js
similarity index 92%
rename from ui/src/components/table-new/story.js
rename to ui/src/components/table-data-table/story.js
index da8f34ca..7fd33496 100644
--- a/ui/src/components/table-new/story.js
+++ b/ui/src/components/table-data-table/story.js
@@ -41,8 +41,8 @@ const data = [{
   key: 2
 }];
 
-storiesOf('Table New', module)
-  .add('Table New', () => (
+storiesOf('Table - Data Table', module)
+  .add('Default', () => (
     <Base>
       <Table
         columns={columns}
diff --git a/ui/src/components/table-new/table-body.js b/ui/src/components/table-data-table/table-body.js
similarity index 100%
rename from ui/src/components/table-new/table-body.js
rename to ui/src/components/table-data-table/table-body.js
diff --git a/ui/src/components/table-new/table-content.js b/ui/src/components/table-data-table/table-content.js
similarity index 100%
rename from ui/src/components/table-new/table-content.js
rename to ui/src/components/table-data-table/table-content.js
diff --git a/ui/src/components/table-new/table-head.js b/ui/src/components/table-data-table/table-head.js
similarity index 100%
rename from ui/src/components/table-new/table-head.js
rename to ui/src/components/table-data-table/table-head.js
diff --git a/ui/src/components/table-new/table-row.js b/ui/src/components/table-data-table/table-row.js
similarity index 94%
rename from ui/src/components/table-new/table-row.js
rename to ui/src/components/table-data-table/table-row.js
index 226f38c5..34dc65d4 100644
--- a/ui/src/components/table-new/table-row.js
+++ b/ui/src/components/table-data-table/table-row.js
@@ -22,4 +22,4 @@ Row.propTypes = {
   dataItem: React.PropTypes.object
 };
 
-module.export = Row;
\ No newline at end of file
+module.exports = Row;
\ No newline at end of file
diff --git a/ui/src/components/table/index.js b/ui/src/components/table-simple-table/index.js
similarity index 100%
rename from ui/src/components/table/index.js
rename to ui/src/components/table-simple-table/index.js
diff --git a/ui/src/components/table/readme.md b/ui/src/components/table-simple-table/readme.md
similarity index 100%
rename from ui/src/components/table/readme.md
rename to ui/src/components/table-simple-table/readme.md
diff --git a/ui/src/components/table/story.js b/ui/src/components/table-simple-table/story.js
similarity index 94%
rename from ui/src/components/table/story.js
rename to ui/src/components/table-simple-table/story.js
index 3afc85ff..9b3b48ff 100644
--- a/ui/src/components/table/story.js
+++ b/ui/src/components/table-simple-table/story.js
@@ -15,8 +15,8 @@ const {
   TableRow
 } = _table;
 
-storiesOf('Table', module)
-  .add('Table', () => (
+storiesOf('Table - Simple', module)
+  .add('Default', () => (
     <Base>
       <Table>
         <TableHead>
diff --git a/ui/src/components/table/table-body.js b/ui/src/components/table-simple-table/table-body.js
similarity index 100%
rename from ui/src/components/table/table-body.js
rename to ui/src/components/table-simple-table/table-body.js
diff --git a/ui/src/components/table/table-cell.js b/ui/src/components/table-simple-table/table-cell.js
similarity index 100%
rename from ui/src/components/table/table-cell.js
rename to ui/src/components/table-simple-table/table-cell.js
diff --git a/ui/src/components/table/table-head.js b/ui/src/components/table-simple-table/table-head.js
similarity index 100%
rename from ui/src/components/table/table-head.js
rename to ui/src/components/table-simple-table/table-head.js
diff --git a/ui/src/components/table/table-item.js b/ui/src/components/table-simple-table/table-item.js
similarity index 100%
rename from ui/src/components/table/table-item.js
rename to ui/src/components/table-simple-table/table-item.js
diff --git a/ui/src/components/table/table-row.js b/ui/src/components/table-simple-table/table-row.js
similarity index 100%
rename from ui/src/components/table/table-row.js
rename to ui/src/components/table-simple-table/table-row.js
diff --git a/ui/src/components/table/table.js b/ui/src/components/table-simple-table/table.js
similarity index 100%
rename from ui/src/components/table/table.js
rename to ui/src/components/table-simple-table/table.js

From a315a9cff222e17114c2421a0bcb78318ee564a9 Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Fri, 20 Jan 2017 14:23:19 +0000
Subject: [PATCH 08/11] starting to style data table

---
 .../components/table-data-table/table-head.js | 29 +++++++++++++++----
 .../components/table-data-table/table-row.js  | 19 ++++++++++--
 2 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/ui/src/components/table-data-table/table-head.js b/ui/src/components/table-data-table/table-head.js
index 2a46b547..15d4f26c 100644
--- a/ui/src/components/table-data-table/table-head.js
+++ b/ui/src/components/table-data-table/table-head.js
@@ -1,12 +1,31 @@
 const React = require('react');
 const Styled = require('styled-components');
 
+const fns = require('../../shared/functions');
+
+const {
+  remcalc
+} = fns;
+
 const {
   default: styled
 } = Styled;
 
 const StyledTableHeadItem = styled.td`
   ${props => `width: ${props.width}`}
+  padding-top: ${remcalc(24)};
+  padding-bottom: ${remcalc(24)};
+  border-bottom: none;
+`;
+
+const StyledTableHead = styled.thead`
+  background: #fafafa;
+  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
+`;
+
+const StyledTableHeadRow = styled.tr`
+  border-left: solid ${remcalc(24)} transparent;
+  border-right: solid ${remcalc(24)} transparent;
 `;
 
 const TableHeader = ({
@@ -28,16 +47,16 @@ const TableHeader = ({
   });
 
   return (
-    <thead>
-      <tr>
+    <StyledTableHead>
+      <StyledTableHeadRow>
         {titles}
-      </tr>
-    </thead>
+      </StyledTableHeadRow>
+    </StyledTableHead>
   );
 };
 
 TableHeader.propTypes = {
-  columns: React.PropTypes.object
+  columns: React.PropTypes.array
 };
 
 module.exports = TableHeader;
\ No newline at end of file
diff --git a/ui/src/components/table-data-table/table-row.js b/ui/src/components/table-data-table/table-row.js
index 34dc65d4..83f05a40 100644
--- a/ui/src/components/table-data-table/table-row.js
+++ b/ui/src/components/table-data-table/table-row.js
@@ -1,4 +1,19 @@
 const React = require('react');
+const Styled = require('styled-components');
+
+const fns = require('../../shared/functions');
+
+const {
+  remcalc
+} = fns;
+
+const {
+  default: styled
+} = Styled;
+
+const StyledRow = styled.tr`
+  border: solid ${remcalc(1)} #d8d8d8;
+`;
 
 const Row = ({
   dataItem = {}
@@ -12,9 +27,9 @@ const Row = ({
   });
 
   return (
-    <tr>
+    <StyledRow>
       {rowItems}
-    </tr>
+    </StyledRow>
   );
 };
 

From 569b3182dd261ee9d2d0e181f7243d4c7997c771 Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Fri, 20 Jan 2017 14:37:19 +0000
Subject: [PATCH 09/11] adding padding to td`s

---
 ui/src/components/table-data-table/table-head.js | 13 ++++---------
 ui/src/components/table-data-table/table-row.js  |  6 +++++-
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/ui/src/components/table-data-table/table-head.js b/ui/src/components/table-data-table/table-head.js
index 15d4f26c..6364b0f8 100644
--- a/ui/src/components/table-data-table/table-head.js
+++ b/ui/src/components/table-data-table/table-head.js
@@ -13,19 +13,14 @@ const {
 
 const StyledTableHeadItem = styled.td`
   ${props => `width: ${props.width}`}
-  padding-top: ${remcalc(24)};
-  padding-bottom: ${remcalc(24)};
   border-bottom: none;
+  padding: ${remcalc(24)};
 `;
 
 const StyledTableHead = styled.thead`
   background: #fafafa;
   box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
-`;
-
-const StyledTableHeadRow = styled.tr`
-  border-left: solid ${remcalc(24)} transparent;
-  border-right: solid ${remcalc(24)} transparent;
+  border: solid ${remcalc(1)} #d8d8d8;
 `;
 
 const TableHeader = ({
@@ -48,9 +43,9 @@ const TableHeader = ({
 
   return (
     <StyledTableHead>
-      <StyledTableHeadRow>
+      <tr>
         {titles}
-      </StyledTableHeadRow>
+      </tr>
     </StyledTableHead>
   );
 };
diff --git a/ui/src/components/table-data-table/table-row.js b/ui/src/components/table-data-table/table-row.js
index 83f05a40..50e231e1 100644
--- a/ui/src/components/table-data-table/table-row.js
+++ b/ui/src/components/table-data-table/table-row.js
@@ -15,6 +15,10 @@ const StyledRow = styled.tr`
   border: solid ${remcalc(1)} #d8d8d8;
 `;
 
+const StyledTaleItem = styled.td`
+  padding: ${remcalc(24)};
+`;
+
 const Row = ({
   dataItem = {}
 }) => {
@@ -23,7 +27,7 @@ const Row = ({
   const rowItems = Object.keys(_dataItem).map( (item, i) => {
     const value = _dataItem[item];
 
-    return <td key={i}>{value}</td>;
+    return <StyledTaleItem key={i}>{value}</StyledTaleItem>;
   });
 
   return (

From e7905322a5ffe6eb102d8033011b955c6bb16e6f Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Fri, 20 Jan 2017 14:39:00 +0000
Subject: [PATCH 10/11] updating readme

---
 ui/src/components/table-data-table/readme.md | 61 +++++++++++++++-----
 1 file changed, 48 insertions(+), 13 deletions(-)

diff --git a/ui/src/components/table-data-table/readme.md b/ui/src/components/table-data-table/readme.md
index 13c2ad83..cd285205 100644
--- a/ui/src/components/table-data-table/readme.md
+++ b/ui/src/components/table-data-table/readme.md
@@ -9,19 +9,15 @@ const Base = require('../base');
 const Container = require('../container');
 const Row = require('../row');
 const Column = require('../column');
-const Avatar = require('./index.js');
-const styles = require('./style.css');
+const Table = require('./index.js');
 
 nmodule.exports = ReactDOM.renderToString(
   <Base>
-    <Row>
-      <Column>
-        <Avatar color='#35a8c0' name='Alex' />
-      </Column>
-      <Column>
-        <Avatar color='#ef6176' name='Alex' src='https://openclipart.org/image/2400px/svg_to_png/177482/ProfilePlaceholderSuit.png' />
-      </Column>
-    </Row>
+    <Table
+      columns={columns}
+      data={data}
+      title="This is the table title"
+    />
   </Base>
 );
 ```
@@ -30,12 +26,51 @@ nmodule.exports = ReactDOM.renderToString(
 
 ```js
 const React = require('react');
-const Avatar = require('ui/avatar');
+const Avatar = require('ui/table');
+
+const columns = [{
+  title: 'Memeber',
+  dataID: 'member',
+  dataKey: 'member',
+  width: ''
+}, {
+  title: 'Status',
+  dataID: 'status',
+  dataKey: 'status',
+  width: ''
+}, {
+  title: 'Role',
+  dataID: 'role',
+  dataKey: 'role',
+  width: ''
+}, {
+  title: '',
+  dataID: 'delete',
+  dataKey: 'delete',
+  width: ''
+}];
+
+const data = [{
+  name: 'Nicola',
+  status: 'Active',
+  role: 'Owner',
+  key: 1
+}, {
+  name: 'Alex',
+  status: 'Inactive',
+  role: 'Read Only',
+  key: 2
+}];
 
 module.exports = () => {
   return (
-    <Avatar color='#35a8c0' name='Alex' />
-    <Avatar color='#ef6176' name='Alex' src='path/to/image.png' />
+    <Base>
+      <Table
+        columns={columns}
+        data={data}
+        title="This is the table title"
+      />
+    </Base>
   );
 }
 ```

From 3b6817640f4a8ecb7917deb7c855800ebd6132f7 Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Fri, 20 Jan 2017 14:47:29 +0000
Subject: [PATCH 11/11] editing story to pull in react component instead of
 string

---
 ui/src/components/table-data-table/story.js   | 29 ++++++++++---------
 .../components/table-data-table/table-row.js  |  4 +--
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/ui/src/components/table-data-table/story.js b/ui/src/components/table-data-table/story.js
index 7fd33496..bdaaa917 100644
--- a/ui/src/components/table-data-table/story.js
+++ b/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',
-  dataKey: 'member',
-  width: ''
+  width: '50%'
 }, {
   title: 'Status',
-  dataID: 'status',
-  dataKey: 'status',
-  width: ''
+  width: '10%'
 }, {
   title: 'Role',
-  dataID: 'role',
-  dataKey: 'role',
-  width: ''
+  width: '20%'
 }, {
   title: '',
-  dataID: 'delete',
-  dataKey: 'delete',
-  width: ''
+  width: '20%'
 }];
 
 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
diff --git a/ui/src/components/table-data-table/table-row.js b/ui/src/components/table-data-table/table-row.js
index 50e231e1..13590e2a 100644
--- a/ui/src/components/table-data-table/table-row.js
+++ b/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 (