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;