@reforgium/data-grid 1.1.0 → 2.0.1

package/fesm2022/reforgium-data-grid.mjs

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
-import { input, inject, TemplateRef, Directive, numberAttribute, output, computed, Component, signal, effect, Injectable, viewChild, ElementRef, ChangeDetectionStrategy, booleanAttribute, contentChildren, afterRenderEffect, DestroyRef, untracked } from '@angular/core';
+import { input, inject, TemplateRef, Directive, booleanAttribute, contentChild, Component, numberAttribute, InjectionToken, makeEnvironmentProviders, signal, computed, effect, Injectable, viewChild, ElementRef, ChangeDetectionStrategy, output, NgZone, contentChildren, afterRenderEffect, DestroyRef, untracked } from '@angular/core';
 import { NgTemplateOutlet, DatePipe, DecimalPipe } from '@angular/common';
-import { Subscription, fromEvent, auditTime } from 'rxjs';
+import { Subscription, Subject, fromEvent, debounceTime } from 'rxjs';
 
 /**
  * Directive for defining type-specific cell templates in a data grid.
  *
  * This directive allows developers to create custom cell renderers for specific data types
  * within the data grid component. It binds a template to a type identifier, enabling
- * the grid to dynamically select and render the appropriate template based on column type.
+ * the grid to dynamically select and render the appropriate template based on a column type.
  *
  * Example usage:
  * ```html
@@ -95,6 +95,118 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
             args: [{ selector: 'ng-template[reDataGridHeader]' }]
         }], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "reDataGridHeader", required: false }] }] } });
 
+/**
+ * Directive for providing a custom template for data grid rows.
+ *
+ * Used as a structural directive on `<ng-template>` elements within data grid components.
+ * The template receives row data, index, columns, and layout helpers.
+ *
+ * Example:
+ * ```html
+ * <ng-template reDataGridRow let-row let-index="index">
+ *   <div class="my-row">{{ index + 1 }} - {{ row.name }}</div>
+ * </ng-template>
+ * ```
+ *
+ * Template context:
+ * - `$implicit: Data` — row data
+ * - `index: number` — row index
+ * - `columns: GridColumn<Data>[]` — visible columns
+ * - `rowHeight: number` — row height in pixels
+ * - `isSticky: boolean` — sticky row flag
+ */
+class DataGridRowDirective {
+    tpl = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridRowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: DataGridRowDirective, isStandalone: true, selector: "ng-template[reDataGridRow]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridRowDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[reDataGridRow]' }]
+        }] });
+
+class DataGridDeclarativeHeaderDirective {
+    tpl = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridDeclarativeHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: DataGridDeclarativeHeaderDirective, isStandalone: true, selector: "ng-template[reHeader]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridDeclarativeHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[reHeader]' }]
+        }] });
+class DataGridDeclarativeCellDirective {
+    tpl = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridDeclarativeCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: DataGridDeclarativeCellDirective, isStandalone: true, selector: "ng-template[reCell]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridDeclarativeCellDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[reCell]' }]
+        }] });
+
+class DataGridDeclarativeColumn {
+    key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
+    header = input(undefined, ...(ngDevMode ? [{ debugName: "header" }] : []));
+    align = input(undefined, ...(ngDevMode ? [{ debugName: "align" }] : []));
+    sortKey = input(undefined, ...(ngDevMode ? [{ debugName: "sortKey" }] : []));
+    sticky = input(...(ngDevMode ? [undefined, { debugName: "sticky" }] : []));
+    expandBy = input(undefined, ...(ngDevMode ? [{ debugName: "expandBy" }] : []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+    visible = input(true, { ...(ngDevMode ? { debugName: "visible" } : {}), transform: booleanAttribute });
+    width = input(undefined, { ...(ngDevMode ? { debugName: "width" } : {}), transform: toOptionalNumber });
+    minWidth = input(undefined, { ...(ngDevMode ? { debugName: "minWidth" } : {}), transform: toOptionalNumber });
+    maxWidth = input(undefined, { ...(ngDevMode ? { debugName: "maxWidth" } : {}), transform: toOptionalNumber });
+    flex = input(undefined, { ...(ngDevMode ? { debugName: "flex" } : {}), transform: toOptionalNumber });
+    type = input(undefined, ...(ngDevMode ? [{ debugName: "type" }] : []));
+    typeParams = input(undefined, ...(ngDevMode ? [{ debugName: "typeParams" }] : []));
+    defaultValue = input(undefined, ...(ngDevMode ? [{ debugName: "defaultValue" }] : []));
+    value = input(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    track = input(undefined, ...(ngDevMode ? [{ debugName: "track" }] : []));
+    tooltip = input(undefined, ...(ngDevMode ? [{ debugName: "tooltip" }] : []));
+    headerTplRef = contentChild(DataGridDeclarativeHeaderDirective, ...(ngDevMode ? [{ debugName: "headerTplRef" }] : []));
+    cellTplRef = contentChild(DataGridDeclarativeCellDirective, ...(ngDevMode ? [{ debugName: "cellTplRef" }] : []));
+    toDeclarativeColumn() {
+        return {
+            key: this.key(),
+            header: this.header(),
+            headerTemplate: this.headerTplRef()?.tpl,
+            cellTemplate: this.cellTplRef()?.tpl,
+            align: this.align(),
+            sortKey: this.sortKey(),
+            sticky: this.sticky(),
+            expandBy: this.expandBy(),
+            disabled: this.disabled(),
+            visible: this.visible(),
+            width: this.width(),
+            minWidth: this.minWidth(),
+            maxWidth: this.maxWidth(),
+            flex: this.flex(),
+            type: this.type(),
+            typeParams: this.typeParams(),
+            defaultValue: this.defaultValue(),
+            value: this.value(),
+            track: this.track(),
+            tooltip: this.tooltip(),
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridDeclarativeColumn, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.1", type: DataGridDeclarativeColumn, isStandalone: true, selector: "re-dg-column", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, sortKey: { classPropertyName: "sortKey", publicName: "sortKey", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, expandBy: { classPropertyName: "expandBy", publicName: "expandBy", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, flex: { classPropertyName: "flex", publicName: "flex", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, typeParams: { classPropertyName: "typeParams", publicName: "typeParams", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, track: { classPropertyName: "track", publicName: "track", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "headerTplRef", first: true, predicate: DataGridDeclarativeHeaderDirective, descendants: true, isSignal: true }, { propertyName: "cellTplRef", first: true, predicate: DataGridDeclarativeCellDirective, descendants: true, isSignal: true }], ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridDeclarativeColumn, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 're-dg-column',
+                    template: '<ng-content />',
+                }]
+        }], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], sortKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortKey", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], expandBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandBy", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], flex: [{ type: i0.Input, args: [{ isSignal: true, alias: "flex", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], typeParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeParams", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], track: [{ type: i0.Input, args: [{ isSignal: true, alias: "track", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], headerTplRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DataGridDeclarativeHeaderDirective), { isSignal: true }] }], cellTplRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DataGridDeclarativeCellDirective), { isSignal: true }] }] } });
+function toOptionalNumber(value) {
+    if (value === null || value === undefined || value === '') {
+        return undefined;
+    }
+    const number = numberAttribute(value);
+    return Number.isNaN(number) ? undefined : number;
+}
+
 /**
  * Directive for providing a custom template to display when the data grid has no data.
  *
@@ -146,6 +258,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
             args: [{ selector: 'ng-template[reDataGridLoading]' }]
         }] });
 
+/**
+ * Directive for providing a custom template for sticky rows.
+ *
+ * Used as a structural directive on `<ng-template>` elements within data grid components.
+ * The template receives row data and its index.
+ *
+ * Example:
+ * ```html
+ * <ng-template reDataGridStickyRow let-row let-index="index">
+ *   <div class="my-sticky-row">{{ index }} - {{ row.name }}</div>
+ * </ng-template>
+ * ```
+ *
+ * Template context:
+ * - `$implicit: Data` — row data
+ * - `index: number` — row index
+ */
+class DataGridStickyRowDirective {
+    tpl = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridStickyRowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: DataGridStickyRowDirective, isStandalone: true, selector: "ng-template[reDataGridStickyRow]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridStickyRowDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[reDataGridStickyRow]' }]
+        }] });
+
 class DataGridSortIconDirective {
     tpl = inject((TemplateRef));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridSortIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -165,82 +304,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
             args: [{ selector: 'ng-template[reDataGridExpanderIcon]' }]
         }] });
 
