application/components/tag/tag-table.js

import React from 'react';
import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn} from 'material-ui/Table';
import {Link} from 'react-router';
import {timeToFormat, parameterize} from './../../util/strings';

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

        this.state = {
            selected: []
        };
    }

    handleRowSelection(selection) {
        this.setState({'selected': selection});
        this.props.onRowSelection(selection);
    }

    renderLinkTo(tag, label) {
        return (
            <Link to={'/ceo/settings/tag/' + tag.get('uuid')} className="truncate">
                {label}
            </Link>
        );
    }

    render() {
        if (!this.props.tags.items.size) {
            return <div>No tags!</div>;
        }

        return (
            <Table
                fixedHeader={true}
                selectable={true}
                multiSelectable={true}
                onRowSelection={this.handleRowSelection.bind(this)}
                >
                <TableHeader>
                    <TableRow>
                        <TableHeaderColumn>Name</TableHeaderColumn>
                        <TableHeaderColumn>Slug</TableHeaderColumn>
                    </TableRow>
                </TableHeader>
                <TableBody
                    deselectOnClickaway={false}
                    >
                    {this.props.tags.items.map((tag, i) => {
                        return (
                            <TableRow key={i} selected={this.state.selected == 'all' || this.state.selected.indexOf(i) != -1 ? true : false}>
                                <TableRowColumn>{this.renderLinkTo(tag, tag.get('name'))}</TableRowColumn>
                                <TableRowColumn>{this.renderLinkTo(tag, tag.get('slug') ? tag.get('slug') : (<span className="invalid">No slug</span>))}</TableRowColumn>
                            </TableRow>
                        );
                    })}
                </TableBody>
            </Table>
        );
    }
}

export default TagTable;