react-bootstrap-table/react-bootstrap-table2

Detect row onClick event and checkbox onSelect event separately

Open

#367 opened on Jun 4, 2018

View on GitHub
 (6 comments) (2 reactions) (0 assignees)JavaScript (1,249 stars) (415 forks)batch import
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 }
                        />

Contributor guide