Assign className to clicked row on expand

[CoralSilver]

Is there a way to add a custom background color or className to a row when a user clicks to expand it, in the same way that you can with the select row option? I just want the row to expand, and not be selectable.

[AllenFang]

HI @CoralSilver, you can use this.options.expandRowBgColor to assign the bgcolor for expanding rows but currently, we don't support the className on expanding row yet, but I can support it in near future. is that this.options.expandRowBgColor helpful to you?

[CoralSilver]

Thanks Allen. Yes I am already using this.options.expandRowBgColor, but I wanted to be able to add a className to the row that it is expanding from so it is more visually obvious that they are connected.

[AllenFang]

sorry for lately reply, so you means add the class on original row instead of expanded one?

[CoralSilver]

Yes exactly. And then remove it once the row is closed again.

[AllenFang]

@CoralSilver, got it, I'll try to support it as soon as possible.

[CoralSilver]

Thanks!

[AllenFang]

@CoralSilver, this feature was supported on v3.4.0, check this as example, thanks

[CoralSilver]

Thanks Allen. Works perfectly!

[supiash1]

@AllenFang Thanks for your response, The class is added on the tr after expanding is there a way we could add the class when the table is rendered and stays whether it expands or not please?

[AllenFang]

@supiash1 Please check
https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/style/tr-class-string-table.js
https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/style/tr-class-function-table.js

[supiash1]

@AllenFang Thanks for your response

As In the picture the expand component will be attached as tr in the main table and hidden next to the expandable row, i would like to add the class on it even when it is not expanded

The examples which you provided would add class to the tr on the expand component table which is inside the tr hidden in the main table(when not in expand state)

thanks

[AllenFang]

You means you want to add a class on the expand row(hidden in your snapshot)? if yes, try this and let me know if you have any question or unclear, thanks :)

[supiash1]

@AllenFang Thanks I have tried that but that adds class only on expand but i want it to add it even when its hidden please

[AllenFang]

@supiash1, I'll handle it. Because I force to add class on on expanding, in next version
I will pass isExpand flag to callback function and always the class on expand row. if you dont want to add the class on hidden, just return null or empty string.

[AllenFang]

#1409

[supiash1]

@AllenFang Thank you

[AllenFang]

@supiash1, fixed on v3.4.2 and check 0720e60 as example, thanks