Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

Hide DataTable columns?

I would like to keep columns on the client side but hide them from the view.

I have a few use cases, but the one I am trying to implement right now is for rows to have conditional formatting based on data the user doesn’t want to see. Therefore the data needs to be there client side, but just not visible to the user.

Anyone know how this could be done?

1 Like

Set hidden=True inside the columns property. You can see the full set of attributes in the reference page here: https://dash.plot.ly/datatable/reference

1 Like

Thanks! DataTable is amazing.

However honestly I find the documentation site a little difficult to naturally read through compared to most other Python documentation sites. By structuring the reference as a table and giving the Type column such little width some of the columns are 33 lines long where each line is 1 - 3 words long.

Most other components from Dash I just read the documentation directly out of the docstring by ctrl + clicking on the object in PyCharm, and that’s always been sufficient but this isn’t possible with DataTable.

Yup, agreed. Two issues to track here:

  1. Reformatting the reference table: https://github.com/plotly/dash-docs/issues/253
  2. Getting IDE support: https://github.com/plotly/dash-table/issues/228
1 Like

How do I access the access the property of a single column ?

The columns prop is a list of all columns and their properties, for example a DataTable with the columns A and B where B is hidden:

dash_table.DataTable(
    columns=[{'name': 'A', 'id': 'A'},
             {'name': 'B', 'id': 'B', 'hidden': True}],
    data=[{'A': 'green', 'B': 1},
          {'A': 'yellow', 'B': 2},
          {'A': 'red',  'B': 3}],
)

Thanks Damian,
Well I’ve already defined columns in dash_table.DataTable(…) with :

columns=[{“name”: i, “id”: i} for i in df.columns]

So I guess I have to iterate the list of dict in a callback, find the right column and add/set the hidden property to True.

Yes, if you want to change the properties of an individual column via a calllback this is exactly what you do.

It seemshidden has been removed from dash_table 4.0.0? Is there any other way to accomplish this now?

For the use case where you simply don’t want to display the data you can remove the column from the “columns” prop and it will disappear from the table, it will ignore all data with that field.

For the use case where you want to use the column for other things such as sorting or conditional formatting you will have to wait until dash_table 4.1.0, I recommend following this issue that is tracking it: https://github.com/plotly/dash-table/issues/314

I’ve made it clear in the issue to the Dash developers this is a great feature that I heavily rely on :slight_smile:

1 Like

dash_table.DataTable(
id=‘crawledtable’,
columns=[{“name”: i, “id”: i} for i in table.columns],
data=table.to_dict(‘records’),
row_selectable=“multi”,
selected_rows=[],
sort_action=“native”,
sort_mode=“multi”,
style_cell_conditional=[
{
‘if’: {‘column_id’: c},
‘display’: ‘none’
} for c in [‘Date’, ‘Region’]
],

3 Likes

You need to also include the header, or else your table and headers will be a mismatch:

            style_data_conditional=[
                {'if': {'column_id': 'index',},
                    'display': 'None',}],
            style_header_conditional=[
                {'if': {'column_id': 'index',},
                    'display': 'None',}],           
          ),   
2 Likes

This method also works with slightly less code:

        style_cell_conditional=[
            {'if': {'column_id': 'index',},
                'display': 'None',}]
1 Like

For anyone who is coming to this page, another method hidden_columns property of the table. When you set the style to none the cell is shown in the TOGGLE COLUMN as marked and there won’t be any way to see it. But when you set the hidden_columns = ['Date', 'Region'], those columns are shown as unchecked in the TOGGLE COLUMN (it’s a button above the table that shows a list of the columns) so the user can check them to show those columns.

It really depends on the use case which method to use, for me this was a better approach.

1 Like