@progress/kendo-angular-pivotgrid 16.6.0-develop.2 → 16.6.0-develop.4

package/fesm2020/progress-kendo-angular-pivotgrid.mjs

@@ -278,19 +278,19 @@ const matchAriaAttributes = (wrapper) => {
     const firstColHeaderRowCellsIds = Array.from(firstColHeadersRow?.children).map(el => el.getAttribute('id')).join(' ');
     firstColHeadersRow.setAttribute('aria-owns', `${emptyCell.getAttribute('id')} ${firstColHeaderRowCellsIds}`);
     rowHeaderRows.forEach((row, index) => {
-        const valueCellsIds = filterAndMap(Array.from(valueTableCells), c => c.getAttribute('id').split('-')[4] === (index + 1).toString(), c => c.getAttribute('id'));
+        const valueCellsIds = filterAndMap(Array.from(valueTableCells), c => c.getAttribute('id')?.split('-')[4] === (index + 1).toString(), c => c.getAttribute('id'));
         row.setAttribute('aria-owns', valueCellsIds.join(' '));
     });
     valueTableCells.forEach(cell => {
-        const cellColIndex = +cell.getAttribute('id').split('-')[5];
+        const cellColIndex = +cell.getAttribute('id')?.split('-')[5];
         const colHeaderCellsIds = filterAndMap(Array.from(colHeaderCells), c => {
-            const headerCellColIndex = +c.getAttribute('id').split('-')[5];
+            const headerCellColIndex = +c.getAttribute('id')?.split('-')[5];
             const headerCellColspan = +c.getAttribute('colspan');
             const colIndexIsEqual = cellColIndex === headerCellColIndex;
-            const cellColIndexIsWithinHeaderCellRange = headerCellColspan > 1 && (headerCellColIndex + headerCellColspan - 1 >= cellColIndex);
+            const cellColIndexIsWithinHeaderCellRange = headerCellColIndex < cellColIndex && headerCellColspan > 1 && (headerCellColIndex + headerCellColspan - 1 >= cellColIndex);
             return colIndexIsEqual || cellColIndexIsWithinHeaderCellRange;
         }, c => c.getAttribute('id'));
-        cell.setAttribute('aria-describedby', colHeaderCellsIds.join(' '));
+        colHeaderCellsIds.length && cell.setAttribute('aria-describedby', colHeaderCellsIds.join(' '));
     });
 };
 /**
@@ -365,6 +365,31 @@ const swapItems = (arr, i1, i2) => {
     arr[i1] = arr[i2];
     arr[i2] = temp;
 };
+/**
+ * @hidden
+ */
+const isVisible = (el, container, offsetY, rtl) => {
+    const elTop = el.offsetTop;
+    const elBottom = elTop + el.clientHeight;
+    let rect;
+    let containerRect;
+    if (rtl) {
+        rect = el.getBoundingClientRect();
+        containerRect = container.getBoundingClientRect();
+    }
+    const elLeft = rtl ? rect.left : el.offsetLeft;
+    const elRight = rtl ? rect.right : elLeft + el.clientWidth;
+    const containerTop = container.scrollTop;
+    const containerBottom = containerTop + container.clientHeight;
+    const containerLeft = rtl ? containerRect.left : container.scrollLeft;
+    const containerRight = rtl ? containerRect.right : containerLeft + container.clientWidth;
+    const visibleY = elTop >= containerTop - offsetY && elBottom <= containerBottom - offsetY;
+    const visibleX = rtl ? elRight <= containerRight && elLeft >= containerLeft : elLeft >= containerLeft && elRight <= containerRight;
+    return {
+        visibleX,
+        visibleY
+    };
+};
 
 /**
  * @hidden
@@ -3346,8 +3371,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-pivotgrid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1721847262,
-    version: '16.6.0-develop.2',
+    publishDate: 1722517399,
+    version: '16.6.0-develop.4',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
 
@@ -3498,6 +3523,117 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
+/**
+ * @hidden
+ */
+class ScrollableTable {
+    constructor(element, handlers, options) {
+        this.element = element;
+        this.handlers = handlers;
+        this.options = options;
+        this.startRow = 0;
+        this.startCol = 0;
+        this.lastKnownScrollPosition = { top: 0, left: 0 };
+        this.offsetFirst = 0;
+        this.scrollHandler = (e) => {
+            const verticalDir = this.element.scrollTop - this.lastKnownScrollPosition.top;
+            const horizontalDir = Math.abs(this.element.scrollLeft) - this.lastKnownScrollPosition.left;
+            if (this.options.rowVirtualization) {
+                if (verticalDir > 0) {
+                    if (this.element.scrollTop > (this.renderedRows * this.options.itemHeight + this.offsetFirst - this.rect.height)) {
+                        this.startRow = Math.floor(this.element.scrollTop / this.options.itemHeight);
+                        this.rowVirtualizationUpdate();
+                    }
+                }
+                else {
+                    if (this.element.scrollTop <= this.offsetFirst) {
+                        this.startRow = Math.max(0, Math.ceil(this.element.scrollTop / this.options.itemHeight) - Math.ceil(this.options.renderedRows / 3));
+                        this.rowVirtualizationUpdate();
+                    }
+                }
+            }
+            if (this.options.columnVirtualization) {
+                if (horizontalDir > 0) {
+                    if (Math.abs(this.element.scrollLeft) - (Math.max(this.startCol - 1, 0) * (this.options.colWidth || 200)) > (this.options.colWidth || 200)) {
+                        this.startCol = Math.min(Math.max(Math.floor(Math.abs(this.element.scrollLeft) / this.options.itemWidth) - 1, 0), this.totalCols - this.renderedCols);
+                        this.handlers.onScroll();
+                    }
+                }
+                else {
+                    if (Math.abs(this.element.scrollLeft) <= (this.startCol + 1) * (this.options.colWidth || 200)) {
+                        this.startCol = Math.min(Math.max(Math.floor(Math.abs(this.element.scrollLeft) / this.options.itemWidth) - 1, 0), this.totalCols - this.renderedCols);
+                        this.handlers.onScroll();
+                    }
+                }
+            }
+            this.lastKnownScrollPosition = {
+                top: this.element.scrollTop,
+                left: Math.abs(this.element.scrollLeft)
+            };
+        };
+        this.scrollEndHandler = () => {
+            this.handlers.onScrollEnd();
+        };
+        this.initialize();
+    }
+    onNewData(recalculateSize = false) {
+        this.offsetFirst = this.startRow * this.options.itemHeight;
+        this.renderedRows = Math.min(this.options.renderedRows || Math.ceil(this.visibleRows * 3), this.total);
+        this.endRow = this.startRow + this.renderedRows;
+        this.renderedCols = Math.min(this.options.renderedCols || Math.ceil(this.visibleCols * 1.3), this.totalCols);
+        this.element.querySelector('table').style.transform = `translateY(${this.offsetFirst}px)`;
+        recalculateSize && this.recalculateSize();
+    }
+    destroy() {
+        this.element.removeEventListener('scroll', this.scrollHandler);
+        this.element.removeEventListener('scrollend', this.scrollEndHandler);
+        this.element.removeChild(this.stretcher);
+    }
+    initialize() {
+        this.rtl = this.options.rtl;
+        this.rect = this.element.getBoundingClientRect();
+        // visible rows and cols
+        this.visibleRows = Math.ceil(this.rect.height / this.options.itemHeight);
+        this.visibleCols = Math.ceil(this.rect.width / this.options.itemWidth);
+        // current totals
+        this.total = this.options.total;
+        this.totalCols = this.options.totalCols;
+        const totalHeight = this.total * this.options.itemHeight;
+        const totalWidth = this.totalCols * this.options.itemWidth;
+        // "page" size (rows and cols)
+        this.renderedRows = Math.min(this.options.renderedRows || Math.ceil(this.visibleRows * 3), this.total);
+        this.renderedCols = Math.min(this.options.renderedCols || Math.ceil(this.visibleCols * 1.3), this.totalCols);
+        // start and end row/col
+        this.startRow = 0;
+        this.startCol = 0;
+        this.endRow = this.startRow + this.renderedRows;
+        this.endCol = this.startCol + this.renderedCols;
+        // element that ensures correct scrolling dimensions of the container
+        this.stretcher = document.createElement('DIV');
+        this.stretcher.style.height = `${totalHeight}px`;
+        this.stretcher.style.width = `${totalWidth}px`;
+        this.element.appendChild(this.stretcher);
+        this.element.addEventListener('scroll', this.scrollHandler);
+        this.element.addEventListener('scrollend', this.scrollEndHandler);
+    }
+    recalculateSize() {
+        const totalHeight = this.total * this.options.itemHeight;
+        const totalWidth = this.totalCols * this.options.itemWidth;
+        this.stretcher.style.height = `${totalHeight}px`;
+        this.stretcher.style.width = `${totalWidth}px`;
+        this.rect = this.element.getBoundingClientRect();
+        // visible rows and cols
+        this.visibleRows = Math.ceil(this.rect.height / this.options.itemHeight);
+        this.visibleCols = Math.ceil(this.rect.width / this.options.itemWidth);
+    }
+    rowVirtualizationUpdate() {
+        this.endRow = Math.min(this.startRow + this.renderedRows, this.total);
+        this.offsetFirst = this.startRow * this.options.itemHeight;
+        this.element.querySelector('table').style.transform = `translateY(${this.offsetFirst}px)`;
+        this.handlers.onScroll();
+    }
+}
+
 /**
  * @hidden
  */
