Single selectRow selects all rows

[stebogit]

HI @AllenFang, I encountered this strange behaviour, that is in only one of the three almost identical tables I have when clicking a row/checkbox all the rows get selected/unselected! Even if it doesn't make a lot of sense to me, after a lot of debugging the problem seems to be the data I pass to the table. Do you see anything wrong in my code?

For brevity I post only two of the table, MapIndexTable being the one with the problem:

var mapsIndex = [{
    "Location": "Oregon",
    "Insect": "Green Peach Aphid",
    "Year": "2016",
    "Week": "06",
    "DataType": "Grid",
    "MapTableName": "Grid_GPA_OR_2016_w06_t"
  }, {
    "Location": "Washington",
    "Insect": "Beat Leafhopper",
    "Year": "2016",
    "Week": "10",
    "DataType": "Grid",
    "MapTableName": "Grid_BLH_WA_2016_w10_t"
  }, {
    "Location": "Washington",
    "Insect": "Potato Tuberworm",
    "Year": "2016",
    "Week": "10",
    "DataType": "Grid",
    "MapTableName": "Grid_PTW_WA_2016_w10_t"
}];

var MapIndexTable = React.createClass({
    render: function () {
        var selectRowProp = {
            mode: "checkbox",
            clickToSelect: true
        };

        var options = {
            sortName: 'ID',
            sortOrder: 'asc',
            noDataText: '--',
            exportCSVText: ' Export',
            handleConfirmDeleteRow: function (next, rowKeys) {
                console.log(rowKeys);
                next();
            }
        };

        return (
            <BootstrapTable ref="mapsTableRef"
                            data={this.props.data}
                            insertRow={true}
                            striped={true}
                            hover={true}
                            deleteRow={true}
                            selectRow={selectRowProp}
                            exportCSV={true}
                            csvFileName={'maps.csv'}
                            options={options}>
                <TableHeaderColumn dataField="ID"
                                   isKey={true}
                                   autoValue={true}
                                   hidden={true}>ID</TableHeaderColumn>
                <TableHeaderColumn dataField="Location">Location</TableHeaderColumn>
                <TableHeaderColumn dataField="Insect">Insect</TableHeaderColumn>
                <TableHeaderColumn dataField="Year">Year</TableHeaderColumn>
                <TableHeaderColumn dataField="Week">Week</TableHeaderColumn>
                <TableHeaderColumn dataField="DataType">Data Type</TableHeaderColumn>
                <TableHeaderColumn dataField="MapTableName">Table Name</TableHeaderColumn>
            </BootstrapTable>
        );
    }
});

var insects = [{
    "ID": "1",
    "InsectName": "Beat Leafhopper",
    "InsectCode": "BLH",
    "BlueScale": "0,10",
    "GreenScale": "10.001, 25",
    "YellowScale": "25.001, 50",
    "RedScale": "50"
  }, {
    "ID": "2",
    "InsectName": "Potato Tuberworm",
    "InsectCode": "PTW",
    "BlueScale": "0, 5",
    "GreenScale": "5.001, 15",
    "YellowScale": "15.001, 30",
    "RedScale": "30"
  }, {
    "ID": "3",
    "InsectName": "Green Peach Aphid",
    "InsectCode": "GPA",
    "BlueScale": "0, 0.1",
    "GreenScale": "0.10001, 1",
    "YellowScale": "1.001, 5",
    "RedScale": "5"
}];

var InsectsTable = React.createClass({
    render: function () {
        var selectRowProp = {
            mode: "checkbox",
            clickToSelect: true
        };

        var options = {
            sortName: 'ID',
            sortOrder: 'asc',
            noDataText: '--',
            exportCSVText: ' Export',
            handleConfirmDeleteRow: function (next, rowKeys) {
                console.log(rowKeys);
                next();
            }
        };

        return (
            <BootstrapTable ref="insectsTableRef"
                            data={this.props.data}
                            insertRow={true}
                            striped={true}
                            hover={true}
                            deleteRow={true}
                            selectRow={selectRowProp}
                            exportCSV={true}
                            csvFileName={'insects.csv'}
                            options={options}>
                <TableHeaderColumn dataField="ID"
                                   isKey={true}
                                   autoValue={true}
                                   hidden={true}>ID</TableHeaderColumn>
                <TableHeaderColumn dataField="InsectName">Insect</TableHeaderColumn>
                <TableHeaderColumn dataField="InsectCode">Alias</TableHeaderColumn>
                <TableHeaderColumn dataField="BlueScale">Blue Range</TableHeaderColumn>
                <TableHeaderColumn dataField="GreenScale">Green Range</TableHeaderColumn>
                <TableHeaderColumn dataField="YellowScale">Yellow Range</TableHeaderColumn>
                <TableHeaderColumn dataField="RedScale">Red Range</TableHeaderColumn>
            </BootstrapTable>
        );
    }
});

...

var Menu = React.createClass({
    getInitialState: function () {
        return {key: 3};
    },

    handleSelect: function (key) {
        console.dir(key);
        this.setState({key});
    },

    render: function () {
        return (
            <Tabs activeKey={this.state.key} onSelect={this.handleSelect} animation={false} id="tabs" >
                <Tab eventKey={1} title="Locations" id="tab1">
                    <LocationsTable data={locations} id="locationsTable"/>
                </Tab>
                <Tab eventKey={2} title="Insects" id="tab2">
                    <InsectsTable data={insects} id="insectsTable"/>
                </Tab>
                <Tab eventKey={3} title="Data Tables" id="tab3">
                    <MapIndexTable data={mapsIndex} id="mapsIndexTable"/>
                </Tab>
            </Tabs>
        );
    }
});

[AllenFang]

@StefanoGitHub, I've no idea currently, but I'll check this out by your codes. Thanks

[AllenFang]

@StefanoGitHub, the data of table in MapIndexTable has some problem. You missing the IDfield in mapsIndex. Because missing rowkey, so that react-bootstrap-table doesn't know which row be selected

[stebogit]

you're right! such a dumb mistake. now it works fine.

[mswaminath]

Hi @stebogit @AllenFang , How to solve this issue? I am still facing the same problem even after specifying the id field. It actually selects only one row but all the checkbox are selected.

[mswaminath]

Found the solution. The isKey property should be set to true for id field and not for others as initially I had it for some other field.