This suggestion doesn't include any changes to the current data source implementation for grouping. If in _groupRowHtml, the creation of the headers and footers stay the same, but  the call to _rowsHtml was removed or optional. This means that when rendering the group rows, the headers and footers are added to the html (including all subgroup headers and footers). The only difference from before is the actual row data isn't added to the html. The group data source is still created as normal. Then, on the groupExpand event, you can call _rowsHtml(e.group.items, templates) to get the html for that section (just like you would have in _groupRowHtml) then insert it after the grouped row with e.element.after(htmlRows). This would simplify the DOM, and shouldn't have any other consequences since the data source hasn't changed or been impacted.