Single selectRow selects all rows
See original GitHub issueHI @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>
);
}
});
Issue Analytics
- State:
- Created 7 years ago
- Comments:5 (2 by maintainers)
Top Results From Across the Web
Selecting a single row selects all rows · Issue #1019 - GitHub
Using the most basic Storybook example, and the component doesn't work. const selectRow = { mode: 'radio', clickToSelect: true }; EDIT: ...
Read more >Row Selection - Tabulator
Row selection allows users to select and highlight a number of rows that you can then take action on. This allows rows to...
Read more >Row selection with SQL statements - IBM
To select rows using selection symbols for character or graphic data, use the LIKE keyword in a WHERE clause, and the underscore and...
Read more >Select a row programmatically using tabulator selectRow ...
I can select rows by clicking on them and I can select all rows using the tabulator.selectRow() method. According to the documentation: To ......
Read more >Row Selection - JavaScript Data Grid
'single' will use single row selection, such that when you select a row, any previously selected row gets unselected. 'multiple' allows multiple rows...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Found the solution. The
isKey
property should be set totrue
forid
field and not for others as initially I had it for some other field.you’re right! such a dumb mistake. now it works fine.