How to remove the individual column "Hide Action" buttons from a DataTable

Dash Python
1

In a dash_table DataTable, when columns have the ‘hideable’: True property set, a “Toggle Columns” button appears above the table and an “eye” visible action button appears above the column.

I would like to declutter my column headers and remove the individual action buttons for hiding the column, since the “Toggle Columns” button drop-down can select the columns anyway. The main advantage for usability is it makes it easier to click on the “sort” action button without accidentally clicking on the “hide” action button.

Is this possible, perhaps with some CSS trickery or in the “style_cell_conditional” property?

Thanks for the help!

2

Hi, was wondering if you’ve found the solution?

3

Hi @khairina and welcome to the Dash forum :slightly_smiling_face:

For hideable columns, you can remove the icon in the table headers by adding this to the CSS in the assets folder:


.column-header--hide {
  display: none;
}

Or you could use the css prop in the table:

app.layout = dash_table.DataTable(
    id='table',
    columns=[{"name": i, "id": i,"hideable":True } for i in df.columns],
    data=df.to_dict('records'),
    css = [{"selector": ".column-header--hide", "rule" :"display: none"}]    
)
2 Likes
4

:+1:

Thanks, that did it.