@canvas-components/pivot-table 0.2.2 → 0.2.3

package/dist/index.cjs

@@ -432,6 +432,101 @@ function resolvePivotIndicatorAggregator(indicator, registry) {
   }
   return aggregator;
 }
+var DATE_PATTERNS = {
+  dateSlash: "YYYY/MM/DD",
+  dateDash: "YYYY-MM-DD",
+  dateFullCN: "YYYY\u5E74M\u6708D\u65E5",
+  time: "HH:mm:ss",
+  timeShort: "HH:mm",
+  datetime: "YYYY/MM/DD HH:mm:ss",
+  datetime12: "YYYY/MM/DD Ah:mm"
+};
+function formatPivotIndicatorValue(value, dataFormat) {
+  if (typeof dataFormat === "object") {
+    if (dataFormat.type === "custom" && dataFormat.pattern) {
+      return utils.formatCustomNumberPattern(value, dataFormat.pattern);
+    }
+    return formatPivotIndicatorValueWithOptions(value, dataFormat);
+  }
+  if (dataFormat === "default" || dataFormat === "text") {
+    return String(value ?? "");
+  }
+  if (dataFormat === "number") {
+    return utils.formatNumberValue(value, {
+      decimalPlaces: "auto",
+      thousandsSeparator: false
+    });
+  }
+  if (dataFormat === "thousands") {
+    return utils.formatNumberValue(value, {
+      decimalPlaces: "auto",
+      thousandsSeparator: true
+    });
+  }
+  if (dataFormat === "decimal") {
+    return utils.formatNumberValue(value, {
+      decimalPlaces: 2,
+      thousandsSeparator: true
+    });
+  }
+  if (dataFormat === "percent" || dataFormat === "percentDecimal") {
+    return utils.formatPercentValue(value, dataFormat === "percentDecimal" ? 2 : 0);
+  }
+  if (dataFormat === "scientific") return utils.formatScientificValue(value);
+  if (dataFormat === "numberToChineseUpper") {
+    return utils.formatChineseNumber(value, "financial") ?? String(value ?? "");
+  }
+  if (dataFormat === "chineseUpperToNumber") {
+    const parsed = utils.parseChineseNumber(value);
+    return parsed == null ? String(value ?? "") : String(parsed);
+  }
+  if (dataFormat === "cny" || dataFormat === "cnyDecimal") {
+    return utils.formatNumberValue(value, {
+      decimalPlaces: dataFormat === "cnyDecimal" ? 2 : 0,
+      thousandsSeparator: true,
+      symbol: "\xA5"
+    });
+  }
+  if (dataFormat === "usd" || dataFormat === "usdDecimal") {
+    return utils.formatNumberValue(value, {
+      decimalPlaces: dataFormat === "usdDecimal" ? 2 : 0,
+      thousandsSeparator: true,
+      symbol: "$"
+    });
+  }
+  const pattern = DATE_PATTERNS[dataFormat];
+  return pattern ? utils.formatDateTimeValue(value, pattern) ?? String(value ?? "") : String(value ?? "");
+}
+function formatPivotIndicatorValueWithOptions(value, dataFormat) {
+  if (dataFormat.pattern && dataFormat.type !== "custom") {
+    const formatted = utils.formatDateTimeValue(value, dataFormat.pattern);
+    if (formatted != null) return formatted;
+  }
+  const decimalPlaces = Math.max(
+    0,
+    Math.min(20, dataFormat.decimalPlaces ?? 2)
+  );
+  if (dataFormat.type === "percent" || dataFormat.type === "percentDecimal") {
+    return utils.formatPercentValue(value, decimalPlaces);
+  }
+  if (dataFormat.type === "scientific") {
+    return utils.formatScientificValue(value, decimalPlaces);
+  }
+  if (dataFormat.type === "cny" || dataFormat.type === "cnyDecimal" || dataFormat.type === "usd" || dataFormat.type === "usdDecimal") {
+    return utils.formatNumberValue(value, {
+      decimalPlaces,
+      thousandsSeparator: dataFormat.useGrouping ?? true,
+      symbol: dataFormat.symbol ?? (dataFormat.type.startsWith("usd") ? "$" : "\xA5")
+    });
+  }
+  if (dataFormat.type === "number" || dataFormat.type === "thousands" || dataFormat.type === "decimal") {
+    return utils.formatNumberValue(value, {
+      decimalPlaces,
+      thousandsSeparator: dataFormat.useGrouping ?? dataFormat.type !== "number"
+    });
+  }
+  return formatPivotIndicatorValue(value, dataFormat.type);
+}
 
 // src/domain/aggregation/aggregate-records.ts
 function aggregatePivotRecords(params) {
@@ -496,7 +591,7 @@ function aggregatePivotRecords(params) {
         recordCount: item.recordIndexes.length,
         rowPathKey: item.rowPathKey,
         columnPathKey: item.columnPathKey
-      }) ?? formatAggregateValue(value, item.indicator.precision),
+      }) ?? (item.indicator.dataFormat ? formatPivotIndicatorValue(value, item.indicator.dataFormat) : formatAggregateValue(value, item.indicator.precision)),
       recordCount: item.recordIndexes.length,
       recordIndexes: item.recordIndexes
     });
