office-ui-fabric / fluent-ui Grouped DetailsList

Question

Today I tried to use the Grouped DetailsList of the fluent-ui.

What I expected: I need to declare some groups, let's say red, blue, green and then just add to each item, I want to add to the List, a specific property, that maps the Item to the groups. e.g.:

groups: [
            { key: 'red', name: 'Color: "red"'},
            { key: 'green', name: 'Color: "green"'},
            { key: 'blue', name: 'Color: "blue"' },
          ],

items: [...,
        { key: 'red',anyProp1: "abc", anyProp2: "dfg",...},
       ...,
      ]

What I found out I have to do: I need to sort the Array, which contains my items in that way, that all Items belonging to the Group red need to be in one block. e.g.: [red, red, red, blue, blue, green, green, green]. Now I needed to provide the information about startIndex and count to map my Array of items to the groups.

This is what a definition of a group could look like:

 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 },
      ],

I can't understand why they have done it this way (For me it's very inconvenient this way). So, while I'm more between a beginner and an intermediate in JS. I think the guys who implemented this are professionals. There must be a reason. Maybe it has something todo with performance? I could imagine that when it comes to very large lists, it performs better this way, but I'm not sure.

Does anybody knows some details about this and can explain?

Destiny

I find the same thing frustrating, wait until you attempt to access the groups properties to do something like toggle the collapsed state of the groups. I am unable to find the path to this interface between DetailsList and GroupList even though the DetailsList uses GroupList to maintain its groups. – Sumikosumma

Completely agree. It is quite ridiculous. – Ethelethelbert

Created a discussion about on the project github github.com/microsoft/fluentui/discussions/25086 – Weasand

Answer 1

Faced the same issue and got a clue here. Then bult my solution. Following is the function to generate groups array from the given items list sorted by the grouping column:

function groupsGenerator(itemsList, fieldName) {
    // Array of group objects
    const groupObjArr =[]

    // Get the group names from the items list
    const groupNames = [...new Set(itemsList.map(item => item[fieldName]))]

    // Iterate through each group name to build proper group object
    groupNames.forEach(gn => {
        // Count group items
        const groupLength = itemsList.filter(item => item[fieldName] === gn).length
        
        // Find the first group index
        const groupIndex = itemsList.map(item => item[fieldName]).indexOf(gn)

        // Generate a group object
        groupObjArr.push({
            key: gn, name: gn, level: 0, count: groupLength, startIndex: groupIndex
        })
    })

    // The final groups array returned
    return groupObjArr
}

Denaturalize

Answer 2

Typed and with empty group name option variant of the Timus's answer

function generateGroups(items: any[], fieldName: string, emptyGroupName: string = '-'): IGroup[] {
  const groups: IGroup[] = []

  const groupNames = [...new Set<string>(items.map(item => item[fieldName]))]

  groupNames.forEach(name => {
    const groupItemsCount = items.filter(item => item[fieldName] === name).length
    const groupStartIndex = items.map(item => item[fieldName]).indexOf(name)
    groups.push({
      key: name,
      level: 0,
      name: name ?? emptyGroupName,
      count: groupItemsCount,
      startIndex: groupStartIndex
    })
  })

  return groups
}

Weasand