starting to style data table

This commit is contained in:
Alex Windett 2017-01-20 14:23:19 +00:00
parent 18b724390a
commit a315a9cff2
2 changed files with 41 additions and 7 deletions

View File

@ -1,12 +1,31 @@
const React = require('react'); const React = require('react');
const Styled = require('styled-components'); const Styled = require('styled-components');
const fns = require('../../shared/functions');
const {
remcalc
} = fns;
const { const {
default: styled default: styled
} = Styled; } = Styled;
const StyledTableHeadItem = styled.td` const StyledTableHeadItem = styled.td`
${props => `width: ${props.width}`} ${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 = ({ const TableHeader = ({
@ -28,16 +47,16 @@ const TableHeader = ({
}); });
return ( return (
<thead> <StyledTableHead>
<tr> <StyledTableHeadRow>
{titles} {titles}
</tr> </StyledTableHeadRow>
</thead> </StyledTableHead>
); );
}; };
TableHeader.propTypes = { TableHeader.propTypes = {
columns: React.PropTypes.object columns: React.PropTypes.array
}; };
module.exports = TableHeader; module.exports = TableHeader;

View File

@ -1,4 +1,19 @@
const React = require('react'); 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 = ({ const Row = ({
dataItem = {} dataItem = {}
@ -12,9 +27,9 @@ const Row = ({
}); });
return ( return (
<tr> <StyledRow>
{rowItems} {rowItems}
</tr> </StyledRow>
); );
}; };