I am using a library called react-bootstrap-table to display my data. I want to dynamically add two buttons over the last two columns of any row when it is hovered over, similar to the image above.
To achieve this functionality, I have utilized classnames and innerHTML onRowMouseOver event.
The added innerHtml element is removed based on the added ClassNames onRowMouseOut event.
Although I can successfully add two buttons to the hovered row, there is a continuous flickering effect when hovering over these buttons.
Below is a code snippet for reference:
import React, { Component } from 'react';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
// Data array
const products = [
{
id: 1,
name: "abcdef",
price: 120,
email:"[email protected]",
phone:"9856325632",
submitted:"10/02/18",
responded:"01/09/18",
status:"active"
},
...
];
// Total number of products
const total = products.length;
class Tables extends Component {
constructor(props) {
super(props);
this.state = {
text: '',
selectedDate: null,
page: 1,
goToPageNum:1,
disableGoButton:true,
disableGoToInput:false,
size:5,
};
}
// Function to handle size per page change
onSizePerPageList = (sizePerPage) => {
this.setState({size:sizePerPage},()=> this.hideGTP());
}
expandComponent(row) {
return (
<div className="col-3">
... // Code for expanding component
</div>
)
}
render() {
const options = {
page: this.state.page,
onRowMouseOut: function(row, e) {
... // Functionality to remove elements on mouse out
},
onRowMouseOver: function(row, e) {
... // Functionality to add elements on mouse over
}
};
// Render method to display table with BootstrapTable
return (
<div className="container py-5">
<BootstrapTable
trClassName="table-row"
bordered={false}
ref='table'
data={products}
options={options}
search={true}
>
... // Table Header Columns
</BootstrapTable>
</div>
);
}
}
export default Tables;The issue I am facing is the Flickering Effect: There is a continuous flickering of the added elements when they are hovered over. Any advice on how to resolve this would be greatly appreciated.
View Codedandbox Demo: My Demo Codesandbox Link: https://codesandbox.io/s/p910j5k6x