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:
parent
5dd5bc9498
commit
fb579ac378
@ -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)
|
||||
|
@ -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;
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user