workspaces-table.js

import React from "react";
import Table from "material-ui";

// import Router from "react-router";
// let Link = Router.Link;

let WorkspacesTable = React.createClass({
  mixins: [],

  propTypes: {
    rowData: React.PropTypes.array
  },

  getInitialState() {
    return {
      fixedHeader: true,
      fixedFooter: true,
      stripedRows: false,
      showRowHover: true,
      selectable: true,
      multiSelectable: true,
      canSelectAll: true,
      deselectOnClickaway: true,
      height: '300px',
      rowData: this.props.rowData
    };
  },

  render() {
    let colOrder = [ 'id', 'name', 'hosts', 'sessions', 'owner', 'updated', 'description' ];

    // Column configuration
    let headerCols = {
      id: {
        content: 'ID',
        tooltip: 'The ID'
      },
      name: {
        content: 'Name',
        tooltip: 'The Name'
      },
      hosts: {
        content: 'Hosts',
        tooltip: 'The Hosts'
      },
      sessions: {
        content: 'Sessions',
        tooltip: 'The Sessions'
      },
      owner: {
        content: 'Owner',
        tooltip: 'The Owner'
      },
      updated: {
        content: 'Updated',
        tooltip: 'The Updated'
      },
      description: {
        content: 'Description',
        tooltip: 'The Description'
      }
    };

    return (
      <Table
        headerColumns={headerCols}
        columnOrder={colOrder}
        rowData={this.state.rowData}
        height={this.state.height}
        fixedHeader={this.state.fixedHeader}
        fixedFooter={this.state.fixedFooter}
        stripedRows={this.state.stripedRows}
        showRowHover={this.state.showRowHover}
        selectable={this.state.selectable}
        multiSelectable={this.state.multiSelectable}
        canSelectAll={this.state.canSelectAll}
        deselectOnClickaway={this.state.deselectOnClickaway}
        onRowSelection={this._onRowSelection} />
    )
  },

  _onRowSelection() {
    return (
      console.log("_onRowSelection")
    );
  }

});

module.exports = WorkspacesTable;

workspaces.js

import React from "react";
// import Router from "react-router";
import { Mixins, Styles } from "material-ui";
// import WorkspacesFeature from "./components/workspaces-feature";
import WorkspacesTable from "./components/workspaces-table";
import FullWidthSection from "../full-width-section";

let { StylePropable, StyleResizable } = Mixins;
let { Colors, Spacing, Typography } = Styles;
// let ThemeManager = new Styles.ThemeManager().getCurrentTheme();

let HomePage = React.createClass({
  mixins: [StylePropable, StyleResizable],

  contextTypes: {
    router: React.PropTypes.func
  },

  render() {
    let style = {
      paddingTop: Spacing.desktopKeylineIncrement
    };

    return (
      <div style={style}>
        <h1>Project Listing</h1>
        {this._getWorkspacesPurpose()}
      </div>
    );
  },

  _getWorkspacesPurpose() {
    let styles = {
      root: {
        backgroundColor: Colors.grey200
      },
      content: {
        maxWidth: '700px',
        padding: 0,
        margin: '0 auto',
        fontWeight: Typography.fontWeightLight,
        fontSize: '20px',
        lineHeight: '28px',
        paddingTop: '19px',
        marginBottom: '13px',
        letterSpacing: '0',
        color: Typography.textDarkBlack
      }
    };

    let rowData = [
      {
        id: {content: '1'},
        name: {content: 'default'},
        hosts: {content: '31'},
        sessions: {content: '0'},
        owner: {content: 'system'},
        updated: {content: 'about 1 month ago'},
        description: {content: ''}
      },
      {
        id: {content: '2'},
        name: {content: 'tst3'},
        hosts: {content: '39'},
        sessions: {content: '2'},
        owner: {content: 'tester1'},
        updated: {content: 'about 1 month ago'},
        description: {content: ''}
      }
    ];

    return (
      <WorkspacesTable rowData={rowData} />
    );
  }
});

module.exports = HomePage;