EDIT:
So I actually wrote a function to do this after the pivot table is rendered. I'll provide it below. Hopefully there is a native option that will make this code redundant:
// convert rowspans to multiple cells
let toggle_row_span = () => {
$('th.pvtRowLabel').filter(function() {
return this.rowSpan > 1;
}).each(function() {
let rowspan = $(this).attr("rowspan");
let index = $(this).index();
let row = $(this).parent().index();
// change this elements rowspan
$(this).attr("rowspan", "1");
// copy element and it's index for reference later
var that = $(this).clone(true);
that.index = $(this).index();
// get rows that are between the elems rowspan
$('tbody tr:not(:last-of-type)').filter(function() {
return $(this).index() > row && $(this).index() - row < rowspan;
}).each(function() {
// either insert at front or row, or at index...
if (that.index === 0) $(this).prepend(that);
else $(that).insertAfter($('th:nth-child(' + that.index + ')', this));
// clone that, index for next iteration
let index = that.index;
that = that.clone(true);
that.index = index;
});
});
}
I'd like the table to render like so:
EDIT: So I actually wrote a function to do this after the pivot table is rendered. I'll provide it below. Hopefully there is a native option that will make this code redundant: