react-bootstrap-table/react-bootstrap-table2
View on GitHubDetect row onClick event and checkbox onSelect event separately
Open
#367 opened on Jun 4, 2018
help wanted
Description
Currently I am using both selectRow and rowEvents . My problem is when I select checkbox, row onClick event firing automatically . Is there any way to detect checkbox event without firing any row onclick event ? I am using 0.1.12 .
Here is my component :
constructor(prop) {
super(prop);
this.columns = [{
dataField: 'mail_from',
text: 'From'
}, {
dataField: 'subject',
text: 'Subject'
}, {
dataField: "date",
text: "Date"
}];
this.state = {
loading: true,
loadingText: "Downloading mails..",
data: "",
details: false,
id: 0,
page: 1,
sizePerPage: 0,
totalSize: 0
}
this.rowEvent = {
onClick: (e, row, rowIndex) => {
this.setState({details: true, id:rowIndex});
}
};
this.onTableChange = (type, { page, sizePerPage }) => {
this.setState({loading: true});
this.setState({loadingText: "Downloading mails.."});
this.setState({page: page});
this.loadData(page);
};
this.selectRow = {
mode: 'checkbox',
onSelect: (row, isSelect, rowIndex, e) => {
console.log(isSelect, rowIndex, e);
}
}
}
and
<BootstrapTable
remote
striped
hover
condensed
bordered={false}
pagination={ paginationFactory({
page: this.state.page,
sizePerPage: this.state.sizePerPage,
totalSize: this.state.totalSize,
hideSizePerPage: true,
hidePageListOnlyOnePage: true,
}) }
keyField='id'
data={this.state.data}
columns={this.columns}
selectRow={ this.selectRow }
rowEvents={this.rowEvent}
noDataIndication="Mailbox is empty"
onTableChange={ this.onTableChange }
/>