@@ -3696,42 +3832,201 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }] } });
 
+/**
+ * @hidden
+ */
+class PivotGridScrollService {
+    constructor() {
+        this.virtualScrolling = false;
+    }
+}
+PivotGridScrollService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridScrollService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+PivotGridScrollService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridScrollService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridScrollService, decorators: [{
+            type: Injectable
+        }] });
+
 /**
  * @hidden
  */
 class PivotGridTableComponent {
-    constructor(dataService) {
+    constructor(host, dataService, localization, pivotGrid, zone, scrollService) {
+        this.host = host;
         this.dataService = dataService;
-        this.dataChangeSubs = new Subscription();
+        this.localization = localization;
+        this.pivotGrid = pivotGrid;
+        this.zone = zone;
+        this.scrollService = scrollService;
+        this.startRowIndex = 0;
+        this.startColIndex = 0;
+        this.rtl = false;
+        this.subs = new Subscription();
+        this.colsUpdateCallback = (cols) => {
+            this.renderedCols = Math.min(cols.length, this.scrollableSettings?.columns);
+            this.renderedCols && this.scrollable && (this.scrollable.totalCols = cols.length);
+            (this.scrollableSettings && this.scrollableSettings.type !== 'row') && this.scrollable?.onNewData(true);
+            this.headerItems = cols;
+            isDocumentAvailable() && !this.scrollable && this.tableType === 'values' && (this.columnVirtualization || this.rowVirtualization) && this.initScrollable();
+        };
+        this.initScrollable = () => {
+            this.scrollable = new ScrollableTable(this.host.nativeElement, {
+                onScroll: () => {
+                    this.startRowIndex = this.scrollable.startRow;
+                    this.startColIndex = this.scrollable.startCol;
+                    this.renderedRows = this.rows.slice(this.startRowIndex, this.startRowIndex + this.scrollableSettings.rows);
+                    this.scrollable.renderedRows = this.renderedRows.length;
+                    this.scrollable.renderedCols = this.renderedCols;
+                },
+                onScrollEnd: () => {
+                    matchAriaAttributes(this.host.nativeElement.closest('.k-pivotgrid'));
+                }
+            }, {
+                itemHeight: this.scrollableSettings.rowHeight,
+                itemWidth: this.colWidth || 200,
+                total: this.totalRows,
+                totalCols: this.headerItems.length,
+                renderedRows: this.scrollableSettings.rows,
+                renderedCols: this.scrollableSettings.columns,
+                columnVirtualization: this.columnVirtualization,
+                rowVirtualization: this.rowVirtualization,
+                rtl: this.rtl
+            });
+        };
+        this.subs.add(this.localization.changes.subscribe(({ rtl }) => {
+            this.rtl = rtl;
+            this.scrollable && (this.scrollable.rtl = rtl);
+        }));
     }
     get pivotGridId() {
         return `kendo-pivotgrid-${this.dataService.pivotGridId}-`;
     }
+    get columnVirtualization() {
+        return this.scrollableSettings?.type && this.scrollableSettings?.type !== 'row';
+    }
+    get rowVirtualization() {
+        return this.scrollableSettings?.type && this.scrollableSettings?.type !== 'column';
+    }
     ngOnInit() {
-        this.dataChangeSubs.add(this.dataService[`${this.tableType}Rows`].subscribe(rows => this.rows = rows));
-        this.dataChangeSubs.add(this.tableType === 'values' ?
-            this.dataService.columnHeaderCols.subscribe(cols => this.headerItems = cols) :
-            this.dataService[`${this.tableType}Cols`].subscribe(cols => this.headerItems = cols));
+        this.subs.add(this.dataService[`${this.tableType}Rows`].subscribe(rows => {
+            this.rows = rows;
+            this.renderedRows = this.scrollableSettings ? rows.slice(this.startRowIndex, this.startRowIndex + this.scrollableSettings.rows) : rows;
+            this.totalRows && this.totalRows !== rows.length && this.scrollable && (this.scrollable.total = rows.length);
+            this.scrollable && this.scrollable.onNewData(this.totalRows && this.totalRows !== rows.length);
+            this.totalRows = rows.length;
+        }));
+        this.subs.add(this.tableType === 'values' ?
+            this.dataService.columnHeaderCols.subscribe(this.colsUpdateCallback) :
+            this.dataService[`${this.tableType}Cols`].subscribe(this.colsUpdateCallback));
+    }
+    ngAfterViewInit() {
+        if (isDocumentAvailable() && this.scrollService.virtualScrolling) {
+            this.initScrollableKeyboardNavigation();
+        }
     }
     ngOnDestroy() {
-        this.dataChangeSubs.unsubscribe();
+        this.subs.unsubscribe();
+        this.scrollable?.destroy();
+    }
+    initScrollableKeyboardNavigation() {
+        this.host.nativeElement.addEventListener('keydown', (e) => {
+            if (this.tableType === 'values' && e.target.tagName === 'TD') {
+                e.stopImmediatePropagation();
+                e.preventDefault();
+                if (e.keyCode === Keys.ArrowLeft) {
+                    const id = e.target.getAttribute('id');
+                    if (id.split('-')[5] === '1') {
+                        const target = document.querySelector(`tr[aria-owns*="${id}"]`);
+                        this.pivotGrid.navigation.focusElement(target.lastElementChild, e.target);
+                    }
+                    else {
+                        this.pivotGrid.navigation.focusElement(e.target.previousElementSibling, e.target);
+                        if (!isVisible(e.target.previousElementSibling, this.host.nativeElement, this.scrollable.offsetFirst, this.rtl).visibleX) {
+                            e.target.previousElementSibling.scrollIntoView({ behavior: 'auto', block: 'nearest', inline: 'start' });
+                        }
+                    }
+                }
+                else if (e.keyCode === Keys.ArrowRight) {
+                    const id = e.target.getAttribute('id');
+                    if (id.split('-')[5] !== this.headerItems.length.toString()) {
+                        this.pivotGrid.navigation.focusElement(e.target.nextElementSibling, e.target);
+                        if (!isVisible(e.target.nextElementSibling, this.host.nativeElement, this.scrollable.offsetFirst, this.rtl).visibleX) {
+                            e.target.nextElementSibling.scrollIntoView({ behavior: 'auto', block: 'nearest', inline: 'start' });
+                        }
+                    }
+                }
+                else if (e.keyCode === Keys.ArrowUp) {
+                    const id = e.target.getAttribute('id');
+                    if (id.split('-')[4] === '1') {
+                        const target = document.getElementById(e.target.getAttribute('aria-describedby').split(' ').pop());
+                        this.pivotGrid.navigation.focusElement(target, e.target);
+                    }
+                    else {
+                        const index = Array.from(e.target.parentElement.children).findIndex(el => el === e.target);
+                        const elementToFocus = e.target.parentElement.previousElementSibling.children[index];
+                        this.pivotGrid.navigation.focusElement(elementToFocus, e.target);
+                        if (!isVisible(elementToFocus, this.host.nativeElement, this.scrollable.offsetFirst, this.rtl).visibleY) {
+                            elementToFocus.scrollIntoView();
+                        }
+                    }
+                }
+                else if (e.keyCode === Keys.ArrowDown) {
+                    const id = e.target.getAttribute('id');
+                    if (id.split('-')[4] !== this.totalRows.toString()) {
+                        const index = Array.from(e.target.parentElement.children).findIndex(el => el === e.target);
+                        const elementToFocus = e.target.parentElement.nextElementSibling.children[index];
+                        this.pivotGrid.navigation.focusElement(elementToFocus, e.target);
+                        if (!isVisible(elementToFocus, this.host.nativeElement, this.scrollable.offsetFirst, this.rtl).visibleY) {
+                            elementToFocus.scrollIntoView(false);
+                        }
+                    }
+                }
+            }
+            if (this.tableType === 'rowHeader' && e.target.tagName === 'TH' && e.keyCode === Keys.ArrowRight) {
+                if (e.target.matches(':last-child')) {
+                    e.stopImmediatePropagation();
+                    e.preventDefault();
+                    const valuesContainer = this.host.nativeElement.nextElementSibling;
+                    valuesContainer.scrollLeft = this.rtl ? valuesContainer.scrollWidth : 0;
+                    this.zone.runOutsideAngular(() => setTimeout(() => {
+                        const elementToFocusId = e.target.parentElement.getAttribute('aria-owns').split(' ')[0];
+                        const elementToFocus = document.getElementById(elementToFocusId);
+                        this.pivotGrid.navigation.focusElement(elementToFocus, e.target);
+                    }));
+                }
+            }
+            if (this.tableType === 'columnHeader' && e.target.tagName === 'TH' && e.keyCode === Keys.ArrowDown) {
+                if (e.target.parentElement.matches(':last-child')) {
+                    e.stopImmediatePropagation();
+                    e.preventDefault();
+                    const valuesContainer = this.host.nativeElement.nextElementSibling.nextElementSibling;
+                    valuesContainer.scrollTop = 0;
+                    this.zone.runOutsideAngular(() => setTimeout(() => {
+                        const elementToFocus = valuesContainer.querySelector(`td[aria-describedby*="${e.target.getAttribute('id')}"]`);
+                        this.pivotGrid.navigation.focusElement(elementToFocus, e.target);
+                    }));
+                }
+            }
+        }, true);
     }
 }
-PivotGridTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridTableComponent, deps: [{ token: PivotGridDataService }], target: i0.ɵɵFactoryTarget.Component });
-PivotGridTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PivotGridTableComponent, isStandalone: true, selector: "kendo-pivotgrid-table", inputs: { tableType: "tableType", colWidth: "colWidth", customCellTemplate: "customCellTemplate", valueCellTemplate: "valueCellTemplate", rowHeaderCellTemplate: "rowHeaderCellTemplate", columnHeaderCellTemplate: "columnHeaderCellTemplate" }, ngImport: i0, template: `
+PivotGridTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridTableComponent, deps: [{ token: i0.ElementRef }, { token: PivotGridDataService }, { token: i1$1.LocalizationService }, { token: PivotGridComponent }, { token: i0.NgZone }, { token: PivotGridScrollService }], target: i0.ɵɵFactoryTarget.Component });
+PivotGridTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PivotGridTableComponent, isStandalone: true, selector: "kendo-pivotgrid-table", inputs: { tableType: "tableType", colWidth: "colWidth", customCellTemplate: "customCellTemplate", valueCellTemplate: "valueCellTemplate", rowHeaderCellTemplate: "rowHeaderCellTemplate", columnHeaderCellTemplate: "columnHeaderCellTemplate", scrollableSettings: "scrollableSettings" }, ngImport: i0, template: `
         <table
             class="k-pivotgrid-table"
