How to rename "Toggle Columns" button?

Dash Python
1

Hi! I have a dash_table.Datatable with hideable columns and a “Toggle Columns” button. I know how to style and hide it. But I would also like to edit the inner text inside the <button> tag. I could not do it with CSS. How can I do that?

1 Like
2

hi @sepremento
can you show an image of the button you are referring to please.

3

Hi @adamschroeder! Thank you for your response! It seems not illustrative enough to just show a picture. When you use a code like this:

dash_table.DataTable(id='my-table', data=df.to_dict('records'),
                     columns=[{'name': col, 'id': col, 'hideable': True}
                              for col in df.columns],

you get a table with little Toggle columns button on the top left corner with CSS class show-hide. I’ve managed a hack to change the perceived button caption with CSS like this:

.show-hide {
    position: relative;
    width: 200px;
}

.show-hide::before {
    background: inherit;
    content: "My custom caption";
    position: absolute;
    left: 5px;
    right: 5px;
}

but it seems very inelegant and I was looking for a more native solution.