DetailsList: Grouping hell docs

[sdudnic]

When first opening the doc to see how the grouping works, I was surprised to see this official doc and sample

      items: [
        { key: 'a', name: 'a', color: 'red' },
        { key: 'b', name: 'b', color: 'red' },
        { key: 'c', name: 'c', color: 'blue' },
        { key: 'd', name: 'd', color: 'blue' },
        { key: 'e', name: 'e', color: 'blue' },
      ],
      // This is based on the definition of items
      groups: [
        { key: 'groupred0', name: 'Color: "red"', startIndex: 0, count: 2, level: 0 },
        { key: 'groupgreen2', name: 'Color: "green"', startIndex: 2, count: 0, level: 0 },
        { key: 'groupblue2', name: 'Color: "blue"', startIndex: 2, count: 3, level: 0 },
      ],

are you serious? Completely counterintuitive and frustrating sample.

Who from MS proposed such an elegant solution? I need to manually count the items? what it that startIndex?

This is why I was not surprised to see such a questions on SO

Surely, consumers expect to put some criteria and the control should itself create groups, count items.

Please MS, do something with this, because not sure who will want to use this.

[spmonahan]

Hi @sdudnic, I'm sorry using grouped DetailsList has been such a frustrating experience for you. Hopefully my answer here along with some links to documentation can help you out!

You point out wanting to put in some criteria and have the control do the rest of the work and this seems to be a good way to describe what the groups prop does. groups is an array of IGroup objects where each IGroup defines the name of the group (name), the index (in items) of the first item in the group (startIndex), the number of items in the group (count), and the nesting level of the group (level). From this GroupedList and DetailsList are able to take items and produce nested lists.

Given our need to support existing users we cannot alter the existing Fluent v8 APIs in a breaking way but we're still working on the new Fluent v9 implementation and any input you have about how to implement a grouped list API is appreciated.

[sdudnic]

'Name', 'key' are ambiguous and unclear if name is or not the filter. 'Count' is incomprehensible. What if filter and count diverges ? I didn't search now entire day the hidden logic. The actual grouping is counterintuitive, so hard to digest, time consuming so unfriendly. You probably would like to keep the actual behavior for backward compatibility, however that doesn't impede to create parallel functions with a clear and simply interface for elementary needs.

[spmonahan]

Can you provide an example of an API for a similar component that you feel is better? Since we're working on a new implementation for Fluent v9 we'd like to consider as many approaches as possible.

Thanks!

[sdudnic]

For a list of items with properties: {a, b, c} you provide a method .groupBy('a') for basic grouping. no levels, no idexes. if you want levels, add .thenBy('b'). In our case .groupBy('color').thenBy('name')

[Ashilex]

Hi, so the only way to group elements with a certain criteria is to provide items yet sorted based on that same criteria? is it correct ? thanks

[spmonahan]

If I'm understanding your question correctly, yes, in order to group elements together you must sort them according to the IGroup configuration. In the DetailsList - Grouped example you can see all the "red" items are in the red group and all the "blue" items are in the blue group.