Fluentui: DetailsList- Nested Detail List possible?

[RituChawla]

I need to create a nested Detail List Ui for the following scenario:

Detail List 1 items- product name, product price, product rating

Detail List2 items - for each product in first DetailList, on click of the row, show product feedback title and feedback description, on the next row

• product 1 ( on click expand rows for feedback)
• product 1 feedback 1

• product 1 feedback 2

• product 2

• product 2 feedback 1
• product 2 feedback 2

Is it possible with DetailList or do I need to use any other fabric UI component to achieve the same?

Detail List 1-item1
Detail List 2-item1
Detail List2-item2
Detail List 1- item2
Detail List 2 -item1
Detail List 2- item 2

Thanks.

[JasonGore]

There may be two possible options here:

1. Custom Group Headers example supports headers that may be useful for product info
2. GroupedList may also be of use here

Can you take a look and let me know if either of these look like a good fit and if not, why? Thanks!

[msft-github-bot]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 5 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fabric React!

[JCMoriarty]

There may be two possible options here:

Custom Group Headers example supports headers that may be useful for product info
GroupedList may also be of use here

Can you take a look and let me know if either of these look like a good fit and if not, why? Thanks!

There may be two possible options here:

Custom Group Headers example supports headers that may be useful for product info
GroupedList may also be of use here

Can you take a look and let me know if either of these look like a good fit and if not, why? Thanks!

If I want to show the nesting list below:
List:{
{
name：X
ID：1
Detail：{
{
recordID：1
spend：100
}
{
recordID：2
spend：50
}
}
},
{
name：Y
ID：2
Detail：{
{
recordID：1
spend：30
}
{
recordID：2
spend：200
}
}

}
},
I want to show a nesting detaillist, and the first detaillist will show name and ID(can expand and collapse)
if it is expand, it will show another detaillist recodeID and spend.

I think Custom Group Headers and GroupedList are not fit