✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Dash DataTable - Multi-Index Tables in Dash

@chriddyp Is it possible currently to display multi index tables or pandas pivot tables with dash-table-experiments. I could not get it to work.
If not, what do you think is the best alternative to display multi-index tables. Thanks!

1 Like

@ashutoshshahi - There is no built-in way to do this (yet). You will need to format the rows of your multi-index table manually.

Note that the rows attribute of the dash_table_experiments.DataTable component looks something like this:


which looks something like this:

>>>  df = pd.DataFrame({'x': [1, 2, 3], 'y': [3, 1, 4]})
>>> df.to_dict('records')
[{'x': 1, 'y': 3}, {'x': 2, 'y': 1}, {'x': 3, 'y': 4}]

So, in a multi-index table you may want to format your rows to look something like:

    {'index-1': 'A', 'index-2': 1, 'column-1': 1},
    {'index-1': '', 'index-2': 2, 'column-1': 5},
    {'index-1': '', 'index-2': 3, 'column-1': -4},
    {'index-1': 'B', 'index-2': 1, 'column-1': 5},
    {'index-1': '', 'index-2': 2, 'column-1': 2},
    {'index-1': '', 'index-2': 3, 'column-1': -5},

The underlying react component that we are using for rendering tables does have a grouping feature which could be useful in this case: http://adazzle.github.io/react-data-grid/examples.html#/grouping. This isn’t supported yet and it will require a bit of work to get right.
If you or your company need this feature, please reach out: https://plot.ly/products/consulting-and-oem/

Thanks for the tip! I’ll give your suggestion a go and see if it suffices what we need

Is this now built into dash? If not:

  • When can we expect it to be available?
  • Is your proposed workaround still the best way to do this in dash?

I would love to have that feature as well, has there been any progress?

1 Like

Also interested in this feature. Any update?

1 Like

HI Chris,

Thanks for this, I tried to use the structure you specified but it doesn’t give me what i want/expected. Instead of the row collapsing to one I simply have rows where an index is missing. eg. in your example ‘A’ takes up three rows, and so I expected the datatable to merge three rows and give them the value A at that column ‘index-1’, instead I just have ‘A’ in the first row, then empty fields in the next two…

Is there any workaround for this or is it just not possible? Thanks in advance

Is there any development on this, can we include multi header dataframes directly in our Dash Tables?

Any updates on this? I would still find this feature rather helpful even taking into the different workarounds!