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 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 (
<thead>
<tr>
<StyledTableHead>
<StyledTableHeadRow>
{titles}
</tr>
</thead>
</StyledTableHeadRow>
</StyledTableHead>
);
};
TableHeader.propTypes = {
columns: React.PropTypes.object
columns: React.PropTypes.array
};
module.exports = TableHeader;

View File

@ -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 (
<tr>
<StyledRow>
{rowItems}
</tr>
</StyledRow>
);
};