Looking for ideas for "Selective" Group By function

💬 App Building
1

I don't believe this is possible via the built in grouping, but I'm hopeful that someone has some ideas on how I might accomplish this.

About 60% of my tables rows are independent, but the other 40% are interrelated. I would like the interrelated rows, to be grouped, and the independent rows not to be.

So, if I were to enable group by column "TripID", I would want any resulting group with more than one entry, to show up as a group. But any resulting group that had only a single entry, would be displayed as normal.

It seems to me that this should be possible using conditional logic, but the existing group by feature doesn't allow for any conditional logic to be used.

Mock-up attached of what I'm trying to accomplish.

mock-up
mock-up2145×647 229 KB

2

@AIM_Rhys

You can manage this by transforming the object you'll be receiving and grouping the objects into child objects if there are more then 1 record for the unique identifier (TripID in your case) available. Then enable expandable rows, add a table (or whatever you'd like to display) to the expandable row component and reference the data to it using {{currentSourceRow.trips}} in my case.

See attached the screenshot and the JS function to group by. You'll probably need to update it to your own columns, but transforming the data should work.

Screenshot 2025-03-20 at 12.26.47
Screenshot 2025-03-20 at 12.26.471223×523 38.9 KB

function groupTrips(trips) {
    const tripMap = trips.reduce((acc, trip) => {
        if (!acc[trip.TripCode]) {
            acc[trip.TripCode] = [];
        }
        acc[trip.TripCode].push(trip);
        return acc;
    }, {});

    const groupedTrips = Object.keys(tripMap).map(tripCode => {
        const tripEntries = tripMap[tripCode];
        if (tripEntries.length > 1) {
            // If multiple trips share the same TripCode, create a parent object
            return {
                TripCode: tripCode,
                isGroup: true,
                totalParticipants: tripEntries.reduce((sum, t) => sum + (t.NumberOfParticipants || 0), 0),
                trips: tripEntries
            };
        } else {
            // Single trip remains as is
            return tripEntries[0];
        }
    });

    return groupedTrips;
}

// Mock Data Example
const tripsData = [
    { TripCode: "25Y0322PR", Name: "Victory Outreach", MissionCoordinator: "Karla", NumberOfParticipants: 10 },
    { TripCode: "25Y0322PR", Name: "Fred Church", MissionCoordinator: "Karla", NumberOfParticipants: 9 },
    { TripCode: "25Y0322BIC", Name: "Lakeside Baptist", MissionCoordinator: "Keith", NumberOfParticipants: 8 },
    { TripCode: "25Y0322NC", Name: "Carolina Church", MissionCoordinator: "Savanna", NumberOfParticipants: 1 },
    { TripCode: "25Y0329CH", Name: "Maranatha", MissionCoordinator: "Matt", NumberOfParticipants: 9 },
    { TripCode: "25E0405NC", Name: "Team Ritter", MissionCoordinator: "Savanna", NumberOfParticipants: 11 },
    { TripCode: "25E0405NC", Name: "Johnson Group", MissionCoordinator: "Savanna", NumberOfParticipants: 3 },
    { TripCode: "25F0412NC", Name: "Wallace Family", MissionCoordinator: "Brett", NumberOfParticipants: 16 },
    { TripCode: "25E0426NC", Name: "Coastal Church", MissionCoordinator: "Todd", NumberOfParticipants: 10 },
    { TripCode: "25E0426NC", Name: "Gunston EPC", MissionCoordinator: "Stephen", NumberOfParticipants: 15 },
    { TripCode: "25E0426NC", Name: "Grace Bible", MissionCoordinator: "Art", NumberOfParticipants: 10 }
];

return(groupTrips(tripsData));

Make sure to change the mockdata and reference it to your source.

1 Like
3

Thank you for putting so much effort into this! This is a great idea...

I am already using expandable rows for additional information. If I used this solution, is it possible to have two different layouts for the expandable row depending on the status of the "Is Group" field?

4

Hi @AIM_Rhys
Yes, you can dynamically add components to the expandable row and then display those via the 'hidden' toggle and currentSourceRow. Hide the table for example when {{currentSourceRow.isGroup == true}}. That'll allow you to show a different component/layout based on the isGroup value.

1 Like
5

This is a great suggestion - thanks @RetoolPV! Don't hesitate to reach out with any additional questions, @AIM_Rhys. :+1:

6

Have you tried implementing this, @AIM_Rhys? I'm curios to hear how it went!