Nested table columns

Hello,

I’m new to Dash, and I’m really excited about it.

Right now I’m trying to create tables with dash table experiment but i need something that i haven’t seen in any post so far, so i decided to ask.
I need to create a table with nested columns like this one:
image
Is there any way to do this ?

So far found a workaround - displaying 2 tables where the first one is only the top headers. It looks like that:
image
but it doesn’t work when you have to scroll horizontally because it scrolls only the second table.
So … is there any way to remove the scrolls from the table and show the full table in a div with overflow: auto so i can scroll the 2 tables together ?
Someone got better ideas ?

And some more additional questions:
How can i break the line i the header ? (
doesn’t work)
And is there any way to set width of a particular column, for example I need the first column to be wider ?

We’re working on multi-line headers in a new version of the interactive dash table:

We’re looking to release this table towards the end of August

2 Likes

In the new dash table, would it be possible to create merged rows like in Excel (similar to what i see here with the columns?)?

Thank you very much for the fast answer.

This is exactly what i need :slight_smile: I’m very happy that it will be implemented soon.
Big ups for Dash! It’s awesome!

Do you have suggestions on the other questions:
Can I break the line in tables’s headers ?
and
Can I set “width” for particular column ?

Yeah, both of these will be possible with the new table. Stay tuned!

1 Like

Hi, Is this feature already integrated? I have a similar use-case and would like to use nested table columns.

Thanks

Hi @neeraj_sujan, and welcome to the Dash forum!

Yes, this feature is available. See the example called “Multi-Headers” on this page https://dash.plotly.com/datatable/style