-            role="presentation">
+            role="presentation"
+            [ngStyle]="{float: this.tableType === 'values' ? this.rtl ? 'right' : 'left' : 'initial'}">
             <colgroup>
+                <col *ngIf="tableType === 'values' && columnVirtualization && startColIndex > 0" [style.width]="startColIndex * (colWidth >= 0 ? colWidth : 200) + 'px'"/>
                 <col 
-                    *ngFor="let item of headerItems;"
+                    *ngFor="let item of (tableType === 'values' && columnVirtualization ? headerItems?.slice(0, renderedCols) : headerItems);"
                     [style.width]="tableType !== 'rowHeader' ? colWidth >= 0 ? colWidth + 'px' : '200px' : undefined" />
             </colgroup>
             <tbody class="k-pivotgrid-tbody" [attr.role]="tableType === 'values' ? 'none' : 'rowgroup'">
-                <tr *ngFor="let row of rows; index as rowIndex"
+                <tr *ngFor="let row of (tableType === 'values' && rowVirtualization ? renderedRows : rows); index as rowIndex"
                     class="k-pivotgrid-row"
                     [attr.role]="tableType === 'values' ? 'none' : 'row'">
-                    <ng-container *ngFor="let cell of row.cells; index as colIndex">
+                    <td *ngIf="tableType === 'values' && columnVirtualization && startColIndex > 0" class="k-pivotgrid-cell"></td>
+                    <ng-container *ngFor="let cell of (tableType === 'values' && columnVirtualization ? row.cells.slice(startColIndex, (startColIndex + renderedCols)) : row.cells); index as colIndex">
                         <th
                             *ngIf="cell && tableType !== 'values'" 
                             [kendoPivotGridCell]="cell"
