CODEWITHSUNDEEP
javascripttabulator
Bill
Bill

Reputation: 1257

Can a group of rows include a customized summary using Tabulator?

I've trying to create a single row summarizing grouped data.

In the wireframe you'll see employee information grouped by department. You'll also notice that beneath the group header, there's a single row summarizing the information (blue arrow in wireframe).

I've tried a number of things so far. The most promising approach seemed to be to use the rowFormatter to embed a nested table with one row, one column w/ summary text. The problem with the approach was:

Note the intention is not to provide individual column summaries (e.g. not looking for count, sum, computed values, etc for each column). The intention is to have one single row for each group providing textual summary of data included in that group, as shown in the wireframe.

Is there a way to include a summary row as described here?

enter image description here

Upvotes: 0

Views: 1117

Answers (1)

Bill
Bill

Reputation: 1257

This approach uses rowFormatter along with a global counter to track whether or not the summary was inserted for the group.

The global counter is dictionary that keeps track of the frequency of each element in the container and uses the table group key as the dictionary key.

var hasGroupSummary = {}

The rowFormmater code:

  rowFormatter: function(row) {
    var element = row.getElement();
    var data = row.getData();
    var group = row.getGroup();

    var newElement = document.createElement("div");
    newElement.innerText = "Summary here";

    var key = group.getKey();
    if (!(key in hasGroupSummary)) {
      element.insertBefore(newElement, element.firstChild);
      hasGroupSummary[key] = true;
    }
   }

Working JSFiddle: https://jsfiddle.net/black_ring_9a/r2s0zbng/

Upvotes: 1

Related Questions