Use list instead of table for module table
import React, { PropTypes } from 'react';

import ActionDelete from 'material-ui/svg-icons/action/delete';
import IconButton from 'material-ui/IconButton';
import { List, ListItem } from 'material-ui/List';
import { red700 } from 'material-ui/styles/colors';

const ModuleTable = ({
  modules,
  removeModule,
}) => (
  <List>
    {modules.map(module =>
      <ListItem
        rightIconButton={
          <IconButton
            onTouchTap={() => removeModule(module.ModuleCode)}
            touch={true}
            tooltip="Remove module"
            tooltipPosition="bottom-left"
          >
            <ActionDelete color={red700} />
          </IconButton>
        }
        primaryText={module.ModuleCode}
        secondaryText={module.ModuleTitle}
      />
    )}
  </List>
);

ModuleTable.propTypes = {
  modules: PropTypes.array.isRequired,
  removeModule: PropTypes.func.isRequired,
};

export default ModuleTable;

import React, { PropTypes } from 'react';
import { Table, TableBody, TableRow, TableRowColumn } from 'material-ui/Table';

const ModuleTable = ({
  modules,
  removeModule,
}) => (
  <Table
    selectable={false}
    style={{ tableLayout: 'auto' }}
  >
    <TableBody
      displayRowCheckbox={false}
    >
      {modules.map(module =>
        <TableRow key={module.ModuleCode}>
          <TableRowColumn>{module.ModuleCode}</TableRowColumn>
          <TableRowColumn>{module.ModuleTitle}</TableRowColumn>
          <TableRowColumn>
            <button
              className="btn btn-sm btn-danger"
              onClick={() => removeModule(module.ModuleCode)}
            >
              Remove
            </button>
          </TableRowColumn>
        </TableRow>
      )}
    </TableBody>
  </Table>
);

ModuleTable.propTypes = {
  modules: PropTypes.array.isRequired,
  removeModule: PropTypes.func.isRequired,
};

export default ModuleTable;