@@ -3739,8 +4034,8 @@ PivotGridTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                             [rowHeaderCellTemplate]="rowHeaderCellTemplate"
                             [columnHeaderCellTemplate]="columnHeaderCellTemplate"
                             [tableType]="tableType"
-                            [colIndex]="colIndex"
-                            [rowIndex]="rowIndex"
+                            [colIndex]="colIndex + startColIndex"
+                            [rowIndex]="rowIndex + startRowIndex"
                             [attr.aria-expanded]="cell.hasChildren && cell.children.length ? 'true' : 'false'"
                             [attr.role]="tableType === 'columnHeader' ? 'columnheader' : tableType === 'rowHeader' ? 'rowheader' : 'none'"
                             [attr.id]="pivotGridId + (tableType === 'columnHeader' ? 'ch-' : 'rh-') + (rowIndex + 1) + '-' + (colIndex + 1)"></th>
@@ -3750,15 +4045,15 @@ PivotGridTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                             [valueCellTemplate]="valueCellTemplate"
                             [kendoPivotGridCell]="cell"
                             tableType="values"
-                            [colIndex]="colIndex"
-                            [rowIndex]="rowIndex"
+                            [colIndex]="colIndex + startColIndex"
+                            [rowIndex]="rowIndex + startRowIndex"
                             role="gridcell"
