Skip to main content

DHTMLX Pivot. Grand total for columns and rows example

Demo of displaying grand total rows and columns in DHTMLX Pivot. Use the totalRow and totalColumn properties in tableShape to show aggregated summaries with optional "sumOnly" mode.

Live example​

const widget = new pivot.Pivot("#pivot", {
    tableShape: {
        totalRow: true, // boolean | "sumOnly"
		totalColumn: "sumOnly" // boolean | "sumOnly"
    },
    fields,
    data: dataset,
    config: {
        rows: [
            "studio"
        ],
        columns: [
            "type"
        ],
        values: [
            {
                field: "score",
                method: "max"
            },
            {
                field: "episodes",
                method: "count"
            },
            {
                field: "rank",
                method: "min"
            },
            {
                field: "members",
                method: "sum"
            },
        ]
    }
});

<!-- component container -->
<div id="pivot" style="width: 100%; height: 100%;"></div>

<!-- dataset -->

<script>
const dataset = [
      {
        "rank": 1,
        "title": "Shingeki no Kyojin: The Final Season - Kanketsu-hen",
        "popularity": 609,
        "genre": "Action",
        "studio": "MAPPA",
        "type": "Special",
        "episodes": 2,
        "duration": 61,
        "members": 347875,
        "score": 9.17
      },
      {
        "rank": 2,
        "title": "Fullmetal Alchemist: Brotherhood",
        "popularity": 3,
        "genre": "Action",
        "studio": "Bones",
        "type": "TV",
        "episodes": 64,
        "duration": 24,
        "members": 3109951,
        "score": 9.11
      },
      // ... 246 more items (see Live Editor for full data)
    ]; 
    
    const fields = [
      {
        "id": "rank",
        "label": "Rank",
        "type": "number"
      },
      {
        "id": "title",
        "label": "Title",
        "type": "text"
      },
      {
        "id": "popularity",
        "label": "Popularity",
        "type": "number"
      },
      {
        "id": "genre",
        "label": "Genre",
        "type": "text"
      },
      {
        "id": "studio",
        "label": "Studio",
        "type": "text"
      },
      {
        "id": "type",
        "label": "Type",
        "type": "text"
      },
      {
        "id": "episodes",
        "label": "Episodes",
        "type": "number"
      },
      {
        "id": "duration",
        "label": "Duration",
        "type": "number"
      },
      {
        "id": "members",
        "label": "Members",
        "type": "number"
      },
      {
        "id": "score",
        "label": "Score",
        "type": "number"
      }
    ];
</script>

When analyzing large datasets with multiple aggregation methods, users often need a bottom-line summary that shows the overall totals across all rows or columns. Without built-in total support, developers would need to compute and render these summaries manually, which is complex and error-prone with dynamic pivot configurations.

DHTMLX Pivot offers totalRow and totalColumn properties in the tableShape configuration. Both accept either a boolean (true) to show totals using each value's aggregation method, or the string "sumOnly" to display only the sum regardless of the configured method. This gives you precise control over how grand totals are calculated.

This example uses an anime dataset grouped by studio (rows) and type (columns) with four different aggregation methods: max for score, count for episodes, min for rank, and sum for members. The total row uses true (applying each method), while the total column uses "sumOnly" (showing only sums). The Total row at the bottom aggregates all studios.

Solution overview​

To add grand totals, set tableShape.totalRow and tableShape.totalColumn to true or "sumOnly". When set to true, totals use the same aggregation method as each value field. When set to "sumOnly", only sums are shown.

Key points​

  • Total row at the bottom: Set totalRow: true to display a summary row at the bottom of the table that aggregates all data rows using each value's configured method (max, min, sum, count)
  • Total column on the right: Set totalColumn: true or "sumOnly" to add a summary column that aggregates values across all column groups for each row
  • sumOnly mode: Use "sumOnly" instead of true to force sum aggregation in the total regardless of the individual value field methods - useful when you need a simple numeric total
  • Multiple aggregation methods: Combine different methods (max, count, min, sum) across value fields while totals correctly apply the appropriate aggregation for each

API reference​

  • Pivot tableShape: Configuration for table appearance including totalRow and totalColumn settings.
  • Pivot configuration: Properties for defining rows, columns, and value aggregations.
  • Pivot fields: Configuration for defining field types and labels.

Additional resources​