Merge f2681f8 into a5ab0da

README.md

@@ -143,6 +143,7 @@ The component accepts the following props:
 |**`selectableRows`**|string|'multiple'|Numbers of rows that can be selected. Options are "multiple", "single", "none".
 |**`selectableRowsOnClick`**|boolean|false|Enable/disable select toggle when row is clicked. When False, only checkbox will trigger this action.
 |**`isRowSelectable`**|function||Enable/disable selection on certain rows with custom function. Returns true if not provided.  `function(dataIndex) => bool`
+|**`maxSelectedRows`**|number|Infinity|Maximum number of rows to select.
 |**`expandableRows`**|boolean|false|Enable/disable expandable rows
 |**`expandableRowsOnClick`**|boolean|false|Enable/disable expand trigger when row is clicked. When False, only expand icon will trigger this action.
 |**`renderExpandableRow`**|function||Render expandable row. `function(rowData, rowMeta) => React Component`

examples/selectable-rows/index.js

@@ -56,6 +56,7 @@ class Example extends React.Component {
       selectableRowsOnClick: true,
       filterType: 'dropdown',
       responsive: 'stacked',
+      maxSelectedRows: 5,
       rowsPerPage: 10,
       rowsSelected: this.state.rowsSelected,
       onRowsSelect: (rowsSelected, allRows) => {

src/MUIDataTable.js

@@ -132,6 +132,7 @@ class MUIDataTable extends React.Component {
       resizableColumns: PropTypes.bool,
       selectableRows: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['none', 'single', 'multiple'])]),
       selectableRowsOnClick: PropTypes.bool,
+      maxSelectedRows: PropTypes.number,
       isRowSelectable: PropTypes.func,
       serverSide: PropTypes.bool,
       onTableChange: PropTypes.func,
@@ -263,6 +264,7 @@ class MUIDataTable extends React.Component {
       resizableColumns: false,
       selectableRows: 'multiple',
       selectableRowsOnClick: false,
+      maxSelectedRows: Infinity,
       caseSensitive: false,
       serverSide: false,
       rowHover: true,

src/components/TableBody.js

@@ -87,11 +87,14 @@ class TableBody extends React.Component {
   }
 
   isRowSelectable(dataIndex) {
-    const { options } = this.props;
-    if (options.isRowSelectable) {
-      return options.isRowSelectable(dataIndex);
+    const { options, selectedRows } = this.props;
+    const lookup = (selectedRows && selectedRows.lookup) || {};
+    if (lookup[dataIndex]) {
+      return (!options.isRowSelectable || options.isRowSelectable(dataIndex));
+    } else {
+      const numSelected = (selectedRows && selectedRows.data && selectedRows.data.length) || 0;
+      return (options.maxSelectedRows || Infinity) > numSelected && (!options.isRowSelectable || options.isRowSelectable(dataIndex));
     }
-    return true;
   }
 
   handleRowSelect = data => {

test/MUIDataTableBody.test.js

@@ -493,4 +493,32 @@ describe('<TableBody />', function() {
 
     expect(html).to.contain('Test_Text');
   });
+
+  it('should not call onRowClick when maxSelectedRows rows is reached', () => {
+    const options = { selectableRows: true, maxSelectedRows: 1 };
+    const selectedIndex = 0;
+    const selectedRows = { data: [selectedIndex], lookup: {[selectedIndex]: true }};
+
+    const mountWrapper = mount(
+      <TableBody
+        data={displayData}
+        count={displayData.length}
+        columns={columns}
+        page={0}
+        rowsPerPage={10}
+        selectedRows={selectedRows}
+        expandedRows={[]}
+        options={options}
+        searchText={''}
+        filterList={[]}
+      />,
+    );
+
+    const tableSelectCellsProps = mountWrapper.find('TableSelectCell').map(t => t.props());
+
+    tableSelectCellsProps.forEach((props, i) => {
+      assert.equal(props.checked, i === selectedIndex);
+      assert.equal(props.isRowSelectable, i === selectedIndex);
+    });
+  });
 });

webpack.config.js

@@ -3,7 +3,7 @@ const webpack = require('webpack');
 
 module.exports = {
   entry: {
-    app: "./examples/customize-filter/index.js"
+    app: "./examples/selectable-rows/index.js"
   },
   stats: "verbose",
   context: __dirname,