mirror of
https://github.com/yldio/copilot.git
synced 2024-11-11 05:40:11 +02:00
starting to style data table
This commit is contained in:
parent
18b724390a
commit
a315a9cff2
@ -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;
|
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user