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 (415 forks)batch import
help wanted

Repository metrics

Stars
 (1,249 stars)
PR merge metrics
 (No merged PRs in 30d)

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