@lumeer/pivot 0.0.5 → 0.0.7

package/fesm2022/lumeer-pivot.mjs

@@ -1,7 +1,7 @@
 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, generateId, LanguageTag } from '@lumeer/data-filters';
-import { deepObjectsEquals, hex2rgba, isArray, isNotNullOrUndefined, flattenMatrix, uniqueValues, flattenValues, shadeColor, deepObjectCopy, isNullOrUndefined, isNumeric, toNumber } from '@lumeer/utils';
+import { deepObjectsEquals, hex2rgba, isArray, isNotNullOrUndefined, flattenMatrix, uniqueValues, flattenValues, createRange, 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';
@@ -53,10 +53,10 @@ function pivotAttributesAreSame(a1, a2) {
     return deepObjectsEquals(cleanQueryAttribute(a1), cleanQueryAttribute(a2));
 }
 function isPivotConfigChanged(viewConfig, currentConfig) {
-    if (!!viewConfig.mergeTables !== !!currentConfig.mergeTables && (currentConfig.stemsConfigs || []).length > 1) {
+    if (!!viewConfig?.mergeTables !== !!currentConfig?.mergeTables && (currentConfig?.stemsConfigs || []).length > 1) {
         return true;
     }
-    return pivotStemConfigsHasChanged(viewConfig.stemsConfigs || [], currentConfig.stemsConfigs || []);
+    return pivotStemConfigsHasChanged(viewConfig?.stemsConfigs || [], currentConfig?.stemsConfigs || []);
 }
 function pivotStemConfigsHasChanged(s1, s2) {
     if (s1.length !== s2.length) {
@@ -65,10 +65,13 @@ function pivotStemConfigsHasChanged(s1, s2) {
     return s1.some((stemConfig, index) => pivotStemConfigHasChanged(stemConfig, s2[index]));
 }
 function pivotStemConfigHasChanged(s1, s2) {
-    return (!deepObjectsEquals(s1.rowAttributes || [], s2.rowAttributes || []) ||
+    return (!deepObjectsEquals(cleanRowAttributes(s1.rowAttributes), cleanRowAttributes(s2.rowAttributes)) ||
         !deepObjectsEquals(s1.columnAttributes || [], s2.columnAttributes || []) ||
         !deepObjectsEquals(s1.valueAttributes || [], s2.valueAttributes || []));
 }
+function cleanRowAttributes(attrs) {
+    return (attrs || []).map(attr => ({ ...attr, showHeader: undefined }));
+}
 function createDefaultPivotConfig(query) {
     const stems = (query && query.stems) || [];
     const stemsConfigs = stems.map(stem => createDefaultPivotStemConfig(stem));
@@ -719,6 +722,7 @@ class PivotTableConverter {
                 background: this.getHeaderBackground(header, level),
                 constraint: header.constraint,
                 label: header.attributeName,
+                childIndexes: createRange(currentIndex, currentIndex + (header.children?.length || 1))
             };
             if (header.children) {
                 this.iterateAndFillCellsByRows(cells, rowGroupsInfo, header.children, currentIndex, showSums, level + 1, header);
@@ -731,24 +735,23 @@ class PivotTableConverter {
             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);
+                const { indexes } = this.fillCellsForExpressionRow(cells, expressions[i], expressionIndex, background);
+                this.splitRowGroupHeader(cells, level, expressionIndex, background, expressions[i].title, indexes);
+                rowGroupsInfo[expressionIndex] = { background, indexes: [], expression: expressions[i], level };
             }
         }
         if (showSums[level]) {
             const { title, summary } = this.formatSummaryHeader(parentHeader, level);
             const background = this.getSummaryBackground(level);
             const columnIndex = Math.max(level - 1, 0);
-            this.splitRowGroupHeader(cells, columnIndex, currentIndex, background, summary, title, parentHeader?.constraint, parentHeader?.attributeName);
+            this.splitRowGroupHeader(cells, columnIndex, currentIndex, background, summary, [], title, parentHeader?.constraint, parentHeader?.attributeName);
             const rowIndexes = getTargetIndexesForHeaders(headers);
-            const transformedRowIndexes = rowIndexes
-                .map(v => this.rowsTransformationArray[v])
-                .filter(v => isNotNullOrUndefined(v));
+            const transformedRowIndexes = this.transformRowIndexes(rowIndexes);
             rowGroupsInfo[currentIndex] = { background, indexes: transformedRowIndexes, level };
             this.fillCellsForGroupedRow(cells, rowIndexes, currentIndex, background);
         }
     }
-    splitRowGroupHeader(cells, columnIndex, currentIndex, background, summary, title, constraint, label) {
+    splitRowGroupHeader(cells, columnIndex, currentIndex, background, summary, rowIndexes, title, constraint, label) {
         let colSpan = this.rowLevels - columnIndex;
         const stickyStart = this.isRowLevelSticky(columnIndex);
         // split row group header cell because of correct sticky scroll
@@ -759,7 +762,7 @@ class PivotTableConverter {
                 constraint: undefined,
                 label: undefined,
                 cssClass: PivotTableConverter.rowGroupHeaderClass,
-                isHeader: true,
+                isSummary: true,
                 rowSpan: 1,
                 colSpan: colSpan - newColspan,
                 background,
@@ -772,12 +775,13 @@ class PivotTableConverter {
             constraint,
             label,
             cssClass: PivotTableConverter.rowGroupHeaderClass,
-            isHeader: true,
+            isSummary: true,
             stickyStart,
             rowSpan: 1,
             colSpan,
             background,
             summary,
+            rowIndexes,
         };
     }
     formatSummaryHeader(header, level) {
@@ -828,7 +832,7 @@ class PivotTableConverter {
                         rowSpan: 1,
                         colSpan: 1,
                         cssClass: PivotTableConverter.dataClass,
-                        isHeader: false,
+                        isValue: true,
                     };
                 }
             }
@@ -897,17 +901,19 @@ class PivotTableConverter {
                     colSpan: 1,
                     rowSpan: 1,
                     cssClass: PivotTableConverter.groupDataClass,
-                    isHeader: false,
                     background,
+                    isValue: true,
                 };
             }
         }
     }
     fillCellsForExpressionRow(cells, expression, rowIndexInCells, background) {
+        let rowIndexes = [];
         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 { value, dataResources, indexes } = this.evaluateExpression(expression, [column]);
+                rowIndexes = indexes;
                 const valueIndex = column % this.data.valueTitles.length;
                 const formattedValue = this.formatValueByConstraint(value, valueIndex);
                 cells[rowIndexInCells][columnIndexInCells] = {
@@ -916,21 +922,23 @@ class PivotTableConverter {
                     colSpan: 1,
                     rowSpan: 1,
                     cssClass: PivotTableConverter.groupDataClass,
-                    isHeader: false,
                     background,
+                    isValue: true,
                 };
             }
         }
+        return { indexes: uniqueValues([...rowIndexes, rowIndexInCells]) };
     }
-    evaluateExpression(expression, column) {
+    evaluateExpression(expression, columns) {
         return (expression.operands || []).reduce((result, operand, index) => {
-            const { value, dataResources } = this.evaluateOperand(operand, column);
+            const { value, dataResources, indexes } = this.evaluateOperand(operand, columns);
             result.dataResources.push(...dataResources);
+            result.indexes.push(...indexes);
             switch (expression.operation) {
-                case "add":
+                case 'add':
                     result.value += value;
                     break;
-                case "subtract":
+                case 'subtract':
                     result.value = (index === 0 ? value : result.value - value);
                     break;
                 case 'multiply':
@@ -941,20 +949,25 @@ class PivotTableConverter {
                     break;
             }
             return result;
-        }, { value: 0, dataResources: [] });
+        }, { value: 0, dataResources: [], indexes: [] });
     }
-    evaluateOperand(operand, column) {
+    evaluateOperand(operand, columns) {
         switch (operand.type) {
-            case "expression": return this.evaluateExpression(operand, column);
-            case "value": return { value: operand.value, dataResources: [] };
-            case "header": {
+            case 'expression': return this.evaluateExpression(operand, columns);
+            case 'value': return { value: operand.value, dataResources: [], indexes: [] };
+            case 'header': {
                 const rows = getTargetIndexesForHeaders(operand.headers);
-                const { values, dataResources } = this.getGroupedValuesForRowsAndCols(rows, [column]);
-                const { value } = this.aggregateDataValues(values, [column]);
-                return { value, dataResources };
+                const { values, dataResources } = this.getGroupedValuesForRowsAndCols(rows, columns);
+                const { value } = this.aggregateDataValues(values, columns);
+                return { value, dataResources, indexes: this.transformRowIndexes(rows) };
             }
         }
     }
+    transformRowIndexes(rows) {
+        return rows
+            .map(v => this.rowsTransformationArray[v])
+            .filter(v => isNotNullOrUndefined(v));
+    }
     getGroupedValuesForRowsAndCols(rows, columns) {
         const values = [];
         const dataResources = [];
@@ -1012,7 +1025,7 @@ class PivotTableConverter {
                 constraint: parentHeader?.constraint,
                 label: parentHeader?.attributeName,
                 cssClass: PivotTableConverter.columnGroupHeaderClass,
-                isHeader: true,
+                isSummary: true,
                 stickyTop: this.isColumnLevelSticky(level),
                 rowSpan: this.columnLevels - rowIndex - (shouldAddValueHeaders ? 1 : 0),
                 colSpan: numberOfSums,
@@ -1027,7 +1040,7 @@ class PivotTableConverter {
                         cells[this.columnLevels - 1][columnIndexInCells] = {
                             value: valueTitle,
                             cssClass: PivotTableConverter.columnGroupHeaderClass,
-                            isHeader: true,
+                            isSummary: true,
                             stickyTop: this.isColumnLevelSticky(level),
                             rowSpan: 1,
                             colSpan: 1,
@@ -1060,8 +1073,8 @@ class PivotTableConverter {
                     colSpan: 1,
                     rowSpan: 1,
                     cssClass: PivotTableConverter.groupDataClass,
-                    isHeader: false,
                     background,
+                    isValue: true,
                 };
             }
         }
@@ -1100,7 +1113,7 @@ class PivotTableConverter {
                         rowSpan: 1,
                         colSpan: 1,
                         cssClass: PivotTableConverter.dataClass,
-                        isHeader: false,
+                        isValue: true,
                     };
                 }
             }
@@ -1117,23 +1130,35 @@ class PivotTableConverter {
     }
     fillCellsByGroupIntersection(cells, rowGroupsInfo, columnGroupsInfo) {
         const rowsCount = cells.length;
-        const columnsCount = (cells[0] && cells[0].length) || 0;
+        const columnsCount = cells[0]?.length || 0;
         for (let i = 0; i < rowGroupsInfo.length; i++) {
             const rowGroupInfo = rowGroupsInfo[i];
             if (rowGroupInfo) {
                 for (let j = 0; j < columnGroupsInfo.length; j++) {
                     if (columnGroupsInfo[j]) {
-                        // it's enough to fill group values only from row side
-                        const { rowsIndexes, columnsIndexes } = this.getValuesIndexesFromCellsIndexes(rowGroupInfo.indexes, columnGroupsInfo[j].indexes);
-                        const { values, dataResources } = this.getGroupedValuesForRowsAndCols(rowsIndexes, columnsIndexes);
-                        const formattedValue = this.aggregateAndFormatDataValues(values, rowsIndexes, columnsIndexes);
+                        const columns = columnGroupsInfo[j].indexes;
+                        let formattedValue;
+                        let dataResources;
+                        if (rowGroupInfo.expression) {
+                            const result = this.evaluateExpression(rowGroupInfo.expression, columns);
+                            const valueIndex = columns[0] % this.data.valueTitles.length;
+                            formattedValue = this.formatValueByConstraint(result.value, valueIndex);
+                            dataResources = result.dataResources;
+                        }
+                        else {
+                            // it's enough to fill group values only from row side
+                            const { rowsIndexes, columnsIndexes } = this.getValuesIndexesFromCellsIndexes(rowGroupInfo.indexes, columns);
+                            const result = this.getGroupedValuesForRowsAndCols(rowsIndexes, columnsIndexes);
+                            formattedValue = this.aggregateAndFormatDataValues(result.values, rowsIndexes, columnsIndexes);
+                            dataResources = result.dataResources;
+                        }
                         cells[i][j] = {
                             value: String(formattedValue),
                             dataResources,
                             colSpan: 1,
                             rowSpan: 1,
                             cssClass: PivotTableConverter.groupDataClass,
-                            isHeader: false,
+                            isValue: true,
                         };
                     }
                 }
@@ -1183,7 +1208,7 @@ class PivotTableConverter {
                         cssClass: isDataClass ? PivotTableConverter.dataClass : PivotTableConverter.groupDataClass,
                         rowSpan: 1,
                         colSpan: 1,
-                        isHeader: false,
+                        isValue: true,
                     };
                 }
                 else {
@@ -1199,7 +1224,7 @@ class PivotTableConverter {
                     matrix[0][j] = {
                         value: rowHeaderAttribute.title,
                         cssClass: PivotTableConverter.rowAttributeHeaderClass,
-                        isHeader: true,
+                        isAttributeHeader: true,
                         rowSpan: 1,
                         colSpan: titleColSpan,
                         stickyTop: this.isColumnLevelSticky(0),
@@ -1210,7 +1235,7 @@ class PivotTableConverter {
                         matrix[this.nonStickyColumnIndex][j] = {
                             value: '',
                             cssClass: PivotTableConverter.rowAttributeHeaderClass,
-                            isHeader: true,
+                            isAttributeHeader: true,
                             rowSpan: 1,
                             colSpan: this.columnLevels - titleColSpan,
                             background: rowHeaderAttribute.color,
@@ -1599,6 +1624,155 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{ selector: '[lmr-table-cell-tmp]' }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
+function isCellExpandable(cell) {
+    return isCellColumnsExpandable(cell) || isCellRowsExpandable(cell);
+}
+function isCellColumnsExpandable(cell) {
+    return cell?.childIndexes?.length > 1;
+}
+function isCellRowsExpandable(cell) {
+    return cell?.rowIndexes?.length > 1;
+}
+function toggleExpanded(cell, columnIndex, state) {
+    if (cell.originalRowIndex) {
+        return toggleExpandedState(state, cell.originalRowIndex, columnIndex);
+    }
+    return state;
+}
+function areCellsSame(c1, c2) {
+    return c1?.summary === c2?.summary && c1?.value === c2?.value;
+}
+function toggleExpandedState(state, rowIndex, columnIndex) {
+    if (isNullOrUndefined(rowIndex) || isNullOrUndefined(columnIndex) || rowIndex < 0 || columnIndex < 0) {
+        return state;
+    }
+    const cellsCopy = [...(state?.cells || [])];
+    const rowCopy = [...(cellsCopy[rowIndex] || [])];
+    rowCopy[columnIndex] = { ...rowCopy[columnIndex], collapsed: !rowCopy[columnIndex]?.collapsed };
+    cellsCopy[rowIndex] = rowCopy;
+    return { ...state, cells: cellsCopy };
+}
+function filterVisibleCells(cells, state, parentIndex = 0) {
+    const cellsChildIndexesMap = createCellsChildIndexesMap(cells);
+    return cells.reduce((currentRows, row, index) => {
+        const firstCell = row[0];
+        if (!firstCell) {
+            return currentRows;
+        }
+        const originalRowIndex = parentIndex + index;
+        if (firstCell.isAttributeHeader || firstCell.isSummary || firstCell.isValue) {
+            currentRows.push(setOriginalRowIndexForHeaders(row, originalRowIndex));
+            return currentRows;
+        }
+        if (isRowVisible(index, cellsChildIndexesMap, 0, state)) {
+            if (row.some(cell => isCellColumnsExpandable(cell))) {
+                const isCollapsed = state?.[index]?.[0]?.collapsed;
+                if (isCollapsed) {
+                    const firstDataHeaderIndex = takeIf(row.findIndex(cell => cell.isValue), result => result >= 0) ?? 1;
+                    const rowCopy = [...row];
+                    rowCopy[0] = {
+                        ...row[0],
+                        colSpan: firstDataHeaderIndex,
+                        rowSpan: 1,
+                        originalRowIndex,
+                    };
+                    for (let i = 1; i < firstDataHeaderIndex; i++) {
+                        rowCopy[i] = undefined;
+                    }
+                    currentRows.push(rowCopy);
+                }
+                else {
+                    const nestedCells = sliceMatrix(cells, index, index + firstCell.rowSpan - 1, 1, cells[0].length - 1);
+                    const nestedState = sliceMatrix(state, index, index + firstCell.rowSpan - 1, 1, cells[0].length - 1);
+                    const nestedFilteredRows = filterVisibleCells(nestedCells, nestedState, originalRowIndex);
+                    const changedCell = {
+                        ...row[0],
+                        rowSpan: nestedFilteredRows.length,
+                        originalRowIndex,
+                    };
+                    const newRows = appendCellToMatrix(changedCell, nestedFilteredRows);
+                    currentRows.push(...newRows);
+                }
+            }
+            else {
+                currentRows.push(setOriginalRowIndexForHeaders(row, originalRowIndex));
+                for (let i = 1; i < firstCell.rowSpan; i++) {
+                    currentRows.push(setOriginalRowIndexForHeaders(cells[index + i], originalRowIndex + i));
+                }
+            }
+        }
+        return currentRows;
+    }, []);
+}
+function setOriginalRowIndexForHeaders(row, originalRowIndex) {
+    const newRow = [];
+    for (let i = 0; i < row.length; i++) {
+        const cell = row[i];
+        if (!cell) {
+            newRow.push(cell);
+        }
+        else if (cell.isValue) {
+            return [...newRow, ...row.slice(i)];
+        }
+        else {
+            newRow.push({ ...cell, originalRowIndex });
+        }
+    }
+    return newRow;
+}
+function appendCellToMatrix(cell, rows) {
+    return rows.map((row, index) => index > 0 ? [undefined, ...row] : [cell, ...row]);
+}
+function takeIf(value, predicate) {
+    return predicate(value) ? value : undefined;
+}
+function sliceMatrix(cells, fromRow, toRow, fromColumn, toColumn) {
+    const slicedMatrix = [];
+    for (let i = fromRow; i <= toRow; i++) {
+        const row = (cells?.[i] || []).slice(fromColumn, toColumn + 1);
+        slicedMatrix.push(row);
+    }
+    return slicedMatrix;
+}
+function createCellsChildIndexesMap(rowCells) {
+    const firstCells = rowCells.map(rowCells => rowCells[0]);
+    return createRowsChildIndexesMap(firstCells);
+}
+function createRowsChildIndexesMap(rowCells) {
+    return (rowCells || []).reduce((map, cell, index) => {
+        for (const childIndex of (cell?.rowIndexes || [])) {
+            if (!map[childIndex])
+                map[childIndex] = [];
+            map[childIndex].push(index);
+        }
+        return map;
+    }, []);
+}
+function isRowVisible(index, childIndexesMap, columnIndex, state) {
+    const childIndexes = childIndexesMap?.[index] || [];
+    return !childIndexes.length || childIndexes.some(childIndex => !state?.[childIndex]?.[columnIndex]?.collapsed);
+}
+function collapseAllCells(table) {
+    const cells = [];
+    const tableCells = table?.cells || [];
+    for (let i = 0; i < tableCells.length; i++) {
+        const row = tableCells[i];
+        for (let j = 0; j < row.length; j++) {
+            const cell = row[j];
+            if (cell?.isValue || cell?.isAttributeHeader || cell?.isHeader) {
+                break;
+            }
+            if (isCellExpandable(cell)) {
+                if (!cells[i]) {
+                    cells[i] = [];
+                }
+                cells[i][j] = { collapsed: true };
+            }
+        }
+    }
+    return { cells };
+}
+
 /*
  * Lumeer: Modern Data Definition and Processing Platform
  *
@@ -1653,17 +1827,148 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * You should have received a copy of the GNU General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-class PivotTableCellHasValuePipe {
+class CellHasValuePipe {
     transform(cell) {
         return isNotNullOrUndefined(cell.value) && String(cell.value).trim() !== '';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotTableCellHasValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: PivotTableCellHasValuePipe, name: "pivotTableCellHasValue" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CellHasValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: CellHasValuePipe, name: "cellHasValue" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CellHasValuePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'cellHasValue',
+                }]
+        }] });
+
+/*
+ * Lumeer: Modern Data Definition and Processing Platform
+ *
+ * Copyright (C) since 2017 Lumeer.io, s.r.o. and/or its affiliates.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+class IsCellExpandablePipe {
+    transform(cell) {
+        return isCellExpandable(cell);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IsCellExpandablePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: IsCellExpandablePipe, name: "isCellExpandable" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IsCellExpandablePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'isCellExpandable',
+                }]
+        }] });
+
+/*
+ * Lumeer: Modern Data Definition and Processing Platform
+ *
+ * Copyright (C) since 2017 Lumeer.io, s.r.o. and/or its affiliates.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+class IsCellExpandedPipe {
+    transform(cell, columnIndex, state) {
+        if (cell.originalRowIndex) {
+            return !state?.cells?.[cell.originalRowIndex]?.[columnIndex]?.collapsed;
+        }
+        return false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IsCellExpandedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: IsCellExpandedPipe, name: "isCellExpanded" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IsCellExpandedPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'isCellExpanded',
+                }]
+        }] });
+
+/*
+ * Lumeer: Modern Data Definition and Processing Platform
+ *
+ * Copyright (C) since 2017 Lumeer.io, s.r.o. and/or its affiliates.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+class IsCellRowsExpandablePipe {
+    transform(cell) {
+        return isCellRowsExpandable(cell);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IsCellRowsExpandablePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: IsCellRowsExpandablePipe, name: "isCellRowsExpandable" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotTableCellHasValuePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IsCellRowsExpandablePipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'pivotTableCellHasValue',
+                    name: 'isCellRowsExpandable',
+                }]
+        }] });
+
+/*
+ * Lumeer: Modern Data Definition and Processing Platform
+ *
+ * Copyright (C) since 2017 Lumeer.io, s.r.o. and/or its affiliates.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+class FilterVisibleCellsPipe {
+    transform(table, state) {
+        return filterVisibleCells(table.cells, state?.cells);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterVisibleCellsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: FilterVisibleCellsPipe, name: "filterVisibleCells" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterVisibleCellsPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'filterVisibleCells',
                 }]
         }] });
 
@@ -1715,6 +2020,7 @@ class LmrPivotTableComponent {
     transform;
     emptyTablesTemplateInput;
     tableCellTemplateInput;
+    initiallyCollapsed;
     cellClick = new EventEmitter();
     pivotDataChange = new EventEmitter();
     pivotTablesChange = new EventEmitter();
@@ -1722,19 +2028,36 @@ class LmrPivotTableComponent {
     tableCellTemplate;
     pivotTransformer = new PivotDataConverter();
     pivotTableConverter = new PivotTableConverter();
-    dataSubject = new BehaviorSubject(null);
+    stickyColumnWidth = 150;
+    stickyColumnHeight = 150;
+    dataSubject$ = new BehaviorSubject(null);
+    currentTables;
     pivotData$;
     pivotTables$;
+    pivotStates$ = new BehaviorSubject([]);
     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.transform)), tap(tables => this.pivotTablesChange.emit(tables)));
+        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.onPivotDataChange(data)));
+        this.pivotTables$ = this.pivotData$.pipe(map(data => this.pivotTableConverter.createTables(data, this.transform)), tap(tables => this.onPivotTablesChange(tables)));
+    }
+    onPivotDataChange(data) {
+        this.pivotDataChange.emit(data);
+    }
+    onPivotTablesChange(tables) {
+        if (this.initiallyCollapsed && tablesAreVeryDifferent(this.currentTables, tables)) {
+            this.pivotStates$.next(tables.map(table => collapseAllCells(table)));
+        }
+        this.currentTables = 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);
     }
     ngOnChanges(changes) {
-        this.dataSubject.next({
+        if (shouldResetState(changes)) {
+            this.resetState();
+        }
+        this.dataSubject$.next({
             config: this.config,
             transform: this.transform,
             collections: this.collections,
@@ -1744,12 +2067,31 @@ class LmrPivotTableComponent {
             constraintData: this.constraintData,
         });
     }
+    resetState() {
+        // this.pivotStates$.next([]);
+    }
+    onCellClick(cell, row, tableIndex, rowIndex, columnIndex) {
+        if (isCellExpandable(cell)) {
+            const oldState = this.pivotStates$.value[tableIndex];
+            const newState = toggleExpanded(cell, columnIndex, oldState);
+            this.setState(tableIndex, newState);
+        }
+        else if (cell?.isHeader || cell?.isValue) {
+            const headerCell = cell.isHeader ? cell : row.find(c => c.isHeader);
+            this.cellClick.emit({ cell, tableIndex, rowIndex: headerCell?.originalRowIndex || rowIndex, columnIndex });
+        }
+    }
+    setState(index, state) {
+        const statesCopy = [...(this.pivotStates$.value || [])];
+        statesCopy.splice(index, 1, state);
+        this.pivotStates$.next(statesCopy);
+    }
     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", 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 });
+    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", initiallyCollapsed: "initiallyCollapsed" }, 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, pivotStates: pivotStates$ | 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; let tableIndex = index\"\n           class=\"table table-without-padding table-borderless table-md\"\n           [class.mt-4]=\"!first\">\n      <tr *ngFor=\"let rowCells of pivotTable | filterVisibleCells:data.pivotStates[tableIndex]; let rowIndex = index\">\n\n        <ng-container *ngFor=\"let cell of rowCells; let cellIndex = index\">\n          <td *ngIf=\"cell && {hasValue: cell | cellHasValue} as cellData\"\n              class=\"cell position-relative {{cell.constraint ? (cell.constraint.type | lowercase) : ''}} text-truncate\"\n              [class.expandable]=\"cell | isCellExpandable\"\n              [class.expandable-rows]=\"cell | isCellRowsExpandable\"\n              [class.expanded]=\"cell | isCellExpanded:cellIndex:data.pivotStates[tableIndex]\"\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 * stickyColumnHeight) : undefined\"\n              [style.left.px]=\"cell.stickyStart ? (cellIndex * stickyColumnWidth) : undefined\"\n              [style.width.px]=\"cell.stickyStart ? (cell.colSpan * stickyColumnWidth) : undefined\"\n              [style.max-width.px]=\"cell.stickyStart ? (cell.colSpan * stickyColumnWidth) : 300\"\n              [style.min-width.px]=\"cell.stickyStart ? (cell.colSpan * stickyColumnWidth) : undefined\"\n              [ngClass]=\"cell.cssClass\"\n              [style.background]=\"cell.background\"\n              [style.color]=\"cell.background && (cell.background | contrastColor)\"\n              (click)=\"onCellClick(cell, rowCells, tableIndex, rowIndex, cellIndex)\">\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-block\" style=\"overflow: hidden; white-space: normal\">{{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-block\" style=\"overflow: hidden; white-space: normal; cursor: pointer\">\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!important;width:150px;min-width:150px;max-width:150px!important;z-index:9}.pivot-row-header-cell.expandable,.pivot-row-group-header-cell.expandable{position:absolute;cursor:pointer;padding-right:15px}.pivot-row-header-cell.expandable:after,.pivot-row-group-header-cell.expandable:after{content:\"\";position:absolute;top:50%;right:5px;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #253746;transform:translateY(-50%)}.pivot-row-header-cell.expandable.expanded:after,.pivot-row-group-header-cell.expandable.expanded:after{border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #253746;border-bottom:0}.pivot-row-header-cell.expandable.expanded.expandable-rows:after,.pivot-row-group-header-cell.expandable.expanded.expandable-rows:after{border-left:5px solid transparent;border-right:5px solid transparent;border-top:0;border-bottom:5px solid #253746}.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!important;z-index:10}.pivot-row-attribute-header-cell.sticky-top,.pivot-row-attribute-header-cell.sticky-start{position:sticky!important;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: CellHasValuePipe, name: "cellHasValue" }, { kind: "pipe", type: IsCellExpandablePipe, name: "isCellExpandable" }, { kind: "pipe", type: IsCellExpandedPipe, name: "isCellExpanded" }, { kind: "pipe", type: IsCellRowsExpandablePipe, name: "isCellRowsExpandable" }, { kind: "pipe", type: FilterVisibleCellsPipe, name: "filterVisibleCells" }, { 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              <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"] }]
+            args: [{ selector: 'lmr-pivot-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{pivotTables: pivotTables$ | async, pivotStates: pivotStates$ | 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; let tableIndex = index\"\n           class=\"table table-without-padding table-borderless table-md\"\n           [class.mt-4]=\"!first\">\n      <tr *ngFor=\"let rowCells of pivotTable | filterVisibleCells:data.pivotStates[tableIndex]; let rowIndex = index\">\n\n        <ng-container *ngFor=\"let cell of rowCells; let cellIndex = index\">\n          <td *ngIf=\"cell && {hasValue: cell | cellHasValue} as cellData\"\n              class=\"cell position-relative {{cell.constraint ? (cell.constraint.type | lowercase) : ''}} text-truncate\"\n              [class.expandable]=\"cell | isCellExpandable\"\n              [class.expandable-rows]=\"cell | isCellRowsExpandable\"\n              [class.expanded]=\"cell | isCellExpanded:cellIndex:data.pivotStates[tableIndex]\"\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 * stickyColumnHeight) : undefined\"\n              [style.left.px]=\"cell.stickyStart ? (cellIndex * stickyColumnWidth) : undefined\"\n              [style.width.px]=\"cell.stickyStart ? (cell.colSpan * stickyColumnWidth) : undefined\"\n              [style.max-width.px]=\"cell.stickyStart ? (cell.colSpan * stickyColumnWidth) : 300\"\n              [style.min-width.px]=\"cell.stickyStart ? (cell.colSpan * stickyColumnWidth) : undefined\"\n              [ngClass]=\"cell.cssClass\"\n              [style.background]=\"cell.background\"\n              [style.color]=\"cell.background && (cell.background | contrastColor)\"\n              (click)=\"onCellClick(cell, rowCells, tableIndex, rowIndex, cellIndex)\">\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-block\" style=\"overflow: hidden; white-space: normal\">{{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-block\" style=\"overflow: hidden; white-space: normal; cursor: pointer\">\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!important;width:150px;min-width:150px;max-width:150px!important;z-index:9}.pivot-row-header-cell.expandable,.pivot-row-group-header-cell.expandable{position:absolute;cursor:pointer;padding-right:15px}.pivot-row-header-cell.expandable:after,.pivot-row-group-header-cell.expandable:after{content:\"\";position:absolute;top:50%;right:5px;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #253746;transform:translateY(-50%)}.pivot-row-header-cell.expandable.expanded:after,.pivot-row-group-header-cell.expandable.expanded:after{border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #253746;border-bottom:0}.pivot-row-header-cell.expandable.expanded.expandable-rows:after,.pivot-row-group-header-cell.expandable.expanded.expandable-rows:after{border-left:5px solid transparent;border-right:5px solid transparent;border-top:0;border-bottom:5px solid #253746}.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!important;z-index:10}.pivot-row-attribute-header-cell.sticky-top,.pivot-row-attribute-header-cell.sticky-start{position:sticky!important;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: [{
@@ -1768,6 +2110,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], tableCellTemplateInput: [{
                 type: Input
+            }], initiallyCollapsed: [{
+                type: Input
             }], cellClick: [{
                 type: Output
             }], pivotDataChange: [{
@@ -1781,6 +2125,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: ContentChild,
                 args: [LmrTableCellTemplateDirective, { read: TemplateRef }]
             }] } });
+function shouldResetState(changes) {
+    if (changes['config']) {
+        const previousValue = changes['config'].previousValue;
+        const currentValue = changes['config'].currentValue;
+        return isPivotConfigChanged(previousValue, currentValue);
+    }
+    return false;
+}
+function tablesAreVeryDifferent(t1, t2) {
+    if ((t1 || []).length !== (t2 || []).length) {
+        return true;
+    }
+    // row numbers are different
+    return (t1 || []).some((t, index) => t.cells?.length !== t2[index].cells?.length);
+}
 
 class LmrSimplePivotTableComponent {
     rows;
@@ -1789,6 +2148,7 @@ class LmrSimplePivotTableComponent {
     config;
     transform;
     locale;
+    initiallyCollapsed;
     cellClick = new EventEmitter();
     pivotDataChange = new EventEmitter();
     pivotTablesChange = new EventEmitter();
@@ -1844,11 +2204,11 @@ class LmrSimplePivotTableComponent {
         });
     }
     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 });
+    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", initiallyCollapsed: "initiallyCollapsed" }, 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                 [initiallyCollapsed]=\"initiallyCollapsed\"\n                 (cellClick)=\"cellClick.emit($event)\"\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", "initiallyCollapsed"], 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" }]
+            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                 [initiallyCollapsed]=\"initiallyCollapsed\"\n                 (cellClick)=\"cellClick.emit($event)\"\n                 (pivotDataChange)=\"pivotDataChange.emit($event)\"\n                 (pivotTablesChange)=\"pivotTablesChange.emit($event)\">\n</lmr-pivot-table>\n" }]
         }], propDecorators: { rows: [{
                 type: Input
             }], attributes: [{
@@ -1861,6 +2221,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], locale: [{
                 type: Input
+            }], initiallyCollapsed: [{
+                type: Input
             }], cellClick: [{
                 type: Output
             }], pivotDataChange: [{
@@ -1880,7 +2242,11 @@ class LmrPivotTableModule {
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: LmrPivotTableModule, declarations: [LmrPivotTableComponent,
             LmrSimplePivotTableComponent,
             PivotDataEmptyPipe,
-            PivotTableCellHasValuePipe,
+            CellHasValuePipe,
+            IsCellExpandablePipe,
+            IsCellExpandedPipe,
+            IsCellRowsExpandablePipe,
+            FilterVisibleCellsPipe,
             ContrastColorPipe,
             LmrEmptyTablesTemplateDirective,
             LmrTableCellTemplateDirective], imports: [CommonModule,
@@ -1898,7 +2264,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         LmrPivotTableComponent,
                         LmrSimplePivotTableComponent,
                         PivotDataEmptyPipe,
-                        PivotTableCellHasValuePipe,
+                        CellHasValuePipe,
+                        IsCellExpandablePipe,
+                        IsCellExpandedPipe,
+                        IsCellRowsExpandablePipe,
+                        FilterVisibleCellsPipe,
                         ContrastColorPipe,
                         LmrEmptyTablesTemplateDirective,
                         LmrTableCellTemplateDirective,