ngwr 8.0.0 → 9.0.0

package/fesm2022/ngwr-table.mjs

@@ -1,7 +1,11 @@
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
-import { NgTemplateOutlet, KeyValuePipe } from '@angular/common';
+import { moveItemInArray, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
+import { isPlatformBrowser, DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, inject, TemplateRef, Directive, output, signal, computed, ViewEncapsulation, Component, model, contentChildren } from '@angular/core';
+import { input, inject, TemplateRef, Directive, output, signal, computed, ViewEncapsulation, Component, model, contentChildren, PLATFORM_ID, viewChildren, effect, untracked, viewChild, contentChild } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { WrCheckbox } from 'ngwr/checkbox';
 import { WrPagination } from 'ngwr/pagination';
 import { WrSpinner } from 'ngwr/spinner';
 import { WrDropdown, WrDropdownMenu } from 'ngwr/dropdown';
@@ -28,16 +32,48 @@ class WrTableCell {
     /** Column key the template applies to. */
     columnKey = input.required({ ...(ngDevMode ? { debugName: "columnKey" } : /* istanbul ignore next */ {}), alias: 'wrTableCell' });
     template = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrTableCell, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: WrTableCell, isStandalone: true, selector: "[wrTableCell]", inputs: { columnKey: { classPropertyName: "columnKey", publicName: "wrTableCell", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrTableCell, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: WrTableCell, isStandalone: true, selector: "[wrTableCell]", inputs: { columnKey: { classPropertyName: "columnKey", publicName: "wrTableCell", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrTableCell, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrTableCell, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wrTableCell]',
                 }]
         }], propDecorators: { columnKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrTableCell", required: true }] }] } });
 
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * Provide the detail template revealed when a row is expanded. Adding it turns
+ * on the leading expand column; the row object is the template's implicit
+ * context.
+ *
+ * @example
+ * ```html
+ * <wr-table [columns]="columns" [items]="items" [(expanded)]="expanded" rowKey="id">
+ *   <ng-template wrTableExpand let-row>
+ *     <p>{{ row.bio }}</p>
+ *   </ng-template>
+ * </wr-table>
+ * ```
+ */
+class WrTableExpand {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrTableExpand, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: WrTableExpand, isStandalone: true, selector: "ng-template[wrTableExpand]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrTableExpand, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[wrTableExpand]',
+                }]
+        }] });
+
 /**
  * @license
  *
@@ -90,14 +126,46 @@ class WrTableFilter {
     emitSelected() {
         this.selectionChange.emit(this.items().filter(i => i.selected));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrTableFilter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: WrTableFilter, isStandalone: true, selector: "wr-table-filter", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<button type=\"button\" class=\"wr-table-filter__trigger\" [wrDropdown]=\"menu\" aria-label=\"Filter column\">\n  <svg\n    class=\"wr-icon__svg\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path\n      d=\"M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z\"\n    />\n  </svg>\n  @if (selectedCount() > 0) {\n    <span class=\"wr-table-filter__count\">{{ selectedCount() }}</span>\n  }\n</button>\n\n<wr-dropdown-menu #menu>\n  <div class=\"wr-table-filter__panel\">\n    <input\n      class=\"wr-table-filter__search\"\n      type=\"search\"\n      placeholder=\"Search\"\n      [value]=\"query()\"\n      (input)=\"onSearchInput($event)\"\n    />\n\n    <div class=\"wr-table-filter__list\">\n      @for (item of visible(); track item.value) {\n        <button\n          type=\"button\"\n          class=\"wr-table-filter__item\"\n          [class.wr-table-filter__item--selected]=\"item.selected\"\n          (click)=\"onToggle(item)\"\n        >\n          <span class=\"wr-table-filter__check\">\n            <svg\n              class=\"wr-icon__svg\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n            >\n              <path d=\"M20 6 9 17l-5-5\" />\n            </svg>\n          </span>\n          <span class=\"wr-table-filter__title\">{{ item.title }}</span>\n        </button>\n      } @empty {\n        <div class=\"wr-table-filter__empty\">No matches</div>\n      }\n    </div>\n\n    @if (selectedCount() > 0) {\n      <button type=\"button\" class=\"wr-table-filter__reset\" (click)=\"onReset()\">Reset</button>\n    }\n  </div>\n</wr-dropdown-menu>\n", dependencies: [{ kind: "directive", type: WrDropdown, selector: "[wrDropdown]", inputs: ["wrDropdown", "trigger", "position", "responsive"], outputs: ["opened", "closed"] }, { kind: "component", type: WrDropdownMenu, selector: "wr-dropdown-menu", exportAs: ["wrDropdownMenu"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrTableFilter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: WrTableFilter, isStandalone: true, selector: "wr-table-filter", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<button type=\"button\" class=\"wr-table-filter__trigger\" [wrDropdown]=\"menu\" aria-label=\"Filter column\">\n  <svg\n    class=\"wr-icon__svg\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path\n      d=\"M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z\"\n    />\n  </svg>\n  @if (selectedCount() > 0) {\n    <span class=\"wr-table-filter__count\">{{ selectedCount() }}</span>\n  }\n</button>\n\n<wr-dropdown-menu #menu>\n  <div class=\"wr-table-filter__panel\">\n    <input\n      class=\"wr-table-filter__search\"\n      type=\"search\"\n      placeholder=\"Search\"\n      [value]=\"query()\"\n      (input)=\"onSearchInput($event)\"\n    />\n\n    <div class=\"wr-table-filter__list\">\n      @for (item of visible(); track item.value) {\n        <button\n          type=\"button\"\n          class=\"wr-table-filter__item\"\n          [class.wr-table-filter__item--selected]=\"item.selected\"\n          (click)=\"onToggle(item)\"\n        >\n          <span class=\"wr-table-filter__check\">\n            <svg\n              class=\"wr-icon__svg\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n            >\n              <path d=\"M20 6 9 17l-5-5\" />\n            </svg>\n          </span>\n          <span class=\"wr-table-filter__title\">{{ item.title }}</span>\n        </button>\n      } @empty {\n        <div class=\"wr-table-filter__empty\">No matches</div>\n      }\n    </div>\n\n    @if (selectedCount() > 0) {\n      <button type=\"button\" class=\"wr-table-filter__reset\" (click)=\"onReset()\">Reset</button>\n    }\n  </div>\n</wr-dropdown-menu>\n", dependencies: [{ kind: "directive", type: WrDropdown, selector: "[wrDropdown]", inputs: ["wrDropdown", "trigger", "position", "responsive"], outputs: ["opened", "closed"] }, { kind: "component", type: WrDropdownMenu, selector: "wr-dropdown-menu", exportAs: ["wrDropdownMenu"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrTableFilter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrTableFilter, decorators: [{
             type: Component,
             args: [{ selector: 'wr-table-filter', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, imports: [WrDropdown, WrDropdownMenu], template: "<button type=\"button\" class=\"wr-table-filter__trigger\" [wrDropdown]=\"menu\" aria-label=\"Filter column\">\n  <svg\n    class=\"wr-icon__svg\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path\n      d=\"M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z\"\n    />\n  </svg>\n  @if (selectedCount() > 0) {\n    <span class=\"wr-table-filter__count\">{{ selectedCount() }}</span>\n  }\n</button>\n\n<wr-dropdown-menu #menu>\n  <div class=\"wr-table-filter__panel\">\n    <input\n      class=\"wr-table-filter__search\"\n      type=\"search\"\n      placeholder=\"Search\"\n      [value]=\"query()\"\n      (input)=\"onSearchInput($event)\"\n    />\n\n    <div class=\"wr-table-filter__list\">\n      @for (item of visible(); track item.value) {\n        <button\n          type=\"button\"\n          class=\"wr-table-filter__item\"\n          [class.wr-table-filter__item--selected]=\"item.selected\"\n          (click)=\"onToggle(item)\"\n        >\n          <span class=\"wr-table-filter__check\">\n            <svg\n              class=\"wr-icon__svg\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n            >\n              <path d=\"M20 6 9 17l-5-5\" />\n            </svg>\n          </span>\n          <span class=\"wr-table-filter__title\">{{ item.title }}</span>\n        </button>\n      } @empty {\n        <div class=\"wr-table-filter__empty\">No matches</div>\n      }\n    </div>\n\n    @if (selectedCount() > 0) {\n      <button type=\"button\" class=\"wr-table-filter__reset\" (click)=\"onReset()\">Reset</button>\n    }\n  </div>\n</wr-dropdown-menu>\n" }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
 
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * Provide a custom template for a group band's label area. The collapse chevron
+ * and the optional group checkbox are still rendered by the table around it, so
+ * the template may safely contain its own interactive content. Projecting it
+ * does NOT enable grouping — set `[groupBy]` for that.
+ *
+ * @example
+ * ```html
+ * <wr-table [columns]="columns" [items]="rows" groupBy="department">
+ *   <ng-template wrTableGroupHeader let-value let-count="count" let-toggle="toggle">
+ *     <wr-tag color="primary" (click)="toggle()">{{ value }}</wr-tag>
+ *     <small>{{ count }} people</small>
+ *   </ng-template>
+ * </wr-table>
+ * ```
+ */
+class WrTableGroupHeader {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrTableGroupHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: WrTableGroupHeader, isStandalone: true, selector: "ng-template[wrTableGroupHeader]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrTableGroupHeader, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[wrTableGroupHeader]' }]
+        }] });
+
 /**
  * @license
  *
@@ -121,10 +189,10 @@ class WrTableSort {
         return parts.join(' ');
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrTableSort, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: WrTableSort, isStandalone: true, selector: "wr-table-sort", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '<svg class="wr-icon__svg wr-table-sort__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>', isInline: true, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrTableSort, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: WrTableSort, isStandalone: true, selector: "wr-table-sort", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '<svg class="wr-icon__svg wr-table-sort__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrTableSort, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrTableSort, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-table-sort',
@@ -140,6 +208,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
+/** Sentinel value for the single synthetic bucket used when grouping is off. */
+const WR_TABLE_UNGROUPED = Symbol('wr-table-ungrouped');
 /**
  * Data table with sortable / filterable headers and custom cell templates.
  *
@@ -161,7 +231,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
  * </wr-table>
  * ```
  *
- * @see https://ngwr.dev/components/table
+ * @see https://ngwr.dev/reference/components/table
  */
 class WrTable {
     /** Column definitions, keyed by row property name. */
@@ -178,6 +248,69 @@ class WrTable {
      * cell shows its column title as a label. @default false
      */
     responsive = input(false, { ...(ngDevMode ? { debugName: "responsive" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Enable drag-to-reorder on the column headers. @default false */
+    reorderable = input(false, { ...(ngDevMode ? { debugName: "reorderable" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Two-way bindable column order — an array of column keys. Reflects and drives
+     * the header order: the table falls back to declaration order for any key not
+     * listed, and updates this on drag. Bind it to persist a user's arrangement.
+     */
+    columnOrder = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnOrder" }] : /* istanbul ignore next */ []));
+    /**
+     * Row selection with a leading checkbox column — `'multiple'` adds a
+     * select-all header; `'single'` keeps one row selected. @default null (off)
+     */
+    rowSelection = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowSelection" }] : /* istanbul ignore next */ []));
+    /**
+     * How to identify a row for selection — a property name or a function.
+     * Unset uses the row object itself (fine for a stable row array).
+     */
+    rowKey = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowKey" }] : /* istanbul ignore next */ []));
+    /** Two-way bindable selected row keys. */
+    selection = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+    /** Two-way bindable expanded row keys (needs a `[wrTableExpand]` template). */
+    expanded = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    /**
+     * Group rows under collapsible band headers — a row property name, or a
+     * function returning the group value. `null` (default) renders the table
+     * exactly as before.
+     *
+     * Grouping runs AFTER pagination: it buckets the rows on the current page in
+     * first-appearance order (it never re-sorts your data — same contract as
+     * `[(sort)]`), so a group straddling a page boundary shows a band on both
+     * pages, and per-group counts / subtotals are page-scoped. Sort `items` by the
+     * same key upstream to keep groups whole, or pair with `pageSize = 0`.
+     *
+     * Group values are compared by identity (`Map`/`Set`, SameValueZero) — return
+     * a primitive, exactly as for `rowKey`. Objects / `Date`s bucket by reference.
+     *
+     * @default null
+     */
+    groupBy = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupBy" }] : /* istanbul ignore next */ []));
+    /**
+     * Two-way bindable collapsed group values (the values `groupBy` returns).
+     * Keyed by value, so a collapsed group stays collapsed across page changes and
+     * re-sorts. Empty (the default) shows every group expanded.
+     */
+    collapsedGroups = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsedGroups" }] : /* istanbul ignore next */ []));
+    /**
+     * Render an aggregate row under each group using the same `column.summary`
+     * definitions as the grand footer, computed over that group's rows on the
+     * current page. No-op unless at least one column defines a `summary`. The grand
+     * `<tfoot>` is unaffected and still aggregates the whole client dataset — with
+     * client-side pagination the two describe different scopes, so pair grouping
+     * with `pageSize = 0` when you need them to reconcile. @default false
+     */
+    groupSummary = input(false, { ...(ngDevMode ? { debugName: "groupSummary" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Show the page-scoped row-count badge in each group band. @default true */
+    showGroupCount = input(true, { ...(ngDevMode ? { debugName: "showGroupCount" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
     /** Two-way bindable sort array. Order in array = application order. */
     sort = model([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "sort" }] : /* istanbul ignore next */ []));
@@ -198,6 +331,43 @@ class WrTable {
      */
     totalItems = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []));
+    /**
+     * Window the `<tbody>` so a table of thousands of rows keeps only ~one
+     * viewport of `<tr>`s in the DOM. Opt-in and OFF by default — a table
+     * without it renders byte-identically to today.
+     *
+     * Engages ONLY on the flat, fixed-height tier: it silently falls back to the
+     * full render whenever a variable-height layout is active — `groupBy`, a
+     * `[wrTableExpand]` template, `responsive` card mode, or a visible pager
+     * (`pageSize > 0` / `totalItems`). While on, it forces fixed layout for
+     * stable column widths and assumes a uniform row height (see `rowHeight`).
+     *
+     * Intended as static config. Give columns an explicit `width` so the frozen
+     * layout is exact (a virtualized table always renders fixed-layout); toggling
+     * it off at runtime leaves the frozen widths in place as column minimums.
+     * @default false
+     */
+    virtualScroll = input(false, { ...(ngDevMode ? { debugName: "virtualScroll" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Uniform body-row height in px used to map scroll offset to row index. `0`
+     * (default) measures the first rendered row once — matching the density at
+     * that point — and reuses it; pass an explicit value to remove the
+     * post-hydration measure and make SSR pixel-exact (recommended if the density
+     * can change at runtime). Read only when `virtualScroll` is on. Keep
+     * virtualized cells single-line and no taller than this — a taller custom
+     * `[wrTableCell]` template drifts the window. @default 0
+     */
+    rowHeight = input(0, { ...(ngDevMode ? { debugName: "rowHeight" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(0, coerceNumberProperty(v, 0)) });
+    /**
+     * Height of the scroll viewport when `virtualScroll` is on — a number (px) or
+     * any CSS length (`'70vh'`). Applied as `max-height` on `.wr-table__scroll`
+     * (a short table shrinks to fit; a long one caps and scrolls). A numeric px
+     * value lets the server prerender the exact first window. @default 480
+     */
+    viewportHeight = input(480, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewportHeight" }] : /* istanbul ignore next */ []));
+    /** Extra rows kept rendered above and below the viewport as scroll headroom. @default 6 */
+    overscan = input(6, { ...(ngDevMode ? { debugName: "overscan" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(0, coerceNumberProperty(v, 6)) });
     /** Total row count derived for the pager (server-mode wins). */
     resolvedTotal = computed(() => {
         const server = this.totalItems();
@@ -234,8 +404,628 @@ class WrTable {
         return map;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "cellMap" }] : /* istanbul ignore next */ []));
-    /** Keep KeyValuePipe in declaration order (comparator that treats all keys as equal). */
-    keepOrder = () => 0;
+    // --- Column pinning -------------------------------------------------------
+    platformId = inject(PLATFORM_ID);
+    headerCells = viewChildren('thCell', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerCells" }] : /* istanbul ignore next */ []));
+    /**
+     * Columns in render order — declaration order, overridden by `columnOrder`
+     * once reordered; new keys append, removed keys drop out. Pin and resize
+     * measurement key off this, so it must equal the rendered order.
+     */
+    displayColumns = computed(() => {
+        const cols = this.columns();
+        const seen = new Set();
+        const result = [];
+        for (const key of this.columnOrder()) {
+            if (Object.hasOwn(cols, key) && !seen.has(key)) {
+                result.push({ key, column: cols[key] });
+                seen.add(key);
+            }
+        }
+        for (const key of Object.keys(cols)) {
+            if (!seen.has(key)) {
+                result.push({ key, column: cols[key] });
+                seen.add(key);
+            }
+        }
+        return result;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayColumns" }] : /* istanbul ignore next */ []));
+    /**
+     * Sticky offsets for pinned columns, measured from the header cells so any
+     * number of columns can stack per side. Also names the inner-edge column on
+     * each side (where the separating shadow sits). Empty until measured in the
+     * browser; on the server the pins stay at offset 0, corrected on hydration.
+     */
+    pins = signal({ left: new Map(), right: new Map(), leftEdge: null, rightEdge: null }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pins" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Re-measure whenever the columns or their rendered widths change. Tables
+        // with no pinned column skip the observer entirely.
+        effect(onCleanup => {
+            const cells = this.headerCells();
+            const cols = this.displayColumns();
+            if (!cols.some(c => c.column.pin)) {
+                this.pins.set({ left: new Map(), right: new Map(), leftEdge: null, rightEdge: null });
+                return;
+            }
+            if (!isPlatformBrowser(this.platformId) || typeof ResizeObserver === 'undefined') {
+                this.measurePins(cols, cells);
+                return;
+            }
+            const observer = new ResizeObserver(() => this.measurePins(cols, cells));
+            for (const cell of cells)
+                observer.observe(cell.nativeElement);
+            this.measurePins(cols, cells);
+            onCleanup(() => observer.disconnect());
+        });
+        // Reset resize state when the column KEY SET changes (added/removed/renamed)
+        // so a stale frozen width can't collapse a new column under the latched
+        // fixed layout. Keyed on sorted keys, not object identity (which churns).
+        // Also drops the virtual freeze so activation effect (A), registered after
+        // this, re-establishes it from the fresh natural widths.
+        effect(() => {
+            const keys = Object.keys(this.columns()).sort().join('\n');
+            if (keys === this.lastColumnKeys)
+                return;
+            this.lastColumnKeys = keys;
+            this.resizeWidths.set(new Map());
+            this.fixedLayout.set(false);
+            this.virtualFixed.set(false);
+        });
+        // (A) Virtual activation: freeze the natural column widths BEFORE fixed
+        // layout applies (so there's no jump), then switch to fixed and measure the
+        // row height. Tracks columns so a structural change re-freshes the widths —
+        // registered AFTER the key-set reset above, so this freeze wins the tie.
+        effect(() => {
+            const active = this.virtualized();
+            this.displayColumns(); // re-run on a structural column change
+            if (!active) {
+                this.virtualFixed.set(false);
+                return;
+            }
+            if (!isPlatformBrowser(this.platformId))
+                return;
+            untracked(() => {
+                this.freezeColumnWidths(); // captured while still auto-layout = natural widths
+                this.virtualFixed.set(true); // now fixed, with those exact widths (no jump)
+                if (this.rowHeight() === 0) {
+                    const row = this.scrollEl()?.nativeElement.querySelector('.wr-table__tr');
+                    const h = row?.offsetHeight ?? 0;
+                    if (h > 0)
+                        this.measuredRowPx.set(h);
+                }
+            });
+        });
+        // (B) Scroll + viewport observer — attached ONLY when virtual + browser, so
+        // a non-virtual table gets no scroll listener / no per-scroll change detection.
+        effect(onCleanup => {
+            const el = this.scrollEl()?.nativeElement;
+            if (!el || !this.virtualized() || !isPlatformBrowser(this.platformId))
+                return;
+            let raf = 0;
+            const onScroll = () => {
+                if (raf)
+                    return;
+                raf = requestAnimationFrame(() => {
+                    raf = 0;
+                    this.scrollTop.set(el.scrollTop);
+                });
+            };
+            el.addEventListener('scroll', onScroll, { passive: true });
+            this.viewportPx.set(el.clientHeight);
+            const ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(() => this.viewportPx.set(el.clientHeight)) : null;
+            ro?.observe(el);
+            onCleanup(() => {
+                el.removeEventListener('scroll', onScroll);
+                if (raf)
+                    cancelAnimationFrame(raf);
+                ro?.disconnect();
+            });
+        });
+    }
+    measurePins(cols, cells) {
+        const left = new Map();
+        const right = new Map();
+        let leftEdge = null;
+        let rightEdge = null;
+        let acc = 0;
+        for (let i = 0; i < cols.length; i++) {
+            if (cols[i].column.pin === 'left') {
+                left.set(cols[i].key, acc);
+                acc += cells[i]?.nativeElement.offsetWidth ?? 0;
+                leftEdge = cols[i].key;
+            }
+        }
+        acc = 0;
+        for (let i = cols.length - 1; i >= 0; i--) {
+            if (cols[i].column.pin === 'right') {
+                right.set(cols[i].key, acc);
+                acc += cells[i]?.nativeElement.offsetWidth ?? 0;
+                rightEdge = cols[i].key;
+            }
+        }
+        this.pins.set({ left, right, leftEdge, rightEdge });
+    }
+    /** Sticky `left` offset (px) for a left-pinned column, else `null`. */
+    leftPin(key) {
+        return this.pins().left.get(key) ?? null;
+    }
+    /** Sticky `right` offset (px) for a right-pinned column, else `null`. */
+    rightPin(key) {
+        return this.pins().right.get(key) ?? null;
+    }
+    /** Whether `key` is the inner-edge pinned column on `side` (carries the shadow). */
+    isPinEdge(key, side) {
+        return (side === 'left' ? this.pins().leftEdge : this.pins().rightEdge) === key;
+    }
+    // --- Column resizing ------------------------------------------------------
+    resizeWidths = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resizeWidths" }] : /* istanbul ignore next */ []));
+    resizeKey = null;
+    resizeStartX = 0;
+    resizeStartWidth = 0;
+    lastColumnKeys = '';
+    /**
+     * Once a column has been dragged, the table switches to fixed layout so the
+     * `<col>` widths are honoured exactly (auto layout treats them as minimums).
+     */
+    fixedLayout = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fixedLayout" }] : /* istanbul ignore next */ []));
+    /** Current width (px) for a column, or `null` for auto — a live resize wins. */
+    colWidth(key) {
+        return this.resizeWidths().get(key) ?? this.columns()[key]?.width ?? null;
+    }
+    /** Freeze every column at its current rendered header width (skips frozen keys). */
+    freezeColumnWidths() {
+        const cols = this.displayColumns();
+        const cells = this.headerCells();
+        const frozen = new Map(this.resizeWidths());
+        for (let i = 0; i < cols.length; i++) {
+            if (!frozen.has(cols[i].key)) {
+                const width = cells[i]?.nativeElement.offsetWidth;
+                if (width)
+                    frozen.set(cols[i].key, width);
+            }
+        }
+        this.resizeWidths.set(frozen);
+    }
+    onResizeStart(event, key, th) {
+        event.preventDefault();
+        event.stopPropagation();
+        // Freeze every column at its current rendered width, then switch to fixed
+        // layout — the drag then resizes precisely (both directions) without the
+        // content-sized columns jumping.
+        if (!this.fixedLayout()) {
+            this.freezeColumnWidths();
+            this.fixedLayout.set(true);
+        }
+        this.resizeKey = key;
+        this.resizeStartX = event.clientX;
+        this.resizeStartWidth = th.offsetWidth;
+        event.target.setPointerCapture(event.pointerId);
+    }
+    onResizeMove(event) {
+        if (this.resizeKey === null)
+            return;
+        const width = Math.max(48, this.resizeStartWidth + (event.clientX - this.resizeStartX));
+        this.resizeWidths.set(new Map(this.resizeWidths()).set(this.resizeKey, width));
+    }
+    onResizeEnd(event) {
+        if (this.resizeKey === null)
+            return;
+        const target = event.target;
+        if (target.hasPointerCapture?.(event.pointerId))
+            target.releasePointerCapture(event.pointerId);
+        this.resizeKey = null;
+    }
+    // --- Virtual scroll -------------------------------------------------------
+    /** md-density fallback row height (px), used before measuring / on the server. */
+    static FALLBACK_ROW_PX = 40;
+    static FALLBACK_VIEWPORT_PX = 480;
+    /** The `.wr-table__scroll` div (always in the template; only read when virtual). */
+    scrollEl = viewChild('scroll', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollEl" }] : /* istanbul ignore next */ []));
+    /** Live vertical scroll offset (px); 0 on the server / before first scroll. */
+    scrollTop = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollTop" }] : /* istanbul ignore next */ []));
+    /** Measured viewport clientHeight (px); 0 until the browser observer fires. */
+    viewportPx = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewportPx" }] : /* istanbul ignore next */ []));
+    /** Measured first-row height (px) when `rowHeight` is auto; 0 until measured. */
+    measuredRowPx = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "measuredRowPx" }] : /* istanbul ignore next */ []));
+    /** Fixed layout forced ON by virtualization (distinct from the resize latch). */
+    virtualFixed = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "virtualFixed" }] : /* istanbul ignore next */ []));
+    /** `virtualScroll` requested AND the data shape is safe to window. SSR-deterministic. */
+    virtualized = computed(() => this.virtualScroll() &&
+        this.groupBy() === null && // group bands / subtotals are variable height
+        !this.expandable() && // an injected detail <tr> desyncs uniform offsets
+        !this.responsive() && // card mode has no uniform row height
+        this.pageSize() === 0 && // a visible pager owns chunking — the pager wins
+        this.totalItems() === null &&
+        !!this.visibleItems(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "virtualized" }] : /* istanbul ignore next */ []));
+    /** Effective uniform row height (px). */
+    effRowH = computed(() => this.rowHeight() > 0 ? this.rowHeight() : this.measuredRowPx() || WrTable.FALLBACK_ROW_PX, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effRowH" }] : /* istanbul ignore next */ []));
+    /** Deterministic viewport px for SSR + first paint (numeric height, else fallback). */
+    fallbackViewportPx = computed(() => {
+        const h = this.viewportHeight();
+        return typeof h === 'number' ? h : WrTable.FALLBACK_VIEWPORT_PX;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fallbackViewportPx" }] : /* istanbul ignore next */ []));
+    /** `viewportHeight` as a CSS length for the inline max-height. */
+    resolvedViewportHeight = computed(() => {
+        const h = this.viewportHeight();
+        return typeof h === 'number' ? `${h}px` : h;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedViewportHeight" }] : /* istanbul ignore next */ []));
+    /** Rendered window [start,end) + spacer pads (px). Pure math, O(1) per scroll frame. */
+    virtualWindow = computed(() => {
+        const total = this.renderRows().length;
+        if (!this.virtualized() || total === 0)
+            return { start: 0, end: total, padTop: 0, padBottom: 0 };
+        const h = this.effRowH();
+        const vp = this.viewportPx() || this.fallbackViewportPx();
+        const over = this.overscan();
+        const first = Math.floor(this.scrollTop() / h);
+        const count = Math.ceil(vp / h);
+        const start = Math.max(0, first - over);
+        const end = Math.min(total, first + count + over);
+        return { start, end, padTop: start * h, padBottom: (total - end) * h };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "virtualWindow" }] : /* istanbul ignore next */ []));
+    /** Flat index of the first rendered window row (for `aria-rowindex`). */
+    windowStart = computed(() => this.virtualWindow().start, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "windowStart" }] : /* istanbul ignore next */ []));
+    /** Rows placed in `<tbody>`. SAME array instance as `renderRows()` when off → byte-identical DOM. */
+    windowRows = computed(() => {
+        if (!this.virtualized())
+            return this.renderRows();
+        const { start, end } = this.virtualWindow();
+        return this.renderRows().slice(start, end);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "windowRows" }] : /* istanbul ignore next */ []));
+    /** Fixed layout is on when a resize drag latched it OR virtualization forces it. */
+    fixedLayoutActive = computed(() => this.fixedLayout() || this.virtualFixed(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fixedLayoutActive" }] : /* istanbul ignore next */ []));
+    /** Scroll a flat row index to the top of the virtual viewport. No-op on the server / when not virtual. */
+    scrollToRow(index, behavior = 'auto') {
+        if (!isPlatformBrowser(this.platformId) || !this.virtualized())
+            return;
+        this.scrollEl()?.nativeElement.scrollTo({ top: Math.max(0, index) * this.effRowH(), behavior });
+    }
+    onColumnDrop(event) {
+        if (event.previousIndex === event.currentIndex)
+            return;
+        const order = this.displayColumns().map(c => c.key);
+        moveItemInArray(order, event.previousIndex, event.currentIndex);
+        this.columnOrder.set(order);
+    }
+    /**
+     * Keep pinned columns anchored — a drop can't land on a pinned column's slot,
+     * so a scrollable column can't be dragged into the frozen region at either edge.
+     */
+    sortPredicate = (index) => !this.displayColumns()[index]?.column.pin;
+    // --- Row selection --------------------------------------------------------
+    rowKeyOf(row) {
+        const rk = this.rowKey();
+        if (typeof rk === 'function')
+            return rk(row);
+        if (typeof rk === 'string')
+            return row[rk];
+        return row;
+    }
+    /** Keys of the rows on the current page — the select-all scope. */
+    pageRowKeys = computed(() => (this.visibleItems() ?? []).map(row => this.rowKeyOf(row)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageRowKeys" }] : /* istanbul ignore next */ []));
+    isRowSelected(row) {
+        return this.selectionSet().has(this.rowKeyOf(row));
+    }
+    /** Every current-page row selected (drives the header checkbox). */
+    allSelected = computed(() => {
+        const keys = this.pageRowKeys();
+        if (keys.length === 0)
+            return false;
+        const sel = this.selectionSet();
+        return keys.every(key => sel.has(key));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allSelected" }] : /* istanbul ignore next */ []));
+    /** Some but not all selected (drives the header indeterminate). */
+    someSelected = computed(() => {
+        const sel = this.selectionSet();
+        return this.pageRowKeys().some(key => sel.has(key)) && !this.allSelected();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "someSelected" }] : /* istanbul ignore next */ []));
+    toggleRow(row, checked) {
+        const key = this.rowKeyOf(row);
+        if (this.rowSelection() === 'single') {
+            this.selection.set(checked ? [key] : []);
+            return;
+        }
+        const sel = this.selection();
+        this.selection.set(checked ? [...sel, key] : sel.filter(k => k !== key));
+    }
+    /** Add (or remove) a set of row keys from the selection in one update. */
+    applySelection(keys, checked) {
+        const sel = this.selection();
+        if (checked) {
+            const merged = new Set(sel);
+            for (const key of keys)
+                merged.add(key);
+            this.selection.set([...merged]);
+        }
+        else {
+            const drop = new Set(keys);
+            this.selection.set(sel.filter(k => !drop.has(k)));
+        }
+    }
+    toggleAll(checked) {
+        this.applySelection(this.pageRowKeys(), checked);
+    }
+    // --- Row expansion --------------------------------------------------------
+    expandTpl = contentChild(WrTableExpand, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandTpl" }] : /* istanbul ignore next */ []));
+    /** Whether the expand column shows (a `[wrTableExpand]` template was projected). */
+    expandable = computed(() => !!this.expandTpl(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandable" }] : /* istanbul ignore next */ []));
+    /** Leading control columns — selection + expand. */
+    leadingCols = computed(() => (this.rowSelection() ? 1 : 0) + (this.expandable() ? 1 : 0), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "leadingCols" }] : /* istanbul ignore next */ []));
+    /** Total rendered columns (data + leading), for detail-row / empty colspans. */
+    totalCols = computed(() => this.displayColumns().length + this.leadingCols(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalCols" }] : /* istanbul ignore next */ []));
+    expandTemplate() {
+        return this.expandTpl()?.template;
+    }
+    isExpanded(row) {
+        return this.expanded().includes(this.rowKeyOf(row));
+    }
+    toggleExpand(row) {
+        const key = this.rowKeyOf(row);
+        const set = this.expanded();
+        this.expanded.set(set.includes(key) ? set.filter(k => k !== key) : [...set, key]);
+    }
+    expandContext(row) {
+        return { $implicit: row, row };
+    }
+    // --- Summary row ----------------------------------------------------------
+    /** Whether any column defines a `summary` (so the footer row shows). */
+    hasSummary = computed(() => Object.values(this.columns()).some(col => col.summary !== undefined), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasSummary" }] : /* istanbul ignore next */ []));
+    /** Per-column footer values, computed over `items` (the current page in server mode). */
+    summaries = computed(() => {
+        const rows = this.items() ?? [];
+        const map = new Map();
+        for (const [key, col] of Object.entries(this.columns())) {
+            if (col.summary !== undefined)
+                map.set(key, this.computeSummary(col.summary, rows, key));
+        }
+        return map;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "summaries" }] : /* istanbul ignore next */ []));
+    summaryFor(key) {
+        return this.summaries().get(key) ?? '';
+    }
+    // --- Row grouping ---------------------------------------------------------
+    groupTpl = contentChild(WrTableGroupHeader, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupTpl" }] : /* istanbul ignore next */ []));
+    groupTemplate() {
+        return this.groupTpl()?.template;
+    }
+    /**
+     * Rows on the current page bucketed by `groupBy`, in first-appearance order.
+     * Depends only on `visibleItems()` + `groupBy` (not on collapse / summary), so
+     * a collapse toggle never re-buckets. The ungrouped path returns one synthetic
+     * bucket holding the same array instance `visibleItems()` returned.
+     */
+    groupBuckets = computed(() => {
+        const rows = this.visibleItems() ?? [];
+        const by = this.groupBy();
+        if (by === null)
+            return [{ value: WR_TABLE_UNGROUPED, rows }];
+        const buckets = new Map();
+        for (const row of rows) {
+            const value = typeof by === 'function' ? by(row) : row[by];
+            const bucket = buckets.get(value);
+            if (bucket)
+                bucket.push(row);
+            else
+                buckets.set(value, [row]);
+        }
+        return Array.from(buckets, ([value, groupRows]) => ({ value, rows: groupRows }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupBuckets" }] : /* istanbul ignore next */ []));
+    /**
+     * The flat `<tbody>` render list. Ungrouped it is exactly today's rows in
+     * order (the rendered elements are unchanged; only the `@for` track identity
+     * moves to a stable id). Returns `[]` for both no-rows and loading — the
+     * template's `@if (visibleItems())` guard keeps the loading case from showing
+     * the empty row.
+     */
+    renderRows = computed(() => {
+        const rows = this.visibleItems();
+        if (!rows)
+            return [];
+        const buckets = this.groupBuckets();
+        if (this.groupBy() === null) {
+            return buckets[0].rows.map((row, i) => ({ kind: 'row', id: `r${i}`, row }));
+        }
+        const collapsed = new Set(this.collapsedGroups());
+        const summaryCols = this.groupSummary() && this.hasSummary()
+            ? Object.entries(this.columns()).filter(([, c]) => c.summary !== undefined)
+            : [];
+        const out = [];
+        buckets.forEach((bucket, gi) => {
+            const isCollapsed = collapsed.has(bucket.value);
+            const label = this.groupLabelOf(bucket.value);
+            const group = {
+                $implicit: bucket.value,
+                value: bucket.value,
+                label,
+                rows: bucket.rows,
+                count: bucket.rows.length,
+                collapsed: isCollapsed,
+                index: gi,
+                toggle: () => this.toggleGroupCollapse(bucket.value),
+            };
+            out.push({ kind: 'group', id: `g${gi}`, group });
+            if (isCollapsed)
+                return;
+            bucket.rows.forEach((row, ri) => out.push({ kind: 'row', id: `g${gi}r${ri}`, row }));
+            if (summaryCols.length) {
+                const summaries = new Map();
+                for (const [key, col] of summaryCols)
+                    summaries.set(key, this.computeSummary(col.summary, bucket.rows, key));
+                out.push({ kind: 'group-foot', id: `g${gi}f`, summaries });
+            }
+        });
+        return out;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "renderRows" }] : /* istanbul ignore next */ []));
+    /** Default band label — the primitive as text, `'—'` for empty, JSON for objects. */
+    groupLabelOf(value) {
+        if (value == null || value === '')
+            return '—';
+        if (typeof value === 'string')
+            return value;
+        if (typeof value === 'number' || typeof value === 'bigint' || typeof value === 'boolean')
+            return String(value);
+        // Objects / symbols / functions aren't the documented contract (groupBy
+        // should return a primitive, like rowKey); format gracefully anyway.
+        try {
+            return JSON.stringify(value) ?? '—';
+        }
+        catch {
+            return '—';
+        }
+    }
+    toggleGroupCollapse(value) {
+        const set = this.collapsedGroups();
+        this.collapsedGroups.set(set.includes(value) ? set.filter(v => v !== value) : [...set, value]);
+    }
+    /** Collapse every group on the current page. No-op when `groupBy` is unset. */
+    collapseAllGroups() {
+        if (this.groupBy() === null)
+            return;
+        this.collapsedGroups.set(this.groupBuckets().map(b => b.value));
+    }
+    /** Expand every group. */
+    expandAllGroups() {
+        this.collapsedGroups.set([]);
+    }
+    // --- Group selection (memoized Set; reuses the row-selection primitive) ----
+    /** Memoized selection as a Set — O(1) membership for row + group + select-all checks. */
+    selectionSet = computed(() => new Set(this.selection()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionSet" }] : /* istanbul ignore next */ []));
+    groupChecked(rows) {
+        if (rows.length === 0)
+            return false;
+        const sel = this.selectionSet();
+        return rows.every(r => sel.has(this.rowKeyOf(r)));
+    }
+    groupIndeterminate(rows) {
+        const sel = this.selectionSet();
+        return rows.some(r => sel.has(this.rowKeyOf(r))) && !this.groupChecked(rows);
+    }
+    toggleGroupSelection(rows, checked) {
+        this.applySelection(rows.map(r => this.rowKeyOf(r)), checked);
+    }
+    // --- CSV export -----------------------------------------------------------
+    doc = inject(DOCUMENT);
+    /**
+     * Build the table as an RFC-4180 CSV string — a header row from the column
+     * titles, then one row per item in the current column order. Values are taken
+     * from the row data, not from custom `[wrTableCell]` templates.
+     *
+     * Covers the current `items`, so in server-side mode (`totalItems` set) it
+     * exports the current page, while client-side pagination exports every page.
+     *
+     * @example
+     * ```html
+     * <wr-table #table [columns]="columns" [items]="rows" />
+     * <wr-btn (click)="table.exportCsv({ filename: 'users.csv' })">Export</wr-btn>
+     * ```
+     */
+    toCsv(options = {}) {
+        const delimiter = options.delimiter ?? ',';
+        const escapeFormulas = options.escapeFormulas ?? true;
+        const cols = this.displayColumns();
+        const rows = options.selectedOnly ? this.selectedRows() : (this.items() ?? []);
+        const text = (value) => {
+            if (value == null)
+                return '';
+            if (typeof value === 'string')
+                return value;
+            if (typeof value === 'number' || typeof value === 'boolean' || typeof value === 'bigint')
+                return String(value);
+            if (value instanceof Date)
+                return Number.isNaN(value.getTime()) ? '' : value.toISOString();
+            try {
+                return JSON.stringify(value) ?? '';
+            }
+            catch {
+                // Circular structures and nested bigints throw — never fail the export over one cell.
+                return '';
+            }
+        };
+        const cell = (value) => {
+            let s = text(value);
+            // Spreadsheets evaluate cells starting with these, so neutralize them into text.
+            if (escapeFormulas && typeof value === 'string' && /^[=+\-@\t\r]/.test(s))
+                s = `'${s}`;
+            return s.includes(delimiter) || /["\r\n]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
+        };
+        const lines = [cols.map(col => cell(col.column.title)).join(delimiter)];
+        for (const row of rows)
+            lines.push(cols.map(col => cell(row[col.key])).join(delimiter));
+        return lines.join('\r\n');
+    }
+    /** Download the table as a CSV file. No-op on the server. */
+    exportCsv(options = {}) {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        // Lead with a BOM so Excel reads the file as UTF-8.
+        const blob = new Blob([`\uFEFF${this.toCsv(options)}`], { type: 'text/csv;charset=utf-8;' });
+        const url = URL.createObjectURL(blob);
+        const link = this.doc.createElement('a');
+        link.href = url;
+        link.download = options.filename ?? 'table.csv';
+        link.click();
+        setTimeout(() => URL.revokeObjectURL(url));
+    }
+    selectedRows() {
+        const keys = new Set(this.selection());
+        return (this.items() ?? []).filter(row => keys.has(this.rowKeyOf(row)));
+    }
+    computeSummary(kind, rows, key) {
+        if (typeof kind === 'function')
+            return kind(rows);
+        // Drop empty/nullish cells first — `Number('')`/`Number(null)` are 0 and
+        // would otherwise skew the aggregate.
+        const values = rows.map(row => row[key]).filter(v => v != null && v !== '');
+        if (kind === 'count')
+            return values.length;
+        const nums = values.map(Number).filter(Number.isFinite);
+        if (nums.length === 0)
+            return '';
+        const sum = nums.reduce((a, b) => a + b, 0);
+        switch (kind) {
+            case 'sum':
+                return sum;
+            case 'avg':
+                return Math.round((sum / nums.length) * 100) / 100;
+            case 'min':
+                return Math.min(...nums);
+            case 'max':
+                return Math.max(...nums);
+            default:
+                return '';
+        }
+    }
     directionFor(key) {
         return this.sort().find(s => s.key === key)?.direction ?? null;
     }
@@ -259,17 +1049,31 @@ class WrTable {
     templateFor(key) {
         return this.cellMap().get(String(key));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: WrTable, isStandalone: true, selector: "wr-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sortChange", filterChange: "filterChange", page: "pageChange" }, host: { properties: { "class.wr-table--responsive": "responsive()" }, classAttribute: "wr-table" }, queries: [{ propertyName: "cellTemplates", predicate: WrTableCell, isSignal: true }], ngImport: i0, template: "@if (loading()) {\n  <div class=\"wr-table__loading\">\n    <wr-spinner size=\"lg\" />\n  </div>\n}\n\n<div class=\"wr-table__scroll\">\n  <table class=\"wr-table__table\">\n    <thead>\n      <tr>\n        @for (entry of columns() | keyvalue: keepOrder; track entry.key) {\n          <th class=\"wr-table__th\">\n            <div class=\"wr-table__th-inner\">\n              <span class=\"wr-table__title\">{{ entry.value.title }}</span>\n\n              @if (entry.value.sortable) {\n                <button\n                  type=\"button\"\n                  class=\"wr-table__sort-btn\"\n                  aria-label=\"Sort column\"\n                  (click)=\"cycleSort(entry.key)\"\n                >\n                  <wr-table-sort [direction]=\"directionFor(entry.key)\" />\n                </button>\n              }\n\n              @if (entry.value.filterItems; as filterItems) {\n                @if (filterItems.length) {\n                  <wr-table-filter [items]=\"filterItems\" (selectionChange)=\"onFilter(entry.key, $event)\" />\n                }\n              }\n            </div>\n          </th>\n        }\n      </tr>\n    </thead>\n\n    <tbody>\n      @if (visibleItems(); as rows) {\n        @for (row of rows; track $index) {\n          <tr class=\"wr-table__tr\">\n            @for (entry of columns() | keyvalue: keepOrder; track entry.key) {\n              <td class=\"wr-table__td\" [attr.data-label]=\"entry.value.title\">\n                @if (templateFor(entry.key); as tpl) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"tpl\"\n                    [ngTemplateOutletContext]=\"cellContext(row, entry.key, entry.value)\"\n                  />\n                } @else {\n                  {{ getValue(row, entry.key) }}\n                }\n              </td>\n            }\n          </tr>\n        } @empty {\n          <tr>\n            <td class=\"wr-table__empty\" [attr.colspan]=\"(columns() | keyvalue).length\">No data</td>\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n@if (showPager()) {\n  <div class=\"wr-table__pager\">\n    <wr-pagination [(currentPage)]=\"page\" [pageSize]=\"pageSize()\" [total]=\"resolvedTotal()\" />\n  </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: WrPagination, selector: "wr-pagination", inputs: ["currentPage", "pageSize", "total", "pageSizeOptions", "showSizeChanger", "showTotal", "align", "size", "shape", "disabled", "responsive", "ofLabel", "prevLabel", "nextLabel", "itemsPerPageLabel"], outputs: ["currentPageChange", "pageSizeChange"] }, { kind: "component", type: WrSpinner, selector: "wr-spinner", inputs: ["size"] }, { kind: "component", type: WrTableSort, selector: "wr-table-sort", inputs: ["direction"] }, { kind: "component", type: WrTableFilter, selector: "wr-table-filter", inputs: ["items"], outputs: ["selectionChange"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: WrTable, isStandalone: true, selector: "wr-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, columnOrder: { classPropertyName: "columnOrder", publicName: "columnOrder", isSignal: true, isRequired: false, transformFunction: null }, rowSelection: { classPropertyName: "rowSelection", publicName: "rowSelection", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, collapsedGroups: { classPropertyName: "collapsedGroups", publicName: "collapsedGroups", isSignal: true, isRequired: false, transformFunction: null }, groupSummary: { classPropertyName: "groupSummary", publicName: "groupSummary", isSignal: true, isRequired: false, transformFunction: null }, showGroupCount: { classPropertyName: "showGroupCount", publicName: "showGroupCount", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, viewportHeight: { classPropertyName: "viewportHeight", publicName: "viewportHeight", isSignal: true, isRequired: false, transformFunction: null }, overscan: { classPropertyName: "overscan", publicName: "overscan", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columnOrder: "columnOrderChange", selection: "selectionChange", expanded: "expandedChange", collapsedGroups: "collapsedGroupsChange", sort: "sortChange", filterChange: "filterChange", page: "pageChange" }, host: { properties: { "class.wr-table--responsive": "responsive()", "class.wr-table--virtual": "virtualized()" }, classAttribute: "wr-table" }, queries: [{ propertyName: "cellTemplates", predicate: WrTableCell, isSignal: true }, { propertyName: "expandTpl", first: true, predicate: WrTableExpand, descendants: true, isSignal: true }, { propertyName: "groupTpl", first: true, predicate: WrTableGroupHeader, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "headerCells", predicate: ["thCell"], descendants: true, isSignal: true }, { propertyName: "scrollEl", first: true, predicate: ["scroll"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (loading()) {\n  <div class=\"wr-table__loading\">\n    <wr-spinner size=\"lg\" />\n  </div>\n}\n\n<div\n  class=\"wr-table__scroll\"\n  #scroll\n  [style.max-height]=\"virtualized() ? resolvedViewportHeight() : null\"\n  [attr.tabindex]=\"virtualized() ? 0 : null\"\n>\n  <table\n    class=\"wr-table__table\"\n    [class.wr-table__table--fixed]=\"fixedLayoutActive()\"\n    [style.--wr-table-row-h.px]=\"virtualized() ? effRowH() : null\"\n    [attr.aria-rowcount]=\"virtualized() ? renderRows().length + 1 + (hasSummary() && items()?.length ? 1 : 0) : null\"\n  >\n    <colgroup>\n      @if (rowSelection()) {\n        <col class=\"wr-table__col--lead\" />\n      }\n      @if (expandable()) {\n        <col class=\"wr-table__col--lead\" />\n      }\n      @for (col of displayColumns(); track col.key) {\n        <col [style.width.px]=\"colWidth(col.key)\" />\n      }\n    </colgroup>\n    <thead>\n      <tr\n        cdkDropList\n        cdkDropListOrientation=\"horizontal\"\n        [cdkDropListSortPredicate]=\"sortPredicate\"\n        (cdkDropListDropped)=\"onColumnDrop($event)\"\n      >\n        @if (rowSelection()) {\n          <th class=\"wr-table__th wr-table__th--select\">\n            @if (rowSelection() === 'multiple') {\n              <wr-checkbox\n                size=\"sm\"\n                [ngModel]=\"allSelected()\"\n                [indeterminate]=\"someSelected()\"\n                (ngModelChange)=\"toggleAll($event)\"\n                aria-label=\"Select all rows\"\n              />\n            }\n          </th>\n        }\n        @if (expandable()) {\n          <th class=\"wr-table__th wr-table__th--expand\"></th>\n        }\n        @for (col of displayColumns(); track col.key) {\n          <th\n            #thCell\n            cdkDrag\n            [cdkDragDisabled]=\"!reorderable() || !!col.column.pin\"\n            class=\"wr-table__th\"\n            [class.wr-table__th--draggable]=\"reorderable() && !col.column.pin\"\n            [class.wr-table__th--pin-left]=\"col.column.pin === 'left'\"\n            [class.wr-table__th--pin-right]=\"col.column.pin === 'right'\"\n            [class.wr-table__th--pin-edge-left]=\"isPinEdge(col.key, 'left')\"\n            [class.wr-table__th--pin-edge-right]=\"isPinEdge(col.key, 'right')\"\n            [style.left.px]=\"leftPin(col.key)\"\n            [style.right.px]=\"rightPin(col.key)\"\n          >\n            <div class=\"wr-table__th-inner\">\n              <span class=\"wr-table__title\">{{ col.column.title }}</span>\n\n              @if (col.column.sortable) {\n                <button type=\"button\" class=\"wr-table__sort-btn\" aria-label=\"Sort column\" (click)=\"cycleSort(col.key)\">\n                  <wr-table-sort [direction]=\"directionFor(col.key)\" />\n                </button>\n              }\n\n              @if (col.column.filterItems; as filterItems) {\n                @if (filterItems.length) {\n                  <wr-table-filter [items]=\"filterItems\" (selectionChange)=\"onFilter(col.key, $event)\" />\n                }\n              }\n            </div>\n\n            @if (col.column.resizable) {\n              <span\n                class=\"wr-table__resize-handle\"\n                aria-hidden=\"true\"\n                (pointerdown)=\"onResizeStart($event, col.key, thCell)\"\n                (pointermove)=\"onResizeMove($event)\"\n                (pointerup)=\"onResizeEnd($event)\"\n                (pointercancel)=\"onResizeEnd($event)\"\n                (mousedown)=\"$event.stopPropagation()\"\n                (touchstart)=\"$event.stopPropagation()\"\n              ></span>\n            }\n          </th>\n        }\n      </tr>\n    </thead>\n\n    <tbody>\n      @if (visibleItems()) {\n        @if (virtualized() && virtualWindow().padTop > 0) {\n          <tr class=\"wr-table__spacer\" aria-hidden=\"true\">\n            <td [attr.colspan]=\"totalCols()\" [style.height.px]=\"virtualWindow().padTop\"></td>\n          </tr>\n        }\n        @for (entry of windowRows(); track entry.id; let i = $index) {\n          @if (entry.kind === 'group') {\n            <tr class=\"wr-table__group-row\" [class.wr-table__group-row--collapsed]=\"entry.group.collapsed\">\n              <td class=\"wr-table__group-cell\" [attr.colspan]=\"totalCols()\">\n                <!-- The cell spans the full table width; this inner box is what sticks. -->\n                <div class=\"wr-table__group-inner\">\n                  @if (rowSelection() === 'multiple') {\n                    <wr-checkbox\n                      class=\"wr-table__group-select\"\n                      size=\"sm\"\n                      [ngModel]=\"groupChecked(entry.group.rows)\"\n                      [indeterminate]=\"groupIndeterminate(entry.group.rows)\"\n                      (ngModelChange)=\"toggleGroupSelection(entry.group.rows, $event)\"\n                      aria-label=\"Select group\"\n                    />\n                  }\n                  @if (groupTemplate(); as tpl) {\n                    <button\n                      type=\"button\"\n                      class=\"wr-table__group-toggle wr-table__group-toggle--icon\"\n                      [attr.aria-expanded]=\"!entry.group.collapsed\"\n                      aria-label=\"Toggle group\"\n                      (click)=\"toggleGroupCollapse(entry.group.value)\"\n                    >\n                      <svg\n                        class=\"wr-icon__svg wr-table__group-icon\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"2\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"m9 18 6-6-6-6\" />\n                      </svg>\n                    </button>\n                    <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"entry.group\" />\n                  } @else {\n                    <button\n                      type=\"button\"\n                      class=\"wr-table__group-toggle\"\n                      [attr.aria-expanded]=\"!entry.group.collapsed\"\n                      (click)=\"toggleGroupCollapse(entry.group.value)\"\n                    >\n                      <svg\n                        class=\"wr-icon__svg wr-table__group-icon\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"2\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"m9 18 6-6-6-6\" />\n                      </svg>\n                      <span class=\"wr-table__group-label\">{{ entry.group.label }}</span>\n                      @if (showGroupCount()) {\n                        <span class=\"wr-table__group-count\">{{ entry.group.count }}</span>\n                      }\n                    </button>\n                  }\n                </div>\n              </td>\n            </tr>\n          } @else if (entry.kind === 'group-foot') {\n            <tr class=\"wr-table__group-foot-row\">\n              @if (rowSelection()) {\n                <td class=\"wr-table__foot-cell wr-table__foot-cell--lead\"></td>\n              }\n              @if (expandable()) {\n                <td class=\"wr-table__foot-cell wr-table__foot-cell--lead\"></td>\n              }\n              @for (col of displayColumns(); track col.key) {\n                <td\n                  class=\"wr-table__foot-cell\"\n                  [class.wr-table__td--pin-left]=\"col.column.pin === 'left'\"\n                  [class.wr-table__td--pin-right]=\"col.column.pin === 'right'\"\n                  [class.wr-table__td--pin-edge-left]=\"isPinEdge(col.key, 'left')\"\n                  [class.wr-table__td--pin-edge-right]=\"isPinEdge(col.key, 'right')\"\n                  [style.left.px]=\"leftPin(col.key)\"\n                  [style.right.px]=\"rightPin(col.key)\"\n                >\n                  {{ entry.summaries.get(col.key) ?? '' }}\n                </td>\n              }\n            </tr>\n          } @else {\n            <tr\n              class=\"wr-table__tr\"\n              [class.wr-table__tr--selected]=\"rowSelection() && isRowSelected(entry.row)\"\n              [attr.aria-rowindex]=\"virtualized() ? windowStart() + i + 2 : null\"\n            >\n              @if (rowSelection()) {\n                <td class=\"wr-table__td wr-table__td--select\">\n                  <wr-checkbox\n                    size=\"sm\"\n                    [ngModel]=\"isRowSelected(entry.row)\"\n                    (ngModelChange)=\"toggleRow(entry.row, $event)\"\n                    aria-label=\"Select row\"\n                  />\n                </td>\n              }\n              @if (expandable()) {\n                <td class=\"wr-table__td wr-table__td--expand\">\n                  <button\n                    type=\"button\"\n                    class=\"wr-table__expand-btn\"\n                    [class.wr-table__expand-btn--open]=\"isExpanded(entry.row)\"\n                    [attr.aria-expanded]=\"isExpanded(entry.row)\"\n                    aria-label=\"Toggle row details\"\n                    (click)=\"toggleExpand(entry.row)\"\n                  >\n                    <svg\n                      class=\"wr-icon__svg wr-table__expand-icon\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"2\"\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      aria-hidden=\"true\"\n                    >\n                      <path d=\"m9 18 6-6-6-6\" />\n                    </svg>\n                  </button>\n                </td>\n              }\n              @for (col of displayColumns(); track col.key) {\n                <td\n                  class=\"wr-table__td\"\n                  [class.wr-table__td--pin-left]=\"col.column.pin === 'left'\"\n                  [class.wr-table__td--pin-right]=\"col.column.pin === 'right'\"\n                  [class.wr-table__td--pin-edge-left]=\"isPinEdge(col.key, 'left')\"\n                  [class.wr-table__td--pin-edge-right]=\"isPinEdge(col.key, 'right')\"\n                  [style.left.px]=\"leftPin(col.key)\"\n                  [style.right.px]=\"rightPin(col.key)\"\n                  [attr.data-label]=\"col.column.title\"\n                >\n                  @if (templateFor(col.key); as tpl) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"tpl\"\n                      [ngTemplateOutletContext]=\"cellContext(entry.row, col.key, col.column)\"\n                    />\n                  } @else {\n                    {{ getValue(entry.row, col.key) }}\n                  }\n                </td>\n              }\n            </tr>\n            @if (expandable() && isExpanded(entry.row)) {\n              <tr class=\"wr-table__detail-row\">\n                <td class=\"wr-table__detail\" [attr.colspan]=\"totalCols()\">\n                  <ng-container\n                    [ngTemplateOutlet]=\"expandTemplate() ?? null\"\n                    [ngTemplateOutletContext]=\"expandContext(entry.row)\"\n                  />\n                </td>\n              </tr>\n            }\n          }\n        } @empty {\n          <tr>\n            <td class=\"wr-table__empty\" [attr.colspan]=\"totalCols()\">No data</td>\n          </tr>\n        }\n        @if (virtualized() && virtualWindow().padBottom > 0) {\n          <tr class=\"wr-table__spacer\" aria-hidden=\"true\">\n            <td [attr.colspan]=\"totalCols()\" [style.height.px]=\"virtualWindow().padBottom\"></td>\n          </tr>\n        }\n      }\n    </tbody>\n\n    @if (hasSummary() && items()?.length) {\n      <tfoot>\n        <tr class=\"wr-table__foot-row\">\n          @if (rowSelection()) {\n            <td class=\"wr-table__foot-cell wr-table__foot-cell--lead\"></td>\n          }\n          @if (expandable()) {\n            <td class=\"wr-table__foot-cell wr-table__foot-cell--lead\"></td>\n          }\n          @for (col of displayColumns(); track col.key) {\n            <td\n              class=\"wr-table__foot-cell\"\n              [class.wr-table__td--pin-left]=\"col.column.pin === 'left'\"\n              [class.wr-table__td--pin-right]=\"col.column.pin === 'right'\"\n              [class.wr-table__td--pin-edge-left]=\"isPinEdge(col.key, 'left')\"\n              [class.wr-table__td--pin-edge-right]=\"isPinEdge(col.key, 'right')\"\n              [style.left.px]=\"leftPin(col.key)\"\n              [style.right.px]=\"rightPin(col.key)\"\n            >\n              {{ summaryFor(col.key) }}\n            </td>\n          }\n        </tr>\n      </tfoot>\n    }\n  </table>\n</div>\n\n@if (showPager()) {\n  <div class=\"wr-table__pager\">\n    <wr-pagination [(currentPage)]=\"page\" [pageSize]=\"pageSize()\" [total]=\"resolvedTotal()\" />\n  </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: WrCheckbox, selector: "wr-checkbox", inputs: ["id", "checkboxValue", "checked", "disabled", "size", "icon", "indeterminate"], outputs: ["checkedChange", "touch"] }, { kind: "component", type: WrPagination, selector: "wr-pagination", inputs: ["currentPage", "pageSize", "total", "pageSizeOptions", "showSizeChanger", "showTotal", "align", "size", "shape", "disabled", "responsive", "ofLabel", "prevLabel", "nextLabel", "itemsPerPageLabel"], outputs: ["currentPageChange", "pageSizeChange"] }, { kind: "component", type: WrSpinner, selector: "wr-spinner", inputs: ["size"] }, { kind: "component", type: WrTableSort, selector: "wr-table-sort", inputs: ["direction"] }, { kind: "component", type: WrTableFilter, selector: "wr-table-filter", inputs: ["items"], outputs: ["selectionChange"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrTable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrTable, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-table', encapsulation: ViewEncapsulation.None, host: { class: 'wr-table', '[class.wr-table--responsive]': 'responsive()' }, imports: [NgTemplateOutlet, KeyValuePipe, WrPagination, WrSpinner, WrTableSort, WrTableFilter], template: "@if (loading()) {\n  <div class=\"wr-table__loading\">\n    <wr-spinner size=\"lg\" />\n  </div>\n}\n\n<div class=\"wr-table__scroll\">\n  <table class=\"wr-table__table\">\n    <thead>\n      <tr>\n        @for (entry of columns() | keyvalue: keepOrder; track entry.key) {\n          <th class=\"wr-table__th\">\n            <div class=\"wr-table__th-inner\">\n              <span class=\"wr-table__title\">{{ entry.value.title }}</span>\n\n              @if (entry.value.sortable) {\n                <button\n                  type=\"button\"\n                  class=\"wr-table__sort-btn\"\n                  aria-label=\"Sort column\"\n                  (click)=\"cycleSort(entry.key)\"\n                >\n                  <wr-table-sort [direction]=\"directionFor(entry.key)\" />\n                </button>\n              }\n\n              @if (entry.value.filterItems; as filterItems) {\n                @if (filterItems.length) {\n                  <wr-table-filter [items]=\"filterItems\" (selectionChange)=\"onFilter(entry.key, $event)\" />\n                }\n              }\n            </div>\n          </th>\n        }\n      </tr>\n    </thead>\n\n    <tbody>\n      @if (visibleItems(); as rows) {\n        @for (row of rows; track $index) {\n          <tr class=\"wr-table__tr\">\n            @for (entry of columns() | keyvalue: keepOrder; track entry.key) {\n              <td class=\"wr-table__td\" [attr.data-label]=\"entry.value.title\">\n                @if (templateFor(entry.key); as tpl) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"tpl\"\n                    [ngTemplateOutletContext]=\"cellContext(row, entry.key, entry.value)\"\n                  />\n                } @else {\n                  {{ getValue(row, entry.key) }}\n                }\n              </td>\n            }\n          </tr>\n        } @empty {\n          <tr>\n            <td class=\"wr-table__empty\" [attr.colspan]=\"(columns() | keyvalue).length\">No data</td>\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n@if (showPager()) {\n  <div class=\"wr-table__pager\">\n    <wr-pagination [(currentPage)]=\"page\" [pageSize]=\"pageSize()\" [total]=\"resolvedTotal()\" />\n  </div>\n}\n" }]
-        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => WrTableCell), { isSignal: true }] }] } });
+            args: [{ selector: 'wr-table', encapsulation: ViewEncapsulation.None, host: {
+                        class: 'wr-table',
+                        '[class.wr-table--responsive]': 'responsive()',
+                        '[class.wr-table--virtual]': 'virtualized()',
+                    }, imports: [
+                        NgTemplateOutlet,
+                        FormsModule,
+                        CdkDropList,
+                        CdkDrag,
+                        WrCheckbox,
+                        WrPagination,
+                        WrSpinner,
+                        WrTableSort,
+                        WrTableFilter,
+                    ], template: "@if (loading()) {\n  <div class=\"wr-table__loading\">\n    <wr-spinner size=\"lg\" />\n  </div>\n}\n\n<div\n  class=\"wr-table__scroll\"\n  #scroll\n  [style.max-height]=\"virtualized() ? resolvedViewportHeight() : null\"\n  [attr.tabindex]=\"virtualized() ? 0 : null\"\n>\n  <table\n    class=\"wr-table__table\"\n    [class.wr-table__table--fixed]=\"fixedLayoutActive()\"\n    [style.--wr-table-row-h.px]=\"virtualized() ? effRowH() : null\"\n    [attr.aria-rowcount]=\"virtualized() ? renderRows().length + 1 + (hasSummary() && items()?.length ? 1 : 0) : null\"\n  >\n    <colgroup>\n      @if (rowSelection()) {\n        <col class=\"wr-table__col--lead\" />\n      }\n      @if (expandable()) {\n        <col class=\"wr-table__col--lead\" />\n      }\n      @for (col of displayColumns(); track col.key) {\n        <col [style.width.px]=\"colWidth(col.key)\" />\n      }\n    </colgroup>\n    <thead>\n      <tr\n        cdkDropList\n        cdkDropListOrientation=\"horizontal\"\n        [cdkDropListSortPredicate]=\"sortPredicate\"\n        (cdkDropListDropped)=\"onColumnDrop($event)\"\n      >\n        @if (rowSelection()) {\n          <th class=\"wr-table__th wr-table__th--select\">\n            @if (rowSelection() === 'multiple') {\n              <wr-checkbox\n                size=\"sm\"\n                [ngModel]=\"allSelected()\"\n                [indeterminate]=\"someSelected()\"\n                (ngModelChange)=\"toggleAll($event)\"\n                aria-label=\"Select all rows\"\n              />\n            }\n          </th>\n        }\n        @if (expandable()) {\n          <th class=\"wr-table__th wr-table__th--expand\"></th>\n        }\n        @for (col of displayColumns(); track col.key) {\n          <th\n            #thCell\n            cdkDrag\n            [cdkDragDisabled]=\"!reorderable() || !!col.column.pin\"\n            class=\"wr-table__th\"\n            [class.wr-table__th--draggable]=\"reorderable() && !col.column.pin\"\n            [class.wr-table__th--pin-left]=\"col.column.pin === 'left'\"\n            [class.wr-table__th--pin-right]=\"col.column.pin === 'right'\"\n            [class.wr-table__th--pin-edge-left]=\"isPinEdge(col.key, 'left')\"\n            [class.wr-table__th--pin-edge-right]=\"isPinEdge(col.key, 'right')\"\n            [style.left.px]=\"leftPin(col.key)\"\n            [style.right.px]=\"rightPin(col.key)\"\n          >\n            <div class=\"wr-table__th-inner\">\n              <span class=\"wr-table__title\">{{ col.column.title }}</span>\n\n              @if (col.column.sortable) {\n                <button type=\"button\" class=\"wr-table__sort-btn\" aria-label=\"Sort column\" (click)=\"cycleSort(col.key)\">\n                  <wr-table-sort [direction]=\"directionFor(col.key)\" />\n                </button>\n              }\n\n              @if (col.column.filterItems; as filterItems) {\n                @if (filterItems.length) {\n                  <wr-table-filter [items]=\"filterItems\" (selectionChange)=\"onFilter(col.key, $event)\" />\n                }\n              }\n            </div>\n\n            @if (col.column.resizable) {\n              <span\n                class=\"wr-table__resize-handle\"\n                aria-hidden=\"true\"\n                (pointerdown)=\"onResizeStart($event, col.key, thCell)\"\n                (pointermove)=\"onResizeMove($event)\"\n                (pointerup)=\"onResizeEnd($event)\"\n                (pointercancel)=\"onResizeEnd($event)\"\n                (mousedown)=\"$event.stopPropagation()\"\n                (touchstart)=\"$event.stopPropagation()\"\n              ></span>\n            }\n          </th>\n        }\n      </tr>\n    </thead>\n\n    <tbody>\n      @if (visibleItems()) {\n        @if (virtualized() && virtualWindow().padTop > 0) {\n          <tr class=\"wr-table__spacer\" aria-hidden=\"true\">\n            <td [attr.colspan]=\"totalCols()\" [style.height.px]=\"virtualWindow().padTop\"></td>\n          </tr>\n        }\n        @for (entry of windowRows(); track entry.id; let i = $index) {\n          @if (entry.kind === 'group') {\n            <tr class=\"wr-table__group-row\" [class.wr-table__group-row--collapsed]=\"entry.group.collapsed\">\n              <td class=\"wr-table__group-cell\" [attr.colspan]=\"totalCols()\">\n                <!-- The cell spans the full table width; this inner box is what sticks. -->\n                <div class=\"wr-table__group-inner\">\n                  @if (rowSelection() === 'multiple') {\n                    <wr-checkbox\n                      class=\"wr-table__group-select\"\n                      size=\"sm\"\n                      [ngModel]=\"groupChecked(entry.group.rows)\"\n                      [indeterminate]=\"groupIndeterminate(entry.group.rows)\"\n                      (ngModelChange)=\"toggleGroupSelection(entry.group.rows, $event)\"\n                      aria-label=\"Select group\"\n                    />\n                  }\n                  @if (groupTemplate(); as tpl) {\n                    <button\n                      type=\"button\"\n                      class=\"wr-table__group-toggle wr-table__group-toggle--icon\"\n                      [attr.aria-expanded]=\"!entry.group.collapsed\"\n                      aria-label=\"Toggle group\"\n                      (click)=\"toggleGroupCollapse(entry.group.value)\"\n                    >\n                      <svg\n                        class=\"wr-icon__svg wr-table__group-icon\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"2\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"m9 18 6-6-6-6\" />\n                      </svg>\n                    </button>\n                    <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"entry.group\" />\n                  } @else {\n                    <button\n                      type=\"button\"\n                      class=\"wr-table__group-toggle\"\n                      [attr.aria-expanded]=\"!entry.group.collapsed\"\n                      (click)=\"toggleGroupCollapse(entry.group.value)\"\n                    >\n                      <svg\n                        class=\"wr-icon__svg wr-table__group-icon\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"2\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"m9 18 6-6-6-6\" />\n                      </svg>\n                      <span class=\"wr-table__group-label\">{{ entry.group.label }}</span>\n                      @if (showGroupCount()) {\n                        <span class=\"wr-table__group-count\">{{ entry.group.count }}</span>\n                      }\n                    </button>\n                  }\n                </div>\n              </td>\n            </tr>\n          } @else if (entry.kind === 'group-foot') {\n            <tr class=\"wr-table__group-foot-row\">\n              @if (rowSelection()) {\n                <td class=\"wr-table__foot-cell wr-table__foot-cell--lead\"></td>\n              }\n              @if (expandable()) {\n                <td class=\"wr-table__foot-cell wr-table__foot-cell--lead\"></td>\n              }\n              @for (col of displayColumns(); track col.key) {\n                <td\n                  class=\"wr-table__foot-cell\"\n                  [class.wr-table__td--pin-left]=\"col.column.pin === 'left'\"\n                  [class.wr-table__td--pin-right]=\"col.column.pin === 'right'\"\n                  [class.wr-table__td--pin-edge-left]=\"isPinEdge(col.key, 'left')\"\n                  [class.wr-table__td--pin-edge-right]=\"isPinEdge(col.key, 'right')\"\n                  [style.left.px]=\"leftPin(col.key)\"\n                  [style.right.px]=\"rightPin(col.key)\"\n                >\n                  {{ entry.summaries.get(col.key) ?? '' }}\n                </td>\n              }\n            </tr>\n          } @else {\n            <tr\n              class=\"wr-table__tr\"\n              [class.wr-table__tr--selected]=\"rowSelection() && isRowSelected(entry.row)\"\n              [attr.aria-rowindex]=\"virtualized() ? windowStart() + i + 2 : null\"\n            >\n              @if (rowSelection()) {\n                <td class=\"wr-table__td wr-table__td--select\">\n                  <wr-checkbox\n                    size=\"sm\"\n                    [ngModel]=\"isRowSelected(entry.row)\"\n                    (ngModelChange)=\"toggleRow(entry.row, $event)\"\n                    aria-label=\"Select row\"\n                  />\n                </td>\n              }\n              @if (expandable()) {\n                <td class=\"wr-table__td wr-table__td--expand\">\n                  <button\n                    type=\"button\"\n                    class=\"wr-table__expand-btn\"\n                    [class.wr-table__expand-btn--open]=\"isExpanded(entry.row)\"\n                    [attr.aria-expanded]=\"isExpanded(entry.row)\"\n                    aria-label=\"Toggle row details\"\n                    (click)=\"toggleExpand(entry.row)\"\n                  >\n                    <svg\n                      class=\"wr-icon__svg wr-table__expand-icon\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"2\"\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      aria-hidden=\"true\"\n                    >\n                      <path d=\"m9 18 6-6-6-6\" />\n                    </svg>\n                  </button>\n                </td>\n              }\n              @for (col of displayColumns(); track col.key) {\n                <td\n                  class=\"wr-table__td\"\n                  [class.wr-table__td--pin-left]=\"col.column.pin === 'left'\"\n                  [class.wr-table__td--pin-right]=\"col.column.pin === 'right'\"\n                  [class.wr-table__td--pin-edge-left]=\"isPinEdge(col.key, 'left')\"\n                  [class.wr-table__td--pin-edge-right]=\"isPinEdge(col.key, 'right')\"\n                  [style.left.px]=\"leftPin(col.key)\"\n                  [style.right.px]=\"rightPin(col.key)\"\n                  [attr.data-label]=\"col.column.title\"\n                >\n                  @if (templateFor(col.key); as tpl) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"tpl\"\n                      [ngTemplateOutletContext]=\"cellContext(entry.row, col.key, col.column)\"\n                    />\n                  } @else {\n                    {{ getValue(entry.row, col.key) }}\n                  }\n                </td>\n              }\n            </tr>\n            @if (expandable() && isExpanded(entry.row)) {\n              <tr class=\"wr-table__detail-row\">\n                <td class=\"wr-table__detail\" [attr.colspan]=\"totalCols()\">\n                  <ng-container\n                    [ngTemplateOutlet]=\"expandTemplate() ?? null\"\n                    [ngTemplateOutletContext]=\"expandContext(entry.row)\"\n                  />\n                </td>\n              </tr>\n            }\n          }\n        } @empty {\n          <tr>\n            <td class=\"wr-table__empty\" [attr.colspan]=\"totalCols()\">No data</td>\n          </tr>\n        }\n        @if (virtualized() && virtualWindow().padBottom > 0) {\n          <tr class=\"wr-table__spacer\" aria-hidden=\"true\">\n            <td [attr.colspan]=\"totalCols()\" [style.height.px]=\"virtualWindow().padBottom\"></td>\n          </tr>\n        }\n      }\n    </tbody>\n\n    @if (hasSummary() && items()?.length) {\n      <tfoot>\n        <tr class=\"wr-table__foot-row\">\n          @if (rowSelection()) {\n            <td class=\"wr-table__foot-cell wr-table__foot-cell--lead\"></td>\n          }\n          @if (expandable()) {\n            <td class=\"wr-table__foot-cell wr-table__foot-cell--lead\"></td>\n          }\n          @for (col of displayColumns(); track col.key) {\n            <td\n              class=\"wr-table__foot-cell\"\n              [class.wr-table__td--pin-left]=\"col.column.pin === 'left'\"\n              [class.wr-table__td--pin-right]=\"col.column.pin === 'right'\"\n              [class.wr-table__td--pin-edge-left]=\"isPinEdge(col.key, 'left')\"\n              [class.wr-table__td--pin-edge-right]=\"isPinEdge(col.key, 'right')\"\n              [style.left.px]=\"leftPin(col.key)\"\n              [style.right.px]=\"rightPin(col.key)\"\n            >\n              {{ summaryFor(col.key) }}\n            </td>\n          }\n        </tr>\n      </tfoot>\n    }\n  </table>\n</div>\n\n@if (showPager()) {\n  <div class=\"wr-table__pager\">\n    <wr-pagination [(currentPage)]=\"page\" [pageSize]=\"pageSize()\" [total]=\"resolvedTotal()\" />\n  </div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], columnOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnOrder", required: false }] }, { type: i0.Output, args: ["columnOrderChange"] }], rowSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSelection", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], collapsedGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedGroups", required: false }] }, { type: i0.Output, args: ["collapsedGroupsChange"] }], groupSummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupSummary", required: false }] }], showGroupCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGroupCount", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], viewportHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewportHeight", required: false }] }], overscan: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscan", required: false }] }], cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => WrTableCell), { isSignal: true }] }], headerCells: [{ type: i0.ViewChildren, args: ['thCell', { isSignal: true }] }], scrollEl: [{ type: i0.ViewChild, args: ['scroll', { isSignal: true }] }], expandTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => WrTableExpand), { isSignal: true }] }], groupTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => WrTableGroupHeader), { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { WrTable, WrTableCell, WrTableFilter, WrTableSort };
+export { WrTable, WrTableCell, WrTableExpand, WrTableFilter, WrTableGroupHeader, WrTableSort };
 //# sourceMappingURL=ngwr-table.mjs.map