@@ -1046,7 +1141,6 @@ function resolveThumbOffset(scroll, maxScroll, track, thumb) {
 // src/domain/layout/pivot-layout.ts
 var DEFAULT_ROW_HEIGHT = 40;
 var DEFAULT_COLUMN_WIDTH = 120;
-var DEFAULT_HEADER_SIZE = 40;
 var DEFAULT_ROW_DIMENSION_WIDTH2 = 140;
 var SCROLLBAR_THICKNESS2 = 10;
 function buildPivotLayoutSnapshot(params) {
@@ -1078,7 +1172,7 @@ function buildPivotLayoutSnapshot(params) {
     options.columns.length + (indicatorLayout === "columns" && hasIndicators ? 1 : 0),
     1
   );
-  const columnHeaderHeight = columnHeaderLevels * DEFAULT_HEADER_SIZE;
+  const columnHeaderHeight = columnHeaderLevels * rowHeight;
   const reportFilterHeight = (options.filterDimensions?.length ?? 0) * rowHeight;
   const tableHeaderHeight = reportFilterHeight + columnHeaderHeight;
   const rawBodyWidth = Math.max(width - rowHeaderWidth, 0);
@@ -1212,6 +1306,7 @@ function buildPivotLayoutSnapshot(params) {
     rowHeaderWidth,
     scrollLeft: scroll.left,
     levels: columnHeaderLevels,
+    headerSize: rowHeight,
     headerTop: reportFilterHeight,
     expandedNodeIds: params.expandedColumnNodeIds
   });
@@ -1612,7 +1707,7 @@ function buildColumnHeaderCells(params) {
           x,
           y: params.headerTop,
           width: columnWidth,
-          height: DEFAULT_HEADER_SIZE * (params.levels - (slot.indicatorKey ? 1 : 0))
+          height: params.headerSize * (params.levels - (slot.indicatorKey ? 1 : 0))
         }
       });
     } else {
@@ -1652,9 +1747,9 @@ function buildColumnHeaderCells(params) {
           ),
           rect: {
             x,
-            y: params.headerTop + level * DEFAULT_HEADER_SIZE,
+            y: params.headerTop + level * params.headerSize,
             width: columnWidth,
-            height: DEFAULT_HEADER_SIZE
+            height: params.headerSize
           }
         });
       });
@@ -1681,9 +1776,9 @@ function buildColumnHeaderCells(params) {
         sortDirection: null,
         rect: {
           x,
-          y: params.headerTop + (params.levels - 1) * DEFAULT_HEADER_SIZE,
+          y: params.headerTop + (params.levels - 1) * params.headerSize,
           width: columnWidth,
-          height: DEFAULT_HEADER_SIZE
+          height: params.headerSize
         }
       });
     }
