Fluentui: Grouped DetailsList in tree data format

Created on 3 May 2019  路  5Comments  路  Source: microsoft/fluentui

Describe the feature that you would like added
The possibility to have grouped DetailsList component's groups behave as a normal row would be nice. Currently it acts like an entity that holds together its children with a name and an expand/collapse control. It could be faked with a customrenderer and its props, but it will lose all table related features, like resizing, sorting, etc...

What component or utility would this be added to
DetailsList (grouped)

Have you discussed this feature with our team, and if so, who
No.

Additional context/screenshots
This is the same feature in ant.design that I'm after:
https://ant.design/components/table/#components-table-demo-expand-children

DetailsList Backlog review Won't Fix Feature

Most helpful comment

@szmarci, this will be a cool addition!

@KevinTCoughlin wondering if we could still achieve this by customizing while keeping the table related features.

All 5 comments

@szmarci, this will be a cool addition!

@KevinTCoughlin wondering if we could still achieve this by customizing while keeping the table related features.

I feel like this might already be possible with GroupedList / grouped DetailsList and custom row render functions. At least I hope so to avoid complicating the code further.

@szmarci can you expand on this concern:

It could be faked with a customrenderer and its props, but it will lose all table related features, like resizing, sorting, etc

Do you have a prototype attempt using GroupedList that I could evaluate?

cc: @Vitalius1

@KevinTCoughlin sorry, I was wrong about that part (I tried but could do that).

What I want is a grouping based on an attribute that is not necessarily represented in the row, but rather a general parent-child relation and both the parent and the child are represented the same way in the table.

I tried to put together something like this:
https://codesandbox.io/s/ql261vywlw

I used president Kennedy and his children as an example (sorry I couldn't find a better one on the top of my head). How would you put Kennedy as a parent node, that is collapsible/expandable while all of its properties are displayed (name, born) and his children are displayed as its child nodes with the same properties.

If I understand correctly in the current implementation of the grouped DetailsList the parent node would be displaying something like Kennedy's children (or anything I declare as a groupname) but not the parent's properties (like if it's an actual row).

This is what I want, I you haven't already seen it:
https://ant.design/components/table/#components-table-demo-expand-children

If there is a way of achieving this, could you point me in the direction?

Thanks for your help.

@micahgodbolt @KevinTCoughlin Hi guys, Can i know if expanding or collapsing for Rows as described ny @szmarci is doable. I tried using GroupedDetailList but couldnt.

Due to the complexity and dependencies of our List components, we are not able to take new feature requests at this time.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

chrismohr picture chrismohr  路  45Comments

jeremy-coleman picture jeremy-coleman  路  63Comments

just-joshing picture just-joshing  路  35Comments

chrismohr picture chrismohr  路  45Comments

danmarshall picture danmarshall  路  37Comments