From fb579ac3787c2851191c2c9baf6610b54031ae5e Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Fri, 20 Jan 2017 11:51:49 +0000 Subject: [PATCH] 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 ( - {column.title} + + {column.title} + ); }); return ( - + + + {titles} + + ); }; +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 ( - + {hasHeader ? : null} {hasBody ? : null} -
+ ); };