@@ -2720,6 +2815,15 @@ function resolvePivotSelectionRect(layout, selection) {
   const visibleStartY = Math.max(startY, clipRect.y);
   const visibleEndY = Math.min(endY, clipRect.y + clipRect.height);
   if (visibleStartX >= visibleEndX || visibleStartY >= visibleEndY) return null;
+  const singleCell = kind === "cell" && indexes.startRowIndex === indexes.endRowIndex && indexes.startColumnIndex === indexes.endColumnIndex;
+  if (singleCell) {
+    return {
+      x: startX,
+      y: startY,
+      width: endX - startX,
+      height: endY - startY
+    };
+  }
   return {
     x: visibleStartX,
     y: visibleStartY,
@@ -3272,8 +3376,16 @@ function renderPivotTable(params) {
     );
     layout.columnHeaderCells.forEach(
       (cell) => drawPivotGridRect(context, cell.rect, theme.borderColor, {
-        skipTop: cell.rect.y > 0,
-        skipLeft: true,
+        skipTop: hasColumnHeaderCellAbove(
+          layout.columnHeaderCells,
+          cell,
+          layout.columnHeaderRect.y
+        ),
+        skipLeft: hasColumnHeaderCellLeft(
+          layout.columnHeaderCells,
+          cell,
+          layout.columnHeaderRect.x
+        ),
         skipRight: isSameCoordinate2(
           cell.rect.x + cell.rect.width,
           layout.tableWidth
@@ -3343,10 +3455,12 @@ function renderPivotTable(params) {
     drawPivotResizeGuide(context, params.resizeGuideX, contentHeight);
   }
   context.restore();
-  context.save();
-  clipPivotViewport(context, tableViewportRect);
-  drawPivotViewportRightBorder(context, tableViewportRect, theme.borderColor);
-  context.restore();
+  if (!layout.scrollbar.vertical) {
+    context.save();
+    clipPivotViewport(context, tableViewportRect);
+    drawPivotViewportRightBorder(context, tableViewportRect, theme.borderColor);
+    context.restore();
+  }
   drawPivotViewportBorder(
     context,
     { x: 0, y: 0, width: viewportWidth, height: contentHeight },
@@ -3375,6 +3489,34 @@ function renderPivotTable(params) {
     bodyCellCount: layout.bodyCells.length
   };
 }
+function hasColumnHeaderCellAbove(cells, cell, headerTop) {
+  if (isSameCoordinate2(cell.rect.y, headerTop)) return headerTop > 0;
+  const left = cell.rect.x;
+  const right = left + cell.rect.width;
+  return cells.some((candidate) => {
+    if (candidate === cell) return false;
+    const candidateBottom = candidate.rect.y + candidate.rect.height;
+    if (!isSameCoordinate2(candidateBottom, cell.rect.y)) return false;
+    const candidateLeft = candidate.rect.x;
+    const candidateRight = candidateLeft + candidate.rect.width;
+    return candidateLeft < right && candidateRight > left;
+  });
+}
+function hasColumnHeaderCellLeft(cells, cell, headerLeft) {
+  if (cell.rect.x <= headerLeft + 0.01) {
+    return true;
+  }
+  const top = cell.rect.y;
+  const bottom = top + cell.rect.height;
+  return cells.some((candidate) => {
+    if (candidate === cell) return false;
+    const candidateRight = candidate.rect.x + candidate.rect.width;
+    if (!isSameCoordinate2(candidateRight, cell.rect.x)) return false;
+    const candidateTop = candidate.rect.y;
+    const candidateBottom = candidateTop + candidate.rect.height;
+    return candidateTop < bottom && candidateBottom > top;
+  });
+}
 function resolvePivotViewportWidth(layout) {
   const horizontalRight = layout.scrollbar.horizontal ? layout.scrollbar.horizontal.increaseButton.x + layout.scrollbar.horizontal.increaseButton.width : 0;
   const verticalRight = layout.scrollbar.vertical ? layout.scrollbar.vertical.decreaseButton.x + layout.scrollbar.vertical.decreaseButton.width : 0;
@@ -3677,7 +3819,7 @@ function isSameCoordinate2(first, second) {
   return Math.abs(first - second) < 0.01;
 }
 function resolveBodyDisplayText(cell, indicator) {
-  if (!indicator || indicator.formatter || typeof cell.value !== "number") {
+  if (!indicator || indicator.formatter || indicator.dataFormat || typeof cell.value !== "number") {
     return cell.formattedValue;
   }
   if (indicator.cellType === "percent") {
@@ -3814,10 +3956,18 @@ function drawSortIcon(context, rect, direction, rightPadding) {
 function drawText(context, text, rect, color, padding, align) {
   const availableWidth = Math.max(rect.width - padding * 2, 0);
   const value = truncateText(context, text, availableWidth);
+  context.textBaseline = "alphabetic";
+  const metrics = context.measureText(value);
+  const ascent = metrics.actualBoundingBoxAscent ?? 0;
+  const descent = metrics.actualBoundingBoxDescent ?? 0;
+  const hasGlyphBounds = ascent > 0 || descent > 0;
+  const centerY = rect.y + rect.height / 2;
   context.fillStyle = color;
   context.textAlign = align;
+  context.textBaseline = hasGlyphBounds ? "alphabetic" : "middle";
   const x = align === "right" ? rect.x + rect.width - padding : align === "center" ? rect.x + rect.width / 2 : rect.x + padding;
-  context.fillText(value, x, rect.y + rect.height / 2, availableWidth);
+  const y = hasGlyphBounds ? centerY + (ascent - descent) / 2 : centerY;
+  context.fillText(value, x, y, availableWidth);
 }
 function truncateText(context, text, maxWidth) {
   if (context.measureText(text).width <= maxWidth) return text;
@@ -3865,7 +4015,7 @@ function hitTestPivotLayout(layout, x, y) {
       onSortIcon: false
     };
   }
-  const bodyCell = findLastContaining(layout.bodyCells, x, y);
+  const bodyCell = contains(layout.bodyRect, x, y) ? findLastContaining(layout.bodyCells, x, y) : void 0;
   if (bodyCell) {
     return {
       region: "body",
@@ -3875,7 +4025,7 @@ function hitTestPivotLayout(layout, x, y) {
       onSortIcon: false
     };
   }
-  const rowHeaderCell = findLastContaining(layout.rowHeaderCells, x, y);
+  const rowHeaderCell = contains(layout.rowHeaderRect, x, y) ? findLastContaining(layout.rowHeaderCells, x, y) : void 0;
   if (rowHeaderCell) {
     return {
       region: "rowHeader",
@@ -3885,9 +4035,7 @@ function hitTestPivotLayout(layout, x, y) {
       onSortIcon: isSortIconHit(rowHeaderCell, x)
     };
   }
-  const columnHeaderCell = layout.columnHeaderCells.find(
-    (cell) => contains(cell.rect, x, y)
-  );
+  const columnHeaderCell = contains(layout.columnHeaderRect, x, y) ? layout.columnHeaderCells.find((cell) => contains(cell.rect, x, y)) : void 0;
   if (columnHeaderCell) {
     return {
       region: "columnHeader",
@@ -4403,7 +4551,7 @@ var PivotTable = class {
       }
       if (hit.reportFilterCell) return;
       if (hit.bodyCell) {
-        this.selectCell(toCellAddress(hit.bodyCell), event.shiftKey);
+        this.selectPointerCell(toCellAddress(hit.bodyCell), event.shiftKey);
         return;
       }
       const header = hit.headerCell;
@@ -4505,7 +4653,76 @@ var PivotTable = class {
     });
     __publicField(this, "handleContextMenu", (event) => {
       const hit = this.resolveHit(event);
-      if (!hit?.bodyCell || !this.core || !this.layout) return;
+      if (!hit || !this.core || !this.layout) return;
+      if (hit.reportFilterCell) {
+        const cell = hit.reportFilterCell;
+        event.preventDefault();
+        this.options.ui?.onContextMenuRequest?.({
+          x: event.clientX,
+          y: event.clientY,
+          target: "header",
+          title: cell.label,
+          axis: "filter",
+          onCopy: () => this.copyPivotText(`${cell.label}	${cell.valueLabel}`),
+          onOpenFilter: () => this.openReportFilterPanel(cell),
+          ...this.createContextMenuSettings(),
+          onExportCsv: () => downloadBlob(
+            new Blob([this.exportCsv()], { type: "text/csv;charset=utf-8" }),
+            "pivot-table.csv"
+          ),
+          onExportXlsx: () => downloadBlob(
+            new Blob([toArrayBuffer(this.exportXlsx())], {
+              type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+            }),
+            "pivot-table.xlsx"
+          ),
+          onClose: () => this.options.ui?.onContextMenuRequest?.(null)
+        });
+        return;
+      }
+      if (hit.headerCell) {
+        const header = hit.headerCell;
+        const model2 = this.core.getPivotModel();
+        const node = header.nodeId ? (header.axis === "row" ? model2?.rowNodes : model2?.columnNodes)?.get(
+          header.nodeId
+        ) : void 0;
+        const dimensionKey = header.dimensionKey ?? node?.dimensionKey;
+        event.preventDefault();
+        this.options.ui?.onContextMenuRequest?.({
+          x: event.clientX,
+          y: event.clientY,
+          target: "header",
+          title: header.label,
+          axis: header.axis,
+          nodeKind: node?.kind ?? header.kind,
+          indicatorKey: header.indicatorKey ?? void 0,
+          onCopy: () => this.copyPivotText(header.label),
+          sortDirection: header.sortDirection,
+          onSortAsc: header.sortable && dimensionKey ? () => this.setDimensionSort(header.axis, dimensionKey, "asc") : void 0,
+          onSortDesc: header.sortable && dimensionKey ? () => this.setDimensionSort(header.axis, dimensionKey, "desc") : void 0,
+          onClearSort: header.sortable && dimensionKey ? () => this.setDimensionSort(header.axis, dimensionKey, null) : void 0,
+          onOpenFilter: header.filterable ? () => this.openFilterPanel(hit) : void 0,
+          expanded: header.expandable ? header.expanded : void 0,
+          onExpand: header.expandable && header.nodeId ? () => header.axis === "row" ? this.expandRowNode(header.nodeId) : this.expandColumnNode(header.nodeId) : void 0,
+          onCollapse: header.expandable && header.nodeId ? () => header.axis === "row" ? this.collapseRowNode(header.nodeId) : this.collapseColumnNode(header.nodeId) : void 0,
+          onExpandAll: () => this.expandAll(header.axis),
+          onCollapseAll: () => this.collapseAll(header.axis),
+          ...this.createContextMenuSettings(header.indicatorKey ?? void 0),
+          onExportCsv: () => downloadBlob(
+            new Blob([this.exportCsv()], { type: "text/csv;charset=utf-8" }),
+            "pivot-table.csv"
+          ),
+          onExportXlsx: () => downloadBlob(
+            new Blob([toArrayBuffer(this.exportXlsx())], {
+              type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+            }),
+            "pivot-table.xlsx"
+          ),
+          onClose: () => this.options.ui?.onContextMenuRequest?.(null)
+        });
+        return;
+      }
+      if (!hit.bodyCell) return;
       event.preventDefault();
       const address = toCellAddress(hit.bodyCell);
       const currentRange = resolvePivotSelectionRange(
@@ -4515,7 +4732,7 @@ var PivotTable = class {
       const insideCurrentRange = Boolean(
         currentRange && hit.bodyCell.rowIndex >= currentRange.startRowIndex && hit.bodyCell.rowIndex <= currentRange.endRowIndex && hit.bodyCell.columnIndex >= currentRange.startColumnIndex && hit.bodyCell.columnIndex <= currentRange.endColumnIndex
       );
-      if (!insideCurrentRange) this.selectCell(address);
+      if (!insideCurrentRange) this.selectPointerCell(address);
       const selectionRange = resolvePivotSelectionRange(
         this.layout,
         this.core.getSelection()
@@ -4525,15 +4742,28 @@ var PivotTable = class {
         columnPathKey: hit.bodyCell.columnPathKey,
         indicatorKey: hit.bodyCell.indicatorKey
       });
+      const model = this.core.getPivotModel();
+      const rowNode = hit.bodyCell.rowNodeId ? model?.rowNodes.get(hit.bodyCell.rowNodeId) : void 0;
+      const summary = rowNode?.kind === "subtotal" || rowNode?.kind === "grandTotal";
+      const indicator = this.options.indicators.find(
+        (item) => item.key === hit.bodyCell?.indicatorKey
+      );
+      const summaryAggregator = typeof indicator?.aggregator === "string" && isBuiltInPivotAggregator(indicator.aggregator) ? indicator.aggregator : "sum";
       this.options.ui?.onContextMenuRequest?.({
         x: event.clientX,
         y: event.clientY,
+        target: summary ? "summary" : "body",
+        title: summary ? rowNode.label : void 0,
+        nodeKind: rowNode?.kind,
+        indicatorKey: hit.bodyCell.indicatorKey,
         recordCount: records.length,
+        summaryAggregator: summary ? summaryAggregator : void 0,
+        summaryPrecision: summary ? indicator?.precision : void 0,
         onCopy: () => {
-          const model = this.core?.getPivotModel();
-          const text = model ? createPivotRangeSelectionText({
+          const model2 = this.core?.getPivotModel();
+          const text = model2 ? createPivotRangeSelectionText({
             layout: this.layout,
-            model,
+            model: model2,
             startRowIndex: hit.bodyCell.rowIndex,
             endRowIndex: hit.bodyCell.rowIndex,
             startColumnIndex: hit.bodyCell.columnIndex,
@@ -4558,11 +4788,11 @@ var PivotTable = class {
           columnCount: this.layout.columnSlots.length
         },
         onCopyCustomSelection: (range) => {
-          const model = this.core?.getPivotModel();
-          if (!model || !this.layout) return;
+          const model2 = this.core?.getPivotModel();
+          if (!model2 || !this.layout) return;
           const text = createPivotRangeSelectionText({
             layout: this.layout,
-            model,
+            model: model2,
             startRowIndex: range.startRow - 1,
             endRowIndex: range.endRow - 1,
             startColumnIndex: range.startColumn - 1,
@@ -4572,6 +4802,7 @@ var PivotTable = class {
             this.copyPivotText(text);
           }
         },
+        ...this.createContextMenuSettings(hit.bodyCell.indicatorKey),
         onExportCsv: () => downloadBlob(
           new Blob([this.exportCsv()], { type: "text/csv;charset=utf-8" }),
           "pivot-table.csv"
@@ -4587,9 +4818,9 @@ var PivotTable = class {
     });
     __publicField(this, "handlePointerDown", (event) => {
       if (!this.layout || !this.host) return;
-      this.stopWheelScrollSmoothing();
       const scrollbarHit = this.resolveScrollbarHit(event);
       if (scrollbarHit && event.button === 0) {
+        this.stopWheelScrollSmoothing();
         this.beginScrollbarInteraction(event, scrollbarHit);
         return;
       }
@@ -4600,7 +4831,7 @@ var PivotTable = class {
         if (cellHit?.bodyCell) {
           const address = toCellAddress(cellHit.bodyCell);
           this.host.root.focus({ preventScroll: true });
-          const selection = this.selectCell(address, event.shiftKey);
+          const selection = this.selectPointerCell(address, event.shiftKey);
           const text = this.resolveBodyText(cellHit.bodyCell);
           const textOriginX = this.resolveBodyTextOriginX(cellHit.bodyCell, text);
           const anchorOffset = text ? resolvePivotTextOffset({
@@ -4686,8 +4917,12 @@ var PivotTable = class {
           if (selection) this.setSelection(selection);
           this.host.root.setPointerCapture(event.pointerId);
         }
+        if (cellHit?.headerCell || cellHit?.reportFilterCell) {
+          event.preventDefault();
+        }
         return;
       }
+      this.stopWheelScrollSmoothing();
       event.preventDefault();
       const startWidth = hit.kind === "rowDimension" ? this.layout.rowDimensionWidths[hit.index] ?? 140 : this.layout.columnWidths[hit.index] ?? this.layout.columnWidth;
       this.resizeSession = {
@@ -4877,9 +5112,16 @@ var PivotTable = class {
   }
   /** 选中指定值单元格。 */
   selectCell(address, extend = false) {
+    return this.commitCellSelection(address, extend, true);
+  }
+  /** 鼠标命中的单元格已在视口内，选中时不再校正滚动位置。 */
+  selectPointerCell(address, extend = false) {
+    return this.commitCellSelection(address, extend, false);
+  }
+  commitCellSelection(address, extend, reveal) {
     const selection = this.core?.selectCell(address, extend) ?? null;
     if (selection) {
-      this.scrollToCell(address);
+      if (reveal) this.scrollToCell(address);
       this.scheduleRender();
     }
     return selection;
@@ -5037,6 +5279,27 @@ var PivotTable = class {
       this.advanceWheelScrollSmoothing(nextTime);
     });
   }
+  createContextMenuSettings(indicatorKey) {
+    const indicator = indicatorKey ? this.options.indicators.find((item) => item.key === indicatorKey) : void 0;
+    return {
+      density: resolvePivotTableDensity(this.options.rowHeight),
+      onChangeDensity: (density) => {
+        this.updateOptions({
+          ...this.options,
+          rowHeight: resolvePivotTableDensityRowHeight(density)
+        });
+      },
+      dataFormat: indicator?.dataFormat ?? "default",
+      onChangeDataFormat: indicator ? (dataFormat) => {
+        this.updateOptions({
+          ...this.options,
+          indicators: this.options.indicators.map(
+            (item) => item.key === indicator.key ? { ...item, dataFormat } : item
+          )
+        });
+      } : void 0
+    };
+  }
   updateTooltip(hit, event) {
     if (!this.host) return;
     const cell = hit?.bodyCell ?? hit?.headerCell;
@@ -5242,7 +5505,7 @@ var PivotTable = class {
     const indicator = this.options.indicators.find(
       (item) => item.key === cell.indicatorKey
     );
-    if (!indicator || indicator.formatter || typeof cell.value !== "number")
+    if (!indicator || indicator.formatter || indicator.dataFormat || typeof cell.value !== "number")
       return cell.formattedValue;
     if (indicator.cellType === "percent")
       return `${(cell.value * 100).toFixed(indicator.precision ?? 2)}%`;
@@ -5604,6 +5867,9 @@ function toCellAddress(cell) {
     indicatorKey: cell.indicatorKey
   };
 }
+function isBuiltInPivotAggregator(value) {
+  return ["sum", "avg", "count", "distinctCount", "min", "max"].includes(value);
+}
 function isSameAddress(left, right) {
   return Boolean(
     left === right || left && right && left.rowNodeId === right.rowNodeId && left.columnNodeId === right.columnNodeId && left.indicatorKey === right.indicatorKey
@@ -5616,6 +5882,20 @@ function resolveNavigationDirection(key) {
   if (key === "ArrowRight") return { row: 0, column: 1 };
   return null;
 }
+function resolvePivotTableDensity(rowHeight) {
+  if (rowHeight == null) return "auto";
+  if (rowHeight <= 26) return "ultra-compact";
+  if (rowHeight <= 32) return "compact";
+  if (rowHeight >= 56) return "comfortable";
+  return "middle";
+}
+function resolvePivotTableDensityRowHeight(density) {
+  if (density === "comfortable") return 56;
+  if (density === "middle") return 48;
+  if (density === "compact") return 32;
+  if (density === "ultra-compact") return 26;
+  return void 0;
+}
 function resolveAdjacentAddress(layout, address, direction) {
   const indexes = resolveAddressIndexes3(layout, address);
   if (!indexes) return null;