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', () => (
));
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 {value} | ;
});
+
+ return (
+
+ {rowItems}
+
+ );
+};
+
+Row.propTypes = {
+ dataItem: React.PropTypes.object
};
const TableRows = ({
@@ -30,7 +39,7 @@ const TableRows = ({
}) => {
const rows = columns.map( (column, index) => {
- return
+ return
;
});
return (
@@ -40,12 +49,17 @@ const TableRows = ({
);
};
+TableRows.propTypes = {
+ columns: React.PropTypes.array,
+ data: React.PropTypes.array
+};
+
const TableBody = ({
columns,
data
}) => {
return (
-
+
);
};
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 (
- {column.title} |
- )
+ {column.title} |
+ );
});
return (
-
+
);
};
-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 (
{hasHeader ? : null}
- {hasBody ? : null}
+ {hasBody ? : null}
- )
+ );
+};
+
+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 (
-
- )
- }
-
-}
+// const renderTable = ({
+// hasHeader = false,
+// hasBody = true,
+// width = '100%'
+// }) => {
+//
+// const tableBody = () => {
+//
+// return (
+//
+// )
+// }
+//
+// }
const Table = ({
children,