nicolaskruchten / pivottable

Open-source Javascript Pivot Table (aka Pivot Grid, Pivot Chart, Cross-Tab) implementation with drag'n'drop.
https://pivottable.js.org/
MIT License
4.35k stars 1.08k forks source link

Is it possible to render the table without having rowspans on the labels? #1283

Open codythegreat opened 3 years ago

codythegreat commented 3 years ago
for instance instead of this: Value1 Value2 Value3
A1 B1 C1
C2
A2 B1 C1

I'd like the table to render like so:

Value1 Value2 Value3
A1 B1 C1
A1 B1 C2
A2 B1 C1

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;
    });
  });
}