import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
export default class StudentTable extends React.Component {
render() {
const selectRowProp = {
mode: 'checkbox'
};
return (
<BootstrapTable ref='table' data={ this.state.studentData } selectRow={ selectRowProp } pagination>
<TableHeaderColumn dataField='id' isKey={ true }>Student ID</TableHeaderColumn>
<TableHeaderColumn dataField='name'>Student Name</TableHeaderColumn>
<TableHeaderColumn dataField='city'>City</TableHeaderColumn>
</BootstrapTable>
);
}
}
When I implemented It show Pagination in Table with checkbox in all raw for selection.
But when I click on select all It will only select records of current page size.When I go to next page from pagination control,others records are not selected.
I want to select all records when I click on select all Checkbox.How Can I?
I found Solution from Here
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
export default class StudentTable extends React.Component {
onSelectAll = (isSelected) => {
if (isSelected) {
return this.state.studentData.map(row => row.id);
} else {
return [];
}
}
render() {
const selectRowProp = {
mode: 'checkbox',
onSelectAll: this.onSelectAll
};
return (
<BootstrapTable ref='table' data={ this.state.studentData } selectRow={ selectRowProp } pagination>
<TableHeaderColumn dataField='id' isKey={ true }>Student ID</TableHeaderColumn>
<TableHeaderColumn dataField='name'>Student Name</TableHeaderColumn>
<TableHeaderColumn dataField='city'>City</TableHeaderColumn>
</BootstrapTable>
);
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.