React-bootstrap-table2: combining hover and expanded rows

[jendamozna]

"hover" attribute turns on bootstrap hovering also on expanded rows which doesnt look nice.

ive solved it with

<BootstrapTable
    hover = false;
    classes = "mytable-hover";
    rowClasses = "mytable-hover-row";

Which wont add "mytable-hover-row" on expanded rows (consciously?)

Then in css

.mytable-hover > tbody > tr.mytable-hover-row:hover {
    background-color: rgba(0,0,0,.075);
}

Now its OK, but i dont know if this will be working in future versions...

Any idea how could it be solved for future?

[AllenFang]

@jendamozna it's expected behavior for me about rowClasses didn't add to expanding content(row). If you wanna add some custom class on expanding content, I can implement a prop for it.

Thanks

[jendamozna]

I've noticed that in v3.1.6 - https://github.com/react-bootstrap-table/react-bootstrap-table2/pull/1023/commits/ec4864da5c6807ba59abe640b0b12a432b3c5784 appeared expandRow.parentClassName... witch does not solve my issue.
Could you please also implement something like expandRow.className, so i can add class to the new row?

[AllenFang]

@jendamozna ok, I will implement it, thanks

[AllenFang]

RELEASE NOTE

DOCS

[jendamozna]

expandRow = {className: "no-hover"}
now creates:
<tr><td class="reset-expansion-style no-hover" colspan="5">...
could it be possible to update <tr> class instead of <td>?

[jendamozna]

@AllenFang, could you reopen it, please?

[syedganisb]

i resolved this issue i have added below logic it willl working fine
render() {
parentThisObject = this;
var icon = document.querySelectorAll('.expand-cell')
for(var i=0;i if(icon[i].textContent=="(+)"){
icon[i].style.cursor='pointer'
}
}
}