Added disableToolbarSelect option (gregnb#874)

* Added disableToolbarSelect option

* Undo formatting adjustments

* Added explicit default value

* changed const to let for isDeselect

* Add test for disableToolbarSelect

* Rename variable for clarity

README.md

@@ -143,6 +143,7 @@ The component accepts the following props:
 |**`pagination`**|boolean|true|Enable/disable pagination
 |**`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.
+|**`disableToolbarSelect`**|boolean|false|Enable/disable the Select Toolbar that appears when a row is selected.
 |**`isRowSelectable`**|function||Enable/disable selection on certain rows with custom function. Returns true if not provided. `function(dataIndex: number, selectedRows: object(lookup: {dataindex: boolean}, data: arrayOfObjects: {index, dataIndex})) => boolean`.
 |**`isRowExpandable`**|function||Enable/disable expansion or collapse on certain expandable rows with custom function. Will be considered true if not provided. `function(dataIndex: number, expandedRows: object(lookup: {dataIndex: number}, data: arrayOfObjects: {index: number, dataIndex: number})) => boolean`.
 |**`selectableRowsHeader`**|boolean|true|Show/hide the select all/deselect all checkbox header for selectable rows

src/MUIDataTable.js

@@ -148,6 +148,7 @@ class MUIDataTable extends React.Component {
       selectableRows: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['none', 'single', 'multiple'])]),
       selectableRowsOnClick: PropTypes.bool,
       isRowSelectable: PropTypes.func,
+      disableToolbarSelect: PropTypes.bool,
       isRowExpandable: PropTypes.func,
       selectableRowsHeader: PropTypes.bool,
       serverSide: PropTypes.bool,
@@ -292,6 +293,7 @@ class MUIDataTable extends React.Component {
     selectableRowsOnClick: false,
     selectableRowsHeader: true,
     caseSensitive: false,
+    disableToolbarSelect: false,
     serverSide: false,
     rowHover: true,
     fixedHeader: true,
@@ -1120,18 +1122,31 @@ class MUIDataTable extends React.Component {
         prevState => {
           const { displayData, selectedRows: prevSelectedRows } = prevState;
           const selectedRowsLen = prevState.selectedRows.data.length;
-          const isDeselect =
+          let isDeselect =
             selectedRowsLen === displayData.length || (selectedRowsLen < displayData.length && selectedRowsLen > 0);
 
           let selectedRows = displayData.reduce((arr, d, i) => {
             const selected = isRowSelectable ? isRowSelectable(displayData[i].dataIndex, prevSelectedRows) : true;
             selected && arr.push({ index: i, dataIndex: displayData[i].dataIndex });
             return arr;
-          }, []);
+           }, []);
 
           let newRows = [...prevState.selectedRows, ...selectedRows];
           let selectedMap = buildMap(newRows);
 
+          // if the select toolbar is disabled, the rules are a little different
+          if (this.options.disableToolbarSelect === true) {
+            if (selectedRowsLen > displayData.length) {
+               isDeselect = true;
+             } else {
+              for (let ii = 0; ii < displayData.length; ii++) {
+                if (!selectedMap[displayData[ii].dataIndex]) {
+                   isDeselect = true;
+                 }
+               }
+             }
+           }
+
           if (isDeselect) {
             newRows = prevState.selectedRows.data.filter(({ dataIndex }) => !selectedMap[dataIndex]);
             selectedMap = buildMap(newRows);
@@ -1311,7 +1326,7 @@ class MUIDataTable extends React.Component {
         elevation={this.options.elevation}
         ref={this.tableContent}
         className={classnames(classes.paper, className)}>
-        {selectedRows.data.length ? (
+        {(selectedRows.data.length && this.options.disableToolbarSelect !== true) ? (
           <TableToolbarSelect
             options={this.options}
             selectedRows={selectedRows}

src/components/TableHead.js

@@ -33,8 +33,27 @@ class TableHead extends React.Component {
     const { classes, columns, count, options, data, setCellRef, selectedRows } = this.props;
 
     const numSelected = (selectedRows && selectedRows.data.length) || 0;
-    const isDeterminate = numSelected > 0 && numSelected < count;
-    const isChecked = numSelected === count ? true : false;
+    let isIndeterminate = numSelected > 0 && numSelected < count;
+    let isChecked = numSelected === count ? true : false;
+
+    // When the disableToolbarSelect option is true, there can be
+    // selected items that aren't visible, so we need to be more
+    // precise when determining if the head checkbox should be checked.
+    if (options.disableToolbarSelect === true) {
+      if (isChecked) {
+        for (let ii = 0; ii < data.length; ii++) {
+          if (!selectedRows.lookup[data[ii].dataIndex]) {
+             isChecked = false;
+             isIndeterminate = true;
+            break;
+          }
+        }
+      } else {
+        if (numSelected > count) {
+           isIndeterminate = true;
+        }
+      }
+    }
 
     return (
       <MuiTableHead
@@ -43,7 +62,7 @@ class TableHead extends React.Component {
           <TableSelectCell
             ref={el => setCellRef(0, findDOMNode(el))}
             onChange={this.handleRowSelect.bind(null)}
-            indeterminate={isDeterminate}
+            indeterminate={isIndeterminate}
             checked={isChecked}
             isHeaderCell={true}
             expandableOn={options.expandableRows}

test/MUIDataTable.test.js

@@ -7,6 +7,7 @@ import MUIDataTable from '../src/MUIDataTable';
 import TableFilterList from '../src/components/TableFilterList';
 import TablePagination from '../src/components/TablePagination';
 import TableToolbar from '../src/components/TableToolbar';
+import TableToolbarSelect from '../src/components/TableToolbarSelect';
 import textLabels from '../src/textLabels';
 import Chip from '@material-ui/core/Chip';
 import Cities from '../examples/component/cities';
@@ -540,6 +541,18 @@ describe('<MUIDataTable />', function() {
     assert.lengthOf(actualResult, 0);
   });
 
+  it('should not render select toolbar when disableToolbarSelect=true', () => {
+    const options = { disableToolbarSelect: true };
+    const shallowWrapper = shallow(<MUIDataTable columns={columns} data={data} options={options} />).dive();
+    const instance = shallowWrapper.instance();
+
+    // Simulate a selection
+    instance.selectRowUpdate('cell', { index: 0, dataIndex: 0 });
+
+    const actualResult = shallowWrapper.find(TableToolbarSelect);
+    assert.lengthOf(actualResult, 0);
+  });
+
   it('should properly set internal filterList when calling filterUpdate method with type=checkbox', () => {
     const shallowWrapper = shallow(<MUIDataTable columns={columns} data={data} />);
     const table = shallowWrapper.dive();