Add selectable property to table. Fixes #145

components/table/head.jsx

@@ -2,13 +2,13 @@ import React from 'react';
 import Checkbox from '../checkbox';
 import style from './style';
 
-const TableHead = ({model, onSelect, selected}) => {
+const TableHead = ({model, onSelect, selectable, selected}) => {
   let selectCell;
   const contentCells = Object.keys(model).map((key) => {
     return <th key={key}>{key}</th>;
   });
 
-  if (onSelect) {
+  if (selectable) {
     selectCell = (
       <th key='select' className={style.selectable}>
         <Checkbox onChange={onSelect} checked={selected} />

components/table/index.jsx

@@ -10,6 +10,7 @@ class Table extends React.Component {
     model: React.PropTypes.object,
     onChange: React.PropTypes.func,
     onSelect: React.PropTypes.func,
+    selectable: React.PropTypes.bool,
     selected: React.PropTypes.array,
     source: React.PropTypes.array
   };
@@ -17,6 +18,7 @@ class Table extends React.Component {
   static defaultProps = {
     className: '',
     heading: true,
+    selectable: true,
     selected: [],
     source: []
   };
@@ -46,9 +48,16 @@ class Table extends React.Component {
 
   renderHead () {
     if (this.props.heading) {
-      const {model, selected, source} = this.props;
+      const {model, selected, source, selectable} = this.props;
       const isSelected = selected.length === source.length;
-      return <TableHead model={model} onSelect={this.handleFullSelect} selected={isSelected} />;
+      return (
+        <TableHead
+          model={model}
+          onSelect={this.handleFullSelect}
+          selectable={selectable}
+          selected={isSelected}
+        />
+      );
     }
   }
 
@@ -60,8 +69,9 @@ class Table extends React.Component {
           index={idx}
           key={idx}
           model={this.props.model}
-          onChange={this.props.onChange ? this.handleRowChange.bind(this, idx) : null}
+          onChange={this.handleRowChange.bind(this, idx)}
           onSelect={this.handleRowSelect.bind(this, idx)}
+          selectable={this.props.selectable}
           selected={this.props.selected.indexOf(idx) !== -1}
         />
       );

components/table/readme.md

@@ -39,6 +39,7 @@ class TableTest extends React.Component {
         model={UserModel}
         onChange={this.handleChange}
         onSelect={this.handleSelect}
+        selectable={true}
         selected={this.state.selected}
         source={this.state.source}
       />
@@ -56,5 +57,6 @@ 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`    | `Bool`       | `true`           | If true, the header and each row will display a checkbox to allow the user to select them.|
 | `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.|

components/table/row.jsx

@@ -8,6 +8,7 @@ class TableRow extends React.Component {
     data: React.PropTypes.object,
     onChange: React.PropTypes.func,
     onSelect: React.PropTypes.func,
+    selectable: React.PropTypes.bool,
     selected: React.PropTypes.bool
   };
 
@@ -17,7 +18,7 @@ class TableRow extends React.Component {
   };
 
   renderSelectCell () {
-    if (this.props.onSelect) {
+    if (this.props.selectable) {
       return (
         <td className={style.selectable}>
           <Checkbox checked={this.props.selected} onChange={this.props.onSelect} />

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

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

spec/components/table.jsx

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