Merge pull request #632 from react-bootstrap-table/enhance/621

Enhance/621

docs/columns.md

@@ -379,17 +379,27 @@ A new `String` will be the result of element headerAlign.
 
 
 ## <a name='events'>column.events - [Object]</a>
-You can assign any [HTML Event](https://www.w3schools.com/tags/ref_eventattributes.asp) on table column via event property:
+You can assign any [HTML Event](https://www.w3schools.com/tags/ref_eventattributes.asp) on table column via `events` property.   
+
+`react-bootstrap-table2` currently only support following events which will receive some specific information:
+
+* onClick
+* onDoubleClick
+* onMouseEnter
+* onMouseLeave
+* onContextMenu
 
 ```js
 {
   // omit...
   events: {
-    onClick: e => { ... }
+    onClick: (e, column, columnIndex, row, rowIndex) => { ... },
   }
 }
 ```
 
+If the events is not listed above, the callback function will only pass the `event` object.
+
 ## <a name='headerEvents'>column.headerEvents - [Object]</a>
 `headerEvents` same as [`column.events`](#events) but this is for header column.
 

packages/react-bootstrap-table2-example/examples/columns/column-event-table.js

@@ -1,5 +1,6 @@
 /* eslint no-unused-vars: 0 */
 /* eslint no-alert: 0 */
+/* eslint no-console: 0 */
 import React from 'react';
 
 import BootstrapTable from 'react-bootstrap-table-next';
@@ -12,7 +13,22 @@ const columns = [{
   dataField: 'id',
   text: 'Product ID',
   events: {
-    onClick: () => alert('Click on Product ID field')
+    onClick: (e, column, columnIndex, row, rowIndex) => {
+      console.log(e);
+      console.log(column);
+      console.log(columnIndex);
+      console.log(row);
+      console.log(rowIndex);
+      alert('Click on Product ID field');
+    },
+    onMouseEnter: (e, column, columnIndex, row, rowIndex) => {
+      console.log(e);
+      console.log(column);
+      console.log(columnIndex);
+      console.log(row);
+      console.log(rowIndex);
+      console.log('onMouseEnter on Product ID field');
+    }
   }
 }, {
   dataField: 'name',
@@ -44,7 +60,7 @@ const columns = [{
 
 export default () => (
   <div>
-    <h3>Try to Click on Product ID columns</h3>
+    <h3>Try to Click or Mouse over on Product ID columns</h3>
     <BootstrapTable keyField="id" data={ products } columns={ columns } />
     <Code>{ sourceCode }</Code>
   </div>

packages/react-bootstrap-table2/src/cell-event-delegater.js

@@ -7,17 +7,16 @@ const events = [
 ];
 
 export default ExtendBase =>
-  class RowEventDelegater extends ExtendBase {
+  class CellEventDelegater extends ExtendBase {
     constructor(props) {
       super(props);
-      this.clickNum = 0;
       this.createDefaultEventHandler = this.createDefaultEventHandler.bind(this);
     }
 
     createDefaultEventHandler(cb) {
       return (e) => {
-        const { row, rowIndex } = this.props;
-        cb(e, row, rowIndex);
+        const { column, columnIndex } = this.props;
+        cb(e, column, columnIndex);
       };
     }
 

packages/react-bootstrap-table2/src/cell.js

@@ -2,9 +2,10 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
+import eventDelegater from './cell-event-delegater';
 import _ from './utils';
 
-class Cell extends Component {
+class Cell extends eventDelegater(Component) {
   constructor(props) {
     super(props);
     this.handleEditingCell = this.handleEditingCell.bind(this);
@@ -73,7 +74,7 @@ class Cell extends Component {
       formatter,
       formatExtraData
     } = column;
-    const attrs = { ...rest };
+    const attrs = this.delegate({ ...rest });
     let content = column.isDummyField ? null : _.get(row, dataField);
 
     if (formatter) {

packages/react-bootstrap-table2/src/row/row-pure-content.js

@@ -50,13 +50,21 @@ export default class RowPureContent extends React.Component {
         // render cell
         let cellTitle;
         let cellStyle = {};
-        const cellAttrs = {
+        let cellAttrs = {
           ..._.isFunction(column.attrs)
             ? column.attrs(content, row, rowIndex, index)
-            : column.attrs,
-          ...column.events
+            : column.attrs
         };
 
+        if (column.events) {
+          const events = Object.assign({}, column.events);
+          Object.keys(Object.assign({}, column.events)).forEach((key) => {
+            const originFn = events[key];
+            events[key] = (...rest) => originFn(...rest, row, rowIndex);
+          });
+          cellAttrs = { ...cellAttrs, ...events };
+        }
+
         const cellClasses = _.isFunction(column.classes)
           ? column.classes(content, row, rowIndex, index)
           : column.classes;