✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

How to merge cells between rows?

Hi there!
When using dash_table, I know we can merge data table header with “merge_duplicate_headers”. But what if I want to merge cells in different rows? Just as what we do in Excel:
image

In the given Th/Td, write in the property “rowspan” or “colSpan” to dictate how many rows or columns the cell should span over.

In your case you would have something like:

html.Tr(
   [
      html.Td('Group 1', rowSPan=2),
      html.Td(1),
      html.Td(2),
      html.Td(3),
   ]
),
html. Tr(
 [ 
      html.Td(1),
      html.Td(2),
      html.Td(3),
   ]
)

Note that there is only 3 entries in the second html.Tr().

Thanks fir the solutions. I forgot to mention that I were using the dash package dash_table…

I am unsure whether or not row/col span has been implemented in the dash_table component yet.
I can find an old thread about this where it is mentioned to include this, but I cannot see anything which resembles this in the documentation for dash_table.

1 Like

Ah yeah, there’s no row equivalent of merge_duplicate_headers in dash_table right now. New issue: https://github.com/plotly/dash-table/issues/645

Thx! Hope the function will be added…

Wow, all the posts are nice. I have got my answer. Well before this thread, I found this article helpful to merge cell between rows in google sheets. I am a programmer so sometimes the source code works. Well, thank you so much for this helpful thread. You cleared all my queries. So thank you very much. :slightly_smiling_face: