adding table head to new table

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)

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 {
+const {
-//   default: styled,
+  default: styled,
-//   css
+  // css
-// } = Styled;
+} = 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;

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>
   );
 };