@vue-pivottable/subtotal-renderer 0.1.0 → 0.2.0

package/dist/index.mjs

@@ -16,28 +16,52 @@ function createSubtotalRenderers(PivotData) {
     "Subtotal Table": makeSubtotalRenderer({ name: "vue-subtotal-table" })
   };
 }
-function generateRowKeysWithSubtotals2(rowKeys, depth) {
+function generateRowKeysWithSubtotals2(rowKeys, depth, collapsedKeys = /* @__PURE__ */ new Set()) {
   if (depth <= 1) {
     return rowKeys.map((key) => ({ key, isSubtotal: false, level: key.length }));
   }
   const result = [];
+  const addedSubtotals = /* @__PURE__ */ new Set();
   for (let i = 0; i < rowKeys.length; i++) {
     const rowKey = rowKeys[i];
-    const nextRowKey = rowKeys[i + 1];
-    result.push({ key: rowKey, isSubtotal: false, level: rowKey.length });
-    for (let level = depth - 1; level >= 1; level--) {
-      const currentPrefix = rowKey.slice(0, level);
-      const nextPrefix = nextRowKey ? nextRowKey.slice(0, level) : null;
-      const levelChanges = !nextPrefix || JSON.stringify(currentPrefix) !== JSON.stringify(nextPrefix);
-      if (levelChanges) {
-        result.push({
-          key: currentPrefix,
-          isSubtotal: true,
-          level,
-          subtotalLabel: `${currentPrefix[level - 1]} Subtotal`
-        });
+    rowKeys[i + 1];
+    let isHidden = false;
+    for (let level = 1; level < rowKey.length; level++) {
+      const parentKey = rowKey.slice(0, level);
+      const parentKeyStr = JSON.stringify(parentKey);
+      if (collapsedKeys.has(parentKeyStr)) {
+        isHidden = true;
+        break;
+      }
+    }
+    for (let level = 1; level < rowKey.length; level++) {
+      const subtotalKey = rowKey.slice(0, level);
+      const subtotalKeyStr = JSON.stringify(subtotalKey);
+      if (!addedSubtotals.has(subtotalKeyStr)) {
+        addedSubtotals.add(subtotalKeyStr);
+        let subtotalHidden = false;
+        for (let parentLevel = 1; parentLevel < level; parentLevel++) {
+          const parentKey = subtotalKey.slice(0, parentLevel);
+          if (collapsedKeys.has(JSON.stringify(parentKey))) {
+            subtotalHidden = true;
+            break;
+          }
+        }
+        if (!subtotalHidden) {
+          const isCollapsed = collapsedKeys.has(subtotalKeyStr);
+          result.push({
+            key: subtotalKey,
+            isSubtotal: true,
+            level,
+            subtotalLabel: `${subtotalKey[level - 1]} Subtotal`,
+            isCollapsed
+          });
+        }
       }
     }
+    if (!isHidden) {
+      result.push({ key: rowKey, isSubtotal: false, level: rowKey.length });
+    }
   }
   return result;
 }
@@ -75,8 +99,60 @@ function spanSize(rowItems, i, j) {
   }
   return len;
 }
-function colSpanSize(arr, i, j) {
-  if (i !== 0) {
+function generateColKeysWithSubtotals2(colKeys, depth, collapsedKeys = /* @__PURE__ */ new Set()) {
+  if (depth <= 1) {
+    return colKeys.map((key) => ({ key, isSubtotal: false, level: key.length }));
+  }
+  const result = [];
+  const addedSubtotals = /* @__PURE__ */ new Set();
+  for (let i = 0; i < colKeys.length; i++) {
+    const colKey = colKeys[i];
+    let isHidden = false;
+    for (let level = 1; level < colKey.length; level++) {
+      const parentKey = colKey.slice(0, level);
+      const parentKeyStr = JSON.stringify(parentKey);
+      if (collapsedKeys.has(parentKeyStr)) {
+        isHidden = true;
+        break;
+      }
+    }
+    for (let level = 1; level < colKey.length; level++) {
+      const subtotalKey = colKey.slice(0, level);
+      const subtotalKeyStr = JSON.stringify(subtotalKey);
+      if (!addedSubtotals.has(subtotalKeyStr)) {
+        addedSubtotals.add(subtotalKeyStr);
+        let subtotalHidden = false;
+        for (let parentLevel = 1; parentLevel < level; parentLevel++) {
+          const parentKey = subtotalKey.slice(0, parentLevel);
+          if (collapsedKeys.has(JSON.stringify(parentKey))) {
+            subtotalHidden = true;
+            break;
+          }
+        }
+        if (!subtotalHidden) {
+          const isCollapsed = collapsedKeys.has(subtotalKeyStr);
+          result.push({
+            key: subtotalKey,
+            isSubtotal: true,
+            level,
+            subtotalLabel: `${subtotalKey[level - 1]} Subtotal`,
+            isCollapsed
+          });
+        }
+      }
+    }
+    if (!isHidden) {
+      result.push({ key: colKey, isSubtotal: false, level: colKey.length });
+    }
+  }
+  return result;
+}
+function colSpanSizeWithSubtotals(colItems, i, j) {
+  if (colItems[i].isSubtotal) {
+    return 1;
+  }
+  const arr = colItems.map((item) => item.key);
+  if (i !== 0 && !colItems[i - 1].isSubtotal) {
     let asPrevious = true;
     for (let x = 0; x <= j; x++) {
       if (arr[i - 1][x] !== arr[i][x]) {
@@ -90,6 +166,8 @@ function colSpanSize(arr, i, j) {
   }
   let len = 0;
   while (i + len < arr.length) {
+    if (colItems[i + len].isSubtotal)
+      break;
     let same = true;
     for (let x = 0; x <= j; x++) {
       if (arr[i][x] !== arr[i + len][x]) {
@@ -241,10 +319,11 @@ function makeSubtotalRenderer(opts = {}) {
       const colKeys = pivotData.getColKeys();
       const grandTotalAggregator = pivotData.getAggregator([], []);
       const getAggregator = createSubtotalAggregatorGetter(pivotData);
-      const rowKeysWithSubtotals = generateRowKeysWithSubtotals2(rowKeys, rowAttrs.length);
+      const rowKeysWithSubtotals = generateRowKeysWithSubtotals2(rowKeys, rowAttrs.length, state.collapsedRowKeys);
+      const colKeysWithSubtotals = generateColKeysWithSubtotals2(colKeys, colAttrs.length, state.collapsedColKeys);
       const subtotalOpts = this.subtotalOptions;
-      subtotalOpts.arrowCollapsed || "▶";
-      subtotalOpts.arrowExpanded || "▼";
+      const arrowCollapsed = subtotalOpts.arrowCollapsed || "▶";
+      const arrowExpanded = subtotalOpts.arrowExpanded || "▼";
       const getClickHandler = (value, rowValues, colValues) => {
         var _a;
         if ((_a = this.tableOptions) == null ? void 0 : _a.clickCallback) {
@@ -270,23 +349,56 @@ function makeSubtotalRenderer(opts = {}) {
           if (j === 0 && rowAttrs.length !== 0) {
             cells.push(h("th", {
               colSpan: rowAttrs.length,
-              rowSpan: colAttrs.length,
-              style: {
-                backgroundColor: "#f5f5f5"
-              }
+              rowSpan: colAttrs.length
             }));
           }
           cells.push(h("th", { class: "pvtAxisLabel" }, c));
-          colKeys.forEach((colKey, i) => {
-            const colSpan = colSpanSize(colKeys, i, j);
-            if (colSpan !== -1) {
-              const label = applyLabel(colAttrs[j], colKey[j]);
-              cells.push(h("th", {
-                class: "pvtColLabel",
-                key: `colKey${i}-${j}`,
-                colSpan,
-                rowSpan: j === colAttrs.length - 1 && rowAttrs.length !== 0 ? 2 : 1
-              }, label));
+          colKeysWithSubtotals.forEach((colItem, i) => {
+            const { key: colKey, isSubtotal, level } = colItem;
+            if (j < colKey.length) {
+              const colSpan = colSpanSizeWithSubtotals(colKeysWithSubtotals, i, j);
+              if (colSpan !== -1) {
+                const isLastAttrRow = j === colKey.length - 1;
+                if (isSubtotal && isLastAttrRow) {
+                  const keyStr = JSON.stringify(colKey);
+                  const isCollapsed = state.collapsedColKeys.has(keyStr);
+                  const arrow = isCollapsed ? arrowCollapsed : arrowExpanded;
+                  const label = `${colKey[j]} Subtotal`;
+                  cells.push(h("th", {
+                    class: "pvtColLabel pvtColSubtotalLabel",
+                    key: `colKey${i}-${j}`,
+                    colSpan,
+                    rowSpan: colAttrs.length - j + (rowAttrs.length !== 0 ? 1 : 0),
+                    style: {
+                      fontWeight: "bold",
+                      backgroundColor: "#f0f0f0"
+                    }
+                  }, [
+                    h("span", {
+                      class: "pvtColCollapseToggle",
+                      style: {
+                        cursor: "pointer",
+                        marginRight: "4px",
+                        userSelect: "none"
+                      },
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        toggleColCollapse(keyStr);
+                      }
+                    }, arrow),
+                    label
+                  ]));
+                } else {
+                  const label = applyLabel(colAttrs[j], colKey[j]);
+                  const rowSpan = isLastAttrRow && rowAttrs.length !== 0 ? 2 : 1;
+                  cells.push(h("th", {
+                    class: "pvtColLabel",
+                    key: `colKey${i}-${j}`,
+                    colSpan,
+                    rowSpan
+                  }, label));
+                }
+              }
             }
           });
           if (j === 0 && this.rowTotal) {
@@ -302,6 +414,9 @@ function makeSubtotalRenderer(opts = {}) {
             class: "pvtAxisLabel",
             key: `rowAttr${i}`
           }, r));
+          if (colAttrs.length !== 0) {
+            cells.push(h("th"));
+          }
           if (colAttrs.length === 0 && this.rowTotal) {
             cells.push(h("th", { class: "pvtTotalLabel" }, this.localeStrings.totals));
           }
@@ -315,6 +430,9 @@ function makeSubtotalRenderer(opts = {}) {
           const { key: rowKey, isSubtotal, level, subtotalLabel } = rowItem;
           const cells = [];
           if (isSubtotal) {
+            const keyStr = JSON.stringify(rowKey);
+            const isCollapsed = state.collapsedRowKeys.has(keyStr);
+            const arrow = isCollapsed ? arrowCollapsed : arrowExpanded;
             const subtotalText = subtotalLabel || `${rowKey[rowKey.length - 1]} Subtotal`;
             cells.push(h("th", {
               class: "pvtRowLabel pvtSubtotalLabel",
@@ -323,18 +441,34 @@ function makeSubtotalRenderer(opts = {}) {
                 fontWeight: "bold",
                 backgroundColor: "#f0f0f0"
               }
-            }, subtotalText));
-            colKeys.forEach((colKey, j) => {
+            }, [
+              h("span", {
+                class: "pvtCollapseToggle",
+                style: {
+                  cursor: "pointer",
+                  marginRight: "6px",
+                  userSelect: "none"
+                },
+                onClick: (e) => {
+                  e.stopPropagation();
+                  toggleRowCollapse(keyStr);
+                }
+              }, arrow),
+              subtotalText
+            ]));
+            colKeysWithSubtotals.forEach((colItem, j) => {
+              const { key: colKey, isSubtotal: isColSubtotal } = colItem;
               const aggregator = getAggregator(rowKey, colKey);
               const val = aggregator.value();
               const formattedVal = aggregator.format ? aggregator.format(val) : val;
               const clickHandler = getClickHandler(val, rowKey, colKey);
+              const isDoubleSubtotal = isColSubtotal;
               cells.push(h("td", {
-                class: "pvtVal pvtSubtotalVal",
+                class: isColSubtotal ? "pvtVal pvtSubtotalVal pvtColSubtotalVal" : "pvtVal pvtSubtotalVal",
                 key: `subtotal-val${i}-${j}`,
                 style: {
                   fontWeight: "bold",
-                  backgroundColor: "#f0f0f0"
+                  backgroundColor: isDoubleSubtotal ? "#e0e0e0" : "#f0f0f0"
                 },
                 onClick: clickHandler || void 0
               }, formattedVal));
@@ -370,14 +504,19 @@ function makeSubtotalRenderer(opts = {}) {
                 }, label));
               }
             });
-            colKeys.forEach((colKey, j) => {
+            colKeysWithSubtotals.forEach((colItem, j) => {
+              const { key: colKey, isSubtotal: isColSubtotal } = colItem;
               const aggregator = getAggregator(rowKey, colKey);
               const val = aggregator.value();
               const formattedVal = aggregator.format ? aggregator.format(val) : val;
               const clickHandler = getClickHandler(val, rowKey, colKey);
               cells.push(h("td", {
-                class: "pvtVal",
+                class: isColSubtotal ? "pvtVal pvtColSubtotalVal" : "pvtVal",
                 key: `val${i}-${j}`,
+                style: isColSubtotal ? {
+                  fontWeight: "bold",
+                  backgroundColor: "#f0f0f0"
+                } : void 0,
                 onClick: clickHandler || void 0
               }, formattedVal));
             });
@@ -400,14 +539,19 @@ function makeSubtotalRenderer(opts = {}) {
             class: "pvtTotalLabel",
             colSpan: rowAttrs.length + (colAttrs.length === 0 ? 0 : 1)
           }, this.localeStrings.totals));
-          colKeys.forEach((colKey, i) => {
+          colKeysWithSubtotals.forEach((colItem, i) => {
+            const { key: colKey, isSubtotal: isColSubtotal } = colItem;
             const totalAggregator = getAggregator([], colKey);
             const totalVal = totalAggregator.value();
             const formattedTotal = totalAggregator.format ? totalAggregator.format(totalVal) : totalVal;
             const clickHandler = getClickHandler(totalVal, [], colKey);
             cells.push(h("td", {
-              class: "pvtTotal",
+              class: isColSubtotal ? "pvtTotal pvtColSubtotalTotal" : "pvtTotal",
               key: `colTotal${i}`,
+              style: isColSubtotal ? {
+                fontWeight: "bold",
+                backgroundColor: "#e0e0e0"
+              } : void 0,
               onClick: clickHandler || void 0
             }, formattedTotal));
           });

package/dist/vue2.js

@@ -16,28 +16,51 @@ function createSubtotalRenderers(PivotData) {
     "Subtotal Table": makeSubtotalRenderer({ name: "vue-subtotal-table" })
   };
 }
-function generateRowKeysWithSubtotals(rowKeys, depth) {
+function generateRowKeysWithSubtotals(rowKeys, depth, collapsedKeys = /* @__PURE__ */ new Set()) {
   if (depth <= 1) {
     return rowKeys.map((key) => ({ key, isSubtotal: false, level: key.length }));
   }
   const result = [];
+  const addedSubtotals = /* @__PURE__ */ new Set();
   for (let i = 0; i < rowKeys.length; i++) {
     const rowKey = rowKeys[i];
-    const nextRowKey = rowKeys[i + 1];
-    result.push({ key: rowKey, isSubtotal: false, level: rowKey.length });
-    for (let level = depth - 1; level >= 1; level--) {
-      const currentPrefix = rowKey.slice(0, level);
-      const nextPrefix = nextRowKey ? nextRowKey.slice(0, level) : null;
-      const levelChanges = !nextPrefix || JSON.stringify(currentPrefix) !== JSON.stringify(nextPrefix);
-      if (levelChanges) {
-        result.push({
-          key: currentPrefix,
-          isSubtotal: true,
-          level,
-          subtotalLabel: `${currentPrefix[level - 1]} Subtotal`
-        });
+    let isHidden = false;
+    for (let level = 1; level < rowKey.length; level++) {
+      const parentKey = rowKey.slice(0, level);
+      const parentKeyStr = JSON.stringify(parentKey);
+      if (collapsedKeys.has(parentKeyStr)) {
+        isHidden = true;
+        break;
+      }
+    }
+    for (let level = 1; level < rowKey.length; level++) {
+      const subtotalKey = rowKey.slice(0, level);
+      const subtotalKeyStr = JSON.stringify(subtotalKey);
+      if (!addedSubtotals.has(subtotalKeyStr)) {
+        addedSubtotals.add(subtotalKeyStr);
+        let subtotalHidden = false;
+        for (let parentLevel = 1; parentLevel < level; parentLevel++) {
+          const parentKey = subtotalKey.slice(0, parentLevel);
+          if (collapsedKeys.has(JSON.stringify(parentKey))) {
+            subtotalHidden = true;
+            break;
+          }
+        }
+        if (!subtotalHidden) {
+          const isCollapsed = collapsedKeys.has(subtotalKeyStr);
+          result.push({
+            key: subtotalKey,
+            isSubtotal: true,
+            level,
+            subtotalLabel: `${subtotalKey[level - 1]} Subtotal`,
+            isCollapsed
+          });
+        }
       }
     }
+    if (!isHidden) {
+      result.push({ key: rowKey, isSubtotal: false, level: rowKey.length });
+    }
   }
   return result;
 }
@@ -75,8 +98,60 @@ function spanSize(rowItems, i, j) {
   }
   return len;
 }
-function colSpanSize(arr, i, j) {
-  if (i !== 0) {
+function generateColKeysWithSubtotals(colKeys, depth, collapsedKeys = /* @__PURE__ */ new Set()) {
+  if (depth <= 1) {
+    return colKeys.map((key) => ({ key, isSubtotal: false, level: key.length }));
+  }
+  const result = [];
+  const addedSubtotals = /* @__PURE__ */ new Set();
+  for (let i = 0; i < colKeys.length; i++) {
+    const colKey = colKeys[i];
+    let isHidden = false;
+    for (let level = 1; level < colKey.length; level++) {
+      const parentKey = colKey.slice(0, level);
+      const parentKeyStr = JSON.stringify(parentKey);
+      if (collapsedKeys.has(parentKeyStr)) {
+        isHidden = true;
+        break;
+      }
+    }
+    for (let level = 1; level < colKey.length; level++) {
+      const subtotalKey = colKey.slice(0, level);
+      const subtotalKeyStr = JSON.stringify(subtotalKey);
+      if (!addedSubtotals.has(subtotalKeyStr)) {
+        addedSubtotals.add(subtotalKeyStr);
+        let subtotalHidden = false;
+        for (let parentLevel = 1; parentLevel < level; parentLevel++) {
+          const parentKey = subtotalKey.slice(0, parentLevel);
+          if (collapsedKeys.has(JSON.stringify(parentKey))) {
+            subtotalHidden = true;
+            break;
+          }
+        }
+        if (!subtotalHidden) {
+          const isCollapsed = collapsedKeys.has(subtotalKeyStr);
+          result.push({
+            key: subtotalKey,
+            isSubtotal: true,
+            level,
+            subtotalLabel: `${subtotalKey[level - 1]} Subtotal`,
+            isCollapsed
+          });
+        }
+      }
+    }
+    if (!isHidden) {
+      result.push({ key: colKey, isSubtotal: false, level: colKey.length });
+    }
+  }
+  return result;
+}
+function colSpanSizeWithSubtotals(colItems, i, j) {
+  if (colItems[i].isSubtotal) {
+    return 1;
+  }
+  const arr = colItems.map((item) => item.key);
+  if (i !== 0 && !colItems[i - 1].isSubtotal) {
     let asPrevious = true;
     for (let x = 0; x <= j; x++) {
       if (arr[i - 1][x] !== arr[i][x]) {
@@ -90,6 +165,8 @@ function colSpanSize(arr, i, j) {
   }
   let len = 0;
   while (i + len < arr.length) {
+    if (colItems[i + len].isSubtotal)
+      break;
     let same = true;
     for (let x = 0; x <= j; x++) {
       if (arr[i][x] !== arr[i + len][x]) {
@@ -243,7 +320,11 @@ function makeSubtotalRenderer(opts = {}) {
       const colKeys = pivotData.getColKeys();
       const grandTotalAggregator = pivotData.getAggregator([], []);
       const getAggregator = core.createSubtotalAggregatorGetter(pivotData);
-      const rowKeysWithSubtotals = generateRowKeysWithSubtotals(rowKeys, rowAttrs.length);
+      const rowKeysWithSubtotals = generateRowKeysWithSubtotals(rowKeys, rowAttrs.length, this.collapsedRowKeys);
+      const colKeysWithSubtotals = generateColKeysWithSubtotals(colKeys, colAttrs.length, this.collapsedColKeys);
+      const subtotalOpts = this.subtotalOptions;
+      const arrowCollapsed = subtotalOpts.arrowCollapsed || "▶";
+      const arrowExpanded = subtotalOpts.arrowExpanded || "▼";
       const getClickHandler = (value, rowValues, colValues) => {
         if (this.tableOptions && this.tableOptions.clickCallback) {
           const filters = {};
@@ -270,25 +351,62 @@ function makeSubtotalRenderer(opts = {}) {
               attrs: {
                 colSpan: rowAttrs.length,
                 rowSpan: colAttrs.length
-              },
-              style: {
-                backgroundColor: "#f5f5f5"
               }
             }));
           }
           cells.push(h("th", { class: "pvtAxisLabel" }, c));
-          colKeys.forEach((colKey, i) => {
-            const colSpan = colSpanSize(colKeys, i, j);
-            if (colSpan !== -1) {
-              const label = this.applyLabel(colAttrs[j], colKey[j]);
-              cells.push(h("th", {
-                class: "pvtColLabel",
-                key: `colKey${i}-${j}`,
-                attrs: {
-                  colSpan,
-                  rowSpan: j === colAttrs.length - 1 && rowAttrs.length !== 0 ? 2 : 1
+          colKeysWithSubtotals.forEach((colItem, i) => {
+            const { key: colKey, isSubtotal, level } = colItem;
+            if (j < colKey.length) {
+              const colSpan = colSpanSizeWithSubtotals(colKeysWithSubtotals, i, j);
+              if (colSpan !== -1) {
+                const isLastAttrRow = j === colKey.length - 1;
+                if (isSubtotal && isLastAttrRow) {
+                  const keyStr = JSON.stringify(colKey);
+                  const isCollapsed = this.collapsedColKeys.has(keyStr);
+                  const arrow = isCollapsed ? arrowCollapsed : arrowExpanded;
+                  const label = `${colKey[j]} Subtotal`;
+                  cells.push(h("th", {
+                    class: "pvtColLabel pvtColSubtotalLabel",
+                    key: `colKey${i}-${j}`,
+                    attrs: {
+                      colSpan,
+                      rowSpan: colAttrs.length - j + (rowAttrs.length !== 0 ? 1 : 0)
+                    },
+                    style: {
+                      fontWeight: "bold",
+                      backgroundColor: "#f0f0f0"
+                    }
+                  }, [
+                    h("span", {
+                      class: "pvtColCollapseToggle",
+                      style: {
+                        cursor: "pointer",
+                        marginRight: "4px",
+                        userSelect: "none"
+                      },
+                      on: {
+                        click: (e) => {
+                          e.stopPropagation();
+                          this.toggleColCollapse(keyStr);
+                        }
+                      }
+                    }, arrow),
+                    label
+                  ]));
+                } else {
+                  const label = this.applyLabel(colAttrs[j], colKey[j]);
+                  const rowSpan = isLastAttrRow && rowAttrs.length !== 0 ? 2 : 1;
+                  cells.push(h("th", {
+                    class: "pvtColLabel",
+                    key: `colKey${i}-${j}`,
+                    attrs: {
+                      colSpan,
+                      rowSpan
+                    }
+                  }, label));
                 }
-              }, label));
+              }
             }
           });
           if (j === 0 && this.rowTotal) {
@@ -306,6 +424,9 @@ function makeSubtotalRenderer(opts = {}) {
             class: "pvtAxisLabel",
             key: `rowAttr${i}`
           }, r));
+          if (colAttrs.length !== 0) {
+            cells.push(h("th"));
+          }
           if (colAttrs.length === 0 && this.rowTotal) {
             cells.push(h("th", { class: "pvtTotalLabel" }, this.localeStrings.totals));
           }
@@ -319,6 +440,9 @@ function makeSubtotalRenderer(opts = {}) {
           const { key: rowKey, isSubtotal, level, subtotalLabel } = rowItem;
           const cells = [];
           if (isSubtotal) {
+            const keyStr = JSON.stringify(rowKey);
+            const isCollapsed = this.collapsedRowKeys.has(keyStr);
+            const arrow = isCollapsed ? arrowCollapsed : arrowExpanded;
             const subtotalText = subtotalLabel || `${rowKey[rowKey.length - 1]} Subtotal`;
             cells.push(h("th", {
               class: "pvtRowLabel pvtSubtotalLabel",
@@ -329,18 +453,36 @@ function makeSubtotalRenderer(opts = {}) {
                 fontWeight: "bold",
                 backgroundColor: "#f0f0f0"
               }
-            }, subtotalText));
-            colKeys.forEach((colKey, j) => {
+            }, [
+              h("span", {
+                class: "pvtCollapseToggle",
+                style: {
+                  cursor: "pointer",
+                  marginRight: "6px",
+                  userSelect: "none"
+                },
+                on: {
+                  click: (e) => {
+                    e.stopPropagation();
+                    this.toggleRowCollapse(keyStr);
+                  }
+                }
+              }, arrow),
+              subtotalText
+            ]));
+            colKeysWithSubtotals.forEach((colItem, j) => {
+              const { key: colKey, isSubtotal: isColSubtotal } = colItem;
               const aggregator = getAggregator(rowKey, colKey);
               const val = aggregator.value();
               const formattedVal = aggregator.format ? aggregator.format(val) : val;
               const clickHandler = getClickHandler(val, rowKey, colKey);
+              const isDoubleSubtotal = isColSubtotal;
               cells.push(h("td", {
-                class: "pvtVal pvtSubtotalVal",
+                class: isColSubtotal ? "pvtVal pvtSubtotalVal pvtColSubtotalVal" : "pvtVal pvtSubtotalVal",
                 key: `subtotal-val${i}-${j}`,
                 style: {
                   fontWeight: "bold",
-                  backgroundColor: "#f0f0f0"
+                  backgroundColor: isDoubleSubtotal ? "#e0e0e0" : "#f0f0f0"
                 },
                 on: clickHandler ? { click: clickHandler } : {}
               }, formattedVal));
@@ -378,14 +520,19 @@ function makeSubtotalRenderer(opts = {}) {
                 }, label));
               }
             });
-            colKeys.forEach((colKey, j) => {
+            colKeysWithSubtotals.forEach((colItem, j) => {
+              const { key: colKey, isSubtotal: isColSubtotal } = colItem;
               const aggregator = getAggregator(rowKey, colKey);
               const val = aggregator.value();
               const formattedVal = aggregator.format ? aggregator.format(val) : val;
               const clickHandler = getClickHandler(val, rowKey, colKey);
               cells.push(h("td", {
-                class: "pvtVal",
+                class: isColSubtotal ? "pvtVal pvtColSubtotalVal" : "pvtVal",
                 key: `val${i}-${j}`,
+                style: isColSubtotal ? {
+                  fontWeight: "bold",
+                  backgroundColor: "#f0f0f0"
+                } : void 0,
                 on: clickHandler ? { click: clickHandler } : {}
               }, formattedVal));
             });
@@ -410,14 +557,19 @@ function makeSubtotalRenderer(opts = {}) {
               colSpan: rowAttrs.length + (colAttrs.length === 0 ? 0 : 1)
             }
           }, this.localeStrings.totals));
-          colKeys.forEach((colKey, i) => {
+          colKeysWithSubtotals.forEach((colItem, i) => {
+            const { key: colKey, isSubtotal: isColSubtotal } = colItem;
             const totalAggregator = getAggregator([], colKey);
             const totalVal = totalAggregator.value();
             const formattedTotal = totalAggregator.format ? totalAggregator.format(totalVal) : totalVal;
             const clickHandler = getClickHandler(totalVal, [], colKey);
             cells.push(h("td", {
-              class: "pvtTotal",
+              class: isColSubtotal ? "pvtTotal pvtColSubtotalTotal" : "pvtTotal",
               key: `colTotal${i}`,
+              style: isColSubtotal ? {
+                fontWeight: "bold",
+                backgroundColor: "#e0e0e0"
+              } : void 0,
               on: clickHandler ? { click: clickHandler } : {}
             }, formattedTotal));
           });