@lumeer/pivot 0.0.2 → 0.0.5

package/fesm2022/lumeer-pivot.mjs

@@ -1,10 +1,11 @@
 import * as i0 from '@angular/core';
 import { Directive, Pipe, Injectable, EventEmitter, TemplateRef, Component, ChangeDetectionStrategy, Input, Output, ContentChild, NgModule } from '@angular/core';
-import { cleanQueryAttribute, DataAggregator, UnknownConstraint, ConstraintType, attributesResourcesAttributesMap, aggregateDataResources, AttributesResourceType, dataAggregationConstraint, DataAggregationType, PercentageConstraint, aggregateDataValues, isValueAggregation, NumberConstraint } from '@lumeer/data-filters';
+import { cleanQueryAttribute, DataAggregator, UnknownConstraint, ConstraintType, attributesResourcesAttributesMap, aggregateDataResources, AttributesResourceType, dataAggregationConstraint, DataAggregationType, PercentageConstraint, aggregateDataValues, isValueAggregation, NumberConstraint, generateId, LanguageTag } from '@lumeer/data-filters';
 import { deepObjectsEquals, hex2rgba, isArray, isNotNullOrUndefined, flattenMatrix, uniqueValues, flattenValues, shadeColor, deepObjectCopy, isNullOrUndefined, isNumeric, toNumber } from '@lumeer/utils';
 import { BehaviorSubject, filter, throttleTime, asyncScheduler, map, tap } from 'rxjs';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import { ScrollingModule } from '@angular/cdk/scrolling';
 
 var LmrPivotConfigVersion;
 (function (LmrPivotConfigVersion) {
@@ -140,7 +141,8 @@ class PivotDataConverter {
         const pivotConstraint = aggregatorAttribute.data && aggregatorAttribute.data;
         const overrideConstraint = pivotConstraint && this.transform?.checkValidConstraintOverride?.(constraint, pivotConstraint);
         const finalConstraint = overrideConstraint || constraint || new UnknownConstraint();
-        return this.formatDataValue(finalConstraint.createDataValue(value, constraintData), finalConstraint);
+        const serializedValue = (constraint || new UnknownConstraint()).createDataValue(value, constraintData).serialize();
+        return this.formatDataValue(finalConstraint.createDataValue(serializedValue, constraintData), finalConstraint);
     }
     formatDataValue(dataValue, constraint) {
         switch (constraint.type) {
@@ -226,14 +228,14 @@ class PivotDataConverter {
             const filteredValueAttributes = (config.valueAttributes || []).filter(valueAttr => !mergedValueAttributes.some(merAttr => deepObjectsEquals(valueAttr, merAttr)));
             mergedValueAttributes.push(...filteredValueAttributes);
             if (!additionalData) {
+                const rowSticky = this.mapStickyValues((config.rowAttributes || []).map(attr => attr.sticky));
+                const columnSticky = this.mapStickyValues((config.columnAttributes || []).map(attr => attr.sticky));
                 additionalData = {
-                    rowShowSums: (config.rowAttributes || []).map(attr => attr.showSums),
-                    rowSticky: this.mapStickyValues((config.rowAttributes || []).map(attr => !!attr.sticky)),
-                    rowSorts: (config.rowAttributes || []).map(attr => attr.sort),
+                    rowsConfig: (config.rowAttributes || []).map((attr, index) => ({ showSums: attr.showSums, sort: attr.sort, expressions: attr.expressions, sticky: rowSticky[index] })),
+                    columnsConfig: (config.columnAttributes || []).map((attr, index) => ({ showSums: attr.showSums, sort: attr.sort, expressions: attr.expressions, sticky: columnSticky[index] })),
+                    rowShowHeaderAttributes: (config.rowAttributes || []).map(attr => attr.showHeader),
                     rowAttributes: (config.rowAttributes || []).map(attr => this.pivotAttributeAttribute(attr)),
-                    columnShowSums: (config.columnAttributes || []).map(attr => attr.showSums),
-                    columnSticky: this.mapStickyValues((config.columnAttributes || []).map(attr => !!attr.sticky)),
-                    columnSorts: (config.columnAttributes || []).map(attr => attr.sort),
+                    columnShowHeaderAttributes: (config.columnAttributes || []).map(attr => false),
                     columnAttributes: (config.columnAttributes || []).map(attr => this.pivotAttributeAttribute(attr)),
                 };
             }
@@ -333,19 +335,17 @@ class PivotDataConverter {
         }, { titles: [], constraints: [], headers: [], values: [], dataResources: [], valueTypes: [], aggregations: [] });
         return {
             columnHeaders: data.headers,
+            columnHeaderAttributes: [],
             rowHeaders: [],
+            rowHeaderAttributes: [],
             valueTitles: data.titles,
             values: [data.values],
             dataResources: [data.dataResources],
             valuesConstraints: data.constraints,
             valueTypes: data.valueTypes,
             valueAggregations: data.aggregations,
-            rowShowSums: [],
-            rowSticky: [],
-            rowSorts: [],
-            columnShowSums: [],
-            columnSticky: [],
-            columnSorts: [],
+            rowsConfig: [],
+            columnsConfig: [],
             hasAdditionalColumnLevel: true,
         };
     }
@@ -360,8 +360,12 @@ class PivotDataConverter {
     }
     convertAggregatedData(aggregatedData, valueAttributes, pivotColors, additionalData) {
         const rowData = this.convertMapToPivotDataHeader(aggregatedData.map, aggregatedData.rowLevels, pivotColors.rows, pivotColors.values, additionalData.rowAttributes);
+        const rowHeaderAttributes = (additionalData.rowAttributes || [])
+            .map((attribute, index) => additionalData.rowShowHeaderAttributes?.[index] ? ({ title: attribute.name, color: pivotColors.rows?.[index] }) : undefined);
         const { titles: valueTitles, constraints: valuesConstraints } = this.createValueTitles(valueAttributes);
         const columnData = this.convertMapToPivotDataHeader(aggregatedData.rowLevels > 0 ? aggregatedData.columnsMap : aggregatedData.map, aggregatedData.columnLevels, pivotColors.columns, pivotColors.values, additionalData.columnAttributes, valueTitles);
+        const columnHeaderAttributes = (additionalData.columnAttributes || [])
+            .map((attribute, index) => additionalData.columnShowHeaderAttributes?.[index] ? ({ title: attribute.name, color: pivotColors.columns?.[index] }) : undefined);
         const values = this.initMatrix(rowData.maxIndex + 1, columnData.maxIndex + 1);
         const dataResources = this.initMatrix(rowData.maxIndex + 1, columnData.maxIndex + 1);
         if ((valueAttributes || []).length > 0) {
@@ -372,7 +376,9 @@ class PivotDataConverter {
             (aggregatedData.columnLevels > 0 && valueTitles.length > 1);
         return {
             rowHeaders: rowData.headers,
+            rowHeaderAttributes,
             columnHeaders: columnData.headers,
+            columnHeaderAttributes,
             valueTitles,
             values,
             dataResources,
@@ -499,7 +505,7 @@ class PivotDataConverter {
         }, { titles: [], constraints: [] });
     }
     createValueTitle(aggregation, attributeName) {
-        const valueAggregationTitle = this.transform?.translateAggregation?.(aggregation) || aggregation.toString();
+        const valueAggregationTitle = this.transform?.formatAggregation?.(aggregation) || aggregation.toString();
         return `${valueAggregationTitle} ${attributeName || ''}`.trim();
     }
     initMatrix(rows, columns) {
@@ -621,12 +627,13 @@ class PivotTableConverter {
     static groupDataClass = 'pivot-data-group-cell';
     static rowHeaderClass = 'pivot-row-header-cell';
     static rowGroupHeaderClass = 'pivot-row-group-header-cell';
+    static rowAttributeHeaderClass = 'pivot-row-attribute-header-cell';
     static columnHeaderClass = 'pivot-column-header-cell';
     static columnGroupHeaderClass = 'pivot-column-group-header-cell';
     groupColors = [COLOR_GRAY100, COLOR_GRAY200, COLOR_GRAY300, COLOR_GRAY400, COLOR_GRAY500];
     percentageConstraint = new PercentageConstraint({ decimals: 2 });
     data;
-    strings;
+    transform;
     values;
     dataResources;
     constraintData;
@@ -636,11 +643,12 @@ class PivotTableConverter {
     columnsTransformationArray;
     valueTypeInfo;
     nonStickyRowIndex;
-    createTables(pivotData, strings) {
+    nonStickyColumnIndex;
+    createTables(pivotData, transform) {
         if (!pivotData) {
             return [{ cells: [] }];
         }
-        this.strings = strings;
+        this.transform = transform;
         this.constraintData = pivotData.constraintData;
         return (pivotData.data || []).map(d => {
             if (this.dataAreEmpty(d)) {
@@ -657,11 +665,14 @@ class PivotTableConverter {
         const numberOfSums = Math.max(1, (data.valueTitles || []).length);
         this.valueTypeInfo = getValuesTypeInfo(data.values, data.valueTypes, numberOfSums);
         this.data = preparePivotData(data, this.constraintData, this.valueTypeInfo);
-        this.nonStickyRowIndex = this.data.rowSticky?.findIndex(sticky => !sticky) || 0;
         this.values = data.values || [];
         this.dataResources = data.dataResources || [];
-        this.rowLevels = (data.rowShowSums || []).length;
-        this.columnLevels = (data.columnShowSums || []).length + (data.hasAdditionalColumnLevel ? 1 : 0);
+        this.rowLevels = (data.rowsConfig || []).length;
+        this.columnLevels = (data.columnsConfig || []).length + (data.hasAdditionalColumnLevel ? 1 : 0);
+        const rowAllSticky = this.data.rowsConfig?.length && this.data.rowsConfig.every(config => !!config?.sticky);
+        this.nonStickyRowIndex = Math.max(rowAllSticky ? this.rowLevels : (this.data.rowsConfig?.findIndex(config => !config?.sticky) || 0), 0);
+        const columnAllSticky = this.data.columnsConfig?.length && this.data.columnsConfig.every(config => !!config?.sticky);
+        this.nonStickyColumnIndex = Math.max(columnAllSticky ? this.columnLevels : (this.data.columnsConfig?.findIndex(config => !config?.sticky) || 0), 0);
         const hasValue = (data.valueTitles || []).length > 0;
         if ((this.data.rowHeaders || []).length > 0) {
             this.rowsTransformationArray = createTransformationMap(this.data.rowHeaders, this.rowShowSums, this.columnLevels, 1);
@@ -677,10 +688,10 @@ class PivotTableConverter {
         }
     }
     get rowShowSums() {
-        return this.data.rowShowSums;
+        return (this.data.rowsConfig || []).map(config => config.showSums);
     }
     get columnShowSums() {
-        return this.data.columnShowSums;
+        return (this.data.columnsConfig || []).map(config => config.showSums);
     }
     transformData() {
         const cells = this.initCells();
@@ -699,7 +710,7 @@ class PivotTableConverter {
         for (const header of headers) {
             const rowSpan = getDirectHeaderChildCount(header, level, showSums);
             cells[currentIndex][level] = {
-                value: header.title,
+                value: this.formatRowHeader(header.title, level),
                 cssClass: PivotTableConverter.rowHeaderClass,
                 isHeader: true,
                 stickyStart: this.isRowLevelSticky(level),
@@ -716,41 +727,19 @@ class PivotTableConverter {
                 this.fillCellsForRow(cells, header.targetIndex);
             }
             currentIndex += getHeaderChildCount(header, level, showSums);
+            const expressions = header.expressions || [];
+            for (let i = 0; i < expressions.length; i++) {
+                const expressionIndex = currentIndex - (expressions.length - i);
+                const background = this.getSummaryBackground(level);
+                this.splitRowGroupHeader(cells, level, expressionIndex, background, expressions[i].title);
+                this.fillCellsForExpressionRow(cells, expressions[i], expressionIndex, background);
+            }
         }
         if (showSums[level]) {
+            const { title, summary } = this.formatSummaryHeader(parentHeader, level);
             const background = this.getSummaryBackground(level);
-            const summary = level === 0 ? this.strings.summaryString : this.strings.headerSummaryString;
             const columnIndex = Math.max(level - 1, 0);
-            let colSpan = this.rowLevels - columnIndex;
-            const stickyStart = this.isRowLevelSticky(columnIndex);
-            // split row group header cell because of correct sticky scroll
-            if (stickyStart && this.nonStickyRowIndex > 0 && colSpan > 1) {
-                const newColspan = this.nonStickyRowIndex - columnIndex;
-                cells[currentIndex][this.nonStickyRowIndex] = {
-                    value: undefined,
-                    constraint: undefined,
-                    label: undefined,
-                    cssClass: PivotTableConverter.rowGroupHeaderClass,
-                    isHeader: true,
-                    rowSpan: 1,
-                    colSpan: colSpan - newColspan,
-                    background,
-                    summary: undefined,
-                };
-                colSpan = newColspan;
-            }
-            cells[currentIndex][columnIndex] = {
-                value: parentHeader?.title,
-                constraint: parentHeader?.constraint,
-                label: parentHeader?.attributeName,
-                cssClass: PivotTableConverter.rowGroupHeaderClass,
-                isHeader: true,
-                stickyStart,
-                rowSpan: 1,
-                colSpan,
-                background,
-                summary,
-            };
+            this.splitRowGroupHeader(cells, columnIndex, currentIndex, background, summary, title, parentHeader?.constraint, parentHeader?.attributeName);
             const rowIndexes = getTargetIndexesForHeaders(headers);
             const transformedRowIndexes = rowIndexes
                 .map(v => this.rowsTransformationArray[v])
@@ -759,6 +748,50 @@ class PivotTableConverter {
             this.fillCellsForGroupedRow(cells, rowIndexes, currentIndex, background);
         }
     }
+    splitRowGroupHeader(cells, columnIndex, currentIndex, background, summary, title, constraint, label) {
+        let colSpan = this.rowLevels - columnIndex;
+        const stickyStart = this.isRowLevelSticky(columnIndex);
+        // split row group header cell because of correct sticky scroll
+        if (stickyStart && this.nonStickyRowIndex > 0 && this.nonStickyRowIndex < this.rowLevels && colSpan > 1) {
+            const newColspan = this.nonStickyRowIndex - columnIndex;
+            cells[currentIndex][this.nonStickyRowIndex] = {
+                value: undefined,
+                constraint: undefined,
+                label: undefined,
+                cssClass: PivotTableConverter.rowGroupHeaderClass,
+                isHeader: true,
+                rowSpan: 1,
+                colSpan: colSpan - newColspan,
+                background,
+                summary: undefined,
+            };
+            colSpan = newColspan;
+        }
+        cells[currentIndex][columnIndex] = {
+            value: title,
+            constraint,
+            label,
+            cssClass: PivotTableConverter.rowGroupHeaderClass,
+            isHeader: true,
+            stickyStart,
+            rowSpan: 1,
+            colSpan,
+            background,
+            summary,
+        };
+    }
+    formatSummaryHeader(header, level) {
+        return this.transform.formatSummaryHeader?.(header, level) || {
+            title: header?.title,
+            summary: '',
+        };
+    }
+    formatRowHeader(title, level) {
+        return this.transform?.formatRowHeader?.(title, level) || title;
+    }
+    formatColumnHeader(title, level) {
+        return this.transform?.formatColumnHeader?.(title, level) || title;
+    }
     getHeaderBackground(header, level) {
         if (header?.color) {
             return shadeColor(header.color, this.getLevelOpacity(level));
@@ -769,11 +802,11 @@ class PivotTableConverter {
         return Math.min(80, 50 + level * 5) / 100;
     }
     isRowLevelSticky(level) {
-        return this.data?.rowSticky?.[level];
+        return this.data?.rowsConfig?.[level]?.sticky;
     }
     isColumnLevelSticky(level) {
-        const maxLevel = Math.min(level, (this.data?.columnSticky?.length ?? Number.MAX_SAFE_INTEGER) - 1);
-        return this.data?.columnSticky?.[maxLevel];
+        const maxLevel = Math.min(level, (this.data?.columnsConfig?.length ?? Number.MAX_SAFE_INTEGER) - 1);
+        return this.data?.columnsConfig?.[maxLevel]?.sticky;
     }
     getSummaryBackground(level) {
         const index = Math.min(level, this.groupColors.length - 1);
@@ -870,6 +903,58 @@ class PivotTableConverter {
             }
         }
     }
+    fillCellsForExpressionRow(cells, expression, rowIndexInCells, background) {
+        for (let column = 0; column < this.columnsTransformationArray.length; column++) {
+            const columnIndexInCells = this.columnsTransformationArray[column];
+            if (isNotNullOrUndefined(columnIndexInCells)) {
+                const { value, dataResources } = this.evaluateExpression(expression, column);
+                const valueIndex = column % this.data.valueTitles.length;
+                const formattedValue = this.formatValueByConstraint(value, valueIndex);
+                cells[rowIndexInCells][columnIndexInCells] = {
+                    value: String(formattedValue),
+                    dataResources,
+                    colSpan: 1,
+                    rowSpan: 1,
+                    cssClass: PivotTableConverter.groupDataClass,
+                    isHeader: false,
+                    background,
+                };
+            }
+        }
+    }
+    evaluateExpression(expression, column) {
+        return (expression.operands || []).reduce((result, operand, index) => {
+            const { value, dataResources } = this.evaluateOperand(operand, column);
+            result.dataResources.push(...dataResources);
+            switch (expression.operation) {
+                case "add":
+                    result.value += value;
+                    break;
+                case "subtract":
+                    result.value = (index === 0 ? value : result.value - value);
+                    break;
+                case 'multiply':
+                    result.value = index === 0 ? value : result.value * value;
+                    break;
+                case 'divide':
+                    result.value = index === 0 ? value : value ? result.value / value : result.value;
+                    break;
+            }
+            return result;
+        }, { value: 0, dataResources: [] });
+    }
+    evaluateOperand(operand, column) {
+        switch (operand.type) {
+            case "expression": return this.evaluateExpression(operand, column);
+            case "value": return { value: operand.value, dataResources: [] };
+            case "header": {
+                const rows = getTargetIndexesForHeaders(operand.headers);
+                const { values, dataResources } = this.getGroupedValuesForRowsAndCols(rows, [column]);
+                const { value } = this.aggregateDataValues(values, [column]);
+                return { value, dataResources };
+            }
+        }
+    }
     getGroupedValuesForRowsAndCols(rows, columns) {
         const values = [];
         const dataResources = [];
@@ -898,7 +983,7 @@ class PivotTableConverter {
         for (const header of headers) {
             const colSpan = getDirectHeaderChildCount(header, level, showSums, numberOfSums);
             cells[level][currentIndex] = {
-                value: header.title,
+                value: this.formatColumnHeader(header.title, level),
                 cssClass: PivotTableConverter.columnHeaderClass,
                 isHeader: true,
                 rowSpan: 1,
@@ -918,12 +1003,12 @@ class PivotTableConverter {
         }
         if (showSums[level]) {
             const background = this.getSummaryBackground(level);
-            const summary = level === 0 ? this.strings.summaryString : this.strings.headerSummaryString;
+            const { title, summary } = this.formatSummaryHeader(parentHeader, level);
             const numberOfValues = this.data.valueTitles.length;
             const rowIndex = Math.max(level - 1, 0);
             const shouldAddValueHeaders = numberOfValues > 1;
             cells[rowIndex][currentIndex] = {
-                value: parentHeader?.title,
+                value: title,
                 constraint: parentHeader?.constraint,
                 label: parentHeader?.attributeName,
                 cssClass: PivotTableConverter.columnGroupHeaderClass,
@@ -982,14 +1067,17 @@ class PivotTableConverter {
         }
     }
     aggregateAndFormatDataValues(values, rows, columns) {
+        const { value, aggregation } = this.aggregateDataValues(values, columns);
+        return aggregation === DataAggregationType.Join ? value : this.formatGroupedValueByValueType(value, rows, columns);
+    }
+    aggregateDataValues(values, columns) {
         const aggregation = this.aggregationByColumns(columns);
         if (aggregation === DataAggregationType.Join) {
             const valueIndex = this.getValueIndexForColumns(columns);
             const constraint = this.data.valuesConstraints?.[valueIndex] || this.valueTypeInfo[valueIndex]?.defaultConstraint;
-            return aggregateDataValues(aggregation, values, constraint, false, this.constraintData);
+            return { value: aggregateDataValues(aggregation, values, constraint, false, this.constraintData), aggregation };
         }
-        const aggregatedValue = aggregateDataValues(aggregation, values);
-        return this.formatGroupedValueByValueType(aggregatedValue, rows, columns);
+        return { value: aggregateDataValues(aggregation, values), aggregation };
     }
     aggregationByColumns(columns) {
         const valueIndex = columns[0] % this.data.valueTitles.length;
@@ -1104,17 +1192,44 @@ class PivotTableConverter {
             }
         }
         if (this.rowLevels > 0 && this.columnLevels > 0) {
-            for (let i = 0; i < this.columnLevels; i++) {
-                for (let j = 0; j < this.rowLevels; j++) {
-                    matrix[i][j] = {
-                        value: '',
-                        cssClass: PivotTableConverter.emptyClass,
+            for (let j = 0; j < this.rowLevels; j++) {
+                const rowHeaderAttribute = this.data.rowHeaderAttributes[j];
+                if (rowHeaderAttribute) {
+                    const titleColSpan = this.nonStickyColumnIndex || this.columnLevels;
+                    matrix[0][j] = {
+                        value: rowHeaderAttribute.title,
+                        cssClass: PivotTableConverter.rowAttributeHeaderClass,
+                        isHeader: true,
                         rowSpan: 1,
-                        colSpan: 1,
+                        colSpan: titleColSpan,
+                        stickyTop: this.isColumnLevelSticky(0),
                         stickyStart: this.isRowLevelSticky(j),
-                        stickyTop: this.isColumnLevelSticky(i),
-                        isHeader: false,
+                        background: rowHeaderAttribute.color,
                     };
+                    if (this.columnLevels - titleColSpan > 0) {
+                        matrix[this.nonStickyColumnIndex][j] = {
+                            value: '',
+                            cssClass: PivotTableConverter.rowAttributeHeaderClass,
+                            isHeader: true,
+                            rowSpan: 1,
+                            colSpan: this.columnLevels - titleColSpan,
+                            background: rowHeaderAttribute.color,
+                            stickyStart: this.isRowLevelSticky(j),
+                        };
+                    }
+                }
+                else {
+                    for (let i = 0; i < this.columnLevels; i++) {
+                        matrix[i][j] = {
+                            value: '',
+                            cssClass: PivotTableConverter.emptyClass,
+                            rowSpan: 1,
+                            colSpan: 1,
+                            stickyStart: this.isRowLevelSticky(j),
+                            stickyTop: this.isColumnLevelSticky(i),
+                            isHeader: false,
+                        };
+                    }
                 }
             }
         }
@@ -1137,7 +1252,66 @@ class PivotTableConverter {
 function preparePivotData(data, constraintData, valueTypeInfo) {
     const numberOfSums = Math.max(1, (data.valueTitles || []).length);
     const values = computeValuesByValueType(data.values, data.valueTypes, numberOfSums, valueTypeInfo);
-    return sortPivotData({ ...data, values }, constraintData);
+    const sorted = sortPivotData({ ...data, values }, constraintData);
+    return fillExpressionsToData(sorted);
+}
+function fillExpressionsToData(data) {
+    return {
+        ...data,
+        rowHeaders: fillExpressionsToHeaders(data.rowHeaders, data.rowsConfig, 0),
+        columnHeaders: fillExpressionsToHeaders(data.columnHeaders, data.columnsConfig, 0),
+    };
+}
+function fillExpressionsToHeaders(headers, configs, index) {
+    const expressions = configs?.[index]?.expressions || [];
+    const headersCopy = [...(headers || [])];
+    for (const expression of expressions) {
+        const dataHeaderExpression = extendPivotExpression(expression, headers);
+        if (dataHeaderExpression.lastHeaderIndex >= 0) {
+            const lastHeaderIndex = dataHeaderExpression.lastHeaderIndex;
+            const newHeader = { ...headersCopy[lastHeaderIndex], expressions: [...(headersCopy[lastHeaderIndex].expressions || []), dataHeaderExpression] };
+            headersCopy.splice(lastHeaderIndex, 1, newHeader);
+        }
+    }
+    if (configs?.[index + 1]) {
+        for (let i = 0; i < headersCopy.length; i++) {
+            headersCopy.splice(i, 1, { ...headersCopy[i], children: fillExpressionsToHeaders(headersCopy[i].children, configs, index + 1) });
+        }
+    }
+    return headersCopy;
+}
+function extendPivotExpression(expression, headers) {
+    const dataHeaderOperands = [];
+    let lastHeaderIndex = -1;
+    function traverse(operands) {
+        for (const operand of operands) {
+            if (operand.type === 'header') {
+                const indexes = getOperandIndexesInHeaders(operand, headers);
+                lastHeaderIndex = Math.max(lastHeaderIndex, ...indexes);
+                const operandHeaders = indexes.map(index => headers[index]);
+                dataHeaderOperands.push({ ...operand, headers: operandHeaders });
+            }
+            else if (operand.type === 'expression') {
+                traverse(operand.operands);
+            }
+            else {
+                dataHeaderOperands.push(operand);
+            }
+        }
+    }
+    traverse(expression.operands);
+    return { ...expression, lastHeaderIndex, operands: dataHeaderOperands };
+}
+function getOperandIndexesInHeaders(operand, headers) {
+    return (headers || []).reduce((indexes, header, index) => {
+        if (operandContainsHeader(operand, header)) {
+            indexes.push(index);
+        }
+        return indexes;
+    }, []);
+}
+function operandContainsHeader(operand, header) {
+    return header.title.match(new RegExp(operand.value))?.length > 0;
 }
 function computeValuesByValueType(values, valueTypes, numValues, valueTypeInfo) {
     const rowsIndexes = [...Array(values.length).keys()];
@@ -1239,6 +1413,7 @@ function iterateThroughTransformationMap(headers, additionalNum, array, level, s
         }
         else if (isNotNullOrUndefined(header.targetIndex)) {
             array[header.targetIndex] = i + additional;
+            additional += (header.expressions || []).length;
         }
     }
 }
@@ -1261,11 +1436,12 @@ function getTargetIndexesForHeader(pivotDataHeader) {
 function getHeadersChildCount(headers, showSums, numberOfSums = 1) {
     return (headers || []).reduce((sum, header) => sum + getHeaderChildCount(header, 0, showSums, numberOfSums), showSums[0] ? numberOfSums : 0);
 }
-function getHeaderChildCount(pivotDataHeader, level, showSums, numberOfSums = 1, includeChild = true) {
+function getHeaderChildCount(pivotDataHeader, level, showSums, numberOfSums = 1) {
+    const numExpressions = (pivotDataHeader.expressions || []).length;
     if (pivotDataHeader.children) {
-        return pivotDataHeader.children.reduce((sum, header) => sum + getHeaderChildCount(header, level + 1, showSums, numberOfSums, includeChild), showSums[level + 1] ? numberOfSums : 0);
+        return pivotDataHeader.children.reduce((sum, header) => sum + getHeaderChildCount(header, level + 1, showSums, numberOfSums), (showSums[level + 1] ? numberOfSums : 0) + numExpressions);
     }
-    return includeChild ? 1 : 0;
+    return 1 + numExpressions;
 }
 function getDirectHeaderChildCount(pivotDataHeader, level, showSums, numberOfSums = 1) {
     if (pivotDataHeader.children) {
@@ -1274,10 +1450,12 @@ function getDirectHeaderChildCount(pivotDataHeader, level, showSums, numberOfSum
     return 1;
 }
 function sortPivotData(data, constraintData) {
+    const rowSorts = (data.rowsConfig || []).map(config => config.sort);
+    const columnSorts = (data.columnsConfig || []).map(config => config.sort);
     return {
         ...data,
-        rowHeaders: sortPivotRowDataHeaders(data.rowHeaders, data.rowSorts, data, constraintData),
-        columnHeaders: sortPivotColumnDataHeaders(data.columnHeaders, data.columnSorts, data, constraintData),
+        rowHeaders: sortPivotRowDataHeaders(data.rowHeaders, rowSorts, data, constraintData),
+        columnHeaders: sortPivotColumnDataHeaders(data.columnHeaders, columnSorts, data, constraintData),
     };
 }
 function sortPivotRowDataHeaders(rowHeaders, rowSorts, pivotData, constraintData) {
@@ -1535,9 +1713,11 @@ class LmrPivotTableComponent {
     constraintData;
     config;
     transform;
-    strings;
+    emptyTablesTemplateInput;
+    tableCellTemplateInput;
     cellClick = new EventEmitter();
     pivotDataChange = new EventEmitter();
+    pivotTablesChange = new EventEmitter();
     emptyTablesTemplate;
     tableCellTemplate;
     pivotTransformer = new PivotDataConverter();
@@ -1548,7 +1728,7 @@ class LmrPivotTableComponent {
     ngOnInit() {
         const observable = this.dataSubject.pipe(filter(data => !!data));
         this.pivotData$ = observable.pipe(throttleTime(200, asyncScheduler, { trailing: true, leading: true }), map(data => this.handleData(data)), tap(data => this.pivotDataChange.emit(data)));
-        this.pivotTables$ = this.pivotData$.pipe(map(data => this.pivotTableConverter.createTables(data, this.strings)));
+        this.pivotTables$ = this.pivotData$.pipe(map(data => this.pivotTableConverter.createTables(data, this.transform)), tap(tables => this.pivotTablesChange.emit(tables)));
     }
     handleData(data) {
         return this.pivotTransformer.createData(data.config, data.transform, data.collections, data.linkTypes, data.data, data.query, data.constraintData);
@@ -1565,11 +1745,11 @@ class LmrPivotTableComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LmrPivotTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LmrPivotTableComponent, selector: "lmr-pivot-table", inputs: { collections: "collections", data: "data", linkTypes: "linkTypes", query: "query", constraintData: "constraintData", config: "config", transform: "transform", strings: "strings" }, outputs: { cellClick: "cellClick", pivotDataChange: "pivotDataChange" }, queries: [{ propertyName: "emptyTablesTemplate", first: true, predicate: LmrEmptyTablesTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "tableCellTemplate", first: true, predicate: LmrTableCellTemplateDirective, descendants: true, read: TemplateRef }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"{pivotTables: pivotTables$ | async, pivotData: pivotData$ | async} as data\">\n  <ng-container *ngIf=\"data.pivotTables?.length && !(data.pivotData | pivotDataEmpty)\">\n    <table *ngFor=\"let pivotTable of data.pivotTables; let first\"\n           class=\"table table-without-padding table-borderless table-md\"\n           [class.mt-4]=\"!first\">\n      <tr *ngFor=\"let rowCells of pivotTable.cells; let rowIndex = index\">\n\n        <ng-container *ngFor=\"let cell of rowCells; let cellIndex = index\">\n          <td *ngIf=\"cell && {hasValue: cell | pivotTableCellHasValue} as cellData\"\n              class=\"cell {{cell.constraint ? (cell.constraint.type | lowercase) : ''}} text-truncate\"\n              [style.max-width.px]=\"300\"\n              [class.sticky-start]=\"cell.stickyStart\"\n              [class.sticky-top]=\"cell.stickyTop\"\n              [rowSpan]=\"cell.rowSpan\"\n              [colSpan]=\"cell.colSpan\"\n              [style.top.px]=\"cell.stickyTop ? (rowIndex * 40) : undefined\"\n              [style.left.px]=\"cell.stickyStart ? (cellIndex * 150) : undefined\"\n              [ngClass]=\"cell.cssClass\"\n              [style.background]=\"cell.background\"\n              [style.color]=\"cell.background && (cell.background | contrastColor)\">\n            <ng-container *ngIf=\"cell.summary\">\n              <div class=\"d-flex align-items-center h-100\">\n                <span class=\"summary\" [class.me-2]=\"cellData.hasValue\">{{cell.summary}}</span>\n                <ng-container *ngIf=\"cellData.hasValue\">\n                  <ng-template #defaultTableCellTemplate>\n                  <span class=\"flex-grow-1 h-100 text-truncate d-inline-block\">\n                    {{ cell.value }}\n                  </span>\n                  </ng-template>\n\n                  <ng-template\n                    [ngTemplateOutlet]=\"tableCellTemplate || defaultTableCellTemplate\"\n                    [ngTemplateOutletContext]=\"{ value: cell.value, cell: cell }\">\n                  </ng-template>\n                </ng-container>\n              </div>\n            </ng-container>\n            <ng-container *ngIf=\"!cell.summary\">\n              <ng-container *ngIf=\"cellData.hasValue\">\n                <ng-template #defaultTableCellTemplate>\n                  <span class=\"d-inline-block\">\n                    {{ cell.value }}\n                  </span>\n                </ng-template>\n\n                <ng-template\n                  [ngTemplateOutlet]=\"tableCellTemplate || defaultTableCellTemplate\"\n                  [ngTemplateOutletContext]=\"{ value: cell.value, cell: cell }\">\n                </ng-template>\n              </ng-container>\n              <ng-container *ngIf=\"!cellData.hasValue\">&nbsp;</ng-container>\n            </ng-container>\n          </td>\n        </ng-container>\n      </tr>\n    </table>\n  </ng-container>\n\n  <ng-container *ngIf=\"!data.pivotTables?.length || (data.pivotData | pivotDataEmpty)\">\n    <ng-template #defaultEmptyTablesTemplate>\n      <div>&nbsp;</div>\n    </ng-template>\n\n    <ng-template\n      [ngTemplateOutlet]=\"emptyTablesTemplate || defaultEmptyTablesTemplate\"\n      [ngTemplateOutletContext]=\"{  }\">\n    </ng-template>\n  </ng-container>\n</ng-container>\n", styles: [".table{border-spacing:0;border-collapse:separate}.pivot-data-cell,.pivot-data-group-cell{text-align:right}.pivot-column-header-cell,.pivot-row-header-cell,.pivot-data-group-cell,.pivot-row-group-header-cell,.pivot-column-group-header-cell{font-weight:700;border:1px #f8f9fa solid}.pivot-row-header-cell.sticky-start,.pivot-row-group-header-cell.sticky-start,.pivot-empty-cell.sticky-start{position:sticky;width:150px;min-width:150px;max-width:150px!important;z-index:9}.pivot-column-header-cell.sticky-top,.pivot-column-group-header-cell.sticky-top,.pivot-empty-cell.sticky-top{position:sticky;z-index:10}.pivot-empty-cell{background:white;border:1px white solid}.pivot-empty-cell.sticky-top{z-index:11}.cell.color{padding:0!important;height:30px}.cell.color .summary{padding-left:.5rem}data-input-preview.clickable-cell{cursor:pointer}data-input-preview.clickable-cell:hover{text-decoration:underline}.data-input{min-height:30px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: PivotDataEmptyPipe, name: "pivotDataEmpty" }, { kind: "pipe", type: PivotTableCellHasValuePipe, name: "pivotTableCellHasValue" }, { kind: "pipe", type: ContrastColorPipe, name: "contrastColor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LmrPivotTableComponent, selector: "lmr-pivot-table", inputs: { collections: "collections", data: "data", linkTypes: "linkTypes", query: "query", constraintData: "constraintData", config: "config", transform: "transform", emptyTablesTemplateInput: "emptyTablesTemplateInput", tableCellTemplateInput: "tableCellTemplateInput" }, outputs: { cellClick: "cellClick", pivotDataChange: "pivotDataChange", pivotTablesChange: "pivotTablesChange" }, queries: [{ propertyName: "emptyTablesTemplate", first: true, predicate: LmrEmptyTablesTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "tableCellTemplate", first: true, predicate: LmrTableCellTemplateDirective, descendants: true, read: TemplateRef }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"{pivotTables: pivotTables$ | async, pivotData: pivotData$ | async} as data\">\n  <ng-container *ngIf=\"data.pivotTables?.length && !(data.pivotData | pivotDataEmpty)\">\n    <table *ngFor=\"let pivotTable of data.pivotTables; let first\"\n           class=\"table table-without-padding table-borderless table-md\"\n           [class.mt-4]=\"!first\">\n      <tr *ngFor=\"let rowCells of pivotTable.cells; let rowIndex = index\">\n\n        <ng-container *ngFor=\"let cell of rowCells; let cellIndex = index\">\n          <td *ngIf=\"cell && {hasValue: cell | pivotTableCellHasValue} as cellData\"\n              class=\"cell {{cell.constraint ? (cell.constraint.type | lowercase) : ''}} text-truncate\"\n              [style.max-width.px]=\"300\"\n              [class.sticky-start]=\"cell.stickyStart\"\n              [class.sticky-top]=\"cell.stickyTop\"\n              [rowSpan]=\"cell.rowSpan\"\n              [colSpan]=\"cell.colSpan\"\n              [style.top.px]=\"cell.stickyTop ? (rowIndex * 40) : undefined\"\n              [style.left.px]=\"cell.stickyStart ? (cellIndex * 150) : undefined\"\n              [ngClass]=\"cell.cssClass\"\n              [style.background]=\"cell.background\"\n              [style.color]=\"cell.background && (cell.background | contrastColor)\">\n            <ng-container *ngIf=\"cell.summary\">\n              <ng-container *ngIf=\"cellData.hasValue\">\n                <div class=\"d-flex align-items-center h-100\">\n                  <span class=\"summary me-2\">{{cell.summary}}</span>\n                  <ng-template #defaultTableCellTemplate>\n                    <span class=\"flex-grow-1 h-100 text-truncate d-inline-block\">\n                      {{ cell.value }}\n                    </span>\n                  </ng-template>\n\n                  <ng-template\n                    [ngTemplateOutlet]=\"tableCellTemplate || tableCellTemplateInput || defaultTableCellTemplate\"\n                    [ngTemplateOutletContext]=\"{ value: cell.value, cell: cell }\">\n                  </ng-template>\n                </div>\n              </ng-container>\n              <ng-container *ngIf=\"!cellData.hasValue\">\n                <span class=\"d-inline-block summary\">{{cell.summary}}</span>\n              </ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"!cell.summary\">\n              <ng-container *ngIf=\"cellData.hasValue\">\n                <ng-template #defaultTableCellTemplate>\n                  <span class=\"d-inline-block\">\n                    {{ cell.value }}\n                  </span>\n                </ng-template>\n\n                <ng-template\n                  [ngTemplateOutlet]=\"tableCellTemplate || tableCellTemplateInput || defaultTableCellTemplate\"\n                  [ngTemplateOutletContext]=\"{ value: cell.value, cell: cell }\">\n                </ng-template>\n              </ng-container>\n              <ng-container *ngIf=\"!cellData.hasValue\">&nbsp;</ng-container>\n            </ng-container>\n          </td>\n        </ng-container>\n      </tr>\n    </table>\n  </ng-container>\n\n  <ng-container *ngIf=\"!data.pivotTables?.length || (data.pivotData | pivotDataEmpty)\">\n    <ng-template #defaultEmptyTablesTemplate>\n      <div>&nbsp;</div>\n    </ng-template>\n\n    <ng-template\n      [ngTemplateOutlet]=\"emptyTablesTemplate || emptyTablesTemplateInput || defaultEmptyTablesTemplate\"\n      [ngTemplateOutletContext]=\"{  }\">\n    </ng-template>\n  </ng-container>\n</ng-container>\n", styles: [".table{border-spacing:0;border-collapse:separate}.pivot-data-cell,.pivot-data-group-cell,.pivot-column-header-cell,.pivot-column-group-header-cell{text-align:right}.pivot-column-header-cell,.pivot-row-attribute-header-cell,.pivot-row-header-cell,.pivot-data-group-cell,.pivot-row-group-header-cell,.pivot-column-group-header-cell{font-weight:700;border:1px #f8f9fa solid}.pivot-row-header-cell.sticky-start,.pivot-row-group-header-cell.sticky-start,.pivot-empty-cell.sticky-start{position:sticky;width:150px;min-width:150px;max-width:150px!important;z-index:9}.pivot-column-header-cell.sticky-top,.pivot-row-attribute-header-cell.sticky-top,.pivot-column-group-header-cell.sticky-top,.pivot-empty-cell.sticky-top{position:sticky;z-index:10}.pivot-row-attribute-header-cell.sticky-top,.pivot-row-attribute-header-cell.sticky-start{position:sticky;z-index:11}.pivot-empty-cell{background:white;border:1px white solid}.pivot-empty-cell.sticky-top{z-index:11}.cell.color{padding:0!important;height:30px}.cell.color .summary{padding-left:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: PivotDataEmptyPipe, name: "pivotDataEmpty" }, { kind: "pipe", type: PivotTableCellHasValuePipe, name: "pivotTableCellHasValue" }, { kind: "pipe", type: ContrastColorPipe, name: "contrastColor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LmrPivotTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lmr-pivot-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{pivotTables: pivotTables$ | async, pivotData: pivotData$ | async} as data\">\n  <ng-container *ngIf=\"data.pivotTables?.length && !(data.pivotData | pivotDataEmpty)\">\n    <table *ngFor=\"let pivotTable of data.pivotTables; let first\"\n           class=\"table table-without-padding table-borderless table-md\"\n           [class.mt-4]=\"!first\">\n      <tr *ngFor=\"let rowCells of pivotTable.cells; let rowIndex = index\">\n\n        <ng-container *ngFor=\"let cell of rowCells; let cellIndex = index\">\n          <td *ngIf=\"cell && {hasValue: cell | pivotTableCellHasValue} as cellData\"\n              class=\"cell {{cell.constraint ? (cell.constraint.type | lowercase) : ''}} text-truncate\"\n              [style.max-width.px]=\"300\"\n              [class.sticky-start]=\"cell.stickyStart\"\n              [class.sticky-top]=\"cell.stickyTop\"\n              [rowSpan]=\"cell.rowSpan\"\n              [colSpan]=\"cell.colSpan\"\n              [style.top.px]=\"cell.stickyTop ? (rowIndex * 40) : undefined\"\n              [style.left.px]=\"cell.stickyStart ? (cellIndex * 150) : undefined\"\n              [ngClass]=\"cell.cssClass\"\n              [style.background]=\"cell.background\"\n              [style.color]=\"cell.background && (cell.background | contrastColor)\">\n            <ng-container *ngIf=\"cell.summary\">\n              <div class=\"d-flex align-items-center h-100\">\n                <span class=\"summary\" [class.me-2]=\"cellData.hasValue\">{{cell.summary}}</span>\n                <ng-container *ngIf=\"cellData.hasValue\">\n                  <ng-template #defaultTableCellTemplate>\n                  <span class=\"flex-grow-1 h-100 text-truncate d-inline-block\">\n                    {{ cell.value }}\n                  </span>\n                  </ng-template>\n\n                  <ng-template\n                    [ngTemplateOutlet]=\"tableCellTemplate || defaultTableCellTemplate\"\n                    [ngTemplateOutletContext]=\"{ value: cell.value, cell: cell }\">\n                  </ng-template>\n                </ng-container>\n              </div>\n            </ng-container>\n            <ng-container *ngIf=\"!cell.summary\">\n              <ng-container *ngIf=\"cellData.hasValue\">\n                <ng-template #defaultTableCellTemplate>\n                  <span class=\"d-inline-block\">\n                    {{ cell.value }}\n                  </span>\n                </ng-template>\n\n                <ng-template\n                  [ngTemplateOutlet]=\"tableCellTemplate || defaultTableCellTemplate\"\n                  [ngTemplateOutletContext]=\"{ value: cell.value, cell: cell }\">\n                </ng-template>\n              </ng-container>\n              <ng-container *ngIf=\"!cellData.hasValue\">&nbsp;</ng-container>\n            </ng-container>\n          </td>\n        </ng-container>\n      </tr>\n    </table>\n  </ng-container>\n\n  <ng-container *ngIf=\"!data.pivotTables?.length || (data.pivotData | pivotDataEmpty)\">\n    <ng-template #defaultEmptyTablesTemplate>\n      <div>&nbsp;</div>\n    </ng-template>\n\n    <ng-template\n      [ngTemplateOutlet]=\"emptyTablesTemplate || defaultEmptyTablesTemplate\"\n      [ngTemplateOutletContext]=\"{  }\">\n    </ng-template>\n  </ng-container>\n</ng-container>\n", styles: [".table{border-spacing:0;border-collapse:separate}.pivot-data-cell,.pivot-data-group-cell{text-align:right}.pivot-column-header-cell,.pivot-row-header-cell,.pivot-data-group-cell,.pivot-row-group-header-cell,.pivot-column-group-header-cell{font-weight:700;border:1px #f8f9fa solid}.pivot-row-header-cell.sticky-start,.pivot-row-group-header-cell.sticky-start,.pivot-empty-cell.sticky-start{position:sticky;width:150px;min-width:150px;max-width:150px!important;z-index:9}.pivot-column-header-cell.sticky-top,.pivot-column-group-header-cell.sticky-top,.pivot-empty-cell.sticky-top{position:sticky;z-index:10}.pivot-empty-cell{background:white;border:1px white solid}.pivot-empty-cell.sticky-top{z-index:11}.cell.color{padding:0!important;height:30px}.cell.color .summary{padding-left:.5rem}data-input-preview.clickable-cell{cursor:pointer}data-input-preview.clickable-cell:hover{text-decoration:underline}.data-input{min-height:30px}\n"] }]
+            args: [{ selector: 'lmr-pivot-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{pivotTables: pivotTables$ | async, pivotData: pivotData$ | async} as data\">\n  <ng-container *ngIf=\"data.pivotTables?.length && !(data.pivotData | pivotDataEmpty)\">\n    <table *ngFor=\"let pivotTable of data.pivotTables; let first\"\n           class=\"table table-without-padding table-borderless table-md\"\n           [class.mt-4]=\"!first\">\n      <tr *ngFor=\"let rowCells of pivotTable.cells; let rowIndex = index\">\n\n        <ng-container *ngFor=\"let cell of rowCells; let cellIndex = index\">\n          <td *ngIf=\"cell && {hasValue: cell | pivotTableCellHasValue} as cellData\"\n              class=\"cell {{cell.constraint ? (cell.constraint.type | lowercase) : ''}} text-truncate\"\n              [style.max-width.px]=\"300\"\n              [class.sticky-start]=\"cell.stickyStart\"\n              [class.sticky-top]=\"cell.stickyTop\"\n              [rowSpan]=\"cell.rowSpan\"\n              [colSpan]=\"cell.colSpan\"\n              [style.top.px]=\"cell.stickyTop ? (rowIndex * 40) : undefined\"\n              [style.left.px]=\"cell.stickyStart ? (cellIndex * 150) : undefined\"\n              [ngClass]=\"cell.cssClass\"\n              [style.background]=\"cell.background\"\n              [style.color]=\"cell.background && (cell.background | contrastColor)\">\n            <ng-container *ngIf=\"cell.summary\">\n              <ng-container *ngIf=\"cellData.hasValue\">\n                <div class=\"d-flex align-items-center h-100\">\n                  <span class=\"summary me-2\">{{cell.summary}}</span>\n                  <ng-template #defaultTableCellTemplate>\n                    <span class=\"flex-grow-1 h-100 text-truncate d-inline-block\">\n                      {{ cell.value }}\n                    </span>\n                  </ng-template>\n\n                  <ng-template\n                    [ngTemplateOutlet]=\"tableCellTemplate || tableCellTemplateInput || defaultTableCellTemplate\"\n                    [ngTemplateOutletContext]=\"{ value: cell.value, cell: cell }\">\n                  </ng-template>\n                </div>\n              </ng-container>\n              <ng-container *ngIf=\"!cellData.hasValue\">\n                <span class=\"d-inline-block summary\">{{cell.summary}}</span>\n              </ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"!cell.summary\">\n              <ng-container *ngIf=\"cellData.hasValue\">\n                <ng-template #defaultTableCellTemplate>\n                  <span class=\"d-inline-block\">\n                    {{ cell.value }}\n                  </span>\n                </ng-template>\n\n                <ng-template\n                  [ngTemplateOutlet]=\"tableCellTemplate || tableCellTemplateInput || defaultTableCellTemplate\"\n                  [ngTemplateOutletContext]=\"{ value: cell.value, cell: cell }\">\n                </ng-template>\n              </ng-container>\n              <ng-container *ngIf=\"!cellData.hasValue\">&nbsp;</ng-container>\n            </ng-container>\n          </td>\n        </ng-container>\n      </tr>\n    </table>\n  </ng-container>\n\n  <ng-container *ngIf=\"!data.pivotTables?.length || (data.pivotData | pivotDataEmpty)\">\n    <ng-template #defaultEmptyTablesTemplate>\n      <div>&nbsp;</div>\n    </ng-template>\n\n    <ng-template\n      [ngTemplateOutlet]=\"emptyTablesTemplate || emptyTablesTemplateInput || defaultEmptyTablesTemplate\"\n      [ngTemplateOutletContext]=\"{  }\">\n    </ng-template>\n  </ng-container>\n</ng-container>\n", styles: [".table{border-spacing:0;border-collapse:separate}.pivot-data-cell,.pivot-data-group-cell,.pivot-column-header-cell,.pivot-column-group-header-cell{text-align:right}.pivot-column-header-cell,.pivot-row-attribute-header-cell,.pivot-row-header-cell,.pivot-data-group-cell,.pivot-row-group-header-cell,.pivot-column-group-header-cell{font-weight:700;border:1px #f8f9fa solid}.pivot-row-header-cell.sticky-start,.pivot-row-group-header-cell.sticky-start,.pivot-empty-cell.sticky-start{position:sticky;width:150px;min-width:150px;max-width:150px!important;z-index:9}.pivot-column-header-cell.sticky-top,.pivot-row-attribute-header-cell.sticky-top,.pivot-column-group-header-cell.sticky-top,.pivot-empty-cell.sticky-top{position:sticky;z-index:10}.pivot-row-attribute-header-cell.sticky-top,.pivot-row-attribute-header-cell.sticky-start{position:sticky;z-index:11}.pivot-empty-cell{background:white;border:1px white solid}.pivot-empty-cell.sticky-top{z-index:11}.cell.color{padding:0!important;height:30px}.cell.color .summary{padding-left:.5rem}\n"] }]
         }], propDecorators: { collections: [{
                 type: Input
             }], data: [{
@@ -1584,12 +1764,109 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], transform: [{
                 type: Input
-            }], strings: [{
+            }], emptyTablesTemplateInput: [{
+                type: Input
+            }], tableCellTemplateInput: [{
                 type: Input
             }], cellClick: [{
                 type: Output
             }], pivotDataChange: [{
                 type: Output
+            }], pivotTablesChange: [{
+                type: Output
+            }], emptyTablesTemplate: [{
+                type: ContentChild,
+                args: [LmrEmptyTablesTemplateDirective, { read: TemplateRef }]
+            }], tableCellTemplate: [{
+                type: ContentChild,
+                args: [LmrTableCellTemplateDirective, { read: TemplateRef }]
+            }] } });
+
+class LmrSimplePivotTableComponent {
+    rows;
+    attributes;
+    color;
+    config;
+    transform;
+    locale;
+    cellClick = new EventEmitter();
+    pivotDataChange = new EventEmitter();
+    pivotTablesChange = new EventEmitter();
+    emptyTablesTemplate;
+    tableCellTemplate;
+    collectionId = generateId();
+    query = { stems: [{ collectionId: this.collectionId }] };
+    collection = this.createCollection();
+    pivotConfig = this.createConfig();
+    data = this.createRows();
+    constraintData;
+    ngOnChanges(changes) {
+        if (changes['rows']) {
+            this.data = this.createRows();
+        }
+        if (changes['attributes'] || changes['color']) {
+            this.collection = this.createCollection();
+        }
+        if (changes['config']) {
+            this.pivotConfig = this.createConfig();
+        }
+        this.constraintData = {
+            locale: this.locale || LanguageTag.USA,
+        };
+    }
+    createCollection() {
+        return {
+            id: this.collectionId,
+            attributes: (this.attributes || []),
+            color: this.color,
+        };
+    }
+    createConfig() {
+        return {
+            stemsConfigs: [{
+                    stem: this.query.stems[0],
+                    rowAttributes: (this.config?.rowAttributes || []).map(attribute => ({ ...attribute, resourceId: this.collectionId, resourceIndex: 0, resourceType: AttributesResourceType.Collection })),
+                    columnAttributes: (this.config?.columnAttributes || []).map(attribute => ({ ...attribute, resourceId: this.collectionId, resourceIndex: 0, resourceType: AttributesResourceType.Collection })),
+                    valueAttributes: (this.config?.valueAttributes || []).map(attribute => ({ ...attribute, resourceId: this.collectionId, resourceIndex: 0, resourceType: AttributesResourceType.Collection }))
+                }]
+        };
+    }
+    createRows() {
+        const documents = (this.rows || []).map((row, index) => ({ id: index.toString(), collectionId: this.collection.id, data: row }));
+        return ({
+            uniqueDocuments: documents,
+            uniqueLinkInstances: [],
+            dataByStems: [{
+                    stem: this.query.stems[0],
+                    linkInstances: [],
+                    documents
+                }]
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LmrSimplePivotTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LmrSimplePivotTableComponent, selector: "lmr-simple-pivot-table", inputs: { rows: "rows", attributes: "attributes", color: "color", config: "config", transform: "transform", locale: "locale" }, outputs: { cellClick: "cellClick", pivotDataChange: "pivotDataChange", pivotTablesChange: "pivotTablesChange" }, queries: [{ propertyName: "emptyTablesTemplate", first: true, predicate: LmrEmptyTablesTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "tableCellTemplate", first: true, predicate: LmrTableCellTemplateDirective, descendants: true, read: TemplateRef }], usesOnChanges: true, ngImport: i0, template: "<lmr-pivot-table [transform]=\"transform\"\n                 [data]=\"data\"\n                 [config]=\"pivotConfig\"\n                 [query]=\"query\"\n                 [constraintData]=\"constraintData\"\n                 [collections]=\"[collection]\"\n                 [emptyTablesTemplateInput]=\"emptyTablesTemplate\"\n                 [tableCellTemplateInput]=\"tableCellTemplate\"\n                 (pivotDataChange)=\"pivotDataChange.emit($event)\"\n                 (pivotTablesChange)=\"pivotTablesChange.emit($event)\">\n</lmr-pivot-table>\n", dependencies: [{ kind: "component", type: LmrPivotTableComponent, selector: "lmr-pivot-table", inputs: ["collections", "data", "linkTypes", "query", "constraintData", "config", "transform", "emptyTablesTemplateInput", "tableCellTemplateInput"], outputs: ["cellClick", "pivotDataChange", "pivotTablesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LmrSimplePivotTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lmr-simple-pivot-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<lmr-pivot-table [transform]=\"transform\"\n                 [data]=\"data\"\n                 [config]=\"pivotConfig\"\n                 [query]=\"query\"\n                 [constraintData]=\"constraintData\"\n                 [collections]=\"[collection]\"\n                 [emptyTablesTemplateInput]=\"emptyTablesTemplate\"\n                 [tableCellTemplateInput]=\"tableCellTemplate\"\n                 (pivotDataChange)=\"pivotDataChange.emit($event)\"\n                 (pivotTablesChange)=\"pivotTablesChange.emit($event)\">\n</lmr-pivot-table>\n" }]
+        }], propDecorators: { rows: [{
+                type: Input
+            }], attributes: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], transform: [{
+                type: Input
+            }], locale: [{
+                type: Input
+            }], cellClick: [{
+                type: Output
+            }], pivotDataChange: [{
+                type: Output
+            }], pivotTablesChange: [{
+                type: Output
             }], emptyTablesTemplate: [{
                 type: ContentChild,
                 args: [LmrEmptyTablesTemplateDirective, { read: TemplateRef }]
@@ -1601,20 +1878,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 class LmrPivotTableModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LmrPivotTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: LmrPivotTableModule, declarations: [LmrPivotTableComponent,
+            LmrSimplePivotTableComponent,
             PivotDataEmptyPipe,
             PivotTableCellHasValuePipe,
             ContrastColorPipe,
             LmrEmptyTablesTemplateDirective,
-            LmrTableCellTemplateDirective], imports: [CommonModule], exports: [LmrPivotTableComponent,
+            LmrTableCellTemplateDirective], imports: [CommonModule,
+            ScrollingModule], exports: [LmrPivotTableComponent,
+            LmrSimplePivotTableComponent,
             LmrEmptyTablesTemplateDirective,
             LmrTableCellTemplateDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LmrPivotTableModule, imports: [CommonModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LmrPivotTableModule, imports: [CommonModule,
+            ScrollingModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LmrPivotTableModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
                         LmrPivotTableComponent,
+                        LmrSimplePivotTableComponent,
                         PivotDataEmptyPipe,
                         PivotTableCellHasValuePipe,
                         ContrastColorPipe,
@@ -1623,9 +1905,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     ],
                     imports: [
                         CommonModule,
+                        ScrollingModule,
                     ],
                     exports: [
                         LmrPivotTableComponent,
+                        LmrSimplePivotTableComponent,
                         LmrEmptyTablesTemplateDirective,
                         LmrTableCellTemplateDirective,
                     ]
@@ -1640,5 +1924,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { LmrEmptyTablesTemplateDirective, LmrPivotConfigVersion, LmrPivotTableComponent, LmrPivotTableModule, LmrPivotValueType, LmrTableCellTemplateDirective, contrastColor, createDefaultPivotConfig, createDefaultPivotStemConfig, isPivotConfigChanged, pivotAttributesAreSame, pivotConfigIsEmpty, pivotStemConfigIsEmpty };
+export { LmrEmptyTablesTemplateDirective, LmrPivotConfigVersion, LmrPivotTableComponent, LmrPivotTableModule, LmrPivotValueType, LmrSimplePivotTableComponent, LmrTableCellTemplateDirective, contrastColor, createDefaultPivotConfig, createDefaultPivotStemConfig, isPivotConfigChanged, pivotAttributesAreSame, pivotConfigIsEmpty, pivotStemConfigIsEmpty };
 //# sourceMappingURL=lumeer-pivot.mjs.map