Data Table / Expandable / Aligned Columns

[urbanisierung]

Hi Carbon-Team!

Quick question about the expandable data table. The component description shows an example with columns in the expandable area aligned with the parent data table:

Unfortunately there is no code example given that describes how to accomplish that. The react docs also just explains a very basic example. By building it by my own it ends with several custom stylings and still does not exactly matches the alignments.

Do you have a code example how to get the same result as on the screenshot without too much customizings?

Thanks!

[urbanisierung]

Any suggestions?

[tay1orjones]

Hi @urbanisierung, we unfortunately don't have an example for this one. There are many cases in the carbondesignsystem.com website where we show recommended example patterns for certain use-cases, but there is not always a code example for these things.

In the case of having the expandable area aligned with the parent data table - as you've found, this is complicated and often requires a high degree of customization to achieve nested table columns to always align with the parent table. This can be particularly challenging even more so when dealing with variable string lengths in translations.

We do have an examples directory in our repository that could be a home for a new example showing this if you're interested in contributing the work you've done so far. Putting it into a codesandbox could be a great place to start!