It's not possible to enable both selectRow and cellEdit on a table

For my particular use case, I would like users to be able to single click a row to select it, but also double-click a cell to edit it. However, if both features are enabled, only the cellEdit will work, because the component will disable the selectRow feature.

This is understandable, because it’s not easy to attach single click and double click events to the same element, and because single click handers will always catch events before double click handlers…unless we do something a little tricky…

So I made an attempt to make it work, and it’s working in my dev, however, it establishes a dependency to the underscore.js library, so it might not be good for the react-bootstrap-table project…but maybe it can inspire some thinking!

The basic idea is that TableBody acts as a master click handler, and is responsible for choosing whether a user is single or double clicking. Once that decision is made, the appropriate handlers in TableRow and TableColumn are invoked. I needed to modify 4 files to make this work:

BootstrapTable.js: comment out (or delete) the line that says (around line 41):

if (this.props.cellEdit.mode !== Const.CELL_EDIT_NONE) this.props.selectRow.clickToSelect = false;

Two new methods in TableBody.js:

rowClickMaster: {
      value: function(handler, e) {
        var evt = _.extend({}, e); // <---- THIS IS THE DEPENDENCY TO underscore.js

        if (timer) clearTimeout(timer);

        timer = setTimeout(function() { 
          handler(evt);
        }, 250);
      }
    },
onDoubleClickMaster: {
      value: function(handler, e) {
        clearTimeout(timer);
        handler(e);
      }
    },

These new methods need to passed in the props to TableRow and TableColumn, like this…

To TableRow:

rowClickMaster: this.rowClickMaster

To TableColumn:

onDoubleClickMaster: this.onDoubleClickMaster

TableRow and TableColumn need to bind onClick/onDoubleClick to the new props, like this:

TableRow.js:

return React.createElement(
            "tr",
            { style: rowStyle, onClick: this.props.rowClickMaster.bind(null, this.rowClick.bind(this)) },
            this.props.children
          );

TableColumn.js:

else if (this.props.cellEdit.mode == Const.CELL_EDIT_DBCLICK) {
            opts.onDoubleClick = this.props.onDoubleClickMaster.bind(null, this.handleCellEdit.bind(this));
          }

This is working very well for me, but I haven’t tested it deeply, so there might be side effects that I haven’t noticed yet. Hope this helps!!!

[AllenFang]

Hi @stephenrs, I’ve solved this issue, you can click on row for selection and editing on newest version. But you need change your props a little as follow:

var selectRowProp = {
  mode: "checkbox",
  clickToSelectAndEditCell: true, //use clickToSelectAndEditCell instead
};
var cellEditProp = {
   mode: "click",
   blurToSave: true
};
//....
<BootstrapTable data={productLong}
                selectRow={selectRowProp} 
                cellEdit={cellEditProp}>
//......

[stephenrs]

Yes @AllenFang that’s correct.