added ability to select only one row at the time

components/table/Table.js

@@ -11,6 +11,7 @@ class Table extends React.Component {
     onChange: React.PropTypes.func,
     onSelect: React.PropTypes.func,
     selectable: React.PropTypes.bool,
+    multiSelectable: React.PropTypes.bool,
     selected: React.PropTypes.array,
     source: React.PropTypes.array
   };
@@ -19,6 +20,7 @@ class Table extends React.Component {
     className: '',
     heading: true,
     selectable: true,
+    multiSelectable: true,
     selected: [],
     source: []
   };
@@ -34,8 +36,16 @@ class Table extends React.Component {
   handleRowSelect = (index) => {
     if (this.props.onSelect) {
       const position = this.props.selected.indexOf(index);
-      const newSelected = [...this.props.selected];
-      if (position !== -1) newSelected.splice(position, 1); else newSelected.push(index);
+      let newSelected = [...this.props.selected];
+
+      if (position !== -1) {
+        newSelected.splice(position, 1);
+      }
+      else if (this.props.multiSelectable) {
+        newSelected.push(index);
+      } else {
+        newSelected = [index];
+      }
       this.props.onSelect(newSelected);
     }
   };
@@ -46,22 +56,23 @@ class Table extends React.Component {
     }
   };
 
-  renderHead () {
+  renderHead() {
     if (this.props.heading) {
-      const {model, selected, source, selectable} = this.props;
+      const {model, selected, source, selectable, multiSelectable} = this.props;
       const isSelected = selected.length === source.length;
       return (
         <TableHead
           model={model}
           onSelect={this.handleFullSelect}
           selectable={selectable}
+          multiSelectable={multiSelectable}
           selected={isSelected}
         />
       );
     }
   }
 
-  renderBody () {
+  renderBody() {
     const rows = this.props.source.map((data, index) => {
       return (
         <TableRow
@@ -80,7 +91,7 @@ class Table extends React.Component {
     return <tbody>{rows}</tbody>;
   }
 
-  render () {
+  render() {
     let className = style.root;
     if (this.props.className) className += ` ${this.props.className}`;
     return (

components/table/TableHead.js

@@ -2,24 +2,27 @@ import React from 'react';
 import Checkbox from '../checkbox';
 import style from './style';
 
-const TableHead = ({model, onSelect, selectable, selected}) => {
+const TableHead = ({model, onSelect, selectable, multiSelectable, selected}) => {
   let selectCell;
   const contentCells = Object.keys(model).map((key) => {
     const name = model[key].title || key;
     return <th key={key}>{name}</th>;
   });
 
-  if (selectable) {
+  if (selectable && multiSelectable) {
     selectCell = (
       <th key='select' className={style.selectable}>
-        <Checkbox onChange={onSelect} checked={selected} />
+        <Checkbox onChange={onSelect} checked={selected}/>
       </th>
     );
+  } else if (selectable) {
+    selectCell = (
+      <th key='select' className={style.selectable}></th>
+    );
   }
-
   return (
     <thead>
-      <tr>{[selectCell, ...contentCells]}</tr>
+    <tr>{[selectCell, ...contentCells]}</tr>
     </thead>
   );
 };
@@ -29,6 +32,7 @@ TableHead.propTypes = {
   model: React.PropTypes.object,
   onSelect: React.PropTypes.func,
   selectable: React.PropTypes.bool,
+  multiSelectable: React.PropTypes.bool,
   selected: React.PropTypes.bool
 };
 

components/table/readme.md

@@ -40,6 +40,7 @@ class TableTest extends React.Component {
         onChange={this.handleChange}
         onSelect={this.handleSelect}
         selectable
+        multiSelectable
         selected={this.state.selected}
         source={this.state.source}
       />
@@ -57,6 +58,7 @@ class TableTest extends React.Component {
 | `model`           | `Object`        |                 | Object describing the data model that represents each object in the `source`.|
 | `onChange`        | `Function`      |                 | Callback function that is fired when an item in a row changes. If set, rows are editable. |
 | `onSelect`        | `Function`      |                 | Callback function invoked when the row selection changes.|
-| `selectable`      | `Boolean`       | `true`          | If true, the header and each row will display a checkbox to allow the user to select them.|
+| `selectable`      | `Boolean`       | `true`          | If true, each row will display a checkbox to allow the user to select that one row.|
+| `multiSelectable` | `Boolean`       | `true`          | If true, the header and each row will display a checkbox to allow the user to select multiple rows.|
 | `selected`        | `Array`         |                 | Array of indexes of the items in the source that should appear as selected.|
 | `source`          | `Array`         |                 | Array of objects representing each item to show.|

docs/app/components/layout/main/modules/examples/table_example_1.txt

@@ -32,6 +32,7 @@ class TableTest extends React.Component {
         onChange={this.handleChange}
         onSelect={this.handleSelect}
         selectable
+        multiSelectable
         selected={this.state.selected}
         source={this.state.source}
       />