Open vamshi333 opened 5 years ago
I am using react-bootstrap-table, I have implemented rowClick functionality and if I try to set some state in that method my sort gets reset.
To replicate the issue, please follow the below steps:
Below is the code snippet.
/ eslint max-len: 0 / import React from 'react'; import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
const products = [];
function addProducts(quantity) { const startId = products.length; for (let i = 0; i < quantity; i++) { const id = startId + i; products.push({ id: id, name: 'Item name 1' + id, price: 2100 + i }); } products.push({ id: 1000, name: 'Item name 22', price: 2100 }); }
addProducts(5);
const cellEditProp = { mode: 'dbclick' };
export default class DbClickToSelectTable extends React.Component { constructor(props) { super(props); this.state = { clickedRowID: null }; } onRowClick(row) { this.setState( { clickedRowID: row.id } ); console.log('clicked'); }
render() { this.onRowClick = this.onRowClick.bind(this);
const options = { onRowClick: this.onRowClick, sortName: 'id', sortOrder: 'desc' }; return ( <BootstrapTable data={ products } options= { options } cellEdit={ cellEditProp }> <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn> <TableHeaderColumn dataField='name' filter={ { type: 'TextFilter', placeholder: ' ' } } >Product Name</TableHeaderColumn> <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn> </BootstrapTable> );
} }
I am using react-bootstrap-table, I have implemented rowClick functionality and if I try to set some state in that method my sort gets reset.
To replicate the issue, please follow the below steps:
Below is the code snippet.
/ eslint max-len: 0 / import React from 'react'; import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
const products = [];
function addProducts(quantity) { const startId = products.length; for (let i = 0; i < quantity; i++) { const id = startId + i; products.push({ id: id, name: 'Item name 1' + id, price: 2100 + i }); } products.push({ id: 1000, name: 'Item name 22', price: 2100 }); }
addProducts(5);
const cellEditProp = { mode: 'dbclick' };
export default class DbClickToSelectTable extends React.Component { constructor(props) { super(props); this.state = { clickedRowID: null }; } onRowClick(row) { this.setState( { clickedRowID: row.id } ); console.log('clicked'); }
render() { this.onRowClick = this.onRowClick.bind(this);
} }