-                            [attr.id]="pivotGridId + 'cell-' + (rowIndex + 1) + '-' + (colIndex + 1)"></td>
+                            [attr.id]="pivotGridId + 'cell-' + (rowIndex + startRowIndex + 1) + '-' + (colIndex + startColIndex + 1)"></td>
                     </ng-container>
                 </tr>
             </tbody>
         </table>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PivotGridCellDirective, selector: "[kendoPivotGridCell]", inputs: ["kendoPivotGridCell", "tableType", "rowIndex", "colIndex", "customCellTemplate", "valueCellTemplate", "rowHeaderCellTemplate", "columnHeaderCellTemplate"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PivotGridCellDirective, selector: "[kendoPivotGridCell]", inputs: ["kendoPivotGridCell", "tableType", "rowIndex", "colIndex", "customCellTemplate", "valueCellTemplate", "rowHeaderCellTemplate", "columnHeaderCellTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridTableComponent, decorators: [{
             type: Component,
             args: [{
@@ -3766,17 +4061,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     template: `
         <table
             class="k-pivotgrid-table"
-            role="presentation">
+            role="presentation"
+            [ngStyle]="{float: this.tableType === 'values' ? this.rtl ? 'right' : 'left' : 'initial'}">
             <colgroup>
+                <col *ngIf="tableType === 'values' && columnVirtualization && startColIndex > 0" [style.width]="startColIndex * (colWidth >= 0 ? colWidth : 200) + 'px'"/>
                 <col 
-                    *ngFor="let item of headerItems;"
+                    *ngFor="let item of (tableType === 'values' && columnVirtualization ? headerItems?.slice(0, renderedCols) : headerItems);"
                     [style.width]="tableType !== 'rowHeader' ? colWidth >= 0 ? colWidth + 'px' : '200px' : undefined" />
             </colgroup>
             <tbody class="k-pivotgrid-tbody" [attr.role]="tableType === 'values' ? 'none' : 'rowgroup'">
-                <tr *ngFor="let row of rows; index as rowIndex"
+                <tr *ngFor="let row of (tableType === 'values' && rowVirtualization ? renderedRows : rows); index as rowIndex"
                     class="k-pivotgrid-row"
                     [attr.role]="tableType === 'values' ? 'none' : 'row'">
-                    <ng-container *ngFor="let cell of row.cells; index as colIndex">
+                    <td *ngIf="tableType === 'values' && columnVirtualization && startColIndex > 0" class="k-pivotgrid-cell"></td>
+                    <ng-container *ngFor="let cell of (tableType === 'values' && columnVirtualization ? row.cells.slice(startColIndex, (startColIndex + renderedCols)) : row.cells); index as colIndex">
                         <th
                             *ngIf="cell && tableType !== 'values'" 
                             [kendoPivotGridCell]="cell"
@@ -3784,8 +4082,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             [rowHeaderCellTemplate]="rowHeaderCellTemplate"
                             [columnHeaderCellTemplate]="columnHeaderCellTemplate"
                             [tableType]="tableType"
-                            [colIndex]="colIndex"
-                            [rowIndex]="rowIndex"
+                            [colIndex]="colIndex + startColIndex"
+                            [rowIndex]="rowIndex + startRowIndex"
                             [attr.aria-expanded]="cell.hasChildren && cell.children.length ? 'true' : 'false'"
                             [attr.role]="tableType === 'columnHeader' ? 'columnheader' : tableType === 'rowHeader' ? 'rowheader' : 'none'"
                             [attr.id]="pivotGridId + (tableType === 'columnHeader' ? 'ch-' : 'rh-') + (rowIndex + 1) + '-' + (colIndex + 1)"></th>
@@ -3795,19 +4093,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             [valueCellTemplate]="valueCellTemplate"
                             [kendoPivotGridCell]="cell"
                             tableType="values"
-                            [colIndex]="colIndex"
-                            [rowIndex]="rowIndex"
+                            [colIndex]="colIndex + startColIndex"
+                            [rowIndex]="rowIndex + startRowIndex"
                             role="gridcell"
-                            [attr.id]="pivotGridId + 'cell-' + (rowIndex + 1) + '-' + (colIndex + 1)"></td>
+                            [attr.id]="pivotGridId + 'cell-' + (rowIndex + startRowIndex + 1) + '-' + (colIndex + startColIndex + 1)"></td>
                     </ng-container>
                 </tr>
             </tbody>
         </table>
     `,
                     standalone: true,
-                    imports: [NgFor, NgIf, PivotGridCellDirective]
+                    imports: [NgFor, NgIf, PivotGridCellDirective, NgStyle]
                 }]
-        }], ctorParameters: function () { return [{ type: PivotGridDataService }]; }, propDecorators: { tableType: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: PivotGridDataService }, { type: i1$1.LocalizationService }, { type: PivotGridComponent }, { type: i0.NgZone }, { type: PivotGridScrollService }]; }, propDecorators: { tableType: [{
                 type: Input
             }], colWidth: [{
                 type: Input
@@ -3819,8 +4117,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], columnHeaderCellTemplate: [{
                 type: Input
+            }], scrollableSettings: [{
+                type: Input
             }] } });
 
