1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-10 21:30:06 +02:00

adding table head to new table

This commit is contained in:
Alex Windett 2017-01-20 11:51:49 +00:00
parent 5dd5bc9498
commit fb579ac378
3 changed files with 43 additions and 12 deletions

View File

@ -42,6 +42,11 @@ const data = [{
status: 'Active',
role: 'Owner',
key: 1
}, {
name: 'Alex',
status: 'Inactive',
role: 'Read Only',
key: 2
}];
storiesOf('Table New', module)

View File

@ -2,16 +2,16 @@
// const composers = require('../../shared/composers');
const React = require('react');
// const Styled = require('styled-components');
const Styled = require('styled-components');
// const {
// remcalc
// } = fns;
// const {
// default: styled,
// css
// } = Styled;
const {
default: styled,
// css
} = Styled;
// const {
// clearfix
@ -36,17 +36,39 @@ const React = require('react');
// }
// `;
const TableHeader = (columns) => {
const StyledTableHeadItem = styled.td`
${props => `width: ${props.width}`}
`;
const TableHeader = ({
columns
}) => {
const fallBackWidth = `${100 / parseInt(columns.length)}%`;
const titles = columns.map( (column, i) => {
columns.map( (column, i) => {
return (
<td key={i}>{column.title}</td>
<StyledTableHeadItem
key={i}
width={column.width || fallBackWidth}
>
{column.title}
</StyledTableHeadItem>
);
});
return (
<thead />
<thead>
<tr>
{titles}
</tr>
</thead>
);
};
TableHeader.propTypes = {
columns: React.PropTypes.object
};
module.exports = TableHeader;

View File

@ -20,19 +20,23 @@ const StyledTitle = styled.h3`
text-align: center
`;
const StyledTable = styled.table`
width: 100%;
`;
const TableContent = ({
columns,
data,
hasHeader = false,
hasHeader = columns.length >= 1,
hasBody = data.length >= 1,
width = '100%'
}) => {
return (
<table>
<StyledTable>
{hasHeader ? <TableHeader columns={columns} /> : null}
{hasBody ? <TableBody columns={columns} data={data} /> : null}
</table>
</StyledTable>
);
};