diff --git a/docs/columns.md b/docs/columns.md
index 5bb23a6..aeafc5b 100644
--- a/docs/columns.md
+++ b/docs/columns.md
@@ -379,17 +379,27 @@ A new `String` will be the result of element headerAlign.
## column.events - [Object]
-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.
+
## column.headerEvents - [Object]
`headerEvents` same as [`column.events`](#events) but this is for header column.
diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-event-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-event-table.js
index 32f0d69..f56e6c8 100644
--- a/packages/react-bootstrap-table2-example/examples/columns/column-event-table.js
+++ b/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 () => (
-
Try to Click on Product ID columns
+ Try to Click or Mouse over on Product ID columns
{ sourceCode }
diff --git a/packages/react-bootstrap-table2/src/row-event-delegater.js b/packages/react-bootstrap-table2/src/cell-event-delegater.js
similarity index 80%
rename from packages/react-bootstrap-table2/src/row-event-delegater.js
rename to packages/react-bootstrap-table2/src/cell-event-delegater.js
index 4727134..41e0f71 100644
--- a/packages/react-bootstrap-table2/src/row-event-delegater.js
+++ b/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);
};
}
diff --git a/packages/react-bootstrap-table2/src/cell.js b/packages/react-bootstrap-table2/src/cell.js
index 70b2633..46b10ea 100644
--- a/packages/react-bootstrap-table2/src/cell.js
+++ b/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) {
diff --git a/packages/react-bootstrap-table2/src/row/row-pure-content.js b/packages/react-bootstrap-table2/src/row/row-pure-content.js
index 5b498ff..95ab857 100644
--- a/packages/react-bootstrap-table2/src/row/row-pure-content.js
+++ b/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;