igniteui-angular 13.2.2 → 13.2.3

package/fesm2020/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 * as JSZip from 'jszip';
 import * as i1$1 from '@angular/platform-browser';
@@ -3094,7 +3094,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);
         }
@@ -3725,7 +3725,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);
@@ -48131,7 +48131,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;
@@ -50565,7 +50565,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 };
@@ -50632,7 +50632,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 });
@@ -50651,7 +50651,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;
@@ -52213,7 +52213,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);
         });
@@ -52520,7 +52520,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);
         });
@@ -53821,7 +53821,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;
@@ -54322,7 +54322,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
@@ -56157,7 +56157,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;
@@ -56191,7 +56191,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;
             });
@@ -56221,7 +56221,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 };
@@ -56251,7 +56251,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);
@@ -56268,7 +56268,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);
@@ -56341,7 +56341,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);
@@ -59241,7 +59241,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;
             }
@@ -59298,7 +59298,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) {
@@ -59319,7 +59319,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);
@@ -59352,7 +59352,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) {
@@ -61286,8 +61286,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;
     }
@@ -61300,7 +61300,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.
@@ -61815,13 +61815,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--;
@@ -61888,7 +61888,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
@@ -62151,7 +62151,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;
         }
@@ -62411,7 +62411,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * ```
      */
     get columns() {
-        return this._rendered ? this._columns : [];
+        return this._columns || [];
     }
     /**
      * Gets an array of the pinned `IgxColumnComponent`s.
@@ -62472,7 +62472,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 &&
@@ -62490,7 +62490,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;
     }
     /**
@@ -62619,14 +62619,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
@@ -62688,12 +62688,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);
     }
@@ -62811,7 +62811,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);
@@ -62902,7 +62902,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);
                     }
@@ -63264,7 +63264,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.
@@ -63275,7 +63275,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.
@@ -63286,7 +63286,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.
@@ -63297,7 +63297,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;
     }
     /**
@@ -63311,7 +63311,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;
     }
@@ -63352,7 +63352,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * ```
      */
     get hasColumnLayouts() {
-        return !!this.columnList.some(col => col.columnLayout);
+        return !!this._columns.some(col => col.columnLayout);
     }
     /**
      * @hidden @internal
@@ -63807,7 +63807,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * ```
      */
     selectAllColumns() {
-        this.selectColumns(this.columnList.filter(c => !c.columnGroup));
+        this.selectColumns(this._columns.filter(c => !c.columnGroup));
     }
     /**
      *
@@ -63916,7 +63916,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
     navigateTo(rowIndex, visibleColIndex = -1, cb = null) {
         const totalItems = this.totalItemCount ?? 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)) {
@@ -63962,7 +63962,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 };
@@ -63997,7 +63997,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 };
@@ -64419,7 +64419,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';
@@ -64472,7 +64472,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);
@@ -64484,18 +64485,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 => {
@@ -64543,7 +64543,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$))
@@ -64551,6 +64554,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
             this.onColumnsChanged(change);
         });
     }
+    getColumnList() {
+        return this.columnList.toArray();
+    }
     /**
      * @hidden
      */
@@ -64592,10 +64598,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) {
@@ -64610,7 +64616,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) {
@@ -64906,7 +64912,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;
         }
@@ -64918,10 +64924,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) :
@@ -64933,18 +64939,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();
@@ -64955,11 +64960,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) {
         let columnsArray;
@@ -65138,7 +65143,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);
             }
@@ -65231,7 +65236,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();
@@ -65393,7 +65398,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;
         }
@@ -66473,7 +66478,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);
         }
@@ -68348,7 +68353,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));
@@ -68412,7 +68417,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;
@@ -68466,7 +68471,7 @@ class IgxGridComponent 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 IgxGridRow && !row.data?.detailsData && column) {
             return new IgxGridCell(this, rowIndex, column.field);
         }
@@ -68729,7 +68734,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.
@@ -68853,7 +68858,7 @@ class IgxGridComponent extends IgxGridBaseDirective {
             this._groupRowTemplate = this.groupTemplate.template;
         }
         this.detailTemplate.changes.subscribe(() => this.trackChanges = (_, rec) => (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();
@@ -68901,9 +68906,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) {
@@ -69033,7 +69038,7 @@ class IgxGridComponent 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 IgxGridRow && !row.data?.detailsData && column) {
             if (this.pagingMode === 1 && this.gridAPI.grid.page !== 0) {
                 row.index = rowIndex + this.paginator.perPage * this.paginator.page;
@@ -69055,7 +69060,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);
         }
@@ -69157,7 +69162,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;
@@ -69332,7 +69337,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,
@@ -69392,6 +69397,9 @@ class IgxGridStateDirective {
                         }
                     });
                     context.grid.updateColumns(newColumns);
+                    newColumns.forEach(col => {
+                        context.grid.columnInit.emit(col);
+                    });
                 }
             },
             groupBy: {
@@ -69641,13 +69649,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);
@@ -69698,8 +69704,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;
@@ -70034,14 +70040,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());
         }
     }
     /**
@@ -71968,13 +71974,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();
         }
@@ -72025,9 +72031,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;
@@ -72040,7 +72046,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;
@@ -73520,7 +73526,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);
         }
@@ -73857,7 +73863,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);
         }
@@ -73876,7 +73882,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);
         }
@@ -73934,7 +73940,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);
@@ -74017,8 +74023,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);
     }
@@ -74926,7 +74932,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;
     }
@@ -74969,13 +74975,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);
@@ -75216,6 +75221,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.
@@ -75305,7 +75311,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();
@@ -75313,7 +75320,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) {
@@ -75400,15 +75407,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;
             }
@@ -76097,7 +76098,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);
         }
@@ -76320,7 +76321,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);
         }
@@ -76339,7 +76340,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);
         }
@@ -76615,8 +76616,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);
     }
@@ -76624,16 +76625,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) {
@@ -76649,8 +76659,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);
             }
         }
@@ -86544,7 +86554,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();
         });
@@ -87417,8 +87427,8 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
                 }
             }
         });
+        this.updateColumns(columns);
         this.reflow();
-        this.columnList.reset(columns);
         if (data && data.length > 0) {
             this.shouldGenerate = false;
         }