row click after filter with setState changes the sorting of the data

[vamshi333]

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:

1. Filter the data on column product name.
2. Now click on the editable column which is product name and save it, now you see that the sort is changed

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>
);

} }