Change 'eye button' that appears in dashtable columns where hideable property is True

Dash Python
1

I have several dashtables where columns have the property hideable=True. I am using the eye-button as a toggle button to show/hide certain components. My question is can this eye-button be changed to something like arrows? My table currently looks like this. Alternatively, if there is a way to add buttons/icons to table headers, please suggest.
image

2

Hello @Chhandosee,

Yes, you can accomplish this through the use of css, here is an example:

span.column-header--hide svg {
    height: 0;
    width: 0;
}

span.column-header--hide:before{
    content: "rawr";
}

Results in this:

image

2 Likes
3

Thank you @jinnyzor, it worked for me. Just added a few more lines to get the icon look like I want.

span.column-header–hide svg {
height: 0;
width: 0;
}

span.column-header–hide:before{
font-family: “Font Awesome 5 Free”;
content: “\f060”; /* Unicode of icon */
display: inline-block;
padding-right: 3px;
vertical-align: middle;
font-weight: 900;
}

2 Likes