igniteui-angular 13.2.2 → 13.2.3

package/fesm2015/igniteui-angular.mjs

@@ -7,7 +7,7 @@ import { NgModel, FormControlName, NG_VALUE_ACCESSOR, NG_VALIDATORS, CheckboxReq
 import * as i4 from '@angular/common';
 import { isPlatformBrowser, formatDate as formatDate$1, CurrencyPipe, formatPercent, formatNumber, getLocaleCurrencyCode, DatePipe, DOCUMENT, CommonModule, FormatWidth, getLocaleDateFormat, getLocaleNumberFormat, NumberFormatStyle, getCurrencySymbol } from '@angular/common';
 import { Observable, Subject, fromEvent, interval, animationFrameScheduler, noop, merge, Subscription, timer, pipe } from 'rxjs';
-import { takeUntil, filter, first as first$1, throttleTime, take, throttle, debounce, tap, switchMap, skipLast, map, debounceTime, shareReplay, takeWhile, delay, pluck } from 'rxjs/operators';
+import { takeUntil, filter, first as first$1, throttleTime, take, throttle, debounce, tap, switchMap, skipLast, map, debounceTime, shareReplay, takeWhile, pluck } from 'rxjs/operators';
 import mergeWith from 'lodash.mergewith';
 import { __awaiter, __decorate, __param } from 'tslib';
 import * as JSZip from 'jszip';
@@ -2600,7 +2600,7 @@ class IgxBaseExporter {
             throw Error('No options provided!');
         }
         this.options = options;
-        let columns = grid.columnList.toArray();
+        let columns = grid.columns;
         if (this.options.ignoreMultiColumnHeaders) {
             columns = columns.filter(col => col.children === undefined);
         }
@@ -3233,7 +3233,7 @@ class IgxBaseExporter {
             columnList = this.getAutoGeneratedColumns(islandData);
         }
         else {
-            const islandColumnList = island.childColumns.toArray();
+            const islandColumnList = island.columns;
             columnList = this.getColumns(islandColumnList);
         }
         this._ownersMap.set(island, columnList);
@@ -47802,7 +47802,7 @@ class GridBaseAPIService {
         this.destroyMap = new Map();
     }
     get_column_by_name(name) {
-        return this.grid.columnList.find((col) => col.field === name);
+        return this.grid.columns.find((col) => col.field === name);
     }
     get_summary_data() {
         const grid = this.grid;
@@ -50243,7 +50243,7 @@ class IgxColumnComponent {
         grid.resetCaches();
         grid.notifyChanges();
         if (this.columnLayoutChild) {
-            this.grid.columnList.filter(x => x.columnLayout).forEach(x => x.populateVisibleIndexes());
+            this.grid.columns.filter(x => x.columnLayout).forEach(x => x.populateVisibleIndexes());
         }
         this.grid.filteringService.refreshExpressions();
         const eventArgs = { column: this, insertAtIndex: index, isPinned: true };
@@ -50310,7 +50310,7 @@ class IgxColumnComponent {
         grid.resetCaches();
         grid.notifyChanges();
         if (this.columnLayoutChild) {
-            this.grid.columnList.filter(x => x.columnLayout).forEach(x => x.populateVisibleIndexes());
+            this.grid.columns.filter(x => x.columnLayout).forEach(x => x.populateVisibleIndexes());
         }
         this.grid.filteringService.refreshExpressions();
         this.grid.columnPinned.emit({ column: this, insertAtIndex: index, isPinned: false });
@@ -50329,7 +50329,7 @@ class IgxColumnComponent {
      */
     move(index) {
         let target;
-        let columns = this.grid.columnList.filter(c => c.visibleIndex > -1);
+        let columns = this.grid.columns.filter(c => c.visibleIndex > -1);
         // grid last visible index
         const li = columns.map(c => c.visibleIndex).reduce((a, b) => Math.max(a, b));
         const parent = this.parent;
@@ -51903,7 +51903,7 @@ class BaseRow {
      */
     get cells() {
         const res = [];
-        this.grid.columnList.forEach(col => {
+        this.grid.columns.forEach(col => {
             const cell = new IgxGridCell(this.grid, this.index, col.field);
             res.push(cell);
         });
@@ -52214,7 +52214,7 @@ class IgxHierarchicalGridRow extends BaseRow {
      */
     get cells() {
         const res = [];
-        this.grid.columnList.forEach(col => {
+        this.grid.columns.forEach(col => {
             const cell = new IgxGridCell(this.grid, this.index, col.field);
             res.push(cell);
         });
@@ -53533,7 +53533,7 @@ class IgxGroupByAreaDirective {
         const drag = event.detail.owner;
         if (drag instanceof IgxColumnMovingDragDirective) {
             const column = drag.column;
-            if (!this.grid.columnList.find(c => c === column)) {
+            if (!this.grid.columns.find(c => c === column)) {
                 return;
             }
             const isGrouped = this.expressions.findIndex((item) => item.fieldName === column.field) !== -1;
@@ -54035,7 +54035,7 @@ class IgxAdvancedFilteringDialogComponent {
      * @hidden @internal
      */
     get filterableColumns() {
-        return this.grid.columnList.filter((col) => !col.columnGroup && col.filterable);
+        return this.grid.columns.filter((col) => !col.columnGroup && col.filterable);
     }
     /**
      * @hidden @internal
@@ -55874,7 +55874,7 @@ class IgxFilteringService {
             grid.paginator.page = 0;
         }
         filteringTree.filteringOperands = [];
-        for (const column of grid.columnList) {
+        for (const column of grid.columns) {
             this.prepare_filtering_expression(filteringTree, column.field, term, condition, ignoreCase || column.filteringIgnoreCase);
         }
         grid.filteringExpressionsTree = filteringTree;
@@ -55908,7 +55908,7 @@ class IgxFilteringService {
             expressions.length = 0;
         }
         else {
-            this.grid.columnList.forEach(c => {
+            this.grid.columns.forEach(c => {
                 const expressions = this.getExpressions(c.field);
                 expressions.length = 0;
             });
@@ -55938,7 +55938,7 @@ class IgxFilteringService {
         const grid = this.grid;
         const filteringTree = grid.filteringExpressionsTree;
         const newFilteringTree = new FilteringExpressionsTree(filteringTree.operator, filteringTree.fieldName);
-        for (const column of grid.columnList) {
+        for (const column of grid.columns) {
             this.prepare_filtering_expression(newFilteringTree, column.field, value, condition, ignoreCase || column.filteringIgnoreCase);
         }
         const eventArgs = { owner: grid, filteringExpressions: newFilteringTree, cancel: false };
@@ -55968,7 +55968,7 @@ class IgxFilteringService {
      */
     getExpressions(columnId) {
         if (!this.columnToExpressionsMap.has(columnId)) {
-            const column = this.grid.columnList.find((col) => col.field === columnId);
+            const column = this.grid.columns.find((col) => col.field === columnId);
             const expressionUIs = new Array();
             if (column) {
                 this.generateExpressionsList(column.filteringExpressionsTree, this.grid.filteringExpressionsTree.operator, expressionUIs);
@@ -55985,7 +55985,7 @@ class IgxFilteringService {
         if (!this.isFiltering) {
             this.columnsWithComplexFilter.clear();
             this.columnToExpressionsMap.forEach((value, key) => {
-                const column = this.grid.columnList.find((col) => col.field === key);
+                const column = this.grid.columns.find((col) => col.field === key);
                 if (column) {
                     value.length = 0;
                     this.generateExpressionsList(column.filteringExpressionsTree, this.grid.filteringExpressionsTree.operator, value);
@@ -56058,7 +56058,7 @@ class IgxFilteringService {
         if (this.columnsWithComplexFilter.has(columnId)) {
             return true;
         }
-        const column = this.grid.columnList.find((col) => col.field === columnId);
+        const column = this.grid.columns.find((col) => col.field === columnId);
         const isComplex = column && this.isFilteringTreeComplex(column.filteringExpressionsTree);
         if (isComplex) {
             this.columnsWithComplexFilter.add(columnId);
@@ -58973,7 +58973,7 @@ class IgxGridSummaryService {
             this.removeSummaries(rowID);
         }
         if (args.rowID !== undefined && args.rowID !== null) {
-            let columnName = args.cellID ? this.grid.columnList.find(col => col.index === args.cellID.columnID).field : undefined;
+            let columnName = args.cellID ? this.grid.columns.find(col => col.index === args.cellID.columnID).field : undefined;
             if (columnName && this.grid.rowEditable) {
                 return;
             }
@@ -59030,7 +59030,7 @@ class IgxGridSummaryService {
             return this.summaryHeight = 0;
         }
         let maxSummaryLength = 0;
-        this.grid.columnList.filter((col) => col.hasSummary && !col.hidden).forEach((column) => {
+        this.grid.columns.filter((col) => col.hasSummary && !col.hidden).forEach((column) => {
             const getCurrentSummaryColumn = column.summaries.operate([], [], column.field).length;
             if (getCurrentSummaryColumn) {
                 if (maxSummaryLength < getCurrentSummaryColumn) {
@@ -59051,7 +59051,7 @@ class IgxGridSummaryService {
         if (!this.hasSummarizedColumns || !data) {
             return rowSummaries;
         }
-        this.grid.columnList.filter(col => col.hasSummary).forEach((column) => {
+        this.grid.columns.filter(col => col.hasSummary).forEach((column) => {
             if (!rowSummaries.get(column.field)) {
                 const summaryResult = column.summaries.operate(data.map(r => resolveNestedPath(r, column.field)), data, column.field, this.grid.locale, column.pipeArgs);
                 rowSummaries.set(column.field, summaryResult);
@@ -59084,7 +59084,7 @@ class IgxGridSummaryService {
         this.groupingExpressions = groupingArgs.expressions.map(record => record.fieldName);
     }
     get hasSummarizedColumns() {
-        const summarizedColumns = this.grid.columnList.filter(col => col.hasSummary && !col.hidden);
+        const summarizedColumns = this.grid.columns.filter(col => col.hasSummary && !col.hidden);
         return summarizedColumns.length > 0;
     }
     deleteSummaryCache(id, columnName) {
@@ -61026,8 +61026,8 @@ class IgxGridBaseDirective extends DisplayDensityBase {
     get maxLevelHeaderDepth() {
         if (this._maxLevelHeaderDepth === null) {
             this._maxLevelHeaderDepth = this.hasColumnLayouts ?
-                this.columnList.reduce((acc, col) => Math.max(acc, col.rowStart), 0) :
-                this.columnList.reduce((acc, col) => Math.max(acc, col.level), 0);
+                this._columns.reduce((acc, col) => Math.max(acc, col.rowStart), 0) :
+                this._columns.reduce((acc, col) => Math.max(acc, col.level), 0);
         }
         return this._maxLevelHeaderDepth;
     }
@@ -61040,7 +61040,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * ``
      */
     get hiddenColumnsCount() {
-        return this.columnList.filter((col) => col.columnGroup === false && col.hidden === true).length;
+        return this._columns.filter((col) => col.columnGroup === false && col.hidden === true).length;
     }
     /**
      * Gets the number of pinned columns.
@@ -61559,13 +61559,13 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * @internal
      */
     resetColumnsCaches() {
-        this.columnList.forEach(column => column.resetCaches());
+        this._columns.forEach(column => column.resetCaches());
     }
     /**
      * @hidden @internal
      */
     generateRowID() {
-        const primaryColumn = this.columnList.find(col => col.field === this.primaryKey);
+        const primaryColumn = this._columns.find(col => col.field === this.primaryKey);
         const idType = this.data.length ?
             this.resolveDataTypes(this.data[0][this.primaryKey]) : primaryColumn ? primaryColumn.dataType : 'string';
         return idType === 'string' ? v4() : FAKE_ROW_ID--;
@@ -61632,7 +61632,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this.resetColumnCollections();
         this.resetCachedWidths();
         this.hasVisibleColumns = undefined;
-        this._columnGroups = this.columnList.some(col => col.columnGroup);
+        this._columnGroups = this._columns.some(col => col.columnGroup);
     }
     /**
      * @hidden
@@ -61898,7 +61898,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * ```
      */
     toggleColumnVisibility(args) {
-        const col = args.column ? this.columnList.find((c) => c === args.column) : undefined;
+        const col = args.column ? this._columns.find((c) => c === args.column) : undefined;
         if (!col) {
             return;
         }
@@ -62159,7 +62159,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * ```
      */
     get columns() {
-        return this._rendered ? this._columns : [];
+        return this._columns || [];
     }
     /**
      * Gets an array of the pinned `IgxColumnComponent`s.
@@ -62220,7 +62220,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * @param name
      */
     getColumnByName(name) {
-        return this.columnList.find((col) => col.field === name);
+        return this._columns.find((col) => col.field === name);
     }
     getColumnByVisibleIndex(index) {
         return this.visibleColumns.find((col) => !col.columnGroup && !col.columnLayout &&
@@ -62238,7 +62238,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         if (this._visibleColumns.length) {
             return this._visibleColumns;
         }
-        this._visibleColumns = this.columnList.filter(c => !c.hidden);
+        this._visibleColumns = this._columns.filter(c => !c.hidden);
         return this._visibleColumns;
     }
     /**
@@ -62371,14 +62371,14 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * @internal
      */
     get showAddButton() {
-        return this.rowEditable && this.dataView.length === 0 && this.columnList.length > 0;
+        return this.rowEditable && this.dataView.length === 0 && this._columns.length > 0;
     }
     /**
      * @hidden
      * @internal
      */
     get showDragIcons() {
-        return this.rowDraggable && this.columnList.length > this.hiddenColumnsCount;
+        return this.rowDraggable && this._columns.length > this.hiddenColumnsCount;
     }
     /**
      * @hidden
@@ -62440,12 +62440,12 @@ class IgxGridBaseDirective extends DisplayDensityBase {
             const index = pos === DropPosition.AfterDropTarget ? unpinnedIndex + 1 : unpinnedIndex;
             columnPinStateChanged = column.unpin(index);
         }
-        if (target.pinned && column.pinned && !columnPinStateChanged) {
-            this._reorderColumns(column, target, pos, this._pinnedColumns);
-        }
-        if (!target.pinned && !column.pinned && !columnPinStateChanged) {
-            this._reorderColumns(column, target, pos, this._unpinnedColumns);
-        }
+        // if (target.pinned && column.pinned && !columnPinStateChanged) {
+        //     this._reorderColumns(column, target, pos, this._pinnedColumns);
+        // }
+        // if (!target.pinned && !column.pinned && !columnPinStateChanged) {
+        //     this._reorderColumns(column, target, pos, this._unpinnedColumns);
+        // }
         this._moveColumns(column, target, pos);
         this._columnsReordered(column);
     }
@@ -62564,7 +62564,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      */
     updateCell(value, rowSelector, column) {
         if (this.isDefined(this.primaryKey)) {
-            const col = this.columnList.toArray().find(c => c.field === column);
+            const col = this._columns.find(c => c.field === column);
             if (col) {
                 // Simplify
                 const rowData = this.gridAPI.getRowData(rowSelector);
@@ -62655,7 +62655,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         }
         else {
             if (this._sortingOptions.mode === 'single') {
-                this.columns.forEach((col) => {
+                this._columns.forEach((col) => {
                     if (!(col.field === expression.fieldName)) {
                         this.clearSort(col.field);
                     }
@@ -63017,7 +63017,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * ```
      */
     get hasSortableColumns() {
-        return this.columnList.some((col) => col.sortable);
+        return this._columns.some((col) => col.sortable);
     }
     /**
      * Returns if the `IgxGridComponent` has editable columns.
@@ -63028,7 +63028,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * ```
      */
     get hasEditableColumns() {
-        return this.columnList.some((col) => col.editable);
+        return this._columns.some((col) => col.editable);
     }
     /**
      * Returns if the `IgxGridComponent` has filterable columns.
@@ -63039,7 +63039,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * ```
      */
     get hasFilterableColumns() {
-        return this.columnList.some((col) => col.filterable);
+        return this._columns.some((col) => col.filterable);
     }
     /**
      * Returns if the `IgxGridComponent` has summarized columns.
@@ -63050,7 +63050,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * ```
      */
     get hasSummarizedColumns() {
-        const summarizedColumns = this.columnList.filter(col => col.hasSummary && !col.hidden);
+        const summarizedColumns = this._columns.filter(col => col.hasSummary && !col.hidden);
         return summarizedColumns.length > 0;
     }
     /**
@@ -63064,7 +63064,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      */
     get hasVisibleColumns() {
         if (this._hasVisibleColumns === undefined) {
-            return this.columnList ? this.columnList.some(c => !c.hidden) : false;
+            return this._columns ? this._columns.some(c => !c.hidden) : false;
         }
         return this._hasVisibleColumns;
     }
@@ -63105,7 +63105,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * ```
      */
     get hasColumnLayouts() {
-        return !!this.columnList.some(col => col.columnLayout);
+        return !!this._columns.some(col => col.columnLayout);
     }
     /**
      * @hidden @internal
@@ -63561,7 +63561,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * ```
      */
     selectAllColumns() {
-        this.selectColumns(this.columnList.filter(c => !c.columnGroup));
+        this.selectColumns(this._columns.filter(c => !c.columnGroup));
     }
     /**
      *
@@ -63671,7 +63671,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         var _a;
         const totalItems = (_a = this.totalItemCount) !== null && _a !== void 0 ? _a : this.dataView.length - 1;
         if (rowIndex < 0 || rowIndex > totalItems || (visibleColIndex !== -1
-            && this.columnList.map(col => col.visibleIndex).indexOf(visibleColIndex) === -1)) {
+            && this._columns.map(col => col.visibleIndex).indexOf(visibleColIndex) === -1)) {
             return;
         }
         if (this.dataView.slice(rowIndex, rowIndex + 1).find(rec => rec.expression || rec.childGridsData)) {
@@ -63717,7 +63717,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * ```
      */
     getNextCell(currRowIndex, curVisibleColIndex, callback = null) {
-        const columns = this.columnList.filter(col => !col.columnGroup && col.visibleIndex >= 0);
+        const columns = this._columns.filter(col => !col.columnGroup && col.visibleIndex >= 0);
         const dataViewIndex = this._getDataViewIndex(currRowIndex);
         if (!this.isValidPosition(dataViewIndex, curVisibleColIndex)) {
             return { rowIndex: currRowIndex, visibleColumnIndex: curVisibleColIndex };
@@ -63752,7 +63752,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * ```
      */
     getPreviousCell(currRowIndex, curVisibleColIndex, callback = null) {
-        const columns = this.columnList.filter(col => !col.columnGroup && col.visibleIndex >= 0);
+        const columns = this._columns.filter(col => !col.columnGroup && col.visibleIndex >= 0);
         const dataViewIndex = this._getDataViewIndex(currRowIndex);
         if (!this.isValidPosition(dataViewIndex, curVisibleColIndex)) {
             return { rowIndex: currRowIndex, visibleColumnIndex: curVisibleColIndex };
@@ -64174,7 +64174,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         if (!this.columnWidthSetByUser) {
             this._columnWidth = this.width !== null ? this.getPossibleColumnWidth() : MINIMUM_COLUMN_WIDTH$2 + 'px';
         }
-        this.columnList.forEach((column) => {
+        this._columns.forEach((column) => {
             if (this.hasColumnLayouts && parseInt(this._columnWidth, 10)) {
                 const columnWidthCombined = parseInt(this._columnWidth, 10) * (column.colEnd ? column.colEnd - column.colStart : 1);
                 column.defaultWidth = columnWidthCombined + 'px';
@@ -64227,7 +64227,8 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * @hidden
      */
     _moveColumns(from, to, pos) {
-        const list = this.columnList.toArray();
+        const orderedList = this._pinnedColumns.concat(this._unpinnedColumns);
+        const list = orderedList;
         this._reorderColumns(from, to, pos, list);
         const newList = this._resetColumnList(list);
         this.updateColumns(newList);
@@ -64239,18 +64240,17 @@ class IgxGridBaseDirective extends DisplayDensityBase {
     updateColumns(newColumns) {
         // update internal collections to retain order.
         this._pinnedColumns = newColumns
-            .filter((c) => c.pinned).sort((a, b) => this._pinnedColumns.indexOf(a) - this._pinnedColumns.indexOf(b));
+            .filter((c) => c.pinned);
         this._unpinnedColumns = newColumns.filter((c) => !c.pinned);
-        this.columnList.reset(newColumns);
-        this.columnList.notifyOnChanges();
-        this._columns = this.columnList.toArray();
+        this._columns = newColumns;
+        this.resetCaches();
     }
     /**
      * @hidden
      */
     _resetColumnList(list) {
         if (!list) {
-            list = this.columnList.toArray();
+            list = this._columns;
         }
         let newList = [];
         list.filter(c => c.level === 0).forEach(p => {
@@ -64298,7 +64298,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         if (this.autoGenerate) {
             this.autogenerateColumns();
         }
-        this.initColumns(this.columnList, (col) => this.columnInit.emit(col));
+        else {
+            this._columns = this.getColumnList();
+        }
+        this.initColumns(this._columns, (col) => this.columnInit.emit(col));
         this.columnListDiffer.diff(this.columnList);
         this.columnList.changes
             .pipe(takeUntil(this.destroy$))
@@ -64306,6 +64309,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
             this.onColumnsChanged(change);
         });
     }
+    getColumnList() {
+        return this.columnList.toArray();
+    }
     /**
      * @hidden
      */
@@ -64347,10 +64353,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      */
     onColumnsChanged(change) {
         const diff = this.columnListDiffer.diff(change);
-        if (this.autoGenerate && this.columnList.length === 0 && this._autoGeneratedCols.length > 0) {
+        if (this.autoGenerate && this._columns.length === 0 && this._autoGeneratedCols.length > 0) {
             // In Ivy if there are nested conditional templates the content children are re-evaluated
             // hence autogenerated columns are cleared and need to be reset.
-            this.columnList.reset(this._autoGeneratedCols);
+            this.updateColumns(this._autoGeneratedCols);
             return;
         }
         if (diff) {
@@ -64365,7 +64371,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
                     this._unpinnedColumns.push(record.item);
                 }
             });
-            this.initColumns(this.columnList, (col) => this.columnInit.emit(col));
+            this.initColumns(this.columnList.toArray(), (col) => this.columnInit.emit(col));
             diff.forEachRemovedItem((record) => {
                 const isColumnGroup = record.item instanceof IgxColumnGroupComponent;
                 if (!isColumnGroup) {
@@ -64661,7 +64667,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
             columns.push(ref.instance);
         });
         this._autoGeneratedCols = columns;
-        this.columnList.reset(columns);
+        this.updateColumns(columns);
         if (data && data.length > 0) {
             this.shouldGenerate = false;
         }
@@ -64673,10 +64679,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * @hidden
      */
     initColumns(collection, cb = null) {
-        this._columnGroups = this.columnList.some(col => col.columnGroup);
+        this._columnGroups = collection.some(col => col.columnGroup);
         if (this.hasColumnLayouts) {
             // Set overall row layout size
-            this.columnList.forEach((col) => {
+            collection.forEach((col) => {
                 if (col.columnLayout) {
                     const layoutSize = col.children ?
                         col.children.reduce((acc, val) => Math.max(val.rowStart + val.gridRowSpan - 1, acc), 1) :
@@ -64688,18 +64694,17 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         if (this.hasColumnLayouts && this.hasColumnGroups) {
             // invalid configuration - multi-row and column groups
             // remove column groups
-            const columnLayoutColumns = this.columnList.filter((col) => col.columnLayout || col.columnLayoutChild);
-            this.columnList.reset(columnLayoutColumns);
+            const columnLayoutColumns = collection.filter((col) => col.columnLayout || col.columnLayoutChild);
+            collection = columnLayoutColumns;
         }
         this._maxLevelHeaderDepth = null;
-        this._columns = this.columnList.toArray();
         collection.forEach((column) => {
             column.defaultWidth = this.columnWidthSetByUser ? this._columnWidth : column.defaultWidth ? column.defaultWidth : '';
             if (cb) {
                 cb(column);
             }
         });
-        this.reinitPinStates();
+        this.updateColumns(collection);
         if (this.hasColumnLayouts) {
             collection.forEach((column) => {
                 column.populateVisibleIndexes();
@@ -64710,11 +64715,11 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * @hidden
      */
     reinitPinStates() {
-        this._pinnedColumns = this.columnList
+        this._pinnedColumns = this._columns
             .filter((c) => c.pinned).sort((a, b) => this._pinnedColumns.indexOf(a) - this._pinnedColumns.indexOf(b));
-        this._unpinnedColumns = this.hasColumnGroups ? this.columnList.filter((c) => !c.pinned) :
-            this.columnList.filter((c) => !c.pinned)
-                .sort((a, b) => this._unpinnedColumns.findIndex(x => x.field === a.field) - this._unpinnedColumns.findIndex(x => x.field === b.field));
+        this._unpinnedColumns = this.hasColumnGroups ? this._columns.filter((c) => !c.pinned) :
+            this._columns.filter((c) => !c.pinned)
+                .sort((a, b) => this._unpinnedColumns.indexOf(a) - this._unpinnedColumns.indexOf(b));
     }
     extractDataFromSelection(source, formatters = false, headers = false, columnData) {
         var _a;
@@ -64894,7 +64899,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         // Make sure we don't exceed unpinned area min width and get pinned and unpinned col collections.
         // We take into account top level columns (top level groups and non groups).
         // If top level is unpinned the pinning handles all children to be unpinned as well.
-        for (const column of this.columnList) {
+        for (const column of this._columns) {
             if (column.pinned && !column.parent) {
                 pinnedColumns.push(column);
             }
@@ -64987,7 +64992,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
     _columnsReordered(column) {
         this.notifyChanges();
         if (this.hasColumnLayouts) {
-            this.columnList.filter(x => x.columnLayout).forEach(x => x.populateVisibleIndexes());
+            this._columns.filter(x => x.columnLayout).forEach(x => x.populateVisibleIndexes());
         }
         // after reordering is done reset cached column collections.
         this.resetColumnCollections();
@@ -65150,7 +65155,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
     }
     isValidPosition(rowIndex, colIndex) {
         const rows = this.summariesRowList.filter(s => s.index !== 0).concat(this.rowList.toArray()).length;
-        const cols = this.columnList.filter(col => !col.columnGroup && col.visibleIndex >= 0 && !col.hidden).length;
+        const cols = this._columns.filter(col => !col.columnGroup && col.visibleIndex >= 0 && !col.hidden).length;
         if (rows < 1 || cols < 1) {
             return false;
         }
@@ -66235,7 +66240,7 @@ class IgxGridMRLNavigationService extends IgxGridNavigationService {
             col.visibleIndex > this.activeNode.column && col.colStart > this.activeNode.layout.colStart);
         if (!column || (previous && this.activeNode.layout.colStart === 1)) {
             const index = previous ? parent.visibleIndex - 1 : parent.visibleIndex + 1;
-            const children = this.grid.columnList.find(cols => cols.columnLayout && cols.visibleIndex === index).children;
+            const children = this.grid.columns.find(cols => cols.columnLayout && cols.visibleIndex === index).children;
             column = previous ? children.toArray().reverse().find(child => child.rowStart <= this.activeNode.layout.rowStart) :
                 children.find(child => this.rowEnd(child) > this.activeNode.layout.rowStart && child.colStart === 1);
         }
@@ -68131,7 +68136,7 @@ class IgxGridComponent extends IgxGridBaseDirective {
             this._applyGrouping();
             this.notifyChanges();
         }
-        if (!this._init && JSON.stringify(oldExpressions) !== JSON.stringify(newExpressions) && this.columnList) {
+        if (!this._init && JSON.stringify(oldExpressions) !== JSON.stringify(newExpressions) && this._columns) {
             const groupedCols = [];
             const ungroupedCols = [];
             const groupedColsArr = newExpressions.filter((obj) => !oldExpressions.some((obj2) => obj.fieldName === obj2.fieldName));
@@ -68195,7 +68200,7 @@ class IgxGridComponent extends IgxGridBaseDirective {
         else {
             this.groupingDiffer = null;
         }
-        if (this.columnList && this.groupingExpressions) {
+        if (this._columns && this.groupingExpressions) {
             this._setGroupColsVisibility(value);
         }
         this._hideGroupedColumns = value;
@@ -68250,7 +68255,7 @@ class IgxGridComponent extends IgxGridBaseDirective {
     getCellByColumnVisibleIndex(rowIndex, index) {
         var _a;
         const row = this.getRowByIndex(rowIndex);
-        const column = this.columnList.find((col) => col.visibleIndex === index);
+        const column = this._columns.find((col) => col.visibleIndex === index);
         if (row && row instanceof IgxGridRow && !((_a = row.data) === null || _a === void 0 ? void 0 : _a.detailsData) && column) {
             return new IgxGridCell(this, rowIndex, column.field);
         }
@@ -68514,7 +68519,7 @@ class IgxGridComponent extends IgxGridBaseDirective {
      * ```
      */
     get hasGroupableColumns() {
-        return this.columnList.some((col) => col.groupable && !col.columnGroup);
+        return this._columns.some((col) => col.groupable && !col.columnGroup);
     }
     /**
      * Returns whether the `IgxGridComponent` has group area.
@@ -68639,7 +68644,7 @@ class IgxGridComponent extends IgxGridBaseDirective {
             this._groupRowTemplate = this.groupTemplate.template;
         }
         this.detailTemplate.changes.subscribe(() => this.trackChanges = (_, rec) => ((rec === null || rec === void 0 ? void 0 : rec.detailsData) !== undefined ? rec.detailsData : rec));
-        if (this.hideGroupedColumns && this.columnList && this.groupingExpressions) {
+        if (this.hideGroupedColumns && this._columns && this.groupingExpressions) {
             this._setGroupColsVisibility(this.hideGroupedColumns);
         }
         this._setupNavigationService();
@@ -68687,9 +68692,9 @@ class IgxGridComponent extends IgxGridBaseDirective {
      * @hidden @internal
      */
     ngDoCheck() {
-        if (this.groupingDiffer && this.columnList && !this.hasColumnLayouts) {
+        if (this.groupingDiffer && this._columns && !this.hasColumnLayouts) {
             const changes = this.groupingDiffer.diff(this.groupingExpressions);
-            if (changes && this.columnList.length > 0) {
+            if (changes && this._columns.length > 0) {
                 changes.forEachAddedItem((rec) => {
                     const col = this.getColumnByName(rec.item.fieldName);
                     if (col) {
@@ -68820,7 +68825,7 @@ class IgxGridComponent extends IgxGridBaseDirective {
     getCellByColumn(rowIndex, columnField) {
         var _a;
         const row = this.getRowByIndex(rowIndex);
-        const column = this.columnList.find((col) => col.field === columnField);
+        const column = this._columns.find((col) => col.field === columnField);
         if (row && row instanceof IgxGridRow && !((_a = row.data) === null || _a === void 0 ? void 0 : _a.detailsData) && column) {
             if (this.pagingMode === 1 && this.gridAPI.grid.page !== 0) {
                 row.index = rowIndex + this.paginator.perPage * this.paginator.page;
@@ -68842,7 +68847,7 @@ class IgxGridComponent extends IgxGridBaseDirective {
      */
     getCellByKey(rowSelector, columnField) {
         const row = this.getRowByKey(rowSelector);
-        const column = this.columnList.find((col) => col.field === columnField);
+        const column = this._columns.find((col) => col.field === columnField);
         if (row && column) {
             return new IgxGridCell(this, row.index, columnField);
         }
@@ -68944,7 +68949,7 @@ class IgxGridComponent extends IgxGridBaseDirective {
         return !expression.fieldName;
     }
     _setGroupColsVisibility(value) {
-        if (this.columnList.length > 0 && !this.hasColumnLayouts) {
+        if (this._columns.length > 0 && !this.hasColumnLayouts) {
             this.groupingExpressions.forEach((expr) => {
                 const col = this.getColumnByName(expr.fieldName);
                 col.hidden = value;
@@ -69119,7 +69124,7 @@ class IgxGridStateDirective {
             },
             columns: {
                 getFeatureState: (context) => {
-                    const gridColumns = context.currGrid.columnList.map((c) => ({
+                    const gridColumns = context.currGrid.columns.map((c) => ({
                         pinned: c.pinned,
                         sortable: c.sortable,
                         filterable: c.filterable,
@@ -69179,6 +69184,9 @@ class IgxGridStateDirective {
                         }
                     });
                     context.grid.updateColumns(newColumns);
+                    newColumns.forEach(col => {
+                        context.grid.columnInit.emit(col);
+                    });
                 }
             },
             groupBy: {
@@ -69428,13 +69436,11 @@ class IgxGridStateDirective {
         // TODO Notify the grid that columnList.changes is triggered by the state directive
         // instead of piping it like below
         const columns = 'columns';
-        this.grid.columnList.changes.pipe(delay(0), take(1)).subscribe(() => {
-            this.featureKeys = this.featureKeys.filter(f => f !== columns);
-            this.restoreFeatures(state);
-        });
         this.applyFeatures(features);
         if (this.featureKeys.includes(columns) && this.options[columns] && state[columns]) {
             this.getFeature(columns).restoreFeatureState(this, state[columns]);
+            this.featureKeys = this.featureKeys.filter(f => f !== columns);
+            this.restoreFeatures(state);
         }
         else {
             this.restoreFeatures(state);
@@ -69485,8 +69491,8 @@ class IgxGridStateDirective {
             else {
                 const expr = item;
                 let dataType;
-                if (this.currGrid.columnList.length > 0) {
-                    dataType = this.currGrid.columnList.find(c => c.field === expr.fieldName).dataType;
+                if (this.currGrid.columns.length > 0) {
+                    dataType = this.currGrid.columns.find(c => c.field === expr.fieldName).dataType;
                 }
                 else if (this.state.columns) {
                     dataType = this.state.columns.find(c => c.field === expr.fieldName).dataType;
@@ -69823,14 +69829,14 @@ class IgxColumnLayoutComponent extends IgxColumnGroupComponent {
     set hidden(value) {
         this._hidden = value;
         this.children.forEach(child => child.hidden = value);
-        if (this.grid && this.grid.columnList && this.grid.columnList.length > 0) {
+        if (this.grid && this.grid.columns && this.grid.columns.length > 0) {
             // reset indexes in case columns are hidden/shown runtime
             const columns = this.grid && this.grid.pinnedColumns && this.grid.unpinnedColumns ?
                 this.grid.pinnedColumns.concat(this.grid.unpinnedColumns) : [];
             if (!this._hidden && !columns.find(c => c.field === this.field)) {
                 this.grid.resetColumnCollections();
             }
-            this.grid.columnList.filter(x => x.columnLayout).forEach(x => x.populateVisibleIndexes());
+            this.grid.columns.filter(x => x.columnLayout).forEach(x => x.populateVisibleIndexes());
         }
     }
     /**
@@ -71779,13 +71785,13 @@ class IgxTreeGridGroupByAreaComponent extends IgxGroupByAreaDirective {
         return this._hideGroupedColumns;
     }
     set hideGroupedColumns(value) {
-        if (this.grid.columnList && this.expressions) {
+        if (this.grid.columns && this.expressions) {
             this.setColumnsVisibility(value);
         }
         this._hideGroupedColumns = value;
     }
     ngAfterContentInit() {
-        if (this.grid.columnList && this.expressions) {
+        if (this.grid.columns && this.expressions) {
             this.groupingDiffer = this.differs.find(this.expressions).create();
             this.updateColumnsVisibility();
         }
@@ -71836,9 +71842,9 @@ class IgxTreeGridGroupByAreaComponent extends IgxGroupByAreaDirective {
         this.updateColumnsVisibility();
     }
     updateColumnsVisibility() {
-        if (this.groupingDiffer && this.grid.columnList && !this.grid.hasColumnLayouts) {
+        if (this.groupingDiffer && this.grid.columns && !this.grid.hasColumnLayouts) {
             const changes = this.groupingDiffer.diff(this.expressions);
-            if (changes && this.grid.columnList.length > 0) {
+            if (changes && this.grid.columns.length > 0) {
                 changes.forEachAddedItem((rec) => {
                     const col = this.grid.getColumnByName(rec.item.fieldName);
                     col.hidden = this.hideGroupedColumns;
@@ -71851,7 +71857,7 @@ class IgxTreeGridGroupByAreaComponent extends IgxGroupByAreaDirective {
         }
     }
     setColumnsVisibility(value) {
-        if (this.grid.columnList.length > 0 && !this.grid.hasColumnLayouts) {
+        if (this.grid.columns.length > 0 && !this.grid.hasColumnLayouts) {
             this.expressions.forEach((expr) => {
                 const col = this.grid.getColumnByName(expr.fieldName);
                 col.hidden = value;
@@ -73351,7 +73357,7 @@ class IgxTreeGridComponent extends IgxGridBaseDirective {
      */
     getCellByColumnVisibleIndex(rowIndex, index) {
         const row = this.getRowByIndex(rowIndex);
-        const column = this.columnList.find((col) => col.visibleIndex === index);
+        const column = this.columns.find((col) => col.visibleIndex === index);
         if (row && row instanceof IgxTreeGridRow && column) {
             return new IgxGridCell(this, rowIndex, column.field);
         }
@@ -73688,7 +73694,7 @@ class IgxTreeGridComponent extends IgxGridBaseDirective {
      */
     getCellByColumn(rowIndex, columnField) {
         const row = this.getRowByIndex(rowIndex);
-        const column = this.columnList.find((col) => col.field === columnField);
+        const column = this.columns.find((col) => col.field === columnField);
         if (row && row instanceof IgxTreeGridRow && column) {
             return new IgxGridCell(this, rowIndex, columnField);
         }
@@ -73707,7 +73713,7 @@ class IgxTreeGridComponent extends IgxGridBaseDirective {
      */
     getCellByKey(rowSelector, columnField) {
         const row = this.getRowByKey(rowSelector);
-        const column = this.columnList.find((col) => col.field === columnField);
+        const column = this.columns.find((col) => col.field === columnField);
         if (row && column) {
             return new IgxGridCell(this, row.index, columnField);
         }
@@ -73765,7 +73771,7 @@ class IgxTreeGridComponent extends IgxGridBaseDirective {
      * ```
      */
     get hasGroupableColumns() {
-        return this.columnList.some((col) => col.groupable && !col.columnGroup);
+        return this.columns.some((col) => col.groupable && !col.columnGroup);
     }
     generateDataFields(data) {
         return super.generateDataFields(data).filter(field => field !== this.childDataKey);
@@ -73848,8 +73854,8 @@ class IgxTreeGridComponent extends IgxGridBaseDirective {
         if (this.hasColumnLayouts) {
             // invalid configuration - tree grid should not allow column layouts
             // remove column layouts
-            const nonColumnLayoutColumns = this.columnList.filter((col) => !col.columnLayout && !col.columnLayoutChild);
-            this.columnList.reset(nonColumnLayoutColumns);
+            const nonColumnLayoutColumns = this.columns.filter((col) => !col.columnLayout && !col.columnLayoutChild);
+            this.updateColumns(nonColumnLayoutColumns);
         }
         super.initColumns(collection, cb);
     }
@@ -74760,7 +74766,7 @@ class IgxHierarchicalGridBaseDirective extends IgxGridBaseDirective {
      */
     get maxLevelHeaderDepth() {
         if (this._maxLevelHeaderDepth === null) {
-            this._maxLevelHeaderDepth = this.columnList.reduce((acc, col) => Math.max(acc, col.level), 0);
+            this._maxLevelHeaderDepth = this.columns.reduce((acc, col) => Math.max(acc, col.level), 0);
         }
         return this._maxLevelHeaderDepth;
     }
@@ -74803,13 +74809,12 @@ class IgxHierarchicalGridBaseDirective extends IgxGridBaseDirective {
             columns.push(ref.instance);
         });
         const result = flatten(columns);
-        this.columnList.reset(result);
-        this.columnList.notifyOnChanges();
+        this.updateColumns(result);
         this.initPinning();
         const factoryColumn = this.resolver.resolveComponentFactory(IgxColumnComponent);
         const outputs = factoryColumn.outputs.filter(o => o.propName !== 'columnChange');
         outputs.forEach(output => {
-            this.columnList.forEach(column => {
+            this.columns.forEach(column => {
                 if (column[output.propName]) {
                     column[output.propName].pipe(takeUntil(column.destroy$)).subscribe((args) => {
                         const rowIslandColumn = this.parentIsland.childColumns.find(col => col.field === column.field);
@@ -75052,6 +75057,7 @@ class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective {
         this.rootGrid = null;
         this.layout_id = `igx-row-island-`;
         this.isInit = false;
+        this._childColumns = [];
     }
     /**
      * Sets if all immediate children of the grids for this `IgxRowIslandComponent` should be expanded/collapsed.
@@ -75141,7 +75147,8 @@ class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective {
         const nestedColumns = this.children.map((layout) => layout.columnList.toArray());
         const colsArray = [].concat.apply([], nestedColumns);
         const topCols = this.columnList.filter((item) => colsArray.indexOf(item) === -1);
-        this.childColumns.reset(topCols);
+        this._childColumns = topCols;
+        this.updateColumns(this._childColumns);
         this.columnList.changes.pipe(takeUntil(this.destroy$)).subscribe(() => {
             Promise.resolve().then(() => {
                 this.updateColumnList();
@@ -75149,7 +75156,7 @@ class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective {
         });
         // handle column changes so that they are passed to child grid instances when columnChange is emitted.
         this.ri_columnListDiffer.diff(this.childColumns);
-        this.childColumns.toArray().forEach(x => x.columnChange.pipe(takeUntil(x.destroy$)).subscribe(() => this.updateColumnList()));
+        this._childColumns.forEach(x => x.columnChange.pipe(takeUntil(x.destroy$)).subscribe(() => this.updateColumnList()));
         this.childColumns.changes.pipe(takeUntil(this.destroy$)).subscribe((change) => {
             const diff = this.ri_columnListDiffer.diff(change);
             if (diff) {
@@ -75236,15 +75243,9 @@ class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective {
             }
             return false;
         });
-        this.childColumns.reset(topCols);
-        if (this.parentIsland) {
-            this.parentIsland.columnList.notifyOnChanges();
-        }
-        else {
-            this.rootGrid.columnList.notifyOnChanges();
-        }
+        this._childColumns = topCols;
         this.rowIslandAPI.getChildGrids().forEach((grid) => {
-            grid.createColumnsList(this.childColumns.toArray());
+            grid.createColumnsList(this._childColumns);
             if (!document.body.contains(grid.nativeElement)) {
                 grid.updateOnRender = true;
             }
@@ -75945,7 +75946,7 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
      */
     getCellByColumnVisibleIndex(rowIndex, index) {
         const row = this.getRowByIndex(rowIndex);
-        const column = this.columnList.find((col) => col.visibleIndex === index);
+        const column = this.columns.find((col) => col.visibleIndex === index);
         if (row && row instanceof IgxHierarchicalGridRow && column) {
             return new IgxGridCell(this, rowIndex, column.field);
         }
@@ -76169,7 +76170,7 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
      */
     getCellByColumn(rowIndex, columnField) {
         const row = this.getRowByIndex(rowIndex);
-        const column = this.columnList.find((col) => col.field === columnField);
+        const column = this.columns.find((col) => col.field === columnField);
         if (row && row instanceof IgxHierarchicalGridRow && column) {
             return new IgxGridCell(this, rowIndex, columnField);
         }
@@ -76188,7 +76189,7 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
      */
     getCellByKey(rowSelector, columnField) {
         const row = this.getRowByKey(rowSelector);
-        const column = this.columnList.find((col) => col.field === columnField);
+        const column = this.columns.find((col) => col.field === columnField);
         if (row && column) {
             return new IgxGridCell(this, row.index, columnField);
         }
@@ -76464,8 +76465,8 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
         if (this.hasColumnLayouts) {
             // invalid configuration - hierarchical grid should not allow column layouts
             // remove column layouts
-            const nonColumnLayoutColumns = this.columnList.filter((col) => !col.columnLayout && !col.columnLayoutChild);
-            this.columnList.reset(nonColumnLayoutColumns);
+            const nonColumnLayoutColumns = this.columns.filter((col) => !col.columnLayout && !col.columnLayoutChild);
+            this.updateColumns(nonColumnLayoutColumns);
         }
         super.initColumns(collection, cb);
     }
@@ -76473,16 +76474,25 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
         if (this.parentIsland && this.parentIsland.childColumns.length > 0 && !this.autoGenerate) {
             this.createColumnsList(this.parentIsland.childColumns.toArray());
         }
-        super.setupColumns();
+        else {
+            super.setupColumns();
+        }
+    }
+    getColumnList() {
+        const childLayouts = this.parent ? this.childLayoutList : this.allLayoutList;
+        const nestedColumns = childLayouts.map((layout) => layout.columnList.toArray());
+        const colsArray = [].concat.apply([], nestedColumns);
+        if (colsArray.length > 0) {
+            const topCols = this.columnList.filter((item) => colsArray.indexOf(item) === -1);
+            return topCols;
+        }
+        else {
+            return this.columnList.toArray();
+        }
     }
     onColumnsChanged(change) {
         Promise.resolve().then(() => {
             this.updateColumnList();
-            const cols = change.filter(c => c.grid === this);
-            if (cols.length > 0 || this.autoGenerate) {
-                this.columnList.reset(cols);
-                super.onColumnsChanged(this.columnList);
-            }
         });
     }
     _shouldAutoSize(renderedHeight) {
@@ -76498,8 +76508,8 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
         const colLength = this.columnList.length;
         if (colsArray.length > 0) {
             const topCols = this.columnList.filter((item) => colsArray.indexOf(item) === -1);
-            this.columnList.reset(topCols);
-            if (recalcColSizes && this.columnList.length !== colLength) {
+            this.updateColumns(topCols);
+            if (recalcColSizes && this.columns.length !== colLength) {
                 this.calculateGridSizes(false);
             }
         }
@@ -86442,7 +86452,7 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
      */
     ngAfterContentInit() {
         // ignore any user defined columns and auto-generate based on pivot config.
-        this.columnList.reset([]);
+        this.updateColumns([]);
         Promise.resolve().then(() => {
             this.setupColumns();
         });
@@ -87320,8 +87330,8 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
                 }
             }
         });
+        this.updateColumns(columns);
         this.reflow();
-        this.columnList.reset(columns);
         if (data && data.length > 0) {
             this.shouldGenerate = false;
         }