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