+/**
+ * @hidden
+ */
+const DEFAULT_VIRTUALIZATION_SETTINGS = {
+    type: 'both',
+    rowHeight: 37,
+    rows: 50,
+    columns: 10
+};
+/**
+ * @hidden
+ */
+const normalizeVirtualSettings = (settings) => {
+    if (settings === true) {
+        return { ...DEFAULT_VIRTUALIZATION_SETTINGS };
+    }
+    if (!settings) {
+        return null;
+    }
+    return { ...DEFAULT_VIRTUALIZATION_SETTINGS, ...settings };
+};
+
 const DEFAULT_LOADER_SETTINGS = {
     type: 'converging-spinner',
     themeColor: 'primary',
@@ -3834,12 +4156,13 @@ const DEFAULT_CONFIGURATOR_SETTINGS = {
  * Represents the Kendo UI PivotGrid component for Angular.
  */
 class PivotGridComponent {
-    constructor(hostEl, zone, dataService, localization, renderer, _scrollbarWidthService) {
+    constructor(hostEl, zone, dataService, localization, renderer, _scrollbarWidthService, scrollService) {
         this.hostEl = hostEl;
         this.zone = zone;
         this.dataService = dataService;
         this.localization = localization;
         this.renderer = renderer;
+        this.scrollService = scrollService;
         this.hostClass = true;
         /**
          * Specify the width of the column header and data cells. Value is treated as pixels [(see example)]({% slug appearance_pivotgrid %}#toc-column-headers-width).
@@ -3859,6 +4182,7 @@ class PivotGridComponent {
         this.gearSVGIcon = gearIcon;
         this.resizeObservers = [];
         this._loaderSettings = DEFAULT_LOADER_SETTINGS;
+        this._virtualScrolling = normalizeVirtualSettings(false);
         this.subs = new Subscription();
         this.rtl = false;
         this.resizeContainer = (axis, element) => {
@@ -3924,6 +4248,18 @@ class PivotGridComponent {
     get loadingText() {
         return this.localization.get('loading');
     }
+    /**
+     * Sets the virtualization options of the component. By default the virtual scrolling functionality is disabled.
+     *
+     * @default false
+     */
+    set virtualScrolling(value) {
+        this._virtualScrolling = normalizeVirtualSettings(value);
+        this.scrollService.virtualScrolling = !!value;
+    }
+    get virtualScrolling() {
+        return this._virtualScrolling;
+    }
     get configuratorSettings() {
         return this.configurator && Object.assign({}, DEFAULT_CONFIGURATOR_SETTINGS, this.configurator);
     }
@@ -3998,6 +4334,9 @@ class PivotGridComponent {
             }
         }
     }
+    /**
+     * @hidden
+     */
     initNavigation() {
         this.stopNavigation();
         this.navigation = new PivotGridNavigation({ tabIndex: 0 });
@@ -4038,15 +4377,16 @@ class PivotGridComponent {
         }
     }
 }
-PivotGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: PivotGridDataService }, { token: i1$1.LocalizationService }, { token: i0.Renderer2 }, { token: i1$4.ScrollbarWidthService }], target: i0.ɵɵFactoryTarget.Component });
-PivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PivotGridComponent, isStandalone: true, selector: "kendo-pivotgrid", inputs: { loaderSettings: "loaderSettings", configurator: "configurator", columnHeadersWidth: "columnHeadersWidth", navigable: "navigable" }, host: { properties: { "class.k-d-flex": "this.hostClass", "class.k-pos-relative": "this.hostClass", "class.k-flex-row": "this.rightPositionClass", "class.k-flex-row-reverse": "this.leftPositionClass", "class.k-flex-column": "this.bottomPositionClass", "class.k-flex-column-reverse": "this.topPositionClass", "attr.dir": "this.dir" } }, providers: [
+PivotGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: PivotGridDataService }, { token: i1$1.LocalizationService }, { token: i0.Renderer2 }, { token: i1$4.ScrollbarWidthService }, { token: PivotGridScrollService }], target: i0.ɵɵFactoryTarget.Component });
+PivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PivotGridComponent, isStandalone: true, selector: "kendo-pivotgrid", inputs: { loaderSettings: "loaderSettings", configurator: "configurator", virtualScrolling: "virtualScrolling", columnHeadersWidth: "columnHeadersWidth", navigable: "navigable" }, host: { properties: { "class.k-d-flex": "this.hostClass", "class.k-pos-relative": "this.hostClass", "class.k-flex-row": "this.rightPositionClass", "class.k-flex-row-reverse": "this.leftPositionClass", "class.k-flex-column": "this.bottomPositionClass", "class.k-flex-column-reverse": "this.topPositionClass", "attr.dir": "this.dir" } }, providers: [
         PivotGridDataService,
         LocalizationService,
         PivotLocalizationService,
         {
             provide: L10N_PREFIX,
             useValue: 'kendo.pivotgrid'
-        }
+        },
+        PivotGridScrollService
     ], queries: [{ propertyName: "customCellTemplate", first: true, predicate: CellTemplateDirective, descendants: true }, { propertyName: "valueCellTemplate", first: true, predicate: ValueCellTemplateDirective, descendants: true }, { propertyName: "rowHeaderCellTemplate", first: true, predicate: RowHeaderCellTemplateDirective, descendants: true }, { propertyName: "columnHeaderCellTemplate", first: true, predicate: ColumnHeaderCellTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "colHeadersTable", first: true, predicate: ["colHeadersTable"], descendants: true, read: ElementRef }, { propertyName: "rowHeadersTable", first: true, predicate: ["rowHeadersTable"], descendants: true, read: ElementRef }, { propertyName: "valuesTable", first: true, predicate: ["valuesTable"], descendants: true, read: ElementRef }, { propertyName: "table", first: true, predicate: ["table"], descendants: true, read: ElementRef }, { propertyName: "configuratorWrapper", first: true, predicate: ["configurator"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoPivotGridLocalizedMessages
         i18n-loading="kendo.pivotgrid.loading|The loading text"
@@ -4177,6 +4517,7 @@ PivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
                 [valueCellTemplate]="valueCellTemplate"
                 [colWidth]="columnHeadersWidth"
                 class="k-pivotgrid-values"
+                [scrollableSettings]="virtualScrolling"
                 tableType="values"></kendo-pivotgrid-table>
     
             <div *ngIf="loading" [style]="'position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);'">
@@ -4204,7 +4545,7 @@ PivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
             <span>{{messageFor('configuratorButtonText')}}<kendo-icon-wrapper name="gear" innerCssClass="k-color-inherit" [svgIcon]="gearSVGIcon"></kendo-icon-wrapper>
             </span>
         </div>
-   `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoPivotGridLocalizedMessages]" }, { kind: "component", type: PivotGridTableComponent, selector: "kendo-pivotgrid-table", inputs: ["tableType", "colWidth", "customCellTemplate", "valueCellTemplate", "rowHeaderCellTemplate", "columnHeaderCellTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoaderComponent, selector: "kendo-loader", inputs: ["type", "themeColor", "size"] }, { kind: "component", type: PivotGridConfiguratorComponent, selector: "kendo-pivotgrid-configurator", inputs: ["orientation", "sort", "filter", "navigation"], outputs: ["close"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+   `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoPivotGridLocalizedMessages]" }, { kind: "component", type: PivotGridTableComponent, selector: "kendo-pivotgrid-table", inputs: ["tableType", "colWidth", "customCellTemplate", "valueCellTemplate", "rowHeaderCellTemplate", "columnHeaderCellTemplate", "scrollableSettings"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoaderComponent, selector: "kendo-loader", inputs: ["type", "themeColor", "size"] }, { kind: "component", type: PivotGridConfiguratorComponent, selector: "kendo-pivotgrid-configurator", inputs: ["orientation", "sort", "filter", "navigation"], outputs: ["close"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridComponent, decorators: [{
             type: Component,
             args: [{
@@ -4216,7 +4557,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         {
                             provide: L10N_PREFIX,
                             useValue: 'kendo.pivotgrid'
-                        }
+                        },
+                        PivotGridScrollService
                     ],
                     template: `
         <ng-container kendoPivotGridLocalizedMessages
@@ -4348,6 +4690,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 [valueCellTemplate]="valueCellTemplate"
                 [colWidth]="columnHeadersWidth"
                 class="k-pivotgrid-values"
+                [scrollableSettings]="virtualScrolling"
                 tableType="values"></kendo-pivotgrid-table>
     
             <div *ngIf="loading" [style]="'position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);'">
@@ -4379,7 +4722,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     standalone: true,
                     imports: [LocalizedMessagesDirective, PivotGridTableComponent, NgIf, LoaderComponent, PivotGridConfiguratorComponent, IconWrapperComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: PivotGridDataService }, { type: i1$1.LocalizationService }, { type: i0.Renderer2 }, { type: i1$4.ScrollbarWidthService }]; }, propDecorators: { hostClass: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: PivotGridDataService }, { type: i1$1.LocalizationService }, { type: i0.Renderer2 }, { type: i1$4.ScrollbarWidthService }, { type: PivotGridScrollService }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.k-d-flex']
             }, {
@@ -4431,6 +4774,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], configurator: [{
                 type: Input
+            }], virtualScrolling: [{
+                type: Input
             }], columnHeadersWidth: [{
                 type: Input
             }], navigable: [{