application/components/container/container-table.js

import React from 'react';
import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn} from 'material-ui/Table';
import Divider from 'material-ui/Divider';
import Paper from 'material-ui/Paper';

import {Link} from 'react-router';
import {timeToFormat} from './../../util/strings';
import {Row, Col} from './../flexbox';

class ContainerTable extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <Paper className='padded clear-top'>
                <Row className='grid-header'>
                    <Col xs={6}>
                        Title
                    </Col>
                    <Col xs={2}>
                        Type
                    </Col>
                    <Col xs={2}>
                        Created
                    </Col>
                    <Col xs={2}>
                        Modified
                    </Col>
                </Row>
                {this.props.containers.valueSeq().map((container, i) => <ContainerRow container={container} key={i} />)}
            </Paper>
        );
    }
}

class ContainerRow extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        const title = this.props.container.get('title') ? this.props.container.get('title') : <span className='invalid'>No title</span>;
        const slug = this.props.container.get('slug') ? this.props.container.get('slug') : <span className='invalid'>No slug</span>;

        return (
            <Row className='grid-row'>
                <Col xs={12} className='clear-bottom'>
                    <Divider />
                </Col>
                <Col xs={6}>
                    <Link to={'/ceo/container/' + this.props.container.get('uuid')} className="truncate">{title}</Link><br />
                    <small className='quiet'><Link to={'/ceo/container/' + this.props.container.get('uuid')} className="truncate">{slug}</Link></small>
                </Col>
                <Col xs={2}>
                    {this.props.container.get('type')}
                </Col>
                <Col xs={2}>
                    {timeToFormat(this.props.container.get('modified_at'))}
                </Col>
                <Col xs={2}>
                    {timeToFormat(this.props.container.get('created_at'))}
                </Col>
            </Row>
        );
    }
}

export default ContainerTable;