-// noinspection CssUnresolvedCustomProperty
-class DataGridPaginator {
-    current = input(0, { ...(ngDevMode ? { debugName: "current" } : {}), transform: numberAttribute });
-    totalElements = input(0, { ...(ngDevMode ? { debugName: "totalElements" } : {}), transform: numberAttribute });
-    pageSize = input(0, { ...(ngDevMode ? { debugName: "pageSize" } : {}), transform: numberAttribute });
-    maxShowPages = input(7, { ...(ngDevMode ? { debugName: "maxShowPages" } : {}), transform: numberAttribute });
-    pageChange = output();
-    totalPages = computed(() => {
-        const size = this.pageSize();
-        return size > 0 ? Math.ceil(this.totalElements() / size) : 0;
-    }, ...(ngDevMode ? [{ debugName: "totalPages" }] : []));
-    pages = computed(() => {
-        const current = this.current();
-        const total = this.totalPages();
-        const max = this.maxShowPages();
-        if (total <= max) {
-            return Array.from({ length: total }, (_, i) => i);
-        }
-        const pages = [];
-        const sidePages = Math.floor((max - 3) / 2);
-        pages.push(0);
-        let start = Math.max(1, current - sidePages);
-        let end = Math.min(total - 2, current + sidePages);
-        if (current <= sidePages + 1) {
-            end = max - 3;
-        }
-        else if (current >= total - sidePages - 2) {
-            start = total - max + 2;
-        }
-        if (start > 1) {
-            pages.push(-1);
-        }
-        for (let i = start; i <= end; i++) {
-            pages.push(i);
-        }
-        if (end < total - 2) {
-            pages.push(-1);
-        }
-        pages.push(total - 1);
-        return pages;
-    }, ...(ngDevMode ? [{ debugName: "pages" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridPaginator, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DataGridPaginator, isStandalone: true, selector: "re-data-grid-paginator", inputs: { current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null }, totalElements: { classPropertyName: "totalElements", publicName: "totalElements", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, maxShowPages: { classPropertyName: "maxShowPages", publicName: "maxShowPages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: `
-    @for (page of pages(); track $index) {
-      @if (page === -1) {
-        <span class="re-paginator-gap">...</span>
-      } @else {
-        <button
-          class="re-paginator-page"
-          [class.re-paginator-page--active]="page === current()"
-          (click)="pageChange.emit(page)"
-        >
-          {{ page + 1 }}
-        </button>
-      }
-    }
-  `, isInline: true, styles: [":host{--re-data-grid-paginator-gap: .5rem;--re-data-grid-paginator-page-size: 1.75rem;--re-data-grid-paginator-page-border: 1px solid var(--re-data-grid-paginator-separator-color, #e2e8f0);--re-data-grid-paginator-page-separator-color: var(--re-data-grid-separator-color, --border-color);--re-data-grid-paginator-page-rounded: var(--re-data-grid-rounded, --radius-md);--re-data-grid-paginator-page-surface: var(--re-data-grid-surface, white);--re-data-grid-paginator-page-color: var(--text-primary, #1e293b);--re-data-grid-paginator-page-font-size: .875rem;--re-data-grid-paginator-page-active-surface: var(--re-data-grid-active, #3b82f6);--re-data-grid-paginator-page-active-color: white;--re-data-grid-paginator-page-hover-surface: var(--re-data-grid-active, #3b82f6);--re-data-grid-paginator-page-hover-color: white;display:flex;align-items:center;gap:var(--re-data-grid-paginator-gap)}.re-paginator-page{display:flex;justify-content:center;align-items:center;width:var(--re-data-grid-paginator-page-size);height:var(--re-data-grid-paginator-page-size);border-radius:var(--re-data-grid-paginator-page-rounded);border:var(--re-data-grid-paginator-page-border);font-size:var(--re-data-grid-paginator-page-font-size);background:var(--re-data-grid-paginator-page-surface);color:var(--re-data-grid-paginator-page-color);cursor:pointer;transition:all .2s}.re-paginator-page:hover:not(.re-paginator-page--active){background:var(--re-data-grid-paginator-page-hover-surface);color:var(--re-data-grid-paginator-page-hover-color)}.re-paginator-page--active{border-color:var(--re-data-grid-paginator-active-surface);background:var(--re-data-grid-paginator-page-active-surface);color:var(--re-data-grid-paginator-page-active-color)}.re-paginator-gap{display:flex;align-items:center;justify-content:center;padding:var(--re-data-grid-paginator-page-paddings);color:var(--re-data-grid-paginator-page-color)}\n"] });
+const DEFAULT_DATA_GRID_DEFAULTS = {
+    mode: 'pagination',
+    hasIndexColumn: false,
+    selection: { mode: 'none' },
+    pageSize: 20,
+    rowHeight: 40,
+    headerHeight: 48,
+    height: 'default',
+    virtualBuffer: 8,
+    loadingMode: 'spinner',
+    pageStartFromZero: true,
+    translations: {
+        emptyState: 'No records found',
+        itemsPerPageLabel: 'Items per page:',
+        nextPageLabel: 'Next page',
+        prevPageLabel: 'Previous page',
+    },
+    debounce: {
+        resize: 100,
+        scroll: 50,
+    },
+};
+const DATA_GRID_CONFIG = new InjectionToken('RE_DATA_GRID_DEFAULTS', {
+    providedIn: 'root',
+    factory: () => DEFAULT_DATA_GRID_DEFAULTS,
+});
+/**
+ * Provides default configuration for Data Grid, overriding base settings.
+ *
+ * @param config Partial configuration object to be merged with current settings.
+ * @returns EnvironmentProviders for use in application or component configuration.
+ */
+function provideDataGridDefaults(config) {
+    return makeEnvironmentProviders([
+        {
+            provide: DATA_GRID_CONFIG,
+            useFactory: () => {
+                const parent = inject(DATA_GRID_CONFIG, { optional: true, skipSelf: true });
+                const base = parent ?? DEFAULT_DATA_GRID_DEFAULTS;
+                return {
+                    ...base,
+                    ...config,
+                    selection: config.selection ?? base.selection,
+                    translations: { ...base.translations, ...config.translations },
+                    debounce: { ...base.debounce, ...config.debounce },
+                };
+            },
+        },
+    ]);
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridPaginator, decorators: [{
-            type: Component,
-            args: [{ selector: 're-data-grid-paginator', template: `
-    @for (page of pages(); track $index) {
-      @if (page === -1) {
-        <span class="re-paginator-gap">...</span>
-      } @else {
-        <button
-          class="re-paginator-page"
-          [class.re-paginator-page--active]="page === current()"
-          (click)="pageChange.emit(page)"
-        >
-          {{ page + 1 }}
-        </button>
-      }
-    }
-  `, styles: [":host{--re-data-grid-paginator-gap: .5rem;--re-data-grid-paginator-page-size: 1.75rem;--re-data-grid-paginator-page-border: 1px solid var(--re-data-grid-paginator-separator-color, #e2e8f0);--re-data-grid-paginator-page-separator-color: var(--re-data-grid-separator-color, --border-color);--re-data-grid-paginator-page-rounded: var(--re-data-grid-rounded, --radius-md);--re-data-grid-paginator-page-surface: var(--re-data-grid-surface, white);--re-data-grid-paginator-page-color: var(--text-primary, #1e293b);--re-data-grid-paginator-page-font-size: .875rem;--re-data-grid-paginator-page-active-surface: var(--re-data-grid-active, #3b82f6);--re-data-grid-paginator-page-active-color: white;--re-data-grid-paginator-page-hover-surface: var(--re-data-grid-active, #3b82f6);--re-data-grid-paginator-page-hover-color: white;display:flex;align-items:center;gap:var(--re-data-grid-paginator-gap)}.re-paginator-page{display:flex;justify-content:center;align-items:center;width:var(--re-data-grid-paginator-page-size);height:var(--re-data-grid-paginator-page-size);border-radius:var(--re-data-grid-paginator-page-rounded);border:var(--re-data-grid-paginator-page-border);font-size:var(--re-data-grid-paginator-page-font-size);background:var(--re-data-grid-paginator-page-surface);color:var(--re-data-grid-paginator-page-color);cursor:pointer;transition:all .2s}.re-paginator-page:hover:not(.re-paginator-page--active){background:var(--re-data-grid-paginator-page-hover-surface);color:var(--re-data-grid-paginator-page-hover-color)}.re-paginator-page--active{border-color:var(--re-data-grid-paginator-active-surface);background:var(--re-data-grid-paginator-page-active-surface);color:var(--re-data-grid-paginator-page-active-color)}.re-paginator-gap{display:flex;align-items:center;justify-content:center;padding:var(--re-data-grid-paginator-page-paddings);color:var(--re-data-grid-paginator-page-color)}\n"] }]
-        }], propDecorators: { current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }], totalElements: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalElements", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], maxShowPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxShowPages", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });
 
 const GRID_INDEX_COLUMN = {
     key: '_index',
@@ -248,7 +361,7 @@ const GRID_INDEX_COLUMN = {
     align: 'center',
     header: '№',
     width: 72,
-    sticky: true,
+    sticky: 'left',
 };
 const GRID_CHECKBOX_COLUMN = {
     key: '_checkbox',
@@ -256,7 +369,7 @@ const GRID_CHECKBOX_COLUMN = {
     align: 'center',
     header: 'checkbox',
     width: 44,
-    sticky: true,
+    sticky: 'left',
 };
 
 /**
@@ -492,7 +605,7 @@ function roundAndFix(cols, widths, fixedIdx, autoIdx, containerWidth) {
  *
  * If `min` is provided and the value is less than it, returns `min`.
  * If `max` is provided and the value is greater than it, returns `max`.
- * Otherwise returns the original value.
+ * Otherwise, returns the original value.
  *
  * @param v - Value to clamp
  * @param min - Optional minimum bound
@@ -521,6 +634,116 @@ function sum(items) {
     return items.reduce((s, x) => s + x.width, 0);
 }
 
+// noinspection ES6PreferShortImport
+const DEFAULT_COLUMN_WIDTH = 140;
+/**
+ * Computes and normalizes header groups based on the provided headers and columns.
+ *
+ * @param {GridHeaderGroup<Data>[]} headers - An array of header group objects representing the grouping information
+ *  for the grid.
+ * @param {GridColumn<Data>[]} columns - An array of column definitions describing the columns in the grid.
+ * @return {NormalizedHeader[]} An array of normalized header objects, where each object contains information about
+ *  the computed header ranges, widths, and keys.
+ */
+function computeHeaderGroups(headers = [], columns = []) {
+    if (!columns.length || !headers.length) {
+        return [];
+    }
+    const keyToIndex = new Map(columns.map((col, index) => [col.key, index]));
+    const columnWidths = columns.map(resolveColumnWidth);
+    const prefix = buildWidthesPrefixSums(columnWidths);
+    const ranges = [];
+    const occupied = new Set();
+    for (const header of headers) {
+        const start = keyToIndex.get(header.from);
+        const resolvedTo = header.to ?? header.from;
+        const end = keyToIndex.get(resolvedTo);
+        if (start === undefined || end === undefined) {
+            continue;
+        }
+        const rangeStart = Math.min(start, end);
+        const rangeEnd = Math.max(start, end);
+        if (hasOverlap(rangeStart, rangeEnd, occupied)) {
+            continue;
+        }
+        for (let i = rangeStart; i <= rangeEnd; i++) {
+            occupied.add(i);
+        }
+        ranges.push({ header, start: rangeStart, end: rangeEnd });
+    }
+    const rangesByStart = new Map(ranges.map((range) => [range.start, range]));
+    const normalized = [];
+    for (let index = 0; index < columns.length;) {
+        const range = rangesByStart.get(index);
+        if (range) {
+            normalized.push(normalizeRange(range, prefix, columns));
+            index = range.end + 1;
+            continue;
+        }
+        const start = index;
+        while (index < columns.length && !rangesByStart.has(index)) {
+            index++;
+        }
+        const end = index - 1;
+        normalized.push({
+            key: `_rest_${columns[start].key}_${columns[end].key}`,
+            widthPx: sumByRange(prefix, start, end),
+            startKey: columns[start]?.key,
+            endKey: columns[end]?.key,
+        });
+    }
+    return normalized;
+}
+function normalizeRange(range, prefix, columns) {
+    const base = {
+        key: range.header.key,
+        widthPx: sumByRange(prefix, range.start, range.end),
+        startKey: columns[range.start]?.key,
+        endKey: columns[range.end]?.key,
+    };
+    if ('titleTemplate' in range.header) {
+        base.titleTemplate = range.header.titleTemplate;
+        return base;
+    }
+    base.title = range.header.title;
+    base.align = range.header.align;
+    return base;
+}
+function resolveColumnWidth(column) {
+    const width = asFiniteNumber(column.width);
+    const minWidth = asFiniteNumber(column.minWidth);
+    const maxWidth = asFiniteNumber(column.maxWidth);
+    let result = width ?? minWidth ?? DEFAULT_COLUMN_WIDTH;
+    if (minWidth !== null && result < minWidth) {
+        result = minWidth;
+    }
+    if (maxWidth !== null && result > maxWidth) {
+        result = maxWidth;
+    }
+    return Math.max(0, Math.round(result));
+}
+function asFiniteNumber(value) {
+    return typeof value === 'number' && Number.isFinite(value) ? value : null;
+}
+function hasOverlap(start, end, occupied) {
+    for (let i = start; i <= end; i++) {
+        if (occupied.has(i)) {
+            return true;
+        }
+    }
+    return false;
+}
+function buildWidthesPrefixSums(values) {
+    const prefix = new Array(values.length + 1).fill(0);
+    for (let i = 0; i < values.length; i++) {
+        prefix[i + 1] = prefix[i] + values[i];
+    }
+    return prefix;
+}
+function sumByRange(prefix, start, end) {
+    return prefix[end + 1] - prefix[start];
+}
+
 /**
  * Calculates the visual state of an overlay scrollbar. All arguments are raw DOM numbers.
  * Returns a state describing the visibility, size, and position of the thumb.
@@ -558,7 +781,7 @@ function mapThumbTopToScrollTop(thumbTop, maxThumbTop, maxScrollTop) {
     const tt = clamp(toSafe(thumbTop), 0, mt);
     return (tt / mt) * ms;
 }
-/** Clamps the new thumb position within the bounds 0..maxThumbTop */
+/** Clamps the new thumb position within bounds 0..maxThumbTop */
 function clampThumbTop(value, maxThumbTop) {
     const mt = Math.max(1, toSafe(maxThumbTop));
     return clamp(toSafe(value), 0, mt);
@@ -677,9 +900,8 @@ class ScrollDirectionDetector {
  */
 function splitSticky(cols) {
     const visible = cols.filter((c) => c.visible !== false);
-    const middleIndex = Math.floor(visible.length / 2);
-    const left = visible.slice(0, middleIndex).filter((col) => col.sticky);
-    const right = visible.slice(middleIndex, visible.length).filter((col) => col.sticky);
+    const left = visible.filter((col) => col.sticky === 'left' || col.sticky === true);
+    const right = visible.filter((col) => col.sticky === 'right');
     return { left, right, visible };
 }
 
@@ -720,6 +942,7 @@ class DataGridVm {
      * Each row includes data, position ('top' or 'bottom'), and optional ordering.
      */
     pinnedRows = signal([], ...(ngDevMode ? [{ debugName: "pinnedRows" }] : []));
+    headerGroups = signal([], ...(ngDevMode ? [{ debugName: "headerGroups" }] : []));
     /**
      * Current width of the grid container in pixels.
      *
@@ -759,10 +982,14 @@ class DataGridVm {
      */
     globalTypeCellTpls = new Map();
     globalDataCellTpls = new Map();
+    globalRowCellTpls = new Map();
     #byKey = signal({}, ...(ngDevMode ? [{ debugName: "#byKey" }] : []));
     #defaultColWidth = 140;
     #stickyLeftMap = new Map();
     #stickyRightMap = new Map();
+    #stickySplit = computed(() => splitSticky(this.columns() ?? []), ...(ngDevMode ? [{ debugName: "#stickySplit" }] : []));
+    pinnedTop = signal([], ...(ngDevMode ? [{ debugName: "pinnedTop" }] : []));
+    pinnedBottom = signal([], ...(ngDevMode ? [{ debugName: "pinnedBottom" }] : []));
     /**
      * Computed an array of non-sticky columns to display in the scrollable area.
      *
@@ -772,26 +999,43 @@ class DataGridVm {
      */
     columnsToShow = computed(() => {
         this.containerWidth();
-        const cols = this.columns() ?? [];
-        const { left, visible, right } = splitSticky(cols);
-        this.recomputeStickyOffsets(left, right);
-        return visible;
+        return this.#stickySplit().visible;
     }, ...(ngDevMode ? [{ debugName: "columnsToShow" }] : []));
+    contentWidth = computed(() => {
+        const columns = this.columnsToShow();
+        if (!columns.length) {
+            return 0;
+        }
+        return columns.reduce((sum, col) => sum + this.widthByKey(col.key), 0);
+    }, ...(ngDevMode ? [{ debugName: "contentWidth" }] : []));
     /**
-     * Computed array of rows pinned to the top of the grid.
+     * Computed array of normalized header groups with calculated widths.
      *
-     * Filters pinned rows by 'top' position and sorts them by order property.
-     * Rows with lower order values appear first.
-     */
-    pinnedTop = computed(() => (this.pinnedRows() ?? []).filter((r) => r.position === 'top').sort((a, b) => (a.order ?? 0) - (b.order ?? 0)), ...(ngDevMode ? [{ debugName: "pinnedTop" }] : []));
-    /**
-     * Computed array of rows pinned to the bottom of the grid.
+     * Transforms raw header group configurations into normalized structures
+     * that include computed column widths for layout rendering. Returns an empty
+     * array if no headers or columns are configured. Recalculates whenever
+     * header groups or visible columns change.
      *
-     * Filters pinned rows by 'bottom' position and sorts them by order property.
-     * Rows with lower order values appear first.
+     * @returns Array of normalized header configurations with width calculations
      */
-    pinnedBottom = computed(() => (this.pinnedRows() ?? []).filter((r) => r.position === 'bottom').sort((a, b) => (a.order ?? 0) - (b.order ?? 0)), ...(ngDevMode ? [{ debugName: "pinnedBottom" }] : []));
+    normalizedHeaderGroups = computed(() => {
+        const headers = this.headerGroups();
+        const columns = this.columnsToShow();
+        if (!headers.length || !columns.length) {
+            return [];
+        }
+        const normalizedColumns = columns.map((col) => ({
+            ...col,
+            width: this.widthByKey(col.key),
+        }));
+        return computeHeaderGroups(headers, normalizedColumns);
+    }, ...(ngDevMode ? [{ debugName: "normalizedHeaderGroups" }] : []));
     constructor() {
+        effect(() => {
+            const rows = this.pinnedRows() ?? [];
+            this.pinnedTop.set(rows.filter((r) => r.position === 'top').sort((a, b) => (a.order ?? 0) - (b.order ?? 0)));
+            this.pinnedBottom.set(rows.filter((r) => r.position === 'bottom').sort((a, b) => (a.order ?? 0) - (b.order ?? 0)));
+        });
         effect(() => {
             const cols = this.columns();
             const width = this.containerWidth();
@@ -801,6 +1045,11 @@ class DataGridVm {
             const res = layoutColumns(cols, width, this.#defaultColWidth);
             this.#byKey.set(res.byKey);
         });
+        effect(() => {
+            this.#byKey();
+            const { left, right } = this.#stickySplit();
+            this.recomputeStickyOffsets(left, right);
+        });
     }
     /**
      * Returns the computed width for a column by its key.
@@ -883,6 +1132,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
             type: Injectable
         }], ctorParameters: () => [] });
 
+// noinspection ES6PreferShortImport
 /**
  * Component for rendering individual data grid cells.
  *
@@ -919,7 +1169,7 @@ class DataGridCellComponent {
      * Data object for the current row.
      *
      * Contains the complete row data that can be accessed by column value functions
-     * or custom render templates. Type-safe according to the Data generic parameter.
+     * or custom render templates. Type-safe, according to the Data generic parameter.
      */
     item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
     /**
@@ -933,7 +1183,7 @@ class DataGridCellComponent {
      * Injected DataGridVm service instance.
      *
      * Provides access to global type-specific cell templates registered
-     * at the grid level via `globalTypeCellTpls` map.
+     * at the grid level via the ` globalTypeCellTpls ` map.
      */
     vm = inject(DataGridVm);
     /**
@@ -945,7 +1195,7 @@ class DataGridCellComponent {
      * - `'date'`, `'number'`, `'index'` - Built-in formatters
      * - `'plain'` - Default text rendering
      *
-     * The value is reactive and updates when column configuration changes.
+     * The value is reactive and updates when the column configuration changes.
      */
     type = computed(() => {
         const col = this.column();
@@ -958,6 +1208,9 @@ class DataGridCellComponent {
         if (this.vm.globalDataCellTpls.has(col.key)) {
             return 'globalDataTpl';
         }
+        if (this.vm.globalRowCellTpls.has(col.key)) {
+            return 'globalRowTpl';
+        }
         return 'type' in col ? col['type'] : 'plain';
     }, ...(ngDevMode ? [{ debugName: "type" }] : []));
     /**
@@ -973,38 +1226,51 @@ class DataGridCellComponent {
     value = computed(() => {
         const col = this.column();
         const row = this.item();
-        return 'value' in col ? col.value(row) : row[col.key];
+        const rawValue = 'value' in col ? col.value(row) : row[col.key];
+        if ('value' in col || 'renderTemplate' in col) {
+            return rawValue;
+        }
+        if (rawValue === null || rawValue === undefined) {
+            return col.defaultValue ?? rawValue;
+        }
+        return rawValue;
     }, ...(ngDevMode ? [{ debugName: "value" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DataGridCellComponent, isStandalone: true, selector: "re-data-grid-cell", inputs: { index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
     @let row = item();
-    @let col = column();
+    @let col = $any(column());
     @let val = value();
 
     @switch (type()) {
       @case ('tpl') {
         <ng-container
-          [ngTemplateOutlet]="$any(col).renderTemplate"
+          [ngTemplateOutlet]="col.renderTemplate"
           [ngTemplateOutletContext]="{ $implicit: val, value: val, row, col, index: index() }"
         />
       }
       @case ('globalTypeTpl') {
         <ng-container
-          [ngTemplateOutlet]="vm.globalTypeCellTpls.get($any(col).type)"
+          [ngTemplateOutlet]="vm.globalTypeCellTpls.get(col.type)"
           [ngTemplateOutletContext]="{ $implicit: val, value: val, row, col }"
         />
       }
       @case ('globalDataTpl') {
         <ng-container
-          [ngTemplateOutlet]="vm.globalDataCellTpls.get($any(col).key)"
+          [ngTemplateOutlet]="vm.globalDataCellTpls.get(col.key)"
           [ngTemplateOutletContext]="{ $implicit: val, value: val, row, col }"
         />
       }
+      @case ('globalRowTpl') {
+        <ng-container
+          [ngTemplateOutlet]="vm.globalRowCellTpls.get(col.key)"
+          [ngTemplateOutletContext]="{ $implicit: val, value: val, row, col, index: index() }"
+        />
+      }
       @case ('date') {
-        {{ val | date: $any(col)?.typeParams }}
+        {{ val | date: col?.typeParams }}
       }
       @case ('number') {
-        {{ val | number: $any(col)?.typeParams }}
+        {{ val | number: col?.typeParams }}
       }
       @case ('index') {
         {{ index() + 1 }}
@@ -1019,33 +1285,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
             type: Component,
             args: [{ selector: 're-data-grid-cell', template: `
     @let row = item();
-    @let col = column();
+    @let col = $any(column());
     @let val = value();
 
     @switch (type()) {
       @case ('tpl') {
         <ng-container
-          [ngTemplateOutlet]="$any(col).renderTemplate"
+          [ngTemplateOutlet]="col.renderTemplate"
           [ngTemplateOutletContext]="{ $implicit: val, value: val, row, col, index: index() }"
         />
       }
       @case ('globalTypeTpl') {
         <ng-container
-          [ngTemplateOutlet]="vm.globalTypeCellTpls.get($any(col).type)"
+          [ngTemplateOutlet]="vm.globalTypeCellTpls.get(col.type)"
           [ngTemplateOutletContext]="{ $implicit: val, value: val, row, col }"
         />
       }
       @case ('globalDataTpl') {
         <ng-container
-          [ngTemplateOutlet]="vm.globalDataCellTpls.get($any(col).key)"
+          [ngTemplateOutlet]="vm.globalDataCellTpls.get(col.key)"
           [ngTemplateOutletContext]="{ $implicit: val, value: val, row, col }"
         />
       }
+      @case ('globalRowTpl') {
+        <ng-container
+          [ngTemplateOutlet]="vm.globalRowCellTpls.get(col.key)"
+          [ngTemplateOutletContext]="{ $implicit: val, value: val, row, col, index: index() }"
+        />
+      }
       @case ('date') {
-        {{ val | date: $any(col)?.typeParams }}
+        {{ val | date: col?.typeParams }}
       }
       @case ('number') {
-        {{ val | number: $any(col)?.typeParams }}
+        {{ val | number: col?.typeParams }}
       }
       @case ('index') {
         {{ index() + 1 }}
@@ -1057,6 +1329,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
   `, imports: [NgTemplateOutlet, DatePipe, DecimalPipe], styles: [":host{width:100%;text-align:inherit}\n"] }]
         }], propDecorators: { index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }], item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }] } });
 
+// noinspection ES6PreferShortImport
+function normalizeDeclarativeColumns(defs = [], rowKey) {
+    const columns = [];
+    const rowCellTemplatesByKey = new Map();
+    for (const def of defs) {
+        const key = def.key;
+        const base = {
+            key,
+            header: def.header ?? String(key),
+            headerTemplate: def.headerTemplate,
+            align: def.align,
+            sortKey: def.sortKey,
+            width: def.width,
+            minWidth: def.minWidth,
+            maxWidth: def.maxWidth,
+            flex: def.flex,
+            disabled: def.disabled,
+            visible: def.visible,
+            sticky: def.sticky,
+            tooltip: def.tooltip,
+            expandBy: def.expandBy,
+        };
+        if (def.cellTemplate) {
+            rowCellTemplatesByKey.set(String(key), def.cellTemplate);
+        }
+        if (def.value) {
+            columns.push({
+                ...base,
+                value: def.value,
+                track: def.track ?? createDefaultTrack(key, rowKey),
+            });
+            continue;
+        }
+        columns.push({
+            ...base,
+            type: def.type ?? 'plain',
+            typeParams: def.typeParams,
+            defaultValue: def.defaultValue,
+        });
+    }
+    return { columns, rowCellTemplatesByKey };
+}
+function createDefaultTrack(key, rowKey) {
+    return (row) => {
+        if (!rowKey) {
+            return String(row[key]);
+        }
+        if (typeof rowKey === 'function') {
+            return String(rowKey(row));
+        }
+        return String(row[rowKey]);
+    };
+}
+
 /**
  * Service class for managing row selection in a data grid.
  *
@@ -1106,7 +1432,7 @@ class Selector {
      * - `false` if no rows are selected
      * - `'mixed'` if some but not all rows are selected
      *
-     * Useful for implementing "select all" checkbox with indeterminate state.
+     * Useful for implementing the "select all" checkbox with an indeterminate state.
      */
     isAllSelected = computed(() => {
         const selectedCount = this.selectedKeys().length;
@@ -1116,7 +1442,7 @@ class Selector {
      * Checks whether a specific row is currently selected.
      *
      * Compares the row's key value against the list of selected keys.
-     * Returns `false` if selection mode is 'none' or key is not configured.
+     * Returns `false` if the selection mode is 'none' or the key is not configured.
      *
      * @param row - The data row to check selection status for.
      * @returns `true` if the row is selected, `false` otherwise.
@@ -1337,6 +1663,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
  * ```
  */
 class DataGrid {
+    defaults = inject(DATA_GRID_CONFIG) || DEFAULT_DATA_GRID_DEFAULTS;
     /**
      * Array of data to display in the table.
      *
@@ -1358,7 +1685,7 @@ class DataGrid {
      * - `pagination` - Classic page-based pagination with fixed page size
      * - `infinity` - Infinite scroll mode, loads more data as user scrolls
      */
-    mode = input('none', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    mode = input(this.defaults.mode, ...(ngDevMode ? [{ debugName: "mode" }] : []));
     /**
      * Array of pinned rows that remain visible at the top or bottom.
      *
@@ -1366,12 +1693,26 @@ class DataGrid {
      * Useful for totals, summaries, or always-visible items.
      */
     pinnedRows = input([], ...(ngDevMode ? [{ debugName: "pinnedRows" }] : []));
+    /**
+     * Function to determine if a row should become sticky at the top.
+     *
+     * When provided, rows matching this predicate will stick to the top
+     * of the scroll area as the user scrolls.
+     */
+    isRowSticky = input(undefined, ...(ngDevMode ? [{ debugName: "isRowSticky" }] : []));
+    /**
+     * Function to choose a custom template for a row.
+     *
+     * If it returns a template, the row will be rendered with it;
+     *  otherwise, the default row rendering is used.
+     */
+    getRowTemplate = input(undefined, ...(ngDevMode ? [{ debugName: "getRowTemplate" }] : []));
     /**
      * Whether to add an index column showing row numbers.
      *
      * When enabled, it automatically adds a column displaying sequential row numbers.
      */
-    hasIndexColumn = input(false, { ...(ngDevMode ? { debugName: "hasIndexColumn" } : {}), transform: booleanAttribute });
+    hasIndexColumn = input(this.defaults.hasIndexColumn, { ...(ngDevMode ? { debugName: "hasIndexColumn" } : {}), transform: booleanAttribute });
     /**
      * Row selection configuration.
      *
@@ -1382,21 +1723,21 @@ class DataGrid {
      *
      * When selection is enabled, a `key` must be provided to identify rows.
      */
-    selection = input({ mode: 'none' }, ...(ngDevMode ? [{ debugName: "selection" }] : []));
+    selection = input(this.defaults.selection, ...(ngDevMode ? [{ debugName: "selection" }] : []));
     /**
      * Number of items per page.
      *
      * Used in pagination and infinity scroll modes to control
      * how many rows are loaded at once. Default is 20.
      */
-    pageSize = input(20, { ...(ngDevMode ? { debugName: "pageSize" } : {}), transform: numberAttribute });
+    pageSize = input(this.defaults.pageSize, { ...(ngDevMode ? { debugName: "pageSize" } : {}), transform: numberAttribute });
     /**
      * Height of each row in pixels.
      *
      * Used for virtual scrolling calculations. Must be consistent
      * across all rows for accurate scrolling. Default is 40.
      */
-    rowHeight = input(40, { ...(ngDevMode ? { debugName: "rowHeight" } : {}), transform: numberAttribute });
+    rowHeight = input(this.defaults.rowHeight, { ...(ngDevMode ? { debugName: "rowHeight" } : {}), transform: numberAttribute });
     /**
      * Grid height configuration.
      *
@@ -1404,14 +1745,34 @@ class DataGrid {
      * - `'full'` - Fill container height (100%), can be managed by host component style
      * - `'default'` - Height by CSS var (--re-data-grid-height)
      */
-    height = input('default', ...(ngDevMode ? [{ debugName: "height" }] : []));
+    height = input(this.defaults.height, ...(ngDevMode ? [{ debugName: "height" }] : []));
     /**
      * Size of the virtual scroll buffer.
      *
      * Number of extra rows to render above and below the viewport
-     * to reduce flickering during fast scrolling. Default is 6.
+     * to reduce flickering during fast scrolling. Default is 8.
+     */
+    virtualBuffer = input(this.defaults.virtualBuffer, ...(ngDevMode ? [{ debugName: "virtualBuffer" }] : []));
+    /**
+     * Header group configuration for creating multi-level column headers.
+     *
+     * Allows grouping multiple columns under a common header label.
+     * Each group spans from a starting column to an ending column and can have a custom alignment.
+     *
+     * @example
+     * ```typescript
+     * headerGroups = [
+     *   {
+     *     key: 'personal-info',
+     *     title: 'Personal Information',
+     *     from: 'name',
+     *     to: 'email',
+     *     align: 'center'
+     *   }
+     * ];
+     * ```
      */
-    virtualBuffer = input(6, ...(ngDevMode ? [{ debugName: "virtualBuffer" }] : []));
+    headerGroups = input([], ...(ngDevMode ? [{ debugName: "headerGroups" }] : []));
     /**
      * Loading state indicator.
      *
@@ -1419,8 +1780,9 @@ class DataGrid {
      * Useful during async data fetching operations.
      */
     loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : {}), transform: booleanAttribute });
+    loadingMode = input(this.defaults.loadingMode, ...(ngDevMode ? [{ debugName: "loadingMode" }] : []));
     /**
-     * Function or property name for obtaining a unique row key.
+     * Function or property name for getting a unique row key.
      *
      * Used for efficient change detection and row tracking.
      * Can be a property name (string) or a function that returns a unique identifier.
@@ -1432,7 +1794,7 @@ class DataGrid {
      * Controls the numbering scheme for pagination events.
      * Default is true (0-based indexing).
      */
-    pageStartFromZero = input(true, { ...(ngDevMode ? { debugName: "pageStartFromZero" } : {}), transform: booleanAttribute });
+    pageStartFromZero = input(this.defaults.pageStartFromZero, { ...(ngDevMode ? { debugName: "pageStartFromZero" } : {}), transform: booleanAttribute });
     /**
      * Event emitted when requesting data for a new page.
      *
@@ -1474,41 +1836,88 @@ class DataGrid {
      * Contains the clicked row data and its index.
      */
     rowClick = output();
+    /**
+     * Event emitted when a row is right-clicked (context menu).
+     *
+     * Contains the clicked row data, its index, and the native mouse event.
+     */
+    rowContext = output();
+    /**
+     * Event emitted when a row is double-clicked.
+     *
+     * Contains the clicked row data, its index, and the native mouse event.
+     */
+    rowDoubleClick = output();
     /**
      * Event emitted when a cell is clicked.
      *
      * Contains the clicked row, column configuration, and row index.
      */
     cellClick = output();
+    /**
+     * Event emitted when a cell is right-clicked (context menu).
+     *
+     * Contains the clicked row, column configuration, row index, and the native mouse event.
+     */
+    cellContext = output();
+    /**
+     * Event emitted when a cell is double-clicked.
+     *
+     * Contains the clicked row, column configuration, row index, and the native mouse event.
+     */
+    cellDoubleClick = output();
     vm = inject((DataGridVm));
     selector = new Selector();
     rootEl = viewChild('root', ...(ngDevMode ? [{ debugName: "rootEl" }] : []));
     scrollEl = viewChild('scroll', ...(ngDevMode ? [{ debugName: "scrollEl" }] : []));
     headerEl = viewChild('header', ...(ngDevMode ? [{ debugName: "headerEl" }] : []));
+    ngZone = inject(NgZone);
     cellTypedSlotRefs = contentChildren(DataGridTypeCellTemplateDirective, ...(ngDevMode ? [{ debugName: "cellTypedSlotRefs" }] : []));
     cellDataSlotRefs = contentChildren(DataGridCellTemplateDirective, ...(ngDevMode ? [{ debugName: "cellDataSlotRefs" }] : []));
+    declarativeColumnRefs = contentChildren(DataGridDeclarativeColumn, ...(ngDevMode ? [{ debugName: "declarativeColumnRefs" }] : []));
     headerSlotRefs = contentChildren(DataGridHeaderTemplateDirective, ...(ngDevMode ? [{ debugName: "headerSlotRefs" }] : []));
     emptySlotRefs = contentChildren(DataGridCellEmptyDirective, ...(ngDevMode ? [{ debugName: "emptySlotRefs" }] : []));
     loadingSlotRefs = contentChildren(DataGridCellLoadingDirective, ...(ngDevMode ? [{ debugName: "loadingSlotRefs" }] : []));
     sortIcSlotRefs = contentChildren(DataGridSortIconDirective, ...(ngDevMode ? [{ debugName: "sortIcSlotRefs" }] : []));
     expanderIcSlotRefs = contentChildren(DataGridExpanderIconDirective, ...(ngDevMode ? [{ debugName: "expanderIcSlotRefs" }] : []));
+    stickyRowSlotRefs = contentChildren(DataGridStickyRowDirective, ...(ngDevMode ? [{ debugName: "stickyRowSlotRefs" }] : []));
+    rowSlotRefs = contentChildren(DataGridRowDirective, ...(ngDevMode ? [{ debugName: "rowSlotRefs" }] : []));
     emptyTpl = computed(() => this.emptySlotRefs()?.[0], ...(ngDevMode ? [{ debugName: "emptyTpl" }] : []));
     loadingTpl = computed(() => this.loadingSlotRefs()?.[0], ...(ngDevMode ? [{ debugName: "loadingTpl" }] : []));
     sortTpl = computed(() => this.sortIcSlotRefs()?.at(0), ...(ngDevMode ? [{ debugName: "sortTpl" }] : []));
     expanderTpl = computed(() => this.expanderIcSlotRefs()?.at(0), ...(ngDevMode ? [{ debugName: "expanderTpl" }] : []));
-    visibleRows = signal([], ...(ngDevMode ? [{ debugName: "visibleRows" }] : []));
+    stickyRowTpl = computed(() => this.stickyRowSlotRefs()?.at(0), ...(ngDevMode ? [{ debugName: "stickyRowTpl" }] : []));
+    rowTpl = computed(() => this.rowSlotRefs()?.at(0), ...(ngDevMode ? [{ debugName: "rowTpl" }] : []));
+    renderSlots = signal([], ...(ngDevMode ? [{ debugName: "renderSlots" }] : []));
+    renderCount = 0;
+    lastStartIndex = -1;
+    lastEndIndex = -1;
     startIndex = 0;
-    headerHeight = signal(40, ...(ngDevMode ? [{ debugName: "headerHeight" }] : []));
-    // todo someday
-    // protected fillHeight = signal<number | null>(null);
+    headerHeight = signal(this.defaults.headerHeight, ...(ngDevMode ? [{ debugName: "headerHeight" }] : []));
+    stickyRowIndex = signal(null, ...(ngDevMode ? [{ debugName: "stickyRowIndex" }] : []));
+    stickyRowTopPx = signal(0, ...(ngDevMode ? [{ debugName: "stickyRowTopPx" }] : []));
+    stickyRowData = computed(() => {
+        const index = this.stickyRowIndex();
+        const rows = this.data();
+        if (index === null || index < 0 || index >= rows.length) {
+            return null;
+        }
+        return rows[index];
+    }, ...(ngDevMode ? [{ debugName: "stickyRowData" }] : []));
+    stickyIndexes = signal([], ...(ngDevMode ? [{ debugName: "stickyIndexes" }] : []));
     expanderMap = signal(new Map(), ...(ngDevMode ? [{ debugName: "expanderMap" }] : []));
+    declarativeColumns = computed(() => normalizeDeclarativeColumns(this.declarativeColumnRefs().map((columnRef) => columnRef.toDeclarativeColumn()), this.rowKey()), ...(ngDevMode ? [{ debugName: "declarativeColumns" }] : []));
+    sourceColumns = computed(() => {
+        const declarativeColumns = this.declarativeColumns().columns;
+        return declarativeColumns.length ? declarativeColumns : this.columns();
+    }, ...(ngDevMode ? [{ debugName: "sourceColumns" }] : []));
     extendedColumns = computed(() => {
         const hasSelection = this.selection().mode !== 'none';
         const hasIndex = this.hasIndexColumn();
         const newColumns = [];
         hasSelection && newColumns.push(GRID_CHECKBOX_COLUMN);
         hasIndex && newColumns.push(GRID_INDEX_COLUMN);
-        return [...newColumns, ...this.columns()];
+        return [...newColumns, ...this.sourceColumns()];
     }, ...(ngDevMode ? [{ debugName: "extendedColumns" }] : []));
     /**
      * Computed CSS height value based on height setting.
@@ -1517,11 +1926,6 @@ class DataGrid {
         const height = this.height();
         if (typeof height === 'number') {
             return `${height}px`;
-            // todo someday
-            // } else if (height === 'fill') {
-            //   const h = this.fillHeight();
-            //
-            //   return h === null ? null : `${h}px`;
         }
         else if (height === 'full') {
             return '100%';
@@ -1529,10 +1933,18 @@ class DataGrid {
         return 'var(--re-data-grid-height)';
     }, ...(ngDevMode ? [{ debugName: "styleHeight" }] : []));
     hideSbTimeout;
+    scrollRafId = null;
+    scrollbarRafId = null;
+    stickyRafId = null;
+    lastInfinityPageRequested = null;
+    lastInfinityTotal = -1;
     currentSortField;
     currentSortOrder = 'asc';
     subscription = new Subscription();
     observer;
+    resizeSubject = new Subject();
+    lastResizeWidth = -1;
+    lastResizeHeight = -1;
     constructor() {
         afterRenderEffect(() => {
             this.initRefs();
@@ -1550,19 +1962,60 @@ class DataGrid {
             this.data();
             this.rowHeight();
             this.pinnedRows();
+            this.isRowSticky();
+            this.getRowTemplate();
+            this.loading();
+            this.mode();
             this.vm.containerWidth();
             this.onVerticalScroll(true);
         });
+        effect(() => {
+            const total = this.data()?.length ?? 0;
+            if (total !== this.lastInfinityTotal) {
+                this.lastInfinityTotal = total;
+                this.lastInfinityPageRequested = null;
+            }
+        });
         effect(() => {
             const selection = this.selection();
             if ('defaultSelected' in selection) {
                 this.selector.selectedKeys.set(selection.defaultSelected || []);
             }
         });
+        effect(() => {
+            const selection = this.selection();
+            if (selection.mode === 'none' || !('key' in selection)) {
+                return;
+            }
+            const data = this.data() ?? [];
+            const key = selection.key;
+            const keySet = new Set(data.map((row) => row[key]));
+            this.selector.selectedKeys.update((prev) => prev.filter((k) => keySet.has(k)));
+        });
+        effect(() => {
+            const data = this.data() ?? [];
+            const predicate = this.isRowSticky();
+            if (!predicate || !data.length) {
+                this.stickyIndexes.set([]);
+                this.updateStickyFromScroll();
+                return;
+            }
+            const indexes = [];
+            for (let i = 0; i < data.length; i++) {
+                if (predicate(data[i], i)) {
+                    indexes.push(i);
+                }
+            }
+            this.stickyIndexes.set(indexes);
+            this.updateStickyFromScroll();
+        });
         inject(DestroyRef).onDestroy(() => {
             this.subscription.unsubscribe();
             this.observer?.disconnect();
             clearTimeout(this.hideSbTimeout);
+            this.clearScrollRaf();
+            this.clearScrollbarRaf();
+            this.clearStickyRaf();
         });
     }
     resolvePinnedData(pr) {
@@ -1599,14 +2052,21 @@ class DataGrid {
      * @param row - Data row that was clicked
      * @param col - Column configuration of the clicked cell
      * @param index - Row index in the dataset
+     * @param event
      */
-    onCellClick(row, col, index) {
-        this.cellClick.emit({ row, col, index });
+    onCellClick(row, col, index, event) {
+        this.cellClick.emit({ row, col, index, event });
         if (this.selection().mode !== 'none') {
             const selected = this.selector.select(row);
             this.selectChange.emit({ selected });
         }
     }
+    onCellContext(row, col, index, event) {
+        this.cellContext.emit({ row, col, index, event });
+    }
+    onCellDoubleClick(row, col, index, event) {
+        this.cellDoubleClick.emit({ row, col, index, event });
+    }
     isExpandable(column) {
         const keys = this.expanderMap();
         return keys.has(column.key);
@@ -1648,6 +2108,7 @@ class DataGrid {
         const total = data.length ?? 0;
         const rowHeight = Math.max(1, this.rowHeight());
         const virtualBuffer = Math.max(0, this.virtualBuffer());
+        const pinnedTopH = this.vm.pinnedTop().length * rowHeight;
         const limit = this.mode() === 'pagination';
         const cap = limit ? Math.max(1, this.pageSize()) : Number.POSITIVE_INFINITY;
         const viewportRows = Math.ceil(viewportHeight / rowHeight);
@@ -1655,24 +2116,42 @@ class DataGrid {
         const start = Math.max(0, Math.floor(scrollTop / rowHeight) - Math.floor(virtualBuffer / 2));
         const end = Math.min(total, start + visibleCount);
         if (!el || viewportHeight <= 0 || !isFinite(viewportHeight) || !isFinite(rowHeight)) {
-            this.visibleRows.set(data);
-            this.vm.calcScrollbar();
+            const fallbackCount = Math.min(total, Math.max(1, this.pageSize()));
+            this.renderCount = fallbackCount;
+            this.ensureRenderSlots(fallbackCount);
+            this.updateStickyRow(scrollTop, rowHeight, pinnedTopH);
+            this.scheduleScrollbarUpdate();
             this.showScrollbar();
             this.hideScrollbarSoon();
             return;
         }
+        if (start === this.lastStartIndex && end === this.lastEndIndex) {
+            this.scheduleScrollbarUpdate();
+            this.showScrollbar();
+            this.hideScrollbarSoon();
+            return;
+        }
+        this.lastStartIndex = start;
+        this.lastEndIndex = end;
         this.startIndex = start;
-        this.visibleRows.set(data.slice(start, end));
+        this.renderCount = Math.max(0, end - start);
+        this.ensureRenderSlots(this.renderCount);
+        this.updateStickyRow(scrollTop, rowHeight, pinnedTopH);
         if (!initial && this.mode() === 'infinity') {
             const threshold = Math.max(0, total - Math.max(1, Math.floor(visibleCount * 1.5)));
             const nearEnd = start + visibleCount >= threshold;
             if (nearEnd && !this.loading()) {
                 const modifier = this.pageStartFromZero() ? 0 : 1;
                 const page = Math.floor(total / this.pageSize()) + modifier;
+                if (this.lastInfinityPageRequested === page && this.lastInfinityTotal === total) {
+                    return;
+                }
+                this.lastInfinityTotal = total;
+                this.lastInfinityPageRequested = page;
                 this.pageChange.emit({ page, rows: this.pageSize() });
             }
         }
-        this.vm.calcScrollbar();
+        this.scheduleScrollbarUpdate();
         this.showScrollbar();
         this.hideScrollbarSoon();
     }
@@ -1727,15 +2206,7 @@ class DataGrid {
         clearTimeout(this.hideSbTimeout);
         this.hideSbTimeout = setTimeout(() => this.vm.scrollbarVisible.set(false), delay);
     }
-    // todo
     trackPinnedRow = (row) => row.order;
-    trackByRow = (row) => {
-        const rowKey = this.rowKey();
-        if (!rowKey) {
-            return row;
-        }
-        return typeof rowKey === 'function' ? rowKey(row) : row[rowKey];
-    };
     cellClass(col, row) {
         if (typeof col.cellClass === 'function') {
             return col.cellClass(row);
@@ -1748,22 +2219,115 @@ class DataGrid {
         }
         return this.currentSortOrder === 'asc' ? 'ascending' : 'descending';
     }
+    tooltipEl = viewChild('tooltip', ...(ngDevMode ? [{ debugName: "tooltipEl" }] : []));
+    tooltipState = signal({
+        text: '',
+        x: 0,
+        y: 0,
+        visible: false,
+    }, ...(ngDevMode ? [{ debugName: "tooltipState" }] : []));
+    resolveTooltip(row, col) {
+        const tooltip = col.tooltip;
+        if (!tooltip) {
+            return null;
+        }
+        if (typeof tooltip === 'function') {
+            const value = tooltip(row);
+            if (value === null || value === undefined || value === '') {
+                return null;
+            }
+            return String(value);
+        }
+        if (typeof tooltip === 'string') {
+            return tooltip === '' ? null : tooltip;
+        }
+        return tooltip;
+    }
+    showTooltip(event, row, col, index) {
+        const resolved = this.resolveTooltip(row, col);
+        if (!resolved) {
+            return;
+        }
+        const baseValue = 'value' in col ? col.value(row) : row[col.key];
+        const ctx = {
+            $implicit: row,
+            row,
+            col: col,
+            index,
+            value: baseValue,
+        };
+        const offset = 12;
+        const x = event.clientX + offset;
+        const y = event.clientY + offset;
+        if (typeof resolved === 'string') {
+            this.tooltipState.set({ text: resolved, x, y, visible: true });
+        }
+        else {
+            this.tooltipState.set({ tpl: resolved, ctx, x, y, visible: true });
+        }
+        requestAnimationFrame(() => this.positionTooltip());
+    }
+    hideTooltip() {
+        if (!this.tooltipState().visible) {
+            return;
+        }
+        this.tooltipState.update((prev) => ({ ...prev, visible: false }));
+    }
+    positionTooltip() {
+        const el = this.tooltipEl()?.nativeElement;
+        const state = this.tooltipState();
+        if (!el || !state.visible) {
+            return;
+        }
+        const rect = el.getBoundingClientRect();
+        const padding = 8;
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        let x = state.x;
+        let y = state.y;
+        if (x + rect.width + padding > vw) {
+            x = Math.max(padding, vw - rect.width - padding);
+        }
+        if (y + rect.height + padding > vh) {
+            y = Math.max(padding, vh - rect.height - padding);
+        }
+        if (x !== state.x || y !== state.y) {
+            this.tooltipState.update((prev) => ({ ...prev, x, y }));
+        }
+    }
+    isStickyRowIndex(index) {
+        return this.stickyRowIndex() === index;
+    }
+    resolveRowTemplate(row, index) {
+        const resolver = this.getRowTemplate();
+        if (resolver) {
+            const resolved = resolver(row, index);
+            if (resolved) {
+                return resolved;
+            }
+        }
+        return this.rowTpl()?.tpl ?? null;
+    }
     initVm() {
         this.vm.scrollEl.set(this.scrollEl());
         this.vm.columns.set(this.extendedColumns());
         this.vm.pinnedRows.set(this.pinnedRows());
+        this.vm.headerGroups.set(this.headerGroups());
+        queueMicrotask(() => this.initHeader());
     }
     initSelector() {
         this.selector.data.set(this.data());
         this.selector.selection.set(this.selection());
     }
     initRefs() {
+        this.vm.globalTypeCellTpls.clear();
+        this.vm.globalDataCellTpls.clear();
+        this.vm.globalRowCellTpls.clear();
         this.cellTypedSlotRefs()?.forEach((dir) => this.vm.globalTypeCellTpls.set(dir.type(), dir.tpl));
         this.cellDataSlotRefs()?.forEach((dir) => this.vm.globalDataCellTpls.set(dir.key(), dir.tpl));
+        this.declarativeColumns().rowCellTemplatesByKey.forEach((tpl, key) => this.vm.globalRowCellTpls.set(key, tpl));
         const headerMap = new Map();
-        const cellsMap = new Map();
         this.headerSlotRefs()?.forEach((h) => headerMap.set(h.key(), h.tpl));
-        this.cellDataSlotRefs()?.forEach((h) => cellsMap.set(h.key(), h.tpl));
         this.extendedColumns()?.forEach((c) => {
             if (!c.headerTemplate && headerMap.has(c.key)) {
                 c.headerTemplate = headerMap.get(c.key);
@@ -1787,11 +2351,9 @@ class DataGrid {
         const scrollEl = this.scrollEl()?.nativeElement;
         if (scrollEl) {
             const scrollDetector = new ScrollDirectionDetector(scrollEl);
-            this.subscription = fromEvent(scrollEl, 'scroll')
-                .pipe(auditTime(16))
-                .subscribe(() => {
-                const direction = scrollDetector.detect();
-                direction === 'vertical' ? this.onVerticalScroll() : this.onHorizontalScroll();
+            this.ngZone.runOutsideAngular(() => {
+                this.subscription.add(fromEvent(scrollEl, 'scroll').subscribe(() => this.scheduleScrollTick(scrollDetector)));
+                this.subscription.add(fromEvent(scrollEl, 'scroll').subscribe(() => this.scheduleStickyUpdate()));
             });
         }
         queueMicrotask(() => this.onVerticalScroll(true));
@@ -1800,13 +2362,26 @@ class DataGrid {
         const root = this.rootEl();
         if (!root)
             return;
-        this.observer = new ResizeObserver((entries) => {
-            const width = entries[0].contentRect.width;
-            this.onVerticalScroll(true);
-            this.onHorizontalScroll();
-            this.vm.calcScrollbar();
-            this.vm.containerWidth.set(width);
-        });
+        this.subscription.add(this.resizeSubject.pipe(debounceTime(this.defaults.debounce.resize)).subscribe((entries) => {
+            const rect = entries[0].contentRect;
+            const width = rect.width;
+            const height = rect.height;
+            const widthChanged = width !== this.lastResizeWidth;
+            const heightChanged = height !== this.lastResizeHeight;
+            if (!widthChanged && !heightChanged) {
+                return;
+            }
+            this.lastResizeWidth = width;
+            this.lastResizeHeight = height;
+            if (widthChanged) {
+                this.vm.containerWidth.set(width);
+                queueMicrotask(() => this.initHeader());
+            }
+            if (heightChanged) {
+                this.onVerticalScroll(true);
+            }
+        }));
+        this.observer = new ResizeObserver((entries) => this.resizeSubject.next(entries));
         this.observer.observe(root.nativeElement);
     }
     initExpander() {
@@ -1818,17 +2393,132 @@ class DataGrid {
         this.vm.columns.set(columns);
         this.expanderMap.set(map);
     }
+    scheduleScrollbarUpdate() {
+        if (this.scrollbarRafId !== null) {
+            return;
+        }
+        this.scrollbarRafId = requestAnimationFrame(() => {
+            this.scrollbarRafId = null;
+            this.vm.calcScrollbar();
+        });
+    }
+    scheduleScrollTick(detector) {
+        if (this.scrollRafId !== null) {
+            return;
+        }
+        this.scrollRafId = requestAnimationFrame(() => {
+            this.scrollRafId = null;
+            const direction = detector.detect();
+            this.ngZone.run(() => {
+                direction === 'vertical' ? this.onVerticalScroll() : this.onHorizontalScroll();
+                this.hideTooltip();
+            });
+        });
+    }
+    clearScrollRaf() {
+        if (this.scrollRafId !== null) {
+            cancelAnimationFrame(this.scrollRafId);
+            this.scrollRafId = null;
+        }
+    }
+    ensureRenderSlots(count) {
+        const current = this.renderSlots();
+        if (current.length === count) {
+            return;
+        }
+        const next = new Array(count);
+        for (let i = 0; i < count; i++) {
+            next[i] = i;
+        }
+        this.renderSlots.set(next);
+    }
+    clearScrollbarRaf() {
+        if (this.scrollbarRafId !== null) {
+            cancelAnimationFrame(this.scrollbarRafId);
+            this.scrollbarRafId = null;
+        }
+    }
+    scheduleStickyUpdate() {
+        if (this.stickyRafId !== null) {
+            return;
+        }
+        this.stickyRafId = requestAnimationFrame(() => {
+            this.stickyRafId = null;
+            this.ngZone.run(() => this.updateStickyFromScroll());
+        });
+    }
+    clearStickyRaf() {
+        if (this.stickyRafId !== null) {
+            cancelAnimationFrame(this.stickyRafId);
+            this.stickyRafId = null;
+        }
+    }
+    updateStickyRow(scrollTop, rowHeight, pinnedTopH) {
+        const indexes = this.stickyIndexes();
+        if (!indexes.length) {
+            this.stickyRowIndex.set(null);
+            return;
+        }
+        const scrollRowIndex = Math.max(0, Math.floor(scrollTop / rowHeight));
+        const currentIndex = this.findStickyIndexBefore(indexes, scrollRowIndex);
+        if (currentIndex === null) {
+            this.stickyRowIndex.set(null);
+            return;
+        }
+        let activeIndex = currentIndex;
+        const prevIndex = this.stickyRowIndex();
+        const hysteresisPx = Math.max(1, rowHeight * 0.5);
+        if (prevIndex !== null && prevIndex !== currentIndex) {
+            const boundaryPx = currentIndex * rowHeight;
+            const delta = Math.abs(scrollTop - boundaryPx);
+            if (delta < hysteresisPx) {
+                activeIndex = prevIndex;
+            }
+        }
+        const stickyTop = this.headerHeight() + pinnedTopH;
+        let topPx = scrollTop + stickyTop;
+        // Keep the sticky row fixed at the sticky top until the next sticky row replaces it.
+        topPx = Math.max(topPx, scrollTop + stickyTop);
+        this.stickyRowIndex.set(activeIndex);
+        this.stickyRowTopPx.set(topPx);
+    }
+    updateStickyFromScroll() {
+        const el = this.scrollEl()?.nativeElement;
+        if (!el)
+            return;
+        const scrollTop = el.scrollTop ?? 0;
+        const rowHeight = Math.max(1, this.rowHeight());
+        const pinnedTopH = this.vm.pinnedTop().length * rowHeight;
+        this.updateStickyRow(scrollTop, rowHeight, pinnedTopH);
+    }
+    findStickyIndexBefore(indexes, index) {
+        let low = 0;
+        let high = indexes.length - 1;
+        let result = -1;
+        while (low <= high) {
+            const mid = (low + high) >>> 1;
+            const value = indexes[mid];
+            if (value <= index) {
+                result = value;
+                low = mid + 1;
+            }
+            else {
+                high = mid - 1;
+            }
+        }
+        return result === -1 ? null : result;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DataGrid, isStandalone: true, selector: "re-data-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, pinnedRows: { classPropertyName: "pinnedRows", publicName: "pinnedRows", isSignal: true, isRequired: false, transformFunction: null }, hasIndexColumn: { classPropertyName: "hasIndexColumn", publicName: "hasIndexColumn", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, virtualBuffer: { classPropertyName: "virtualBuffer", publicName: "virtualBuffer", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, pageStartFromZero: { classPropertyName: "pageStartFromZero", publicName: "pageStartFromZero", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", sortChange: "sortChange", selectChange: "selectChange", rowClick: "rowClick", cellClick: "cellClick" }, providers: [DataGridVm], queries: [{ propertyName: "cellTypedSlotRefs", predicate: DataGridTypeCellTemplateDirective, isSignal: true }, { propertyName: "cellDataSlotRefs", predicate: DataGridCellTemplateDirective, isSignal: true }, { propertyName: "headerSlotRefs", predicate: DataGridHeaderTemplateDirective, isSignal: true }, { propertyName: "emptySlotRefs", predicate: DataGridCellEmptyDirective, isSignal: true }, { propertyName: "loadingSlotRefs", predicate: DataGridCellLoadingDirective, isSignal: true }, { propertyName: "sortIcSlotRefs", predicate: DataGridSortIconDirective, isSignal: true }, { propertyName: "expanderIcSlotRefs", predicate: DataGridExpanderIconDirective, isSignal: true }], viewQueries: [{ propertyName: "rootEl", first: true, predicate: ["root"], descendants: true, isSignal: true }, { propertyName: "scrollEl", first: true, predicate: ["scroll"], descendants: true, isSignal: true }, { propertyName: "headerEl", first: true, predicate: ["header"], descendants: true, isSignal: true }], ngImport: i0, template: "@let items = data();\n@let empty = !loading() && !items?.length;\n@let notEmpty = !!items?.length;\n\n@let pinnedTopH = vm.pinnedTop().length * rowHeight();\n@let pinnedBottomH = vm.pinnedBottom().length * rowHeight();\n\n<div\n  #root\n  class=\"re-dg-root\"\n  [class.loading]=\"loading()\"\n  [style.height]=\"styleHeight()\"\n  role=\"table\"\n>\n  @if (loading()) {\n    <div class=\"re-dg-loader\">\n      @let loadingTemplate = loadingTpl();\n\n      @if (loadingTemplate?.tpl) {\n        <ng-container [ngTemplateOutlet]=\"loadingTemplate!.tpl\" />\n      } @else {\n        <span class=\"re-dg-loader-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430\u2026</span>\n      }\n    </div>\n  }\n\n  <div\n    #scroll\n    class=\"re-dg-body\"\n    role=\"rowgroup\"\n    (mouseenter)=\"showScrollbar()\"\n    (mouseleave)=\"hideScrollbarSoon()\"\n  >\n    <div class=\"re-dg-header\" role=\"rowgroup\">\n      <div #header class=\"re-dg-row re-dg-header-row\" role=\"row\">\n        @for (col of vm.columnsToShow(); track col.key) {\n          <div\n            class=\"re-dg-header-cell\"\n            role=\"columnheader\"\n            [class.sortable]=\"!!col.sortKey\"\n            [class.active-sort]=\"currentSortField && (currentSortField === col.sortKey)\"\n            [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\n            [class.sticky-right]=\"vm.isStickyRight(col.key)\"\n            [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\n            [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\n            [style.width.px]=\"vm.widthByKey(col.key)\"\n            [style.min-width.px]=\"col.minWidth || null\"\n            [style.max-width.px]=\"col.maxWidth || null\"\n            [style.justify-content]=\"col.align || 'left'\"\n            [attr.aria-sort]=\"ariaSort(col)\"\n            [attr.tabindex]=\"col.sortKey ? 0 : -1\"\n            [title]=\"col.header\"\n            (click)=\"col.sortKey && onSort(col)\"\n            (keydown.enter)=\"col.sortKey && onSort(col)\"\n          >\n            @if (col.headerTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"col.headerTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: col.header }\"\n              />\n            } @else {\n              @let isCheckbox = 'type' in col && col.type === 'checkbox';\n              @let isMultiSelect = selection().mode === 'multi';\n\n              @if (isCheckbox && isMultiSelect) {\n                <re-checkbox-ic [state]=\"selector.isAllSelected()\" (click)=\"selector.selectAll()\" />\n              } @else {\n                <span class=\"re-dg-header-text\">{{ col.header }}</span>\n              }\n\n              @if (col.sortKey) {\n                <span class=\"re-dg-sort-ind\">\n                  @let direction = currentSortField === col.sortKey ? currentSortOrder : undefined;\n\n                  @if (sortTpl()) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"sortTpl()!.tpl\"\n                      [ngTemplateOutletContext]=\"{ $implicit: direction }\"\n                    />\n                  } @else {\n                    <re-sort-ic [direction]=\"direction\" />\n                  }\n                </span>\n              }\n\n              @if (isExpandable(col)) {\n                <button (click)=\"$event.stopPropagation(); onExpand(col)\">\n                  @let expanded = expanderMap().get(col.key);\n\n                  @if (expanderTpl()) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"expanderTpl()!.tpl\"\n                      [ngTemplateOutletContext]=\"{ $implicit: expanded }\" />\n                  } @else {\n                    <re-expand-ic [expanded]=\"expanded\" />\n                  }\n                </button>\n              }\n            }\n          </div>\n        }\n      </div>\n\n      <!-- PINNED TOP ROWS -->\n      @if (notEmpty) {\n        @for (pr of vm.pinnedTop(); track trackPinnedRow(pr)) {\n          <div class=\"re-dg-row re-dg-pinned re-dg-top\" role=\"row\">\n            @if (pr.rowTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"pr.rowTemplate!\"\n                [ngTemplateOutletContext]=\"{ $implicit: resolvePinnedData(pr) }\"\n              />\n            } @else {\n              @for (col of vm.columnsToShow(); track col.key) {\n                <div\n                  class=\"re-dg-cell\"\n                  role=\"cell\"\n                  [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\n                  [class.sticky-right]=\"vm.isStickyRight(col.key)\"\n                  [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\n                  [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\n                  [style.justify-items]=\"col.align || 'left'\"\n                  [style.height.px]=\"rowHeight()\"\n                  [style.width.px]=\"vm.widthByKey(col.key)\"\n                >\n                  {{ resolvePinnedData(pr)[col.key] ?? '' }}\n                </div>\n              }\n            }\n          </div>\n        }\n      }\n    </div>\n\n    @if (empty) {\n      @let emptyTemplate = emptyTpl()?.tpl;\n\n      <div class=\"re-dg-empty\">\n        @if (emptyTemplate) {\n          <ng-container [ngTemplateOutlet]=\"emptyTemplate\" />\n        } @else {\n          <span class=\"re-dg-empty-text\">\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445</span>\n        }\n      </div>\n    }\n\n    <!-- Content -->\n    @if (notEmpty) {\n      <div class=\"re-dg-spacer\" [style.height.px]=\"items.length * rowHeight() - pinnedBottomH\"></div>\n\n      @for (row of visibleRows(); track trackByRow(row); let vi = $index) {\n        <div\n          class=\"re-dg-row re-dg-data-row\"\n          role=\"row\"\n          [style.height.px]=\"rowHeight()\"\n          [style.top.px]=\"(startIndex + vi) * rowHeight() + pinnedTopH + headerHeight()\"\n          [attr.tabindex]=\"0\"\n          (click)=\"$event.stopPropagation(); rowClick.emit({ row, index: startIndex + vi })\"\n          (keydown.enter)=\"$event.stopPropagation(); rowClick.emit({ row, index: startIndex + vi })\"\n        >\n          @for (col of vm.columnsToShow(); track col.key) {\n            <div\n              class=\"re-dg-cell\"\n              role=\"cell\"\n              [class.expanded]=\"!!col.expandBy\"\n              [class]=\"cellClass(col, row)\"\n              [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\n              [class.sticky-right]=\"vm.isStickyRight(col.key)\"\n              [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\n              [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\n              [style.justify-items]=\"col.align || 'left'\"\n              [style.text-align]=\"col.align || 'left'\"\n              [style.width.px]=\"vm.widthByKey(col.key)\"\n              [attr.tabindex]=\"0\"\n              (click)=\"onCellClick(row, col, startIndex + vi);\"\n              (keydown.enter)=\"onCellClick(row, col, startIndex + vi)\"\n            >\n              @let isCheckbox = 'type' in col && col.type === 'checkbox';\n\n              @if (isCheckbox) {\n                <re-checkbox-ic [state]=\"selector.isSelected(row)\" />\n              } @else {\n                <re-data-grid-cell [index]=\"startIndex + vi\" [item]=\"row\" [column]=\"col\" />\n              }\n            </div>\n          }\n        </div>\n      }\n    }\n\n    <!-- PINNED BOTTOM ROWS -->\n    @if (notEmpty) {\n      <div class=\"re-dg-footer\" role=\"rowgroup\">\n        @for (pr of vm.pinnedBottom(); track trackPinnedRow(pr)) {\n          <div class=\"re-dg-row re-dg-pinned re-dg-bottom\" role=\"row\">\n            @if (pr.rowTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"pr.rowTemplate!\"\n                [ngTemplateOutletContext]=\"{ $implicit: resolvePinnedData(pr) }\"\n              />\n            } @else {\n              @for (col of vm.columnsToShow(); track col.key) {\n                <div\n                  class=\"re-dg-cell\"\n                  role=\"cell\"\n                  [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\n                  [class.sticky-right]=\"vm.isStickyRight(col.key)\"\n                  [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\n                  [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\n                  [style.justify-items]=\"col.align || 'left'\"\n                  [style.height.px]=\"rowHeight()\"\n                  [style.width.px]=\"vm.widthByKey(col.key)\"\n                >\n                  {{ resolvePinnedData(pr)[col.key] ?? '' }}\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Overlay scrollbar -->\n  <div class=\"re-dg-scrollbar\" [class.visible]=\"vm.scrollbarVisible()\">\n    <div\n      class=\"re-dg-scrollbar-thumb\"\n      role=\"scrollbar\"\n      aria-orientation=\"vertical\"\n      aria-hidden=\"false\"\n      [style.height.px]=\"vm.thumbHeightPx()\"\n      [style.transform]=\"'translateY(' + vm.thumbTopPx() + 'px)'\"\n      (mousedown)=\"onThumbDown($event)\"\n    ></div>\n  </div>\n</div>\n\n", styles: [":host{--re-data-grid-min-height: 200px;--re-data-grid-height: 400px;--re-data-grid-rounded: var(--radius-md, 6px);--re-data-grid-separator-color: var(--border-color);--re-data-grid-separator: 1px solid var(--re-data-grid-separator-color);--re-data-grid-surface: var(--surface-primary, #fff);--re-data-grid-active: var(--primary-color, #2a90f4);--re-data-grid-empty-color: #777;--re-data-grid-empty-surface: transparent;--re-data-grid-loading-color: #444;--re-data-grid-loading-surface: rgba(255, 255, 255, .5);--re-data-grid-scrollbar-size: 10px;--re-data-grid-scrollbar-offset: 2px;--re-data-grid-scrollbar-thumb-size: 8px;--re-data-grid-scrollbar-thumb-color: rgba(0, 0, 0, .35);--re-data-grid-scrollbar-thumb-rounded: 4px;--re-data-grid-header-height: 40px;--re-data-grid-header-separator-color: #ccc;--re-data-grid-header-separator: 1px solid var(--re-data-grid-header-separator-color);--re-data-grid-header-surface: #fff;--re-data-grid-header-cell-font-weight: 600;--re-data-grid-header-cell-font-size: .8rem;--re-data-grid-header-cell-color: #000;--re-data-grid-header-cell-surface: #fafafa;--re-data-grid-footer-separator-color: #ccc;--re-data-grid-footer-separator: 1px solid var(--re-data-grid-footer-separator-color);--re-data-grid-footer-surface: #fff;--re-data-grid-row-separator-color: #bbb;--re-data-grid-row-separator: 1px solid var(--re-data-grid-row-separator-color);--re-data-grid-row-odd-surface: var(--re-data-grid-cell-surface);--re-data-grid-column-separator-color: transparent;--re-data-grid-column-separator: 1px solid var(--re-data-grid-column-separator-color);--re-data-grid-column-odd-surface: var(--re-data-grid-cell-surface);--re-data-grid-cell-paddings: .4rem .625rem;--re-data-grid-cell-font-weight: 400;--re-data-grid-cell-font-size: .75rem;--re-data-grid-cell-color: #000;--re-data-grid-cell-surface: #fff;--re-data-grid-sticky-header-cell-surface: #fff;--re-data-grid-sticky-cell-surface: #fdfdfd;--re-data-grid-sticky-cell-left-shadow: 2px 0 2px rgba(0, 0, 0, .03);--re-data-grid-sticky-cell-right-shadow: -2px 0 2px rgba(0, 0, 0, .03);--re-data-grid-pinned-surface: #fcfcfc;--re-data-grid-pinned-separator-color: #eee;--re-data-grid-pinned-separator: 1px solid var(--re-data-grid-pinned-separator-color);--re-data-grid-expander-color: var(--primary-color, currentColor);--re-data-grid-expanded-color: var(--re-data-grid-cell-color, #000);--re-data-grid-expanded-surface: var(--re-data-grid-cell-surface, #fff);display:block;min-height:0}:host,:host *,:host *:before,:host *:after{box-sizing:border-box;outline:none}:host button{outline:none}.re-dg-root{position:relative;display:flex;flex-direction:column;width:100%;min-height:var(--re-data-grid-min-height);border-radius:var(--re-data-grid-rounded);border:var(--re-data-grid-separator)}.re-dg-root.fill{display:block}.re-dg-root.loading{pointer-events:none;-webkit-user-select:none;user-select:none;cursor:wait}.re-dg-root.loading .re-dg-body{overflow:hidden}.re-dg-root.loading .re-dg-scrollbar{display:none!important}.re-dg-root.loading .re-dg-loader{pointer-events:all}.re-dg-body{position:relative;flex:1 1 auto;min-height:0;min-width:0;height:inherit;border:var(--re-data-grid-separator);border-radius:var(--re-data-grid-rounded);background-color:var(--re-data-grid-surface);overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.re-dg-body::-webkit-scrollbar{width:0;height:0}.re-dg-header,.re-dg-footer{position:sticky;z-index:3}.re-dg-header{top:0;background-color:var(--re-data-grid-header-surface)}.re-dg-header-row{min-height:var(--re-data-grid-header-height)}.re-dg-footer{bottom:0;border-radius:0 0 var(--re-data-grid-rounded) var(--re-data-grid-rounded);background-color:var(--re-data-grid-footer-surface)}.re-dg-row{position:relative;display:flex}.re-dg-data-row{position:absolute;left:0;right:0;cursor:default}.re-dg-cell,.re-dg-header-cell{display:flex;flex:0 0 auto;align-items:center;padding:var(--re-data-grid-cell-paddings);border-right:var(--re-data-grid-column-separator);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.re-dg-cell{width:100%;border-bottom:var(--re-data-grid-row-separator);font-weight:var(--re-data-grid-cell-font-weight);font-size:var(--re-data-grid-cell-font-size);color:var(--re-data-grid-cell-color);background-color:var(--re-data-grid-cell-surface)}.re-dg-row:nth-child(odd) .re-dg-cell{background-color:var(--re-data-grid-row-odd-surface)}.re-dg-cell:nth-child(odd){background-color:var(--re-data-grid-column-odd-surface)}.re-dg-bottom>.re-dg-cell{border-top:var(--re-data-grid-footer-separator)}.re-dg-header-cell{align-items:center;gap:.75rem;border-bottom:var(--re-data-grid-header-separator);font-weight:var(--re-data-grid-header-cell-font-weight);font-size:var(--re-data-grid-header-cell-font-size);color:var(--re-data-grid-header-cell-color);background:var(--re-data-grid-header-cell-surface);-webkit-user-select:none;user-select:none;transition:color .3s ease-in-out}.re-dg-header-cell:first-child{border-radius:var(--re-data-grid-rounded) 0 0 0}.re-dg-header-cell:last-child{border-radius:0 var(--re-data-grid-rounded) 0 0}.re-dg-data-row:last-child .re-dg-cell:first-child{border-radius:0 0 0 var(--re-data-grid-rounded)}.re-dg-data-row:last-child .re-dg-cell:last-child{border-radius:0 0 var(--re-data-grid-rounded) 0}.re-dg-header-cell .re-dg-header-text{display:-webkit-box;max-height:2.4em;line-height:1.2;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.re-dg-row.re-dg-pinned>.re-dg-cell{border-bottom:var(--re-data-grid-pinned-separator);background-color:var(--re-data-grid-pinned-surface)}.re-dg-row .re-dg-header-cell.sticky-left{box-shadow:var(--re-data-grid-sticky-cell-left-shadow);background-color:var(--re-data-grid-sticky-header-cell-surface)}.re-dg-row .re-dg-cell.sticky-left{box-shadow:var(--re-data-grid-sticky-cell-left-shadow);background-color:var(--re-data-grid-sticky-cell-surface)}.re-dg-row .re-dg-header-cell.sticky-right{box-shadow:var(--re-data-grid-sticky-cell-right-shadow);background-color:var(--re-data-grid-sticky-header-cell-surface)}.re-dg-row .re-dg-cell.sticky-right{box-shadow:var(--re-data-grid-sticky-cell-right-shadow);background-color:var(--re-data-grid-sticky-cell-surface)}.sticky-left,.sticky-right{position:sticky;z-index:2}.sortable{cursor:pointer}.active-sort{color:var(--re-data-grid-active)}.re-dg-sort-ind{margin-left:6px}.re-dg-data-row .re-dg-cell.expanded{color:var(--re-data-grid-expanded-color);background:var(--re-data-grid-expanded-surface)}.re-dg-empty{position:absolute;inset:0;display:grid;place-items:center;height:inherit;width:100%;border-radius:var(--re-data-grid-rounded);color:var(--re-data-grid-empty-color);background:var(--re-data-grid-empty-surface)}.re-dg-empty-text{width:100%;text-align:center}.re-dg-loader{position:absolute;inset:0;display:grid;place-items:center;height:inherit;border-radius:var(--re-data-grid-rounded);background-color:var(--re-data-grid-loading-surface);color:var(--re-data-grid-loading-color);z-index:5}.re-dg-scrollbar{position:absolute;right:0;top:0;bottom:0;opacity:0;transition:opacity .15s ease-in-out;pointer-events:none;z-index:4}.re-dg-scrollbar.visible{opacity:1}.re-dg-scrollbar-thumb{position:absolute;right:var(--re-data-grid-scrollbar-offset);width:var(--re-data-grid-scrollbar-thumb-size);border-radius:var(--re-data-grid-scrollbar-thumb-rounded);background:var(--re-data-grid-scrollbar-thumb-color);pointer-events:auto;-webkit-user-select:none;user-select:none}.re-dg-spacer{width:1px}.re-dg-top{top:0}.re-dg-bottom{bottom:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DataGridCellComponent, selector: "re-data-grid-cell", inputs: ["index", "item", "column"] }, { kind: "component", type: SortIcon, selector: "re-sort-ic", inputs: ["direction"] }, { kind: "component", type: ExpandIcon, selector: "re-expand-ic", inputs: ["expanded"] }, { kind: "component", type: CheckboxIcon, selector: "re-checkbox-ic", inputs: ["state", "disabled"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DataGrid, isStandalone: true, selector: "re-data-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, pinnedRows: { classPropertyName: "pinnedRows", publicName: "pinnedRows", isSignal: true, isRequired: false, transformFunction: null }, isRowSticky: { classPropertyName: "isRowSticky", publicName: "isRowSticky", isSignal: true, isRequired: false, transformFunction: null }, getRowTemplate: { classPropertyName: "getRowTemplate", publicName: "getRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, hasIndexColumn: { classPropertyName: "hasIndexColumn", publicName: "hasIndexColumn", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, virtualBuffer: { classPropertyName: "virtualBuffer", publicName: "virtualBuffer", isSignal: true, isRequired: false, transformFunction: null }, headerGroups: { classPropertyName: "headerGroups", publicName: "headerGroups", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingMode: { classPropertyName: "loadingMode", publicName: "loadingMode", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, pageStartFromZero: { classPropertyName: "pageStartFromZero", publicName: "pageStartFromZero", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", sortChange: "sortChange", selectChange: "selectChange", rowClick: "rowClick", rowContext: "rowContext", rowDoubleClick: "rowDoubleClick", cellClick: "cellClick", cellContext: "cellContext", cellDoubleClick: "cellDoubleClick" }, providers: [DataGridVm], queries: [{ propertyName: "cellTypedSlotRefs", predicate: DataGridTypeCellTemplateDirective, isSignal: true }, { propertyName: "cellDataSlotRefs", predicate: DataGridCellTemplateDirective, isSignal: true }, { propertyName: "declarativeColumnRefs", predicate: DataGridDeclarativeColumn, isSignal: true }, { propertyName: "headerSlotRefs", predicate: DataGridHeaderTemplateDirective, isSignal: true }, { propertyName: "emptySlotRefs", predicate: DataGridCellEmptyDirective, isSignal: true }, { propertyName: "loadingSlotRefs", predicate: DataGridCellLoadingDirective, isSignal: true }, { propertyName: "sortIcSlotRefs", predicate: DataGridSortIconDirective, isSignal: true }, { propertyName: "expanderIcSlotRefs", predicate: DataGridExpanderIconDirective, isSignal: true }, { propertyName: "stickyRowSlotRefs", predicate: DataGridStickyRowDirective, isSignal: true }, { propertyName: "rowSlotRefs", predicate: DataGridRowDirective, isSignal: true }], viewQueries: [{ propertyName: "rootEl", first: true, predicate: ["root"], descendants: true, isSignal: true }, { propertyName: "scrollEl", first: true, predicate: ["scroll"], descendants: true, isSignal: true }, { propertyName: "headerEl", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "tooltipEl", first: true, predicate: ["tooltip"], descendants: true, isSignal: true }], ngImport: i0, template: "@let items = data();\r\n@let empty = !loading() && !items?.length;\r\n@let notEmpty = !!items?.length;\r\n@let skeletonRowsCount = 4;\r\n@let skeletonMode = loadingMode() === 'skeleton';\r\n@let spinnerMode = loadingMode() === 'spinner';\r\n@let showInfinitySkeleton = loading() && skeletonMode && mode() === 'infinity';\r\n@let showPaginationSkeleton = loading() && skeletonMode && mode() === 'pagination' && !notEmpty;\r\n@let showSpinnerLoading = loading() && spinnerMode;\r\n@let extraInfinitySkeletonRows = showInfinitySkeleton ? skeletonRowsCount : 0;\r\n\r\n@let pinnedTopH = vm.pinnedTop().length * rowHeight();\r\n@let pinnedBottomH = vm.pinnedBottom().length * rowHeight();\r\n@let rowH = rowHeight();\r\n@let contentW = vm.contentWidth();\r\n@let cols = vm.columnsToShow();\r\n@let stickyTop = pinnedTopH + headerHeight();\r\n@let normalizedHeaderGroups = vm.normalizedHeaderGroups();\r\n@let stickyRow = stickyRowData();\r\n@let stickyIndex = stickyRowIndex();\r\n\r\n<div\r\n  #root\r\n  class=\"re-dg-root\"\r\n  [class.loading]=\"showSpinnerLoading\"\r\n  [style.height]=\"styleHeight()\"\r\n  role=\"table\"\r\n>\r\n  @if (showSpinnerLoading) {\r\n    <div class=\"re-dg-loader\">\r\n      @let loadingTemplate = loadingTpl();\r\n\r\n      @if (loadingTemplate?.tpl) {\r\n        <ng-container [ngTemplateOutlet]=\"loadingTemplate!.tpl\" />\r\n      } @else {\r\n        <span class=\"re-dg-loader-spinner\" aria-label=\"Loading\"></span>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <div\r\n    #scroll\r\n    class=\"re-dg-body\"\r\n    role=\"rowgroup\"\r\n    (mouseenter)=\"showScrollbar()\"\r\n    (mouseleave)=\"hideScrollbarSoon()\"\r\n  >\r\n    <div class=\"re-dg-header\" role=\"rowgroup\">\r\n      <div #header class=\"re-dg-header-rows\">\r\n        @if (normalizedHeaderGroups.length) {\r\n          <div class=\"re-dg-row re-dg-header-group-row\" role=\"row\" [style.width.px]=\"vm.contentWidth()\" [style.min-width.%]=\"100\">\r\n            @for (group of normalizedHeaderGroups; track group.key) {\r\n              @let groupStickyLeft = !!group.startKey && !!group.endKey && vm.isStickyLeft(group.startKey) && vm.isStickyLeft(group.endKey);\r\n              @let groupStickyRight = !!group.startKey && !!group.endKey && vm.isStickyRight(group.startKey) && vm.isStickyRight(group.endKey);\r\n\r\n              <div\r\n                class=\"re-dg-header-cell re-dg-header-group-cell\"\r\n                role=\"columnheader\"\r\n                [class.sticky-left]=\"groupStickyLeft\"\r\n                [class.sticky-right]=\"groupStickyRight\"\r\n                [style.left.px]=\"groupStickyLeft && group.startKey ? vm.stickyOffset(group.startKey, 'left') : null\"\r\n                [style.right.px]=\"groupStickyRight && group.endKey ? vm.stickyOffset(group.endKey, 'right') : null\"\r\n                [style.width.px]=\"group.widthPx\"\r\n                [style.justify-content]=\"group.align || 'left'\"\r\n                [title]=\"group.title || ''\"\r\n              >\r\n                @if (group.titleTemplate) {\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"group.titleTemplate\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: group.title || '' }\"\r\n                  />\r\n                } @else {\r\n                  <span class=\"re-dg-header-text\">{{ group.title || '' }}</span>\r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <div class=\"re-dg-row re-dg-header-row\" role=\"row\" [style.width.px]=\"vm.contentWidth()\" [style.min-width.%]=\"100\">\r\n          @for (col of vm.columnsToShow(); track col.key) {\r\n            <div\r\n              class=\"re-dg-header-cell\"\r\n              role=\"columnheader\"\r\n              [class.sortable]=\"!!col.sortKey\"\r\n              [class.active-sort]=\"currentSortField && (currentSortField === col.sortKey)\"\r\n              [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\r\n              [class.sticky-right]=\"vm.isStickyRight(col.key)\"\r\n              [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\r\n              [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\r\n              [style.width.px]=\"vm.widthByKey(col.key)\"\r\n              [style.min-width.px]=\"col.minWidth || null\"\r\n              [style.max-width.px]=\"col.maxWidth || null\"\r\n              [style.justify-content]=\"col.align || 'left'\"\r\n              [attr.aria-sort]=\"ariaSort(col)\"\r\n              [attr.tabindex]=\"col.sortKey ? 0 : -1\"\r\n              [title]=\"col.header\"\r\n              (click)=\"col.sortKey && onSort(col)\"\r\n              (keydown.enter)=\"col.sortKey && onSort(col)\"\r\n            >\r\n              @let isCheckbox = 'type' in col && col.type === 'checkbox';\r\n              @let isMultiSelect = selection().mode === 'multi';\r\n\r\n              @if (isCheckbox && isMultiSelect) {\r\n                <re-checkbox-ic [state]=\"selector.isAllSelected()\" (click)=\"selector.selectAll()\" />\r\n              } @else {\r\n                @if (col.headerTemplate) {\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"col.headerTemplate\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: col.header }\"\r\n                  />\r\n                } @else {\r\n                  <span class=\"re-dg-header-text\">{{ col.header }}</span>\r\n                }\r\n              }\r\n\r\n              @if (col.sortKey) {\r\n                <span class=\"re-dg-sort-ind\">\r\n                  @let direction = currentSortField === col.sortKey ? currentSortOrder : undefined;\r\n\r\n                  @if (sortTpl()) {\r\n                    <ng-container\r\n                      [ngTemplateOutlet]=\"sortTpl()!.tpl\"\r\n                      [ngTemplateOutletContext]=\"{ $implicit: direction }\"\r\n                    />\r\n                  } @else {\r\n                    <re-sort-ic [direction]=\"direction\" />\r\n                  }\r\n                </span>\r\n              }\r\n\r\n              @if (isExpandable(col)) {\r\n                <button (click)=\"$event.stopPropagation(); onExpand(col)\">\r\n                  @let expanded = expanderMap().get(col.key);\r\n\r\n                  @if (expanderTpl()) {\r\n                    <ng-container\r\n                      [ngTemplateOutlet]=\"expanderTpl()!.tpl\"\r\n                      [ngTemplateOutletContext]=\"{ $implicit: expanded }\" />\r\n                  } @else {\r\n                    <re-expand-ic [expanded]=\"expanded\" />\r\n                  }\r\n                </button>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      <!-- PINNED TOP ROWS -->\r\n      @if (notEmpty) {\r\n        @for (pr of vm.pinnedTop(); track trackPinnedRow(pr)) {\r\n          <div class=\"re-dg-row re-dg-pinned re-dg-top\" role=\"row\" [style.width.px]=\"contentW\" [style.min-width.%]=\"100\">\r\n            @if (pr.rowTemplate) {\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"pr.rowTemplate!\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: resolvePinnedData(pr) }\"\r\n              />\r\n            } @else {\r\n              @for (col of cols; track col.key) {\r\n                @let stickyLeft = vm.stickyOffset(col.key, 'left');\r\n                @let stickyRight = vm.stickyOffset(col.key, 'right');\r\n                @let isLeft = vm.isStickyLeft(col.key);\r\n                @let isRight = vm.isStickyRight(col.key);\r\n                <div\n                  class=\"re-dg-cell\"\n                  role=\"cell\"\n                  [class.sticky-left]=\"isLeft\"\n                  [class.sticky-right]=\"isRight\"\n                  [style.left.px]=\"stickyLeft\"\n                  [style.right.px]=\"stickyRight\"\n                  [style.justify-items]=\"col.align || 'left'\"\n                  [style.height.px]=\"rowH\"\n                  [style.width.px]=\"vm.widthByKey(col.key)\"\n                  (mouseenter)=\"showTooltip($event, $any(resolvePinnedData(pr)), col, -1)\"\n                  (mouseleave)=\"hideTooltip()\"\n                >\n                  {{ resolvePinnedData(pr)[col.key] ?? '' }}\n                </div>\n              }\r\n            }\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n\r\n    <!-- STICKY ROW -->\r\n    @if (stickyRow && stickyIndex !== null) {\r\n      <div\r\n        class=\"re-dg-row re-dg-data-row re-dg-sticky-row\"\r\n        role=\"row\"\r\n        [style.width.px]=\"vm.contentWidth()\"\r\n        [style.min-width.%]=\"100\"\r\n        [style.height.px]=\"rowHeight()\"\r\n        [style.top.px]=\"stickyRowTopPx()\"\r\n        [attr.tabindex]=\"0\"\r\n        (click)=\"$event.stopPropagation(); rowClick.emit({ row: stickyRow, index: stickyIndex, event: $event })\"\r\n        (contextmenu)=\"$event.stopPropagation(); rowContext.emit({ row: stickyRow, index: stickyIndex, event: $event })\"\r\n        (dblclick)=\"$event.stopPropagation(); rowDoubleClick.emit({ row: stickyRow, index: stickyIndex, event: $event })\"\r\n        (keydown.enter)=\"$event.stopPropagation(); rowClick.emit({ row: stickyRow, index: stickyIndex, event: $event })\"\r\n      >\r\n        @let stickyTemplate = stickyRowTpl();\r\n        @let rowTemplate = resolveRowTemplate(stickyRow, stickyIndex);\r\n\r\n        @if (stickyTemplate?.tpl) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"stickyTemplate!.tpl\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: stickyRow, index: stickyIndex }\"\r\n          />\r\n        } @else if (rowTemplate) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"rowTemplate\"\r\n            [ngTemplateOutletContext]=\"{\r\n              $implicit: stickyRow,\r\n              index: stickyIndex,\r\n              columns: vm.columnsToShow(),\r\n              rowHeight: rowHeight(),\r\n              isSticky: true\r\n            }\"\r\n          />\r\n        } @else {\r\n          @for (col of vm.columnsToShow(); track col.key) {\r\n            <div\n              class=\"re-dg-cell\"\n              role=\"cell\"\n              [class.expanded]=\"!!col.expandBy\"\n              [class]=\"cellClass(col, stickyRow)\"\n              [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\n              [class.sticky-right]=\"vm.isStickyRight(col.key)\"\n              [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\n              [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\n              [style.justify-items]=\"col.align || 'left'\"\n              [style.text-align]=\"col.align || 'left'\"\n              [style.width.px]=\"vm.widthByKey(col.key)\"\n              [attr.tabindex]=\"0\"\n              (mouseenter)=\"showTooltip($event, stickyRow, col, stickyIndex)\"\n              (mouseleave)=\"hideTooltip()\"\n              (click)=\"onCellClick(stickyRow, col, stickyIndex, $event);\"\n              (contextmenu)=\"onCellContext(stickyRow, col, stickyIndex, $event)\"\n              (dblclick)=\"onCellDoubleClick(stickyRow, col, stickyIndex, $event)\"\n              (keydown.enter)=\"onCellClick(stickyRow, col, stickyIndex, $event)\"\n            >\n              @let isCheckbox = 'type' in col && col.type === 'checkbox';\r\n\r\n              @if (isCheckbox) {\r\n                <re-checkbox-ic [state]=\"selector.isSelected(stickyRow)\" />\r\n              } @else {\r\n                <re-data-grid-cell [index]=\"stickyIndex\" [item]=\"stickyRow\" [column]=\"col\" />\r\n              }\r\n            </div>\r\n          }\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @if (empty) {\r\n      @let emptyTemplate = emptyTpl()?.tpl;\r\n\r\n      <div class=\"re-dg-empty\">\r\n        @if (emptyTemplate) {\r\n          <ng-container [ngTemplateOutlet]=\"emptyTemplate\" />\r\n        } @else {\r\n          <span class=\"re-dg-empty-text\">{{ defaults.translations.emptyState }}</span>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <!-- Content -->\r\n    @if (notEmpty) {\r\n      <div\r\n        class=\"re-dg-spacer\"\r\n        [style.width.px]=\"contentW\"\r\n        [style.height.px]=\"(items.length + extraInfinitySkeletonRows) * rowH - pinnedBottomH\"></div>\r\n\r\n      @for (slot of renderSlots(); track slot) {\r\n        @let rowIndex = startIndex + slot;\r\n        @let row = items[rowIndex];\r\n        @let rowTemplate = row ? resolveRowTemplate(row, rowIndex) : null;\r\n\r\n        @if (row && !isStickyRowIndex(rowIndex)) {\r\n          <div\r\n            class=\"re-dg-row re-dg-data-row\"\r\n            role=\"row\"\r\n            [style.width.px]=\"contentW\"\r\n            [style.min-width.%]=\"100\"\r\n            [style.height.px]=\"rowH\"\r\n            [style.transform]=\"'translateY(' + (rowIndex * rowH + stickyTop) + 'px)'\"\r\n            [attr.tabindex]=\"0\"\r\n            (click)=\"$event.stopPropagation(); rowClick.emit({ row, index: rowIndex, event: $event })\"\r\n            (contextmenu)=\"$event.stopPropagation(); rowContext.emit({ row, index: rowIndex, event: $event })\"\r\n            (dblclick)=\"$event.stopPropagation(); rowDoubleClick.emit({ row, index: rowIndex, event: $event })\"\r\n            (keydown.enter)=\"$event.stopPropagation(); rowClick.emit({ row, index: rowIndex, event: $event })\"\r\n          >\r\n            @if (rowTemplate) {\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"rowTemplate\"\r\n                [ngTemplateOutletContext]=\"{\r\n                  $implicit: row,\r\n                  index: rowIndex,\r\n                  columns: vm.columnsToShow(),\r\n                  rowHeight: rowHeight(),\r\n                  isSticky: false\r\n                }\"\r\n              />\r\n            } @else {\r\n              @for (col of cols; track col.key) {\r\n                @let stickyLeft = vm.stickyOffset(col.key, 'left');\r\n                @let stickyRight = vm.stickyOffset(col.key, 'right');\r\n                @let isLeft = vm.isStickyLeft(col.key);\r\n                @let isRight = vm.isStickyRight(col.key);\r\n                <div\n                  class=\"re-dg-cell\"\n                  role=\"cell\"\n                  [class.expanded]=\"!!col.expandBy\"\n                  [class]=\"cellClass(col, row)\"\n                  [class.sticky-left]=\"isLeft\"\n                  [class.sticky-right]=\"isRight\"\n                  [style.left.px]=\"stickyLeft\"\n                  [style.right.px]=\"stickyRight\"\n                  [style.justify-items]=\"col.align || 'left'\"\n                  [style.text-align]=\"col.align || 'left'\"\n                  [style.width.px]=\"vm.widthByKey(col.key)\"\n                  [attr.tabindex]=\"0\"\n                  (mouseenter)=\"showTooltip($event, row, col, rowIndex)\"\n                  (mouseleave)=\"hideTooltip()\"\n                  (click)=\"onCellClick(row, col, rowIndex, $event);\"\n                  (contextmenu)=\"onCellContext(row, col, rowIndex, $event)\"\n                  (dblclick)=\"onCellDoubleClick(row, col, rowIndex, $event)\"\n                  (keydown.enter)=\"onCellClick(row, col, rowIndex, $event)\"\n                >\n                  @let isCheckbox = 'type' in col && col.type === 'checkbox';\r\n\r\n                  @if (isCheckbox) {\r\n                    <re-checkbox-ic [state]=\"selector.isSelected(row)\" />\r\n                  } @else {\r\n                    <re-data-grid-cell [index]=\"rowIndex\" [item]=\"row\" [column]=\"col\" />\r\n                  }\r\n                </div>\r\n              }\r\n            }\r\n          </div>\r\n        }\r\n      }\r\n    }\r\n\r\n    @if (showInfinitySkeleton || showPaginationSkeleton) {\r\n      @let loadingTemplate = loadingTpl();\r\n\r\n      @if (loadingTemplate?.tpl) {\r\n        <ng-container [ngTemplateOutlet]=\"loadingTemplate!.tpl\" />\r\n      } @else {\r\n        @for (si of [0, 1, 2, 3]; track si) {\r\n          <div\r\n            class=\"re-dg-row re-dg-data-row re-dg-skeleton-row\"\r\n            role=\"row\"\r\n            [style.width.px]=\"contentW\"\r\n            [style.min-width.%]=\"100\"\r\n            [style.height.px]=\"rowH\"\r\n            [style.transform]=\"'translateY(' + (((showInfinitySkeleton ? items.length : 0) + si) * rowH + stickyTop) + 'px)'\"\r\n          >\r\n            <span class=\"re-dg-skeleton-row-line\"></span>\r\n          </div>\r\n        }\r\n      }\r\n    }\r\n\r\n    <!-- PINNED BOTTOM ROWS -->\r\n    @if (notEmpty) {\r\n      <div class=\"re-dg-footer\" role=\"rowgroup\">\r\n        @for (pr of vm.pinnedBottom(); track trackPinnedRow(pr)) {\r\n          <div class=\"re-dg-row re-dg-pinned re-dg-bottom\" role=\"row\" [style.width.px]=\"contentW\" [style.min-width.%]=\"100\">\r\n            @if (pr.rowTemplate) {\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"pr.rowTemplate!\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: resolvePinnedData(pr) }\"\r\n              />\r\n            } @else {\r\n              @for (col of cols; track col.key) {\r\n                @let stickyLeft = vm.stickyOffset(col.key, 'left');\r\n                @let stickyRight = vm.stickyOffset(col.key, 'right');\r\n                @let isLeft = vm.isStickyLeft(col.key);\r\n                @let isRight = vm.isStickyRight(col.key);\r\n                <div\n                  class=\"re-dg-cell\"\n                  role=\"cell\"\n                  [class.sticky-left]=\"isLeft\"\n                  [class.sticky-right]=\"isRight\"\n                  [style.left.px]=\"stickyLeft\"\n                  [style.right.px]=\"stickyRight\"\n                  [style.justify-items]=\"col.align || 'left'\"\n                  [style.height.px]=\"rowH\"\n                  [style.width.px]=\"vm.widthByKey(col.key)\"\n                  (mouseenter)=\"showTooltip($event, $any(resolvePinnedData(pr)), col, -1)\"\n                  (mouseleave)=\"hideTooltip()\"\n                >\n                  {{ resolvePinnedData(pr)[col.key] ?? '' }}\n                </div>\n              }\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  @let tooltipStateValue = tooltipState();\n  <div\n    class=\"re-dg-tooltip\"\n    #tooltip\n    [class.visible]=\"tooltipStateValue.visible\"\n    [style.left.px]=\"tooltipStateValue.x\"\n    [style.top.px]=\"tooltipStateValue.y\"\n  >\n    @if (tooltipStateValue.tpl) {\n      <ng-container\n        [ngTemplateOutlet]=\"tooltipStateValue.tpl\"\n        [ngTemplateOutletContext]=\"tooltipStateValue.ctx\"\n      />\n    } @else {\n      {{ tooltipStateValue.text }}\n    }\n  </div>\n\n  <!-- Overlay scrollbar -->\n  <div class=\"re-dg-scrollbar\" [class.visible]=\"vm.scrollbarVisible()\">\n    <div\r\n      class=\"re-dg-scrollbar-thumb\"\r\n      role=\"scrollbar\"\r\n      aria-orientation=\"vertical\"\r\n      aria-hidden=\"false\"\r\n      [style.height.px]=\"vm.thumbHeightPx()\"\r\n      [style.transform]=\"'translateY(' + vm.thumbTopPx() + 'px)'\"\r\n      (mousedown)=\"onThumbDown($event)\"\r\n    ></div>\r\n  </div>\r\n</div>\r\n", styles: [":host{--re-data-grid-min-height: 200px;--re-data-grid-height: 400px;--re-data-grid-rounded: var(--radius-md, 6px);--re-data-grid-separator-color: var(--border-color);--re-data-grid-separator: 1px solid var(--re-data-grid-separator-color);--re-data-grid-surface: var(--surface-neutral, #fff);--re-data-grid-active: var(--primary-color, #2a90f4);--re-data-grid-empty-color: #777;--re-data-grid-empty-surface: transparent;--re-data-grid-loading-color: #444;--re-data-grid-loading-surface: rgba(255, 255, 255, .5);--re-data-grid-spinner-size: 2rem;--re-data-grid-spinner-width: .25rem;--re-data-grid-spinner-track-color: rgba(0, 0, 0, .12);--re-data-grid-skeleton-width: 100%;--re-data-grid-skeleton-height: 100%;--re-data-grid-skeleton-rounded: var(--re-data-grid-rounded, .75rem);--re-data-grid-skeleton-shine: rgba(255, 255, 255, .8);--re-data-grid-skeleton-line: #e7ebf0;--re-data-grid-scrollbar-size: 4px;--re-data-grid-scrollbar-offset: 2px;--re-data-grid-scrollbar-track-rounded: .25rem;--re-data-grid-scrollbar-track-surface: transparent;--re-data-grid-scrollbar-thumb-size: 8px;--re-data-grid-scrollbar-thumb-color: rgba(0, 0, 0, .25);--re-data-grid-scrollbar-thumb-active-color: rgba(0, 0, 0, .45);--re-data-grid-scrollbar-thumb-rounded: var(--re-data-grid-scrollbar-track-rounded);--re-data-grid-tooltip-surface: #0f172a;--re-data-grid-tooltip-color: #f8fafc;--re-data-grid-tooltip-radius: .5rem;--re-data-grid-tooltip-padding: .4rem .6rem;--re-data-grid-tooltip-shadow: 0 8px 24px rgba(15, 23, 42, .25);--re-data-grid-tooltip-z: 60;--re-data-grid-header-surface: #fff;--re-data-grid-header-group-row-height: var(--re-data-grid-header-row-height);--re-data-grid-header-group-row-separator-color: var(--re-data-grid-header-row-separator-color);--re-data-grid-header-group-row-separator: 1px solid var(--re-data-grid-header-group-row-separator-color);--re-data-grid-header-row-height: 40px;--re-data-grid-header-row-separator-color: #ccc;--re-data-grid-header-row-separator: 1px solid var(--re-data-grid-header-row-separator-color);--re-data-grid-header-group-cell-font-weight: var(--re-data-grid-header-cell-font-weight);--re-data-grid-header-group-cell-font-size: var(--re-data-grid-header-cell-font-size);--re-data-grid-header-group-cell-color: var(--re-data-grid-header-cell-color);--re-data-grid-header-group-cell-surface: var(--re-data-grid-header-cell-surface);--re-data-grid-header-cell-font-weight: 600;--re-data-grid-header-cell-font-size: .8rem;--re-data-grid-header-cell-color: #000;--re-data-grid-header-cell-surface: #fafafa;--re-data-grid-footer-separator-color: #ccc;--re-data-grid-footer-separator: 1px solid var(--re-data-grid-footer-separator-color);--re-data-grid-footer-surface: #fff;--re-data-grid-row-separator-color: #bbb;--re-data-grid-row-separator: 1px solid var(--re-data-grid-row-separator-color);--re-data-grid-row-odd-surface: var(--re-data-grid-cell-surface);--re-data-grid-column-separator-color: transparent;--re-data-grid-column-separator: 1px solid var(--re-data-grid-column-separator-color);--re-data-grid-column-odd-surface: var(--re-data-grid-cell-surface);--re-data-grid-cell-paddings: .4rem .625rem;--re-data-grid-cell-font-weight: 400;--re-data-grid-cell-font-size: .75rem;--re-data-grid-cell-color: #000;--re-data-grid-cell-surface: #fff;--re-data-grid-sticky-header-cell-surface: #fff;--re-data-grid-sticky-cell-surface: #fdfdfd;--re-data-grid-sticky-cell-left-shadow: 2px 0 2px rgba(0, 0, 0, .03);--re-data-grid-sticky-cell-right-shadow: -2px 0 2px rgba(0, 0, 0, .03);--re-data-grid-pinned-surface: #fcfcfc;--re-data-grid-pinned-separator-color: #eee;--re-data-grid-pinned-separator: 1px solid var(--re-data-grid-pinned-separator-color);--re-data-grid-expander-color: var(--primary-color, currentColor);--re-data-grid-expanded-color: var(--re-data-grid-cell-color, #000);--re-data-grid-expanded-surface: var(--re-data-grid-cell-surface, #fff);display:block;min-height:0}:host,:host *,:host *:before,:host *:after{box-sizing:border-box;outline:none}:host button{outline:none}.re-dg-root{position:relative;display:flex;flex-direction:column;width:100%;min-height:var(--re-data-grid-min-height);border-radius:var(--re-data-grid-rounded);border:var(--re-data-grid-separator)}.re-dg-root.fill{display:block}.re-dg-root.loading{pointer-events:none;-webkit-user-select:none;user-select:none;cursor:wait}.re-dg-root.loading .re-dg-body{overflow:hidden}.re-dg-root.loading .re-dg-scrollbar{display:none!important}.re-dg-root.loading .re-dg-loader{pointer-events:all}.re-dg-body{position:relative;flex:1 1 auto;min-height:0;min-width:0;height:inherit;border:var(--re-data-grid-separator);border-radius:var(--re-data-grid-rounded);background-color:var(--re-data-grid-surface);overflow:auto;scrollbar-width:auto;-ms-overflow-style:auto}.re-dg-body::-webkit-scrollbar{width:var(--re-data-grid-scrollbar-size);height:var(--re-data-grid-scrollbar-size)}.re-dg-body::-webkit-scrollbar:vertical{width:0}.re-dg-body::-webkit-scrollbar-track{border-radius:var(--re-data-grid-scrollbar-track-rounded);background:var(--re-data-grid-scrollbar-track-surface)}.re-dg-body::-webkit-scrollbar-thumb{border-radius:var(--re-data-grid-scrollbar-thumb-rounded);background:var(--re-data-grid-scrollbar-thumb-color);transition:opacity .3s ease}.re-dg-body::-webkit-scrollbar-thumb:hover{background:var(--re-data-grid-scrollbar-thumb-active-color)}.re-dg-header,.re-dg-footer{position:sticky;z-index:3}.re-dg-header{top:0;background-color:var(--re-data-grid-header-surface)}.re-dg-header-row{min-height:var(--re-data-grid-header-row-height)}.re-dg-header-group-row{min-height:var(--re-data-grid-header-group-row-height)}.re-dg-header-rows{display:flex;flex-direction:column}.re-dg-footer{bottom:0;border-radius:0 0 var(--re-data-grid-rounded) var(--re-data-grid-rounded);background-color:var(--re-data-grid-footer-surface)}.re-dg-row{position:relative;display:flex}.re-dg-data-row{position:absolute;left:0;top:0;min-width:100%;cursor:default;will-change:transform}.re-dg-sticky-row{z-index:2;top:0}.re-dg-cell,.re-dg-header-cell,.re-dg-pinned-row{display:flex;flex:0 0 auto;align-items:center;padding:var(--re-data-grid-cell-paddings);border-right:var(--re-data-grid-column-separator);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.re-dg-cell,.re-dg-pinned-row{width:100%;border-bottom:var(--re-data-grid-row-separator);font-weight:var(--re-data-grid-cell-font-weight);font-size:var(--re-data-grid-cell-font-size);color:var(--re-data-grid-cell-color);background-color:var(--re-data-grid-cell-surface)}.re-dg-row:nth-child(odd) .re-dg-cell{background-color:var(--re-data-grid-row-odd-surface)}.re-dg-cell:nth-child(odd){background-color:var(--re-data-grid-column-odd-surface)}.re-dg-bottom>.re-dg-cell{border-top:var(--re-data-grid-footer-separator)}.re-dg-header-cell{align-items:center;gap:.75rem;border-bottom:var(--re-data-grid-header-row-separator);font-weight:var(--re-data-grid-header-cell-font-weight);font-size:var(--re-data-grid-header-cell-font-size);color:var(--re-data-grid-header-cell-color);background:var(--re-data-grid-header-cell-surface);-webkit-user-select:none;user-select:none;transition:color .3s ease-in-out}.re-dg-header-cell.re-dg-header-group-cell{border-bottom:var(--re-data-grid-header-group-row-separator);font-weight:var(--re-data-grid-header-group-cell-font-weight);font-size:var(--re-data-grid-header-group-cell-font-size);color:var(--re-data-grid-header-group-cell-color);background:var(--re-data-grid-header-group-cell-surface)}.re-dg-header-row:first-child .re-dg-header-cell:first-child{border-radius:var(--re-data-grid-rounded) 0 0 0}.re-dg-header-row:first-child .re-dg-header-cell:last-child{border-radius:0 var(--re-data-grid-rounded) 0 0}.re-dg-data-row:last-child .re-dg-cell:first-child{border-radius:0 0 0 var(--re-data-grid-rounded)}.re-dg-data-row:last-child .re-dg-cell:last-child{border-radius:0 0 var(--re-data-grid-rounded) 0}.re-dg-header-cell .re-dg-header-text{display:-webkit-box;max-height:2.4em;line-height:1.2;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.re-dg-row.re-dg-pinned>.re-dg-cell{border-bottom:var(--re-data-grid-pinned-separator);background-color:var(--re-data-grid-pinned-surface)}.re-dg-row .re-dg-header-cell.sticky-left{box-shadow:var(--re-data-grid-sticky-cell-left-shadow);background-color:var(--re-data-grid-sticky-header-cell-surface)}.re-dg-row .re-dg-cell.sticky-left{box-shadow:var(--re-data-grid-sticky-cell-left-shadow);background-color:var(--re-data-grid-sticky-cell-surface)}.re-dg-row .re-dg-header-cell.sticky-right{box-shadow:var(--re-data-grid-sticky-cell-right-shadow);background-color:var(--re-data-grid-sticky-header-cell-surface)}.re-dg-row .re-dg-cell.sticky-right{box-shadow:var(--re-data-grid-sticky-cell-right-shadow);background-color:var(--re-data-grid-sticky-cell-surface)}.sticky-left,.sticky-right{position:sticky;z-index:2}.sortable{cursor:pointer}.active-sort{color:var(--re-data-grid-active)}.re-dg-sort-ind{margin-left:6px}.re-dg-data-row .re-dg-cell.expanded{color:var(--re-data-grid-expanded-color);background:var(--re-data-grid-expanded-surface)}.re-dg-empty{position:absolute;inset:0;display:grid;place-items:center;height:inherit;width:100%;border-radius:var(--re-data-grid-rounded);color:var(--re-data-grid-empty-color);background:var(--re-data-grid-empty-surface)}.re-dg-empty-text{width:100%;text-align:center}.re-dg-loader{position:absolute;inset:0;display:grid;place-items:center;height:inherit;border-radius:var(--re-data-grid-rounded);background-color:var(--re-data-grid-loading-surface);color:var(--re-data-grid-loading-color);z-index:5}.re-dg-tooltip{position:fixed;left:0;top:0;max-width:min(28rem,70vw);padding:var(--re-data-grid-tooltip-padding);border-radius:var(--re-data-grid-tooltip-radius);background:var(--re-data-grid-tooltip-surface);color:var(--re-data-grid-tooltip-color);box-shadow:var(--re-data-grid-tooltip-shadow);font-size:.75rem;line-height:1.2;z-index:var(--re-data-grid-tooltip-z);pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease}.re-dg-tooltip.visible{opacity:1;transform:translateY(0)}.re-dg-loader-spinner{width:var(--re-data-grid-spinner-size);height:var(--re-data-grid-spinner-size);border-radius:50%;border:var(--re-data-grid-spinner-width) solid var(--re-data-grid-spinner-track-color);border-top-color:var(--re-data-grid-loading-color);animation:re-dg-spinner .8s linear infinite}.re-dg-skeleton-row{display:flex;align-items:center;padding:var(--re-data-grid-cell-paddings);border-bottom:var(--re-data-grid-row-separator);background-color:var(--re-data-grid-cell-surface);pointer-events:none}.re-dg-skeleton-row-line{display:block;width:var(--re-data-grid-skeleton-width);height:var(--re-data-grid-skeleton-height);border-radius:var(--re-data-grid-skeleton-rounded);background:linear-gradient(90deg,var(--re-data-grid-skeleton-line) 0%,var(--re-data-grid-skeleton-shine) 50%,var(--re-data-grid-skeleton-line) 100%);background-size:200% 100%;animation:re-dg-skeleton 1.2s ease-in-out infinite}@keyframes re-dg-skeleton{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes re-dg-spinner{to{transform:rotate(360deg)}}.re-dg-scrollbar{position:absolute;right:0;top:0;bottom:0;opacity:0;transition:opacity .15s ease-in-out;pointer-events:none;z-index:4}.re-dg-scrollbar.visible{opacity:1}.re-dg-scrollbar-thumb{position:absolute;right:var(--re-data-grid-scrollbar-offset);width:var(--re-data-grid-scrollbar-thumb-size);border-radius:var(--re-data-grid-scrollbar-thumb-rounded);background:var(--re-data-grid-scrollbar-thumb-color);pointer-events:auto;-webkit-user-select:none;user-select:none}.re-dg-spacer{width:1px}.re-dg-top{top:0}.re-dg-bottom{bottom:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DataGridCellComponent, selector: "re-data-grid-cell", inputs: ["index", "item", "column"] }, { kind: "component", type: SortIcon, selector: "re-sort-ic", inputs: ["direction"] }, { kind: "component", type: ExpandIcon, selector: "re-expand-ic", inputs: ["expanded"] }, { kind: "component", type: CheckboxIcon, selector: "re-checkbox-ic", inputs: ["state", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGrid, decorators: [{
             type: Component,
-            args: [{ selector: 're-data-grid', imports: [NgTemplateOutlet, DataGridCellComponent, SortIcon, ExpandIcon, CheckboxIcon], providers: [DataGridVm], template: "@let items = data();\n@let empty = !loading() && !items?.length;\n@let notEmpty = !!items?.length;\n\n@let pinnedTopH = vm.pinnedTop().length * rowHeight();\n@let pinnedBottomH = vm.pinnedBottom().length * rowHeight();\n\n<div\n  #root\n  class=\"re-dg-root\"\n  [class.loading]=\"loading()\"\n  [style.height]=\"styleHeight()\"\n  role=\"table\"\n>\n  @if (loading()) {\n    <div class=\"re-dg-loader\">\n      @let loadingTemplate = loadingTpl();\n\n      @if (loadingTemplate?.tpl) {\n        <ng-container [ngTemplateOutlet]=\"loadingTemplate!.tpl\" />\n      } @else {\n        <span class=\"re-dg-loader-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430\u2026</span>\n      }\n    </div>\n  }\n\n  <div\n    #scroll\n    class=\"re-dg-body\"\n    role=\"rowgroup\"\n    (mouseenter)=\"showScrollbar()\"\n    (mouseleave)=\"hideScrollbarSoon()\"\n  >\n    <div class=\"re-dg-header\" role=\"rowgroup\">\n      <div #header class=\"re-dg-row re-dg-header-row\" role=\"row\">\n        @for (col of vm.columnsToShow(); track col.key) {\n          <div\n            class=\"re-dg-header-cell\"\n            role=\"columnheader\"\n            [class.sortable]=\"!!col.sortKey\"\n            [class.active-sort]=\"currentSortField && (currentSortField === col.sortKey)\"\n            [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\n            [class.sticky-right]=\"vm.isStickyRight(col.key)\"\n            [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\n            [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\n            [style.width.px]=\"vm.widthByKey(col.key)\"\n            [style.min-width.px]=\"col.minWidth || null\"\n            [style.max-width.px]=\"col.maxWidth || null\"\n            [style.justify-content]=\"col.align || 'left'\"\n            [attr.aria-sort]=\"ariaSort(col)\"\n            [attr.tabindex]=\"col.sortKey ? 0 : -1\"\n            [title]=\"col.header\"\n            (click)=\"col.sortKey && onSort(col)\"\n            (keydown.enter)=\"col.sortKey && onSort(col)\"\n          >\n            @if (col.headerTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"col.headerTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: col.header }\"\n              />\n            } @else {\n              @let isCheckbox = 'type' in col && col.type === 'checkbox';\n              @let isMultiSelect = selection().mode === 'multi';\n\n              @if (isCheckbox && isMultiSelect) {\n                <re-checkbox-ic [state]=\"selector.isAllSelected()\" (click)=\"selector.selectAll()\" />\n              } @else {\n                <span class=\"re-dg-header-text\">{{ col.header }}</span>\n              }\n\n              @if (col.sortKey) {\n                <span class=\"re-dg-sort-ind\">\n                  @let direction = currentSortField === col.sortKey ? currentSortOrder : undefined;\n\n                  @if (sortTpl()) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"sortTpl()!.tpl\"\n                      [ngTemplateOutletContext]=\"{ $implicit: direction }\"\n                    />\n                  } @else {\n                    <re-sort-ic [direction]=\"direction\" />\n                  }\n                </span>\n              }\n\n              @if (isExpandable(col)) {\n                <button (click)=\"$event.stopPropagation(); onExpand(col)\">\n                  @let expanded = expanderMap().get(col.key);\n\n                  @if (expanderTpl()) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"expanderTpl()!.tpl\"\n                      [ngTemplateOutletContext]=\"{ $implicit: expanded }\" />\n                  } @else {\n                    <re-expand-ic [expanded]=\"expanded\" />\n                  }\n                </button>\n              }\n            }\n          </div>\n        }\n      </div>\n\n      <!-- PINNED TOP ROWS -->\n      @if (notEmpty) {\n        @for (pr of vm.pinnedTop(); track trackPinnedRow(pr)) {\n          <div class=\"re-dg-row re-dg-pinned re-dg-top\" role=\"row\">\n            @if (pr.rowTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"pr.rowTemplate!\"\n                [ngTemplateOutletContext]=\"{ $implicit: resolvePinnedData(pr) }\"\n              />\n            } @else {\n              @for (col of vm.columnsToShow(); track col.key) {\n                <div\n                  class=\"re-dg-cell\"\n                  role=\"cell\"\n                  [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\n                  [class.sticky-right]=\"vm.isStickyRight(col.key)\"\n                  [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\n                  [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\n                  [style.justify-items]=\"col.align || 'left'\"\n                  [style.height.px]=\"rowHeight()\"\n                  [style.width.px]=\"vm.widthByKey(col.key)\"\n                >\n                  {{ resolvePinnedData(pr)[col.key] ?? '' }}\n                </div>\n              }\n            }\n          </div>\n        }\n      }\n    </div>\n\n    @if (empty) {\n      @let emptyTemplate = emptyTpl()?.tpl;\n\n      <div class=\"re-dg-empty\">\n        @if (emptyTemplate) {\n          <ng-container [ngTemplateOutlet]=\"emptyTemplate\" />\n        } @else {\n          <span class=\"re-dg-empty-text\">\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445</span>\n        }\n      </div>\n    }\n\n    <!-- Content -->\n    @if (notEmpty) {\n      <div class=\"re-dg-spacer\" [style.height.px]=\"items.length * rowHeight() - pinnedBottomH\"></div>\n\n      @for (row of visibleRows(); track trackByRow(row); let vi = $index) {\n        <div\n          class=\"re-dg-row re-dg-data-row\"\n          role=\"row\"\n          [style.height.px]=\"rowHeight()\"\n          [style.top.px]=\"(startIndex + vi) * rowHeight() + pinnedTopH + headerHeight()\"\n          [attr.tabindex]=\"0\"\n          (click)=\"$event.stopPropagation(); rowClick.emit({ row, index: startIndex + vi })\"\n          (keydown.enter)=\"$event.stopPropagation(); rowClick.emit({ row, index: startIndex + vi })\"\n        >\n          @for (col of vm.columnsToShow(); track col.key) {\n            <div\n              class=\"re-dg-cell\"\n              role=\"cell\"\n              [class.expanded]=\"!!col.expandBy\"\n              [class]=\"cellClass(col, row)\"\n              [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\n              [class.sticky-right]=\"vm.isStickyRight(col.key)\"\n              [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\n              [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\n              [style.justify-items]=\"col.align || 'left'\"\n              [style.text-align]=\"col.align || 'left'\"\n              [style.width.px]=\"vm.widthByKey(col.key)\"\n              [attr.tabindex]=\"0\"\n              (click)=\"onCellClick(row, col, startIndex + vi);\"\n              (keydown.enter)=\"onCellClick(row, col, startIndex + vi)\"\n            >\n              @let isCheckbox = 'type' in col && col.type === 'checkbox';\n\n              @if (isCheckbox) {\n                <re-checkbox-ic [state]=\"selector.isSelected(row)\" />\n              } @else {\n                <re-data-grid-cell [index]=\"startIndex + vi\" [item]=\"row\" [column]=\"col\" />\n              }\n            </div>\n          }\n        </div>\n      }\n    }\n\n    <!-- PINNED BOTTOM ROWS -->\n    @if (notEmpty) {\n      <div class=\"re-dg-footer\" role=\"rowgroup\">\n        @for (pr of vm.pinnedBottom(); track trackPinnedRow(pr)) {\n          <div class=\"re-dg-row re-dg-pinned re-dg-bottom\" role=\"row\">\n            @if (pr.rowTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"pr.rowTemplate!\"\n                [ngTemplateOutletContext]=\"{ $implicit: resolvePinnedData(pr) }\"\n              />\n            } @else {\n              @for (col of vm.columnsToShow(); track col.key) {\n                <div\n                  class=\"re-dg-cell\"\n                  role=\"cell\"\n                  [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\n                  [class.sticky-right]=\"vm.isStickyRight(col.key)\"\n                  [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\n                  [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\n                  [style.justify-items]=\"col.align || 'left'\"\n                  [style.height.px]=\"rowHeight()\"\n                  [style.width.px]=\"vm.widthByKey(col.key)\"\n                >\n                  {{ resolvePinnedData(pr)[col.key] ?? '' }}\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Overlay scrollbar -->\n  <div class=\"re-dg-scrollbar\" [class.visible]=\"vm.scrollbarVisible()\">\n    <div\n      class=\"re-dg-scrollbar-thumb\"\n      role=\"scrollbar\"\n      aria-orientation=\"vertical\"\n      aria-hidden=\"false\"\n      [style.height.px]=\"vm.thumbHeightPx()\"\n      [style.transform]=\"'translateY(' + vm.thumbTopPx() + 'px)'\"\n      (mousedown)=\"onThumbDown($event)\"\n    ></div>\n  </div>\n</div>\n\n", styles: [":host{--re-data-grid-min-height: 200px;--re-data-grid-height: 400px;--re-data-grid-rounded: var(--radius-md, 6px);--re-data-grid-separator-color: var(--border-color);--re-data-grid-separator: 1px solid var(--re-data-grid-separator-color);--re-data-grid-surface: var(--surface-primary, #fff);--re-data-grid-active: var(--primary-color, #2a90f4);--re-data-grid-empty-color: #777;--re-data-grid-empty-surface: transparent;--re-data-grid-loading-color: #444;--re-data-grid-loading-surface: rgba(255, 255, 255, .5);--re-data-grid-scrollbar-size: 10px;--re-data-grid-scrollbar-offset: 2px;--re-data-grid-scrollbar-thumb-size: 8px;--re-data-grid-scrollbar-thumb-color: rgba(0, 0, 0, .35);--re-data-grid-scrollbar-thumb-rounded: 4px;--re-data-grid-header-height: 40px;--re-data-grid-header-separator-color: #ccc;--re-data-grid-header-separator: 1px solid var(--re-data-grid-header-separator-color);--re-data-grid-header-surface: #fff;--re-data-grid-header-cell-font-weight: 600;--re-data-grid-header-cell-font-size: .8rem;--re-data-grid-header-cell-color: #000;--re-data-grid-header-cell-surface: #fafafa;--re-data-grid-footer-separator-color: #ccc;--re-data-grid-footer-separator: 1px solid var(--re-data-grid-footer-separator-color);--re-data-grid-footer-surface: #fff;--re-data-grid-row-separator-color: #bbb;--re-data-grid-row-separator: 1px solid var(--re-data-grid-row-separator-color);--re-data-grid-row-odd-surface: var(--re-data-grid-cell-surface);--re-data-grid-column-separator-color: transparent;--re-data-grid-column-separator: 1px solid var(--re-data-grid-column-separator-color);--re-data-grid-column-odd-surface: var(--re-data-grid-cell-surface);--re-data-grid-cell-paddings: .4rem .625rem;--re-data-grid-cell-font-weight: 400;--re-data-grid-cell-font-size: .75rem;--re-data-grid-cell-color: #000;--re-data-grid-cell-surface: #fff;--re-data-grid-sticky-header-cell-surface: #fff;--re-data-grid-sticky-cell-surface: #fdfdfd;--re-data-grid-sticky-cell-left-shadow: 2px 0 2px rgba(0, 0, 0, .03);--re-data-grid-sticky-cell-right-shadow: -2px 0 2px rgba(0, 0, 0, .03);--re-data-grid-pinned-surface: #fcfcfc;--re-data-grid-pinned-separator-color: #eee;--re-data-grid-pinned-separator: 1px solid var(--re-data-grid-pinned-separator-color);--re-data-grid-expander-color: var(--primary-color, currentColor);--re-data-grid-expanded-color: var(--re-data-grid-cell-color, #000);--re-data-grid-expanded-surface: var(--re-data-grid-cell-surface, #fff);display:block;min-height:0}:host,:host *,:host *:before,:host *:after{box-sizing:border-box;outline:none}:host button{outline:none}.re-dg-root{position:relative;display:flex;flex-direction:column;width:100%;min-height:var(--re-data-grid-min-height);border-radius:var(--re-data-grid-rounded);border:var(--re-data-grid-separator)}.re-dg-root.fill{display:block}.re-dg-root.loading{pointer-events:none;-webkit-user-select:none;user-select:none;cursor:wait}.re-dg-root.loading .re-dg-body{overflow:hidden}.re-dg-root.loading .re-dg-scrollbar{display:none!important}.re-dg-root.loading .re-dg-loader{pointer-events:all}.re-dg-body{position:relative;flex:1 1 auto;min-height:0;min-width:0;height:inherit;border:var(--re-data-grid-separator);border-radius:var(--re-data-grid-rounded);background-color:var(--re-data-grid-surface);overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.re-dg-body::-webkit-scrollbar{width:0;height:0}.re-dg-header,.re-dg-footer{position:sticky;z-index:3}.re-dg-header{top:0;background-color:var(--re-data-grid-header-surface)}.re-dg-header-row{min-height:var(--re-data-grid-header-height)}.re-dg-footer{bottom:0;border-radius:0 0 var(--re-data-grid-rounded) var(--re-data-grid-rounded);background-color:var(--re-data-grid-footer-surface)}.re-dg-row{position:relative;display:flex}.re-dg-data-row{position:absolute;left:0;right:0;cursor:default}.re-dg-cell,.re-dg-header-cell{display:flex;flex:0 0 auto;align-items:center;padding:var(--re-data-grid-cell-paddings);border-right:var(--re-data-grid-column-separator);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.re-dg-cell{width:100%;border-bottom:var(--re-data-grid-row-separator);font-weight:var(--re-data-grid-cell-font-weight);font-size:var(--re-data-grid-cell-font-size);color:var(--re-data-grid-cell-color);background-color:var(--re-data-grid-cell-surface)}.re-dg-row:nth-child(odd) .re-dg-cell{background-color:var(--re-data-grid-row-odd-surface)}.re-dg-cell:nth-child(odd){background-color:var(--re-data-grid-column-odd-surface)}.re-dg-bottom>.re-dg-cell{border-top:var(--re-data-grid-footer-separator)}.re-dg-header-cell{align-items:center;gap:.75rem;border-bottom:var(--re-data-grid-header-separator);font-weight:var(--re-data-grid-header-cell-font-weight);font-size:var(--re-data-grid-header-cell-font-size);color:var(--re-data-grid-header-cell-color);background:var(--re-data-grid-header-cell-surface);-webkit-user-select:none;user-select:none;transition:color .3s ease-in-out}.re-dg-header-cell:first-child{border-radius:var(--re-data-grid-rounded) 0 0 0}.re-dg-header-cell:last-child{border-radius:0 var(--re-data-grid-rounded) 0 0}.re-dg-data-row:last-child .re-dg-cell:first-child{border-radius:0 0 0 var(--re-data-grid-rounded)}.re-dg-data-row:last-child .re-dg-cell:last-child{border-radius:0 0 var(--re-data-grid-rounded) 0}.re-dg-header-cell .re-dg-header-text{display:-webkit-box;max-height:2.4em;line-height:1.2;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.re-dg-row.re-dg-pinned>.re-dg-cell{border-bottom:var(--re-data-grid-pinned-separator);background-color:var(--re-data-grid-pinned-surface)}.re-dg-row .re-dg-header-cell.sticky-left{box-shadow:var(--re-data-grid-sticky-cell-left-shadow);background-color:var(--re-data-grid-sticky-header-cell-surface)}.re-dg-row .re-dg-cell.sticky-left{box-shadow:var(--re-data-grid-sticky-cell-left-shadow);background-color:var(--re-data-grid-sticky-cell-surface)}.re-dg-row .re-dg-header-cell.sticky-right{box-shadow:var(--re-data-grid-sticky-cell-right-shadow);background-color:var(--re-data-grid-sticky-header-cell-surface)}.re-dg-row .re-dg-cell.sticky-right{box-shadow:var(--re-data-grid-sticky-cell-right-shadow);background-color:var(--re-data-grid-sticky-cell-surface)}.sticky-left,.sticky-right{position:sticky;z-index:2}.sortable{cursor:pointer}.active-sort{color:var(--re-data-grid-active)}.re-dg-sort-ind{margin-left:6px}.re-dg-data-row .re-dg-cell.expanded{color:var(--re-data-grid-expanded-color);background:var(--re-data-grid-expanded-surface)}.re-dg-empty{position:absolute;inset:0;display:grid;place-items:center;height:inherit;width:100%;border-radius:var(--re-data-grid-rounded);color:var(--re-data-grid-empty-color);background:var(--re-data-grid-empty-surface)}.re-dg-empty-text{width:100%;text-align:center}.re-dg-loader{position:absolute;inset:0;display:grid;place-items:center;height:inherit;border-radius:var(--re-data-grid-rounded);background-color:var(--re-data-grid-loading-surface);color:var(--re-data-grid-loading-color);z-index:5}.re-dg-scrollbar{position:absolute;right:0;top:0;bottom:0;opacity:0;transition:opacity .15s ease-in-out;pointer-events:none;z-index:4}.re-dg-scrollbar.visible{opacity:1}.re-dg-scrollbar-thumb{position:absolute;right:var(--re-data-grid-scrollbar-offset);width:var(--re-data-grid-scrollbar-thumb-size);border-radius:var(--re-data-grid-scrollbar-thumb-rounded);background:var(--re-data-grid-scrollbar-thumb-color);pointer-events:auto;-webkit-user-select:none;user-select:none}.re-dg-spacer{width:1px}.re-dg-top{top:0}.re-dg-bottom{bottom:0}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], pinnedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedRows", required: false }] }], hasIndexColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasIndexColumn", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], virtualBuffer: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualBuffer", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], pageStartFromZero: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageStartFromZero", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], selectChange: [{ type: i0.Output, args: ["selectChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], cellClick: [{ type: i0.Output, args: ["cellClick"] }], rootEl: [{ type: i0.ViewChild, args: ['root', { isSignal: true }] }], scrollEl: [{ type: i0.ViewChild, args: ['scroll', { isSignal: true }] }], headerEl: [{ type: i0.ViewChild, args: ['header', { isSignal: true }] }], cellTypedSlotRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataGridTypeCellTemplateDirective), { isSignal: true }] }], cellDataSlotRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataGridCellTemplateDirective), { isSignal: true }] }], headerSlotRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataGridHeaderTemplateDirective), { isSignal: true }] }], emptySlotRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataGridCellEmptyDirective), { isSignal: true }] }], loadingSlotRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataGridCellLoadingDirective), { isSignal: true }] }], sortIcSlotRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataGridSortIconDirective), { isSignal: true }] }], expanderIcSlotRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataGridExpanderIconDirective), { isSignal: true }] }] } });
+            args: [{ selector: 're-data-grid', imports: [NgTemplateOutlet, DataGridCellComponent, SortIcon, ExpandIcon, CheckboxIcon], providers: [DataGridVm], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let items = data();\r\n@let empty = !loading() && !items?.length;\r\n@let notEmpty = !!items?.length;\r\n@let skeletonRowsCount = 4;\r\n@let skeletonMode = loadingMode() === 'skeleton';\r\n@let spinnerMode = loadingMode() === 'spinner';\r\n@let showInfinitySkeleton = loading() && skeletonMode && mode() === 'infinity';\r\n@let showPaginationSkeleton = loading() && skeletonMode && mode() === 'pagination' && !notEmpty;\r\n@let showSpinnerLoading = loading() && spinnerMode;\r\n@let extraInfinitySkeletonRows = showInfinitySkeleton ? skeletonRowsCount : 0;\r\n\r\n@let pinnedTopH = vm.pinnedTop().length * rowHeight();\r\n@let pinnedBottomH = vm.pinnedBottom().length * rowHeight();\r\n@let rowH = rowHeight();\r\n@let contentW = vm.contentWidth();\r\n@let cols = vm.columnsToShow();\r\n@let stickyTop = pinnedTopH + headerHeight();\r\n@let normalizedHeaderGroups = vm.normalizedHeaderGroups();\r\n@let stickyRow = stickyRowData();\r\n@let stickyIndex = stickyRowIndex();\r\n\r\n<div\r\n  #root\r\n  class=\"re-dg-root\"\r\n  [class.loading]=\"showSpinnerLoading\"\r\n  [style.height]=\"styleHeight()\"\r\n  role=\"table\"\r\n>\r\n  @if (showSpinnerLoading) {\r\n    <div class=\"re-dg-loader\">\r\n      @let loadingTemplate = loadingTpl();\r\n\r\n      @if (loadingTemplate?.tpl) {\r\n        <ng-container [ngTemplateOutlet]=\"loadingTemplate!.tpl\" />\r\n      } @else {\r\n        <span class=\"re-dg-loader-spinner\" aria-label=\"Loading\"></span>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <div\r\n    #scroll\r\n    class=\"re-dg-body\"\r\n    role=\"rowgroup\"\r\n    (mouseenter)=\"showScrollbar()\"\r\n    (mouseleave)=\"hideScrollbarSoon()\"\r\n  >\r\n    <div class=\"re-dg-header\" role=\"rowgroup\">\r\n      <div #header class=\"re-dg-header-rows\">\r\n        @if (normalizedHeaderGroups.length) {\r\n          <div class=\"re-dg-row re-dg-header-group-row\" role=\"row\" [style.width.px]=\"vm.contentWidth()\" [style.min-width.%]=\"100\">\r\n            @for (group of normalizedHeaderGroups; track group.key) {\r\n              @let groupStickyLeft = !!group.startKey && !!group.endKey && vm.isStickyLeft(group.startKey) && vm.isStickyLeft(group.endKey);\r\n              @let groupStickyRight = !!group.startKey && !!group.endKey && vm.isStickyRight(group.startKey) && vm.isStickyRight(group.endKey);\r\n\r\n              <div\r\n                class=\"re-dg-header-cell re-dg-header-group-cell\"\r\n                role=\"columnheader\"\r\n                [class.sticky-left]=\"groupStickyLeft\"\r\n                [class.sticky-right]=\"groupStickyRight\"\r\n                [style.left.px]=\"groupStickyLeft && group.startKey ? vm.stickyOffset(group.startKey, 'left') : null\"\r\n                [style.right.px]=\"groupStickyRight && group.endKey ? vm.stickyOffset(group.endKey, 'right') : null\"\r\n                [style.width.px]=\"group.widthPx\"\r\n                [style.justify-content]=\"group.align || 'left'\"\r\n                [title]=\"group.title || ''\"\r\n              >\r\n                @if (group.titleTemplate) {\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"group.titleTemplate\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: group.title || '' }\"\r\n                  />\r\n                } @else {\r\n                  <span class=\"re-dg-header-text\">{{ group.title || '' }}</span>\r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <div class=\"re-dg-row re-dg-header-row\" role=\"row\" [style.width.px]=\"vm.contentWidth()\" [style.min-width.%]=\"100\">\r\n          @for (col of vm.columnsToShow(); track col.key) {\r\n            <div\r\n              class=\"re-dg-header-cell\"\r\n              role=\"columnheader\"\r\n              [class.sortable]=\"!!col.sortKey\"\r\n              [class.active-sort]=\"currentSortField && (currentSortField === col.sortKey)\"\r\n              [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\r\n              [class.sticky-right]=\"vm.isStickyRight(col.key)\"\r\n              [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\r\n              [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\r\n              [style.width.px]=\"vm.widthByKey(col.key)\"\r\n              [style.min-width.px]=\"col.minWidth || null\"\r\n              [style.max-width.px]=\"col.maxWidth || null\"\r\n              [style.justify-content]=\"col.align || 'left'\"\r\n              [attr.aria-sort]=\"ariaSort(col)\"\r\n              [attr.tabindex]=\"col.sortKey ? 0 : -1\"\r\n              [title]=\"col.header\"\r\n              (click)=\"col.sortKey && onSort(col)\"\r\n              (keydown.enter)=\"col.sortKey && onSort(col)\"\r\n            >\r\n              @let isCheckbox = 'type' in col && col.type === 'checkbox';\r\n              @let isMultiSelect = selection().mode === 'multi';\r\n\r\n              @if (isCheckbox && isMultiSelect) {\r\n                <re-checkbox-ic [state]=\"selector.isAllSelected()\" (click)=\"selector.selectAll()\" />\r\n              } @else {\r\n                @if (col.headerTemplate) {\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"col.headerTemplate\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: col.header }\"\r\n                  />\r\n                } @else {\r\n                  <span class=\"re-dg-header-text\">{{ col.header }}</span>\r\n                }\r\n              }\r\n\r\n              @if (col.sortKey) {\r\n                <span class=\"re-dg-sort-ind\">\r\n                  @let direction = currentSortField === col.sortKey ? currentSortOrder : undefined;\r\n\r\n                  @if (sortTpl()) {\r\n                    <ng-container\r\n                      [ngTemplateOutlet]=\"sortTpl()!.tpl\"\r\n                      [ngTemplateOutletContext]=\"{ $implicit: direction }\"\r\n                    />\r\n                  } @else {\r\n                    <re-sort-ic [direction]=\"direction\" />\r\n                  }\r\n                </span>\r\n              }\r\n\r\n              @if (isExpandable(col)) {\r\n                <button (click)=\"$event.stopPropagation(); onExpand(col)\">\r\n                  @let expanded = expanderMap().get(col.key);\r\n\r\n                  @if (expanderTpl()) {\r\n                    <ng-container\r\n                      [ngTemplateOutlet]=\"expanderTpl()!.tpl\"\r\n                      [ngTemplateOutletContext]=\"{ $implicit: expanded }\" />\r\n                  } @else {\r\n                    <re-expand-ic [expanded]=\"expanded\" />\r\n                  }\r\n                </button>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      <!-- PINNED TOP ROWS -->\r\n      @if (notEmpty) {\r\n        @for (pr of vm.pinnedTop(); track trackPinnedRow(pr)) {\r\n          <div class=\"re-dg-row re-dg-pinned re-dg-top\" role=\"row\" [style.width.px]=\"contentW\" [style.min-width.%]=\"100\">\r\n            @if (pr.rowTemplate) {\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"pr.rowTemplate!\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: resolvePinnedData(pr) }\"\r\n              />\r\n            } @else {\r\n              @for (col of cols; track col.key) {\r\n                @let stickyLeft = vm.stickyOffset(col.key, 'left');\r\n                @let stickyRight = vm.stickyOffset(col.key, 'right');\r\n                @let isLeft = vm.isStickyLeft(col.key);\r\n                @let isRight = vm.isStickyRight(col.key);\r\n                <div\n                  class=\"re-dg-cell\"\n                  role=\"cell\"\n                  [class.sticky-left]=\"isLeft\"\n                  [class.sticky-right]=\"isRight\"\n                  [style.left.px]=\"stickyLeft\"\n                  [style.right.px]=\"stickyRight\"\n                  [style.justify-items]=\"col.align || 'left'\"\n                  [style.height.px]=\"rowH\"\n                  [style.width.px]=\"vm.widthByKey(col.key)\"\n                  (mouseenter)=\"showTooltip($event, $any(resolvePinnedData(pr)), col, -1)\"\n                  (mouseleave)=\"hideTooltip()\"\n                >\n                  {{ resolvePinnedData(pr)[col.key] ?? '' }}\n                </div>\n              }\r\n            }\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n\r\n    <!-- STICKY ROW -->\r\n    @if (stickyRow && stickyIndex !== null) {\r\n      <div\r\n        class=\"re-dg-row re-dg-data-row re-dg-sticky-row\"\r\n        role=\"row\"\r\n        [style.width.px]=\"vm.contentWidth()\"\r\n        [style.min-width.%]=\"100\"\r\n        [style.height.px]=\"rowHeight()\"\r\n        [style.top.px]=\"stickyRowTopPx()\"\r\n        [attr.tabindex]=\"0\"\r\n        (click)=\"$event.stopPropagation(); rowClick.emit({ row: stickyRow, index: stickyIndex, event: $event })\"\r\n        (contextmenu)=\"$event.stopPropagation(); rowContext.emit({ row: stickyRow, index: stickyIndex, event: $event })\"\r\n        (dblclick)=\"$event.stopPropagation(); rowDoubleClick.emit({ row: stickyRow, index: stickyIndex, event: $event })\"\r\n        (keydown.enter)=\"$event.stopPropagation(); rowClick.emit({ row: stickyRow, index: stickyIndex, event: $event })\"\r\n      >\r\n        @let stickyTemplate = stickyRowTpl();\r\n        @let rowTemplate = resolveRowTemplate(stickyRow, stickyIndex);\r\n\r\n        @if (stickyTemplate?.tpl) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"stickyTemplate!.tpl\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: stickyRow, index: stickyIndex }\"\r\n          />\r\n        } @else if (rowTemplate) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"rowTemplate\"\r\n            [ngTemplateOutletContext]=\"{\r\n              $implicit: stickyRow,\r\n              index: stickyIndex,\r\n              columns: vm.columnsToShow(),\r\n              rowHeight: rowHeight(),\r\n              isSticky: true\r\n            }\"\r\n          />\r\n        } @else {\r\n          @for (col of vm.columnsToShow(); track col.key) {\r\n            <div\n              class=\"re-dg-cell\"\n              role=\"cell\"\n              [class.expanded]=\"!!col.expandBy\"\n              [class]=\"cellClass(col, stickyRow)\"\n              [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\n              [class.sticky-right]=\"vm.isStickyRight(col.key)\"\n              [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\n              [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\n              [style.justify-items]=\"col.align || 'left'\"\n              [style.text-align]=\"col.align || 'left'\"\n              [style.width.px]=\"vm.widthByKey(col.key)\"\n              [attr.tabindex]=\"0\"\n              (mouseenter)=\"showTooltip($event, stickyRow, col, stickyIndex)\"\n              (mouseleave)=\"hideTooltip()\"\n              (click)=\"onCellClick(stickyRow, col, stickyIndex, $event);\"\n              (contextmenu)=\"onCellContext(stickyRow, col, stickyIndex, $event)\"\n              (dblclick)=\"onCellDoubleClick(stickyRow, col, stickyIndex, $event)\"\n              (keydown.enter)=\"onCellClick(stickyRow, col, stickyIndex, $event)\"\n            >\n              @let isCheckbox = 'type' in col && col.type === 'checkbox';\r\n\r\n              @if (isCheckbox) {\r\n                <re-checkbox-ic [state]=\"selector.isSelected(stickyRow)\" />\r\n              } @else {\r\n                <re-data-grid-cell [index]=\"stickyIndex\" [item]=\"stickyRow\" [column]=\"col\" />\r\n              }\r\n            </div>\r\n          }\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @if (empty) {\r\n      @let emptyTemplate = emptyTpl()?.tpl;\r\n\r\n      <div class=\"re-dg-empty\">\r\n        @if (emptyTemplate) {\r\n          <ng-container [ngTemplateOutlet]=\"emptyTemplate\" />\r\n        } @else {\r\n          <span class=\"re-dg-empty-text\">{{ defaults.translations.emptyState }}</span>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <!-- Content -->\r\n    @if (notEmpty) {\r\n      <div\r\n        class=\"re-dg-spacer\"\r\n        [style.width.px]=\"contentW\"\r\n        [style.height.px]=\"(items.length + extraInfinitySkeletonRows) * rowH - pinnedBottomH\"></div>\r\n\r\n      @for (slot of renderSlots(); track slot) {\r\n        @let rowIndex = startIndex + slot;\r\n        @let row = items[rowIndex];\r\n        @let rowTemplate = row ? resolveRowTemplate(row, rowIndex) : null;\r\n\r\n        @if (row && !isStickyRowIndex(rowIndex)) {\r\n          <div\r\n            class=\"re-dg-row re-dg-data-row\"\r\n            role=\"row\"\r\n            [style.width.px]=\"contentW\"\r\n            [style.min-width.%]=\"100\"\r\n            [style.height.px]=\"rowH\"\r\n            [style.transform]=\"'translateY(' + (rowIndex * rowH + stickyTop) + 'px)'\"\r\n            [attr.tabindex]=\"0\"\r\n            (click)=\"$event.stopPropagation(); rowClick.emit({ row, index: rowIndex, event: $event })\"\r\n            (contextmenu)=\"$event.stopPropagation(); rowContext.emit({ row, index: rowIndex, event: $event })\"\r\n            (dblclick)=\"$event.stopPropagation(); rowDoubleClick.emit({ row, index: rowIndex, event: $event })\"\r\n            (keydown.enter)=\"$event.stopPropagation(); rowClick.emit({ row, index: rowIndex, event: $event })\"\r\n          >\r\n            @if (rowTemplate) {\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"rowTemplate\"\r\n                [ngTemplateOutletContext]=\"{\r\n                  $implicit: row,\r\n                  index: rowIndex,\r\n                  columns: vm.columnsToShow(),\r\n                  rowHeight: rowHeight(),\r\n                  isSticky: false\r\n                }\"\r\n              />\r\n            } @else {\r\n              @for (col of cols; track col.key) {\r\n                @let stickyLeft = vm.stickyOffset(col.key, 'left');\r\n                @let stickyRight = vm.stickyOffset(col.key, 'right');\r\n                @let isLeft = vm.isStickyLeft(col.key);\r\n                @let isRight = vm.isStickyRight(col.key);\r\n                <div\n                  class=\"re-dg-cell\"\n                  role=\"cell\"\n                  [class.expanded]=\"!!col.expandBy\"\n                  [class]=\"cellClass(col, row)\"\n                  [class.sticky-left]=\"isLeft\"\n                  [class.sticky-right]=\"isRight\"\n                  [style.left.px]=\"stickyLeft\"\n                  [style.right.px]=\"stickyRight\"\n                  [style.justify-items]=\"col.align || 'left'\"\n                  [style.text-align]=\"col.align || 'left'\"\n                  [style.width.px]=\"vm.widthByKey(col.key)\"\n                  [attr.tabindex]=\"0\"\n                  (mouseenter)=\"showTooltip($event, row, col, rowIndex)\"\n                  (mouseleave)=\"hideTooltip()\"\n                  (click)=\"onCellClick(row, col, rowIndex, $event);\"\n                  (contextmenu)=\"onCellContext(row, col, rowIndex, $event)\"\n                  (dblclick)=\"onCellDoubleClick(row, col, rowIndex, $event)\"\n                  (keydown.enter)=\"onCellClick(row, col, rowIndex, $event)\"\n                >\n                  @let isCheckbox = 'type' in col && col.type === 'checkbox';\r\n\r\n                  @if (isCheckbox) {\r\n                    <re-checkbox-ic [state]=\"selector.isSelected(row)\" />\r\n                  } @else {\r\n                    <re-data-grid-cell [index]=\"rowIndex\" [item]=\"row\" [column]=\"col\" />\r\n                  }\r\n                </div>\r\n              }\r\n            }\r\n          </div>\r\n        }\r\n      }\r\n    }\r\n\r\n    @if (showInfinitySkeleton || showPaginationSkeleton) {\r\n      @let loadingTemplate = loadingTpl();\r\n\r\n      @if (loadingTemplate?.tpl) {\r\n        <ng-container [ngTemplateOutlet]=\"loadingTemplate!.tpl\" />\r\n      } @else {\r\n        @for (si of [0, 1, 2, 3]; track si) {\r\n          <div\r\n            class=\"re-dg-row re-dg-data-row re-dg-skeleton-row\"\r\n            role=\"row\"\r\n            [style.width.px]=\"contentW\"\r\n            [style.min-width.%]=\"100\"\r\n            [style.height.px]=\"rowH\"\r\n            [style.transform]=\"'translateY(' + (((showInfinitySkeleton ? items.length : 0) + si) * rowH + stickyTop) + 'px)'\"\r\n          >\r\n            <span class=\"re-dg-skeleton-row-line\"></span>\r\n          </div>\r\n        }\r\n      }\r\n    }\r\n\r\n    <!-- PINNED BOTTOM ROWS -->\r\n    @if (notEmpty) {\r\n      <div class=\"re-dg-footer\" role=\"rowgroup\">\r\n        @for (pr of vm.pinnedBottom(); track trackPinnedRow(pr)) {\r\n          <div class=\"re-dg-row re-dg-pinned re-dg-bottom\" role=\"row\" [style.width.px]=\"contentW\" [style.min-width.%]=\"100\">\r\n            @if (pr.rowTemplate) {\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"pr.rowTemplate!\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: resolvePinnedData(pr) }\"\r\n              />\r\n            } @else {\r\n              @for (col of cols; track col.key) {\r\n                @let stickyLeft = vm.stickyOffset(col.key, 'left');\r\n                @let stickyRight = vm.stickyOffset(col.key, 'right');\r\n                @let isLeft = vm.isStickyLeft(col.key);\r\n                @let isRight = vm.isStickyRight(col.key);\r\n                <div\n                  class=\"re-dg-cell\"\n                  role=\"cell\"\n                  [class.sticky-left]=\"isLeft\"\n                  [class.sticky-right]=\"isRight\"\n                  [style.left.px]=\"stickyLeft\"\n                  [style.right.px]=\"stickyRight\"\n                  [style.justify-items]=\"col.align || 'left'\"\n                  [style.height.px]=\"rowH\"\n                  [style.width.px]=\"vm.widthByKey(col.key)\"\n                  (mouseenter)=\"showTooltip($event, $any(resolvePinnedData(pr)), col, -1)\"\n                  (mouseleave)=\"hideTooltip()\"\n                >\n                  {{ resolvePinnedData(pr)[col.key] ?? '' }}\n                </div>\n              }\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  @let tooltipStateValue = tooltipState();\n  <div\n    class=\"re-dg-tooltip\"\n    #tooltip\n    [class.visible]=\"tooltipStateValue.visible\"\n    [style.left.px]=\"tooltipStateValue.x\"\n    [style.top.px]=\"tooltipStateValue.y\"\n  >\n    @if (tooltipStateValue.tpl) {\n      <ng-container\n        [ngTemplateOutlet]=\"tooltipStateValue.tpl\"\n        [ngTemplateOutletContext]=\"tooltipStateValue.ctx\"\n      />\n    } @else {\n      {{ tooltipStateValue.text }}\n    }\n  </div>\n\n  <!-- Overlay scrollbar -->\n  <div class=\"re-dg-scrollbar\" [class.visible]=\"vm.scrollbarVisible()\">\n    <div\r\n      class=\"re-dg-scrollbar-thumb\"\r\n      role=\"scrollbar\"\r\n      aria-orientation=\"vertical\"\r\n      aria-hidden=\"false\"\r\n      [style.height.px]=\"vm.thumbHeightPx()\"\r\n      [style.transform]=\"'translateY(' + vm.thumbTopPx() + 'px)'\"\r\n      (mousedown)=\"onThumbDown($event)\"\r\n    ></div>\r\n  </div>\r\n</div>\r\n", styles: [":host{--re-data-grid-min-height: 200px;--re-data-grid-height: 400px;--re-data-grid-rounded: var(--radius-md, 6px);--re-data-grid-separator-color: var(--border-color);--re-data-grid-separator: 1px solid var(--re-data-grid-separator-color);--re-data-grid-surface: var(--surface-neutral, #fff);--re-data-grid-active: var(--primary-color, #2a90f4);--re-data-grid-empty-color: #777;--re-data-grid-empty-surface: transparent;--re-data-grid-loading-color: #444;--re-data-grid-loading-surface: rgba(255, 255, 255, .5);--re-data-grid-spinner-size: 2rem;--re-data-grid-spinner-width: .25rem;--re-data-grid-spinner-track-color: rgba(0, 0, 0, .12);--re-data-grid-skeleton-width: 100%;--re-data-grid-skeleton-height: 100%;--re-data-grid-skeleton-rounded: var(--re-data-grid-rounded, .75rem);--re-data-grid-skeleton-shine: rgba(255, 255, 255, .8);--re-data-grid-skeleton-line: #e7ebf0;--re-data-grid-scrollbar-size: 4px;--re-data-grid-scrollbar-offset: 2px;--re-data-grid-scrollbar-track-rounded: .25rem;--re-data-grid-scrollbar-track-surface: transparent;--re-data-grid-scrollbar-thumb-size: 8px;--re-data-grid-scrollbar-thumb-color: rgba(0, 0, 0, .25);--re-data-grid-scrollbar-thumb-active-color: rgba(0, 0, 0, .45);--re-data-grid-scrollbar-thumb-rounded: var(--re-data-grid-scrollbar-track-rounded);--re-data-grid-tooltip-surface: #0f172a;--re-data-grid-tooltip-color: #f8fafc;--re-data-grid-tooltip-radius: .5rem;--re-data-grid-tooltip-padding: .4rem .6rem;--re-data-grid-tooltip-shadow: 0 8px 24px rgba(15, 23, 42, .25);--re-data-grid-tooltip-z: 60;--re-data-grid-header-surface: #fff;--re-data-grid-header-group-row-height: var(--re-data-grid-header-row-height);--re-data-grid-header-group-row-separator-color: var(--re-data-grid-header-row-separator-color);--re-data-grid-header-group-row-separator: 1px solid var(--re-data-grid-header-group-row-separator-color);--re-data-grid-header-row-height: 40px;--re-data-grid-header-row-separator-color: #ccc;--re-data-grid-header-row-separator: 1px solid var(--re-data-grid-header-row-separator-color);--re-data-grid-header-group-cell-font-weight: var(--re-data-grid-header-cell-font-weight);--re-data-grid-header-group-cell-font-size: var(--re-data-grid-header-cell-font-size);--re-data-grid-header-group-cell-color: var(--re-data-grid-header-cell-color);--re-data-grid-header-group-cell-surface: var(--re-data-grid-header-cell-surface);--re-data-grid-header-cell-font-weight: 600;--re-data-grid-header-cell-font-size: .8rem;--re-data-grid-header-cell-color: #000;--re-data-grid-header-cell-surface: #fafafa;--re-data-grid-footer-separator-color: #ccc;--re-data-grid-footer-separator: 1px solid var(--re-data-grid-footer-separator-color);--re-data-grid-footer-surface: #fff;--re-data-grid-row-separator-color: #bbb;--re-data-grid-row-separator: 1px solid var(--re-data-grid-row-separator-color);--re-data-grid-row-odd-surface: var(--re-data-grid-cell-surface);--re-data-grid-column-separator-color: transparent;--re-data-grid-column-separator: 1px solid var(--re-data-grid-column-separator-color);--re-data-grid-column-odd-surface: var(--re-data-grid-cell-surface);--re-data-grid-cell-paddings: .4rem .625rem;--re-data-grid-cell-font-weight: 400;--re-data-grid-cell-font-size: .75rem;--re-data-grid-cell-color: #000;--re-data-grid-cell-surface: #fff;--re-data-grid-sticky-header-cell-surface: #fff;--re-data-grid-sticky-cell-surface: #fdfdfd;--re-data-grid-sticky-cell-left-shadow: 2px 0 2px rgba(0, 0, 0, .03);--re-data-grid-sticky-cell-right-shadow: -2px 0 2px rgba(0, 0, 0, .03);--re-data-grid-pinned-surface: #fcfcfc;--re-data-grid-pinned-separator-color: #eee;--re-data-grid-pinned-separator: 1px solid var(--re-data-grid-pinned-separator-color);--re-data-grid-expander-color: var(--primary-color, currentColor);--re-data-grid-expanded-color: var(--re-data-grid-cell-color, #000);--re-data-grid-expanded-surface: var(--re-data-grid-cell-surface, #fff);display:block;min-height:0}:host,:host *,:host *:before,:host *:after{box-sizing:border-box;outline:none}:host button{outline:none}.re-dg-root{position:relative;display:flex;flex-direction:column;width:100%;min-height:var(--re-data-grid-min-height);border-radius:var(--re-data-grid-rounded);border:var(--re-data-grid-separator)}.re-dg-root.fill{display:block}.re-dg-root.loading{pointer-events:none;-webkit-user-select:none;user-select:none;cursor:wait}.re-dg-root.loading .re-dg-body{overflow:hidden}.re-dg-root.loading .re-dg-scrollbar{display:none!important}.re-dg-root.loading .re-dg-loader{pointer-events:all}.re-dg-body{position:relative;flex:1 1 auto;min-height:0;min-width:0;height:inherit;border:var(--re-data-grid-separator);border-radius:var(--re-data-grid-rounded);background-color:var(--re-data-grid-surface);overflow:auto;scrollbar-width:auto;-ms-overflow-style:auto}.re-dg-body::-webkit-scrollbar{width:var(--re-data-grid-scrollbar-size);height:var(--re-data-grid-scrollbar-size)}.re-dg-body::-webkit-scrollbar:vertical{width:0}.re-dg-body::-webkit-scrollbar-track{border-radius:var(--re-data-grid-scrollbar-track-rounded);background:var(--re-data-grid-scrollbar-track-surface)}.re-dg-body::-webkit-scrollbar-thumb{border-radius:var(--re-data-grid-scrollbar-thumb-rounded);background:var(--re-data-grid-scrollbar-thumb-color);transition:opacity .3s ease}.re-dg-body::-webkit-scrollbar-thumb:hover{background:var(--re-data-grid-scrollbar-thumb-active-color)}.re-dg-header,.re-dg-footer{position:sticky;z-index:3}.re-dg-header{top:0;background-color:var(--re-data-grid-header-surface)}.re-dg-header-row{min-height:var(--re-data-grid-header-row-height)}.re-dg-header-group-row{min-height:var(--re-data-grid-header-group-row-height)}.re-dg-header-rows{display:flex;flex-direction:column}.re-dg-footer{bottom:0;border-radius:0 0 var(--re-data-grid-rounded) var(--re-data-grid-rounded);background-color:var(--re-data-grid-footer-surface)}.re-dg-row{position:relative;display:flex}.re-dg-data-row{position:absolute;left:0;top:0;min-width:100%;cursor:default;will-change:transform}.re-dg-sticky-row{z-index:2;top:0}.re-dg-cell,.re-dg-header-cell,.re-dg-pinned-row{display:flex;flex:0 0 auto;align-items:center;padding:var(--re-data-grid-cell-paddings);border-right:var(--re-data-grid-column-separator);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.re-dg-cell,.re-dg-pinned-row{width:100%;border-bottom:var(--re-data-grid-row-separator);font-weight:var(--re-data-grid-cell-font-weight);font-size:var(--re-data-grid-cell-font-size);color:var(--re-data-grid-cell-color);background-color:var(--re-data-grid-cell-surface)}.re-dg-row:nth-child(odd) .re-dg-cell{background-color:var(--re-data-grid-row-odd-surface)}.re-dg-cell:nth-child(odd){background-color:var(--re-data-grid-column-odd-surface)}.re-dg-bottom>.re-dg-cell{border-top:var(--re-data-grid-footer-separator)}.re-dg-header-cell{align-items:center;gap:.75rem;border-bottom:var(--re-data-grid-header-row-separator);font-weight:var(--re-data-grid-header-cell-font-weight);font-size:var(--re-data-grid-header-cell-font-size);color:var(--re-data-grid-header-cell-color);background:var(--re-data-grid-header-cell-surface);-webkit-user-select:none;user-select:none;transition:color .3s ease-in-out}.re-dg-header-cell.re-dg-header-group-cell{border-bottom:var(--re-data-grid-header-group-row-separator);font-weight:var(--re-data-grid-header-group-cell-font-weight);font-size:var(--re-data-grid-header-group-cell-font-size);color:var(--re-data-grid-header-group-cell-color);background:var(--re-data-grid-header-group-cell-surface)}.re-dg-header-row:first-child .re-dg-header-cell:first-child{border-radius:var(--re-data-grid-rounded) 0 0 0}.re-dg-header-row:first-child .re-dg-header-cell:last-child{border-radius:0 var(--re-data-grid-rounded) 0 0}.re-dg-data-row:last-child .re-dg-cell:first-child{border-radius:0 0 0 var(--re-data-grid-rounded)}.re-dg-data-row:last-child .re-dg-cell:last-child{border-radius:0 0 var(--re-data-grid-rounded) 0}.re-dg-header-cell .re-dg-header-text{display:-webkit-box;max-height:2.4em;line-height:1.2;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.re-dg-row.re-dg-pinned>.re-dg-cell{border-bottom:var(--re-data-grid-pinned-separator);background-color:var(--re-data-grid-pinned-surface)}.re-dg-row .re-dg-header-cell.sticky-left{box-shadow:var(--re-data-grid-sticky-cell-left-shadow);background-color:var(--re-data-grid-sticky-header-cell-surface)}.re-dg-row .re-dg-cell.sticky-left{box-shadow:var(--re-data-grid-sticky-cell-left-shadow);background-color:var(--re-data-grid-sticky-cell-surface)}.re-dg-row .re-dg-header-cell.sticky-right{box-shadow:var(--re-data-grid-sticky-cell-right-shadow);background-color:var(--re-data-grid-sticky-header-cell-surface)}.re-dg-row .re-dg-cell.sticky-right{box-shadow:var(--re-data-grid-sticky-cell-right-shadow);background-color:var(--re-data-grid-sticky-cell-surface)}.sticky-left,.sticky-right{position:sticky;z-index:2}.sortable{cursor:pointer}.active-sort{color:var(--re-data-grid-active)}.re-dg-sort-ind{margin-left:6px}.re-dg-data-row .re-dg-cell.expanded{color:var(--re-data-grid-expanded-color);background:var(--re-data-grid-expanded-surface)}.re-dg-empty{position:absolute;inset:0;display:grid;place-items:center;height:inherit;width:100%;border-radius:var(--re-data-grid-rounded);color:var(--re-data-grid-empty-color);background:var(--re-data-grid-empty-surface)}.re-dg-empty-text{width:100%;text-align:center}.re-dg-loader{position:absolute;inset:0;display:grid;place-items:center;height:inherit;border-radius:var(--re-data-grid-rounded);background-color:var(--re-data-grid-loading-surface);color:var(--re-data-grid-loading-color);z-index:5}.re-dg-tooltip{position:fixed;left:0;top:0;max-width:min(28rem,70vw);padding:var(--re-data-grid-tooltip-padding);border-radius:var(--re-data-grid-tooltip-radius);background:var(--re-data-grid-tooltip-surface);color:var(--re-data-grid-tooltip-color);box-shadow:var(--re-data-grid-tooltip-shadow);font-size:.75rem;line-height:1.2;z-index:var(--re-data-grid-tooltip-z);pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease}.re-dg-tooltip.visible{opacity:1;transform:translateY(0)}.re-dg-loader-spinner{width:var(--re-data-grid-spinner-size);height:var(--re-data-grid-spinner-size);border-radius:50%;border:var(--re-data-grid-spinner-width) solid var(--re-data-grid-spinner-track-color);border-top-color:var(--re-data-grid-loading-color);animation:re-dg-spinner .8s linear infinite}.re-dg-skeleton-row{display:flex;align-items:center;padding:var(--re-data-grid-cell-paddings);border-bottom:var(--re-data-grid-row-separator);background-color:var(--re-data-grid-cell-surface);pointer-events:none}.re-dg-skeleton-row-line{display:block;width:var(--re-data-grid-skeleton-width);height:var(--re-data-grid-skeleton-height);border-radius:var(--re-data-grid-skeleton-rounded);background:linear-gradient(90deg,var(--re-data-grid-skeleton-line) 0%,var(--re-data-grid-skeleton-shine) 50%,var(--re-data-grid-skeleton-line) 100%);background-size:200% 100%;animation:re-dg-skeleton 1.2s ease-in-out infinite}@keyframes re-dg-skeleton{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes re-dg-spinner{to{transform:rotate(360deg)}}.re-dg-scrollbar{position:absolute;right:0;top:0;bottom:0;opacity:0;transition:opacity .15s ease-in-out;pointer-events:none;z-index:4}.re-dg-scrollbar.visible{opacity:1}.re-dg-scrollbar-thumb{position:absolute;right:var(--re-data-grid-scrollbar-offset);width:var(--re-data-grid-scrollbar-thumb-size);border-radius:var(--re-data-grid-scrollbar-thumb-rounded);background:var(--re-data-grid-scrollbar-thumb-color);pointer-events:auto;-webkit-user-select:none;user-select:none}.re-dg-spacer{width:1px}.re-dg-top{top:0}.re-dg-bottom{bottom:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], pinnedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedRows", required: false }] }], isRowSticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRowSticky", required: false }] }], getRowTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "getRowTemplate", required: false }] }], hasIndexColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasIndexColumn", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], virtualBuffer: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualBuffer", required: false }] }], headerGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerGroups", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingMode", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], pageStartFromZero: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageStartFromZero", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], selectChange: [{ type: i0.Output, args: ["selectChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowContext: [{ type: i0.Output, args: ["rowContext"] }], rowDoubleClick: [{ type: i0.Output, args: ["rowDoubleClick"] }], cellClick: [{ type: i0.Output, args: ["cellClick"] }], cellContext: [{ type: i0.Output, args: ["cellContext"] }], cellDoubleClick: [{ type: i0.Output, args: ["cellDoubleClick"] }], rootEl: [{ type: i0.ViewChild, args: ['root', { isSignal: true }] }], scrollEl: [{ type: i0.ViewChild, args: ['scroll', { isSignal: true }] }], headerEl: [{ type: i0.ViewChild, args: ['header', { isSignal: true }] }], cellTypedSlotRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataGridTypeCellTemplateDirective), { isSignal: true }] }], cellDataSlotRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataGridCellTemplateDirective), { isSignal: true }] }], declarativeColumnRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataGridDeclarativeColumn), { isSignal: true }] }], headerSlotRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataGridHeaderTemplateDirective), { isSignal: true }] }], emptySlotRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataGridCellEmptyDirective), { isSignal: true }] }], loadingSlotRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataGridCellLoadingDirective), { isSignal: true }] }], sortIcSlotRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataGridSortIconDirective), { isSignal: true }] }], expanderIcSlotRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataGridExpanderIconDirective), { isSignal: true }] }], stickyRowSlotRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataGridStickyRowDirective), { isSignal: true }] }], rowSlotRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataGridRowDirective), { isSignal: true }] }], tooltipEl: [{ type: i0.ViewChild, args: ['tooltip', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DataGrid, DataGridCellEmptyDirective, DataGridCellLoadingDirective, DataGridCellTemplateDirective, DataGridExpanderIconDirective, DataGridHeaderTemplateDirective, DataGridPaginator, DataGridSortIconDirective, DataGridTypeCellTemplateDirective };
+export { DATA_GRID_CONFIG, DEFAULT_DATA_GRID_DEFAULTS, DataGrid, DataGridCellEmptyDirective, DataGridCellLoadingDirective, DataGridCellTemplateDirective, DataGridDeclarativeCellDirective, DataGridDeclarativeColumn, DataGridDeclarativeHeaderDirective, DataGridExpanderIconDirective, DataGridHeaderTemplateDirective, DataGridRowDirective, DataGridSortIconDirective, DataGridStickyRowDirective, DataGridTypeCellTemplateDirective, provideDataGridDefaults };
 //# sourceMappingURL=reforgium-data-grid.mjs.map