Checkbox memo

examples/data-as-objects/index.js

@@ -154,7 +154,7 @@ class Example extends React.Component {
     const locations = ['New York', 'El Paso', 'DC', 'Dallas', 'Santa Ana','St. Petersburg', 'London','Paris'];
     const salarys = ['$100,000', '$50,000', '$75,000', '$80,000'];
 
-    for (var ii = 0; ii < 0; ii++) {
+    for (var ii = 0; ii < 3000; ii++) {
       data.push({
         name: firstNames[ rand(firstNames.length)] + ' ' + lastNames[ rand(lastNames.length) ],
         title: titles[ rand(titles.length)],
@@ -170,7 +170,6 @@ class Example extends React.Component {
       filterType: 'dropdown',
       displayMode: 'scroll',//stacked
       tableBodyHeight: '400px',
-      serverSide: true
     };
 
     return (

examples/selectable-rows/index.js

@@ -67,7 +67,7 @@ class Example extends React.Component {
       selectableRows: 'multiple',
       selectableRowsOnClick: true,
       filterType: 'dropdown',
-      displayMode: 'stacked',
+      displayMode: 'scroll',
       rowsPerPage: 10,
       rowsSelected: this.state.rowsSelected,
       onRowSelectionChange: (affectedRows, allSelectedRows, rowsSelected) => {
@@ -104,7 +104,7 @@ class Example extends React.Component {
       },
       isRowSelectable: (dataIndex, selectedRows) => {
         //prevents selection of any additional row after the third
-        if (selectedRows.data.length > 2 && selectedRows.data.filter(d => d.dataIndex === dataIndex).length === 0) return false;
+        if (selectedRows.data.length > 7 && selectedRows.data.filter(d => d.dataIndex === dataIndex).length === 0) return false;
         //prevents selection of row with title "Attorney"
         return data[dataIndex][1] != "Attorney";
       },

src/MUIDataTable.js

@@ -623,7 +623,7 @@ class MUIDataTable extends React.Component {
         count: this.options.count,
         data: tableData,
         displayData: this.getDisplayData(columns, tableData, filterList, searchText, tableMeta),
-        previousSelectedRow: null,
+        //previousSelectedRow: null,
       },
       callback,
     );

src/components/TableBody.js

@@ -119,7 +119,7 @@ class TableBody extends React.Component {
     // If the user is pressing shift and has previously clicked another row.
     if (shiftKey && previousSelectedRow && previousSelectedRow.index < this.props.data.length) {
       let curIndex = previousSelectedRow.index;
-
+      
       // Create a copy of the selectedRows object. This will be used and modified
       // below when we see if we can add adjacent rows.
       let selectedRows = cloneDeep(this.props.selectedRows);
@@ -218,6 +218,17 @@ class TableBody extends React.Component {
               return options.customRowRender(row, dataIndex, rowIndex);
             }
 
+/*
+                    onChange={this.handleRowSelect.bind(null, {
+                      index: this.getRowIndex(rowIndex),
+                      dataIndex: dataIndex,
+                    })}
+                    onExpand={toggleExpandRow.bind(null, {
+                      index: this.getRowIndex(rowIndex),
+                      dataIndex: dataIndex,
+                    })}
+*/
+
             return (
               <React.Fragment key={rowIndex}>
                 <TableBodyRow
@@ -228,14 +239,11 @@ class TableBody extends React.Component {
                   data-testid={'MUIDataTableBodyRow-' + dataIndex}
                   id={'MUIDataTableBodyRow-' + dataIndex}>
                   <TableSelectCell
-                    onChange={this.handleRowSelect.bind(null, {
-                      index: this.getRowIndex(rowIndex),
-                      dataIndex: dataIndex,
-                    })}
-                    onExpand={toggleExpandRow.bind(null, {
-                      index: this.getRowIndex(rowIndex),
-                      dataIndex: dataIndex,
-                    })}
+                    handleRowSelect={this.handleRowSelect}
+                    toggleExpandRow={toggleExpandRow}
+                    dataIndex={dataIndex}
+                    rowIndex={this.getRowIndex(rowIndex)}
+
                     fixedHeader={options.fixedHeader}
                     checkboxColor={options.checkboxColor}
                     checked={this.isRowSelected(dataIndex)}

src/components/TableHead.js

@@ -56,7 +56,7 @@ class TableHead extends React.Component {
         }
       }
     }
-
+//onChange={this.handleRowSelect.bind(null)}
     return (
       <MuiTableHead
         className={classNames({ 
@@ -72,12 +72,15 @@ class TableHead extends React.Component {
             expandedRows={this.props.expandedRows}
             expandableRowsHeader={options.expandableRowsHeader}
             areAllRowsExpanded={this.props.areAllRowsExpanded}
-            onExpand={this.props.toggleAllExpandableRows}
+
             fixedHeader={options.fixedHeader}
             isHeaderCell={true}
             isRowSelectable={true}
             indeterminate={isDeterminate}
-            onChange={this.handleRowSelect.bind(null)}
+
+            handleRowSelect={this.handleRowSelect}
+            toggleExpandRow={this.props.toggleAllExpandableRows}
+
             selectableOn={options.selectableRows}
             selectableRowsHeader={options.selectableRowsHeader}
             setCellRef={setCellRef} />

src/components/TableSelectCell.js

@@ -55,13 +55,17 @@ function TableSelectCell(props) {
     isHeaderCell = false,
     isRowExpanded = false,
     isRowSelectable,
-    onExpand,
     selectableOn = 'none',
     selectableRowsHeader,
     setCellRef,
     expandableRowsHeader,
     expandedRows,
     areAllRowsExpanded = () => (false),
+    onChange,
+    handleRowSelect,
+    toggleExpandRow,
+    dataIndex,
+    rowIndex,
     ...otherProps
   } = props;
 
@@ -84,6 +88,20 @@ function TableSelectCell(props) {
     [classes.hide]: isHeaderCell && !expandableRowsHeader,
   });
 
+  const checkboxChange = (event) => {
+    handleRowSelect({
+      index: props.rowIndex,
+      dataIndex: props.dataIndex,
+    }, event);
+  };
+
+  const onExpand = () => {
+    toggleExpandRow({
+      index: props.rowIndex,
+      dataIndex: props.dataIndex,
+    });
+  };
+
   const renderCheckBox = () => {
     if (isHeaderCell && (selectableOn !== 'multiple' || selectableRowsHeader === false)) {
       // only display the header checkbox for multiple selection.
@@ -98,6 +116,7 @@ function TableSelectCell(props) {
         }}
         color={checkboxColor}
         disabled={!isRowSelectable}
+        onChange={checkboxChange}
         {...otherProps}
       />
     );
@@ -133,12 +152,10 @@ TableSelectCell.propTypes = {
   expandableOn: PropTypes.bool,
   /** Select cell part of fixed header */
   fixedHeader: PropTypes.bool.isRequired,
-  /** Callback to trigger cell update */
-  onChange: PropTypes.func,
   /** Is selectable option enabled */
   selectableOn: PropTypes.string,
   /** If there should be a select-all checkbox */
   selectableRowsHeader: PropTypes.bool,
 };
 
-export default TableSelectCell;
+export default React.memo(TableSelectCell);

test/MUIDataTableBody.test.js

@@ -560,7 +560,7 @@ describe('<TableBody />', function() {
     );
 
     mountWrapper
-      .find('TableSelectCell')
+      .find('Memo(TableSelectCell)')
       .first()
       .find('input')
       .simulate('click');
@@ -591,8 +591,9 @@ describe('<TableBody />', function() {
     );
 
     mountWrapper
-      .find('TableSelectCell')
+      .find('Memo(TableSelectCell)')
       .first()
+      .find('td')
       .simulate('click');
 
     assert.strictEqual(options.onRowClick.callCount, 0);