@tailng-ui/primitives 0.40.0 → 0.42.0

package/src/lib/layout/table/__tests__/tng-table.test-harness.js

@@ -0,0 +1,2492 @@
+import { Component, ViewChild, computed, signal } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { createTngFilterController, createTngPaginationController, createTngSortController, } from '@tailng-ui/cdk';
+import { TngSortHeader, TngTable, TngTableBody, TngTableCell, TngTableCellOutlet, TngTableCellTpl, TngTableColumn, TngTableColumnResizer, TngTableColumnSizing, createTngTableIntlDateFormatter, createTngTableIntlNumberFormatter, TngTableEmpty, TngTableError, TngTableExpansion, TngTableFooter, TngTableFooterOutlet, TngTableFooterTpl, TngTableHeader, TngTableHeaderCell, TngTableHeaderOutlet, TngTableHeaderTpl, TngTableLoading, TngTablePagination, TngTableRow, TngTableRowExpander, TngTableSelection, TngTableScrollContainer, TngTableVirtual, TngTableVirtualSpacer, TngTableSort, TngTableToolbar, } from '..';
+import { TngPopover, TngPopoverPanel, TngPopoverTrigger, } from '../../../overlay';
+import * as i0 from "@angular/core";
+export function getByTestId(fixture, testId) {
+    const element = fixture.nativeElement.querySelector(`[data-testid="${testId}"]`);
+    if (element === null) {
+        throw new Error(`Expected element for data-testid="${testId}".`);
+    }
+    return element;
+}
+export function queryAllByTestId(fixture, testId) {
+    return Array.from(fixture.nativeElement.querySelectorAll(`[data-testid="${testId}"]`));
+}
+export function dispatchKeydown(element, key, init = {}) {
+    const event = new KeyboardEvent('keydown', {
+        bubbles: true,
+        cancelable: true,
+        key,
+        ...init,
+    });
+    element.dispatchEvent(event);
+    return event;
+}
+export function dispatchMouseEvent(element, type, init = {}) {
+    const event = new MouseEvent(type, {
+        bubbles: true,
+        cancelable: true,
+        ...init,
+    });
+    element.dispatchEvent(event);
+    return event;
+}
+function renderDynamicCell(row, columnId) {
+    switch (columnId) {
+        case 'label':
+            return row.label ?? '';
+        case 'status':
+            return row.status ?? '';
+        case 'value':
+            return row.value === null || row.value === undefined ? '' : String(row.value);
+    }
+}
+export class TableHarnessComponent {
+    ariaLabel = signal('Harness table', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    dir = signal('ltr', ...(ngDevMode ? [{ debugName: "dir" }] : []));
+    error = signal(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    filterable = signal(false, ...(ngDevMode ? [{ debugName: "filterable" }] : []));
+    items = signal([
+        { id: 'alpha', label: 'Alpha' },
+    ], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    pageable = signal(false, ...(ngDevMode ? [{ debugName: "pageable" }] : []));
+    showFooter = signal(true, ...(ngDevMode ? [{ debugName: "showFooter" }] : []));
+    showHeader = signal(true, ...(ngDevMode ? [{ debugName: "showHeader" }] : []));
+    renderedItems = computed(() => this.items() ?? [], ...(ngDevMode ? [{ debugName: "renderedItems" }] : []));
+    tableRef;
+    headerRef;
+    bodyRef;
+    footerRef;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableHarnessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TableHarnessComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "tableRef", first: true, predicate: ["tableRef"], descendants: true, static: true }, { propertyName: "headerRef", first: true, predicate: ["headerRef"], descendants: true }, { propertyName: "bodyRef", first: true, predicate: ["bodyRef"], descendants: true, static: true }, { propertyName: "footerRef", first: true, predicate: ["footerRef"], descendants: true }], ngImport: i0, template: `
+    <section tngTableToolbar data-testid="toolbar">Toolbar</section>
+
+    <table
+      tngTable
+      #tableRef="tngTable"
+      data-testid="table"
+      [ariaLabel]="ariaLabel()"
+      [dir]="dir()"
+      [error]="error()"
+      [filterable]="filterable()"
+      [items]="items()"
+      [loading]="loading()"
+      [pageable]="pageable()"
+    >
+      @if (showHeader()) {
+        <thead tngTableHeader #headerRef="tngTableHeader" data-testid="header">
+          <tr tngTableRow data-testid="header-row">
+            <th tngTableHeaderCell data-testid="header-cell">Label</th>
+          </tr>
+        </thead>
+      }
+
+      <tbody tngTableBody #bodyRef="tngTableBody" data-testid="body">
+        @for (item of renderedItems(); track item.id) {
+          <tr tngTableRow data-testid="body-row">
+            <td tngTableCell data-testid="body-cell">{{ item.label }}</td>
+          </tr>
+        }
+      </tbody>
+
+      @if (showFooter()) {
+        <tfoot tngTableFooter #footerRef="tngTableFooter" data-testid="footer">
+          <tr tngTableRow data-testid="footer-row">
+            <td tngTableCell data-testid="footer-cell">Footer</td>
+          </tr>
+        </tfoot>
+      }
+    </table>
+
+    @if (loading()) {
+      <div data-testid="loading-slot" tngTableLoading>Loading</div>
+    }
+
+    @if (!loading() && renderedItems().length === 0) {
+      <div data-testid="empty-slot" tngTableEmpty>Empty</div>
+    }
+
+    @if (error()) {
+      <div data-testid="error-slot" tngTableError>Error</div>
+    }
+
+    <nav tngTablePagination data-testid="pagination">Pagination</nav>
+  `, isInline: true, dependencies: [{ kind: "directive", type: TngTable, selector: "table[tngTable]", inputs: ["items", "error", "filterable", "tngTableLayout", "loading", "pageable", "rowId", "dir", "ariaLabel", "ariaLabelledby"], exportAs: ["tngTable"] }, { kind: "directive", type: TngTableHeader, selector: "thead[tngTableHeader]", inputs: ["tngTableHeaderSticky", "tngTableHeaderStickyOffset"], exportAs: ["tngTableHeader"] }, { kind: "directive", type: TngTableBody, selector: "tbody[tngTableBody]", exportAs: ["tngTableBody"] }, { kind: "directive", type: TngTableFooter, selector: "tfoot[tngTableFooter]", inputs: ["tngTableFooterSticky", "tngTableFooterStickyOffset"], exportAs: ["tngTableFooter"] }, { kind: "directive", type: TngTableRow, selector: "tr[tngTableRow]", inputs: ["tngTableRowDisabled", "tngTableRowExpanded", "tngTableRowId", "tngTableRowSelected"], outputs: ["rowClick", "rowContextMenu"], exportAs: ["tngTableRow"] }, { kind: "directive", type: TngTableHeaderCell, selector: "th[tngTableHeaderCell]", inputs: ["tngTableColumnId", "tngTableStickyColumn", "tngTableStickyOffset", "tngTableTruncate"], exportAs: ["tngTableHeaderCell"] }, { kind: "directive", type: TngTableCell, selector: "td[tngTableCell]", inputs: ["tngTableColumnId", "tngTableHeaders", "tngTableStickyColumn", "tngTableStickyOffset", "tngTableTruncate"], outputs: ["cellClick"], exportAs: ["tngTableCell"] }, { kind: "directive", type: TngTableToolbar, selector: "[tngTableToolbar]", exportAs: ["tngTableToolbar"] }, { kind: "directive", type: TngTableLoading, selector: "[tngTableLoading]", exportAs: ["tngTableLoading"] }, { kind: "directive", type: TngTableEmpty, selector: "[tngTableEmpty]", exportAs: ["tngTableEmpty"] }, { kind: "directive", type: TngTableError, selector: "[tngTableError]", exportAs: ["tngTableError"] }, { kind: "directive", type: TngTablePagination, selector: "[tngTablePagination]", exportAs: ["tngTablePagination"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableHarnessComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [
+                        TngTable,
+                        TngTableHeader,
+                        TngTableBody,
+                        TngTableFooter,
+                        TngTableRow,
+                        TngTableHeaderCell,
+                        TngTableCell,
+                        TngTableToolbar,
+                        TngTableLoading,
+                        TngTableEmpty,
+                        TngTableError,
+                        TngTablePagination,
+                    ],
+                    template: `
+    <section tngTableToolbar data-testid="toolbar">Toolbar</section>
+
+    <table
+      tngTable
+      #tableRef="tngTable"
+      data-testid="table"
+      [ariaLabel]="ariaLabel()"
+      [dir]="dir()"
+      [error]="error()"
+      [filterable]="filterable()"
+      [items]="items()"
+      [loading]="loading()"
+      [pageable]="pageable()"
+    >
+      @if (showHeader()) {
+        <thead tngTableHeader #headerRef="tngTableHeader" data-testid="header">
+          <tr tngTableRow data-testid="header-row">
+            <th tngTableHeaderCell data-testid="header-cell">Label</th>
+          </tr>
+        </thead>
+      }
+
+      <tbody tngTableBody #bodyRef="tngTableBody" data-testid="body">
+        @for (item of renderedItems(); track item.id) {
+          <tr tngTableRow data-testid="body-row">
+            <td tngTableCell data-testid="body-cell">{{ item.label }}</td>
+          </tr>
+        }
+      </tbody>
+
+      @if (showFooter()) {
+        <tfoot tngTableFooter #footerRef="tngTableFooter" data-testid="footer">
+          <tr tngTableRow data-testid="footer-row">
+            <td tngTableCell data-testid="footer-cell">Footer</td>
+          </tr>
+        </tfoot>
+      }
+    </table>
+
+    @if (loading()) {
+      <div data-testid="loading-slot" tngTableLoading>Loading</div>
+    }
+
+    @if (!loading() && renderedItems().length === 0) {
+      <div data-testid="empty-slot" tngTableEmpty>Empty</div>
+    }
+
+    @if (error()) {
+      <div data-testid="error-slot" tngTableError>Error</div>
+    }
+
+    <nav tngTablePagination data-testid="pagination">Pagination</nav>
+  `,
+                }]
+        }], propDecorators: { tableRef: [{
+                type: ViewChild,
+                args: ['tableRef', { static: true }]
+            }], headerRef: [{
+                type: ViewChild,
+                args: ['headerRef']
+            }], bodyRef: [{
+                type: ViewChild,
+                args: ['bodyRef', { static: true }]
+            }], footerRef: [{
+                type: ViewChild,
+                args: ['footerRef']
+            }] } });
+export class TableSortHarnessComponent {
+    activeColumnId = signal(undefined, ...(ngDevMode ? [{ debugName: "activeColumnId" }] : []));
+    controlled = signal(false, ...(ngDevMode ? [{ debugName: "controlled" }] : []));
+    direction = signal(undefined, ...(ngDevMode ? [{ debugName: "direction" }] : []));
+    headerDisabled = signal(false, ...(ngDevMode ? [{ debugName: "headerDisabled" }] : []));
+    showHeader = signal(true, ...(ngDevMode ? [{ debugName: "showHeader" }] : []));
+    sortRef;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableSortHarnessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TableSortHarnessComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "sortRef", first: true, predicate: ["sortRef"], descendants: true }], ngImport: i0, template: `
+    @if (controlled()) {
+      <table
+        tngTable
+        tngTableSort
+        #sortRef="tngTableSort"
+        data-testid="table"
+        [tngTableSortActive]="activeColumnId()"
+        [tngTableSortDirection]="direction()"
+      >
+        @if (showHeader()) {
+          <thead tngTableHeader data-testid="header">
+            <tr tngTableRow>
+              <th
+                tngTableHeaderCell
+                [tngSortHeader]="'label'"
+                [tngSortHeaderDisabled]="headerDisabled()"
+                data-testid="sort-header"
+              >
+                Label
+              </th>
+            </tr>
+          </thead>
+        }
+
+        <tbody tngTableBody>
+          <tr tngTableRow>
+            <td tngTableCell>Alpha</td>
+          </tr>
+        </tbody>
+      </table>
+    } @else {
+      <table
+        tngTable
+        tngTableSort
+        #sortRef="tngTableSort"
+        data-testid="table"
+      >
+        @if (showHeader()) {
+          <thead tngTableHeader data-testid="header">
+            <tr tngTableRow>
+              <th
+                tngTableHeaderCell
+                [tngSortHeader]="'label'"
+                [tngSortHeaderDisabled]="headerDisabled()"
+                data-testid="sort-header"
+              >
+                Label
+              </th>
+            </tr>
+          </thead>
+        }
+
+        <tbody tngTableBody>
+          <tr tngTableRow>
+            <td tngTableCell>Alpha</td>
+          </tr>
+        </tbody>
+      </table>
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: TngTable, selector: "table[tngTable]", inputs: ["items", "error", "filterable", "tngTableLayout", "loading", "pageable", "rowId", "dir", "ariaLabel", "ariaLabelledby"], exportAs: ["tngTable"] }, { kind: "directive", type: TngTableHeader, selector: "thead[tngTableHeader]", inputs: ["tngTableHeaderSticky", "tngTableHeaderStickyOffset"], exportAs: ["tngTableHeader"] }, { kind: "directive", type: TngTableBody, selector: "tbody[tngTableBody]", exportAs: ["tngTableBody"] }, { kind: "directive", type: TngTableRow, selector: "tr[tngTableRow]", inputs: ["tngTableRowDisabled", "tngTableRowExpanded", "tngTableRowId", "tngTableRowSelected"], outputs: ["rowClick", "rowContextMenu"], exportAs: ["tngTableRow"] }, { kind: "directive", type: TngTableHeaderCell, selector: "th[tngTableHeaderCell]", inputs: ["tngTableColumnId", "tngTableStickyColumn", "tngTableStickyOffset", "tngTableTruncate"], exportAs: ["tngTableHeaderCell"] }, { kind: "directive", type: TngTableCell, selector: "td[tngTableCell]", inputs: ["tngTableColumnId", "tngTableHeaders", "tngTableStickyColumn", "tngTableStickyOffset", "tngTableTruncate"], outputs: ["cellClick"], exportAs: ["tngTableCell"] }, { kind: "directive", type: TngTableSort, selector: "[tngTableSort]", inputs: ["tngTableSortActive", "tngTableSortDirection", "tngTableSortDisableClear"], outputs: ["sortChange"], exportAs: ["tngTableSort"] }, { kind: "directive", type: TngSortHeader, selector: "th[tngSortHeader]", inputs: ["tngSortHeader", "tngSortHeaderDisabled"], exportAs: ["tngSortHeader"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableSortHarnessComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [
+                        TngTable,
+                        TngTableHeader,
+                        TngTableBody,
+                        TngTableRow,
+                        TngTableHeaderCell,
+                        TngTableCell,
+                        TngTableSort,
+                        TngSortHeader,
+                    ],
+                    template: `
+    @if (controlled()) {
+      <table
+        tngTable
+        tngTableSort
+        #sortRef="tngTableSort"
+        data-testid="table"
+        [tngTableSortActive]="activeColumnId()"
+        [tngTableSortDirection]="direction()"
+      >
+        @if (showHeader()) {
+          <thead tngTableHeader data-testid="header">
+            <tr tngTableRow>
+              <th
+                tngTableHeaderCell
+                [tngSortHeader]="'label'"
+                [tngSortHeaderDisabled]="headerDisabled()"
+                data-testid="sort-header"
+              >
+                Label
+              </th>
+            </tr>
+          </thead>
+        }
+
+        <tbody tngTableBody>
+          <tr tngTableRow>
+            <td tngTableCell>Alpha</td>
+          </tr>
+        </tbody>
+      </table>
+    } @else {
+      <table
+        tngTable
+        tngTableSort
+        #sortRef="tngTableSort"
+        data-testid="table"
+      >
+        @if (showHeader()) {
+          <thead tngTableHeader data-testid="header">
+            <tr tngTableRow>
+              <th
+                tngTableHeaderCell
+                [tngSortHeader]="'label'"
+                [tngSortHeaderDisabled]="headerDisabled()"
+                data-testid="sort-header"
+              >
+                Label
+              </th>
+            </tr>
+          </thead>
+        }
+
+        <tbody tngTableBody>
+          <tr tngTableRow>
+            <td tngTableCell>Alpha</td>
+          </tr>
+        </tbody>
+      </table>
+    }
+  `,
+                }]
+        }], propDecorators: { sortRef: [{
+                type: ViewChild,
+                args: ['sortRef']
+            }] } });
+export class TableSelectionHarnessComponent {
+    hiddenIds = signal([], ...(ngDevMode ? [{ debugName: "hiddenIds" }] : []));
+    rows = signal([
+        { id: 'alpha', label: 'Alpha' },
+        { id: 'beta', label: 'Beta' },
+        { disabled: true, id: 'gamma', label: 'Gamma' },
+        { id: 'delta', label: 'Delta' },
+    ], ...(ngDevMode ? [{ debugName: "rows" }] : []));
+    selectedIds = signal([], ...(ngDevMode ? [{ debugName: "selectedIds" }] : []));
+    selectionMode = signal('single', ...(ngDevMode ? [{ debugName: "selectionMode" }] : []));
+    selectionEvents = [];
+    visibleRows = computed(() => this.rows().filter((row) => !this.hiddenIds().includes(row.id)), ...(ngDevMode ? [{ debugName: "visibleRows" }] : []));
+    selectionRef;
+    onSelectionChange(event) {
+        this.selectedIds.set(event.selectedIds);
+        this.selectionEvents.push(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableSelectionHarnessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TableSelectionHarnessComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "selectionRef", first: true, predicate: ["selectionRef"], descendants: true, static: true }], ngImport: i0, template: `
+    <table
+      tngTable
+      tngTableSelection
+      #selectionRef="tngTableSelection"
+      data-testid="selection-table"
+      [tngTableSelectedIds]="selectedIds()"
+      [tngTableSelectionMode]="selectionMode()"
+      (selectionChange)="onSelectionChange($event)"
+    >
+      <thead tngTableHeader>
+        <tr tngTableRow>
+          <th tngTableHeaderCell [tngTableColumnId]="'label'" data-testid="selection-header">
+            Label
+          </th>
+        </tr>
+      </thead>
+
+      <tbody tngTableBody>
+        @for (row of visibleRows(); track row.id) {
+          <tr
+            tngTableRow
+            [attr.data-testid]="'selection-row-' + row.id"
+            [tngTableRowDisabled]="row.disabled ?? false"
+            [tngTableRowId]="row.id"
+          >
+            <td
+              tngTableCell
+              [attr.data-testid]="'selection-cell-' + row.id"
+              [tngTableColumnId]="'label'"
+            >
+              {{ row.label }}
+            </td>
+          </tr>
+        }
+      </tbody>
+    </table>
+  `, isInline: true, dependencies: [{ kind: "directive", type: TngTable, selector: "table[tngTable]", inputs: ["items", "error", "filterable", "tngTableLayout", "loading", "pageable", "rowId", "dir", "ariaLabel", "ariaLabelledby"], exportAs: ["tngTable"] }, { kind: "directive", type: TngTableBody, selector: "tbody[tngTableBody]", exportAs: ["tngTableBody"] }, { kind: "directive", type: TngTableCell, selector: "td[tngTableCell]", inputs: ["tngTableColumnId", "tngTableHeaders", "tngTableStickyColumn", "tngTableStickyOffset", "tngTableTruncate"], outputs: ["cellClick"], exportAs: ["tngTableCell"] }, { kind: "directive", type: TngTableHeader, selector: "thead[tngTableHeader]", inputs: ["tngTableHeaderSticky", "tngTableHeaderStickyOffset"], exportAs: ["tngTableHeader"] }, { kind: "directive", type: TngTableHeaderCell, selector: "th[tngTableHeaderCell]", inputs: ["tngTableColumnId", "tngTableStickyColumn", "tngTableStickyOffset", "tngTableTruncate"], exportAs: ["tngTableHeaderCell"] }, { kind: "directive", type: TngTableRow, selector: "tr[tngTableRow]", inputs: ["tngTableRowDisabled", "tngTableRowExpanded", "tngTableRowId", "tngTableRowSelected"], outputs: ["rowClick", "rowContextMenu"], exportAs: ["tngTableRow"] }, { kind: "directive", type: TngTableSelection, selector: "table[tngTable][tngTableSelection]", inputs: ["tngTableSelectionMode", "tngTableSelectedIds"], outputs: ["selectionChange"], exportAs: ["tngTableSelection"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableSelectionHarnessComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [
+                        TngTable,
+                        TngTableBody,
+                        TngTableCell,
+                        TngTableHeader,
+                        TngTableHeaderCell,
+                        TngTableRow,
+                        TngTableSelection,
+                    ],
+                    template: `
+    <table
+      tngTable
+      tngTableSelection
+      #selectionRef="tngTableSelection"
+      data-testid="selection-table"
+      [tngTableSelectedIds]="selectedIds()"
+      [tngTableSelectionMode]="selectionMode()"
+      (selectionChange)="onSelectionChange($event)"
+    >
+      <thead tngTableHeader>
+        <tr tngTableRow>
+          <th tngTableHeaderCell [tngTableColumnId]="'label'" data-testid="selection-header">
+            Label
+          </th>
+        </tr>
+      </thead>
+
+      <tbody tngTableBody>
+        @for (row of visibleRows(); track row.id) {
+          <tr
+            tngTableRow
+            [attr.data-testid]="'selection-row-' + row.id"
+            [tngTableRowDisabled]="row.disabled ?? false"
+            [tngTableRowId]="row.id"
+          >
+            <td
+              tngTableCell
+              [attr.data-testid]="'selection-cell-' + row.id"
+              [tngTableColumnId]="'label'"
+            >
+              {{ row.label }}
+            </td>
+          </tr>
+        }
+      </tbody>
+    </table>
+  `,
+                }]
+        }], propDecorators: { selectionRef: [{
+                type: ViewChild,
+                args: ['selectionRef', { static: true }]
+            }] } });
+export class TableExpansionHarnessComponent {
+    expandedIds = signal([], ...(ngDevMode ? [{ debugName: "expandedIds" }] : []));
+    expansionEvents = [];
+    expansionMode = signal('multiple', ...(ngDevMode ? [{ debugName: "expansionMode" }] : []));
+    rows = signal([
+        { id: 'alpha', label: 'Alpha', status: 'Ready', value: 1 },
+        { id: 'beta', label: 'Beta', status: 'Review', value: 2 },
+        { id: 'gamma', label: 'Gamma', status: 'Draft', value: 3 },
+    ], ...(ngDevMode ? [{ debugName: "rows" }] : []));
+    visibleColumns = signal([
+        { id: 'label', label: 'Label' },
+        { id: 'status', label: 'Status' },
+        { id: 'value', label: 'Value' },
+    ], ...(ngDevMode ? [{ debugName: "visibleColumns" }] : []));
+    expansionRef;
+    isExpanded(rowId) {
+        return this.expandedIds().includes(rowId);
+    }
+    onExpansionChange(event) {
+        this.expandedIds.set(event.expandedIds);
+        this.expansionEvents.push(event);
+    }
+    renderCell(row, columnId) {
+        return renderDynamicCell(row, columnId);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableExpansionHarnessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TableExpansionHarnessComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "expansionRef", first: true, predicate: ["expansionRef"], descendants: true, static: true }], ngImport: i0, template: `
+    <table
+      tngTable
+      tngTableExpansion
+      #expansionRef="tngTableExpansion"
+      data-testid="expansion-table"
+      [tngTableExpandedIds]="expandedIds()"
+      [tngTableExpansionMode]="expansionMode()"
+      (expansionChange)="onExpansionChange($event)"
+    >
+      <thead tngTableHeader>
+        <tr tngTableRow>
+          <th tngTableHeaderCell data-testid="expander-header">Expand</th>
+          @for (column of visibleColumns(); track column.id) {
+            <th
+              tngTableHeaderCell
+              [attr.data-testid]="'expansion-header-' + column.id"
+              [tngTableColumnId]="column.id"
+            >
+              {{ column.label }}
+            </th>
+          }
+        </tr>
+      </thead>
+
+      <tbody tngTableBody>
+        @for (row of rows(); track row.id) {
+          <tr
+            tngTableRow
+            [attr.data-testid]="'expansion-row-' + row.id"
+            [tngTableRowId]="row.id"
+          >
+            <td tngTableCell [tngTableColumnId]="'label'">
+              <div
+                tabindex="0"
+                [attr.data-testid]="'expander-' + row.id"
+                [tngTableRowExpander]="row.id"
+              >
+                Toggle
+              </div>
+            </td>
+            @for (column of visibleColumns(); track column.id) {
+              <td
+                tngTableCell
+                [attr.data-testid]="'expansion-cell-' + row.id + '-' + column.id"
+                [tngTableColumnId]="column.id"
+              >
+                {{ renderCell(row, column.id) }}
+              </td>
+            }
+          </tr>
+
+          @if (isExpanded(row.id)) {
+            <tr
+              tngTableRow
+              [attr.data-testid]="'detail-row-' + row.id"
+              [tngTableRowExpanded]="true"
+              [tngTableRowId]="row.id + '-detail'"
+            >
+              <td
+                tngTableCell
+                [attr.colspan]="visibleColumns().length + 1"
+                [attr.data-testid]="'detail-cell-' + row.id"
+              >
+                Details for {{ row.label }}
+              </td>
+            </tr>
+          }
+        }
+      </tbody>
+    </table>
+  `, isInline: true, dependencies: [{ kind: "directive", type: TngTable, selector: "table[tngTable]", inputs: ["items", "error", "filterable", "tngTableLayout", "loading", "pageable", "rowId", "dir", "ariaLabel", "ariaLabelledby"], exportAs: ["tngTable"] }, { kind: "directive", type: TngTableBody, selector: "tbody[tngTableBody]", exportAs: ["tngTableBody"] }, { kind: "directive", type: TngTableCell, selector: "td[tngTableCell]", inputs: ["tngTableColumnId", "tngTableHeaders", "tngTableStickyColumn", "tngTableStickyOffset", "tngTableTruncate"], outputs: ["cellClick"], exportAs: ["tngTableCell"] }, { kind: "directive", type: TngTableExpansion, selector: "table[tngTable][tngTableExpansion]", inputs: ["tngTableExpandedIds", "tngTableExpansionMode"], outputs: ["expansionChange"], exportAs: ["tngTableExpansion"] }, { kind: "directive", type: TngTableHeader, selector: "thead[tngTableHeader]", inputs: ["tngTableHeaderSticky", "tngTableHeaderStickyOffset"], exportAs: ["tngTableHeader"] }, { kind: "directive", type: TngTableHeaderCell, selector: "th[tngTableHeaderCell]", inputs: ["tngTableColumnId", "tngTableStickyColumn", "tngTableStickyOffset", "tngTableTruncate"], exportAs: ["tngTableHeaderCell"] }, { kind: "directive", type: TngTableRow, selector: "tr[tngTableRow]", inputs: ["tngTableRowDisabled", "tngTableRowExpanded", "tngTableRowId", "tngTableRowSelected"], outputs: ["rowClick", "rowContextMenu"], exportAs: ["tngTableRow"] }, { kind: "directive", type: TngTableRowExpander, selector: "[tngTableRowExpander]", inputs: ["tngTableRowExpander"], exportAs: ["tngTableRowExpander"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableExpansionHarnessComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [
+                        TngTable,
+                        TngTableBody,
+                        TngTableCell,
+                        TngTableExpansion,
+                        TngTableHeader,
+                        TngTableHeaderCell,
+                        TngTableRow,
+                        TngTableRowExpander,
+                    ],
+                    template: `
+    <table
+      tngTable
+      tngTableExpansion
+      #expansionRef="tngTableExpansion"
+      data-testid="expansion-table"
+      [tngTableExpandedIds]="expandedIds()"
+      [tngTableExpansionMode]="expansionMode()"
+      (expansionChange)="onExpansionChange($event)"
+    >
+      <thead tngTableHeader>
+        <tr tngTableRow>
+          <th tngTableHeaderCell data-testid="expander-header">Expand</th>
+          @for (column of visibleColumns(); track column.id) {
+            <th
+              tngTableHeaderCell
+              [attr.data-testid]="'expansion-header-' + column.id"
+              [tngTableColumnId]="column.id"
+            >
+              {{ column.label }}
+            </th>
+          }
+        </tr>
+      </thead>
+
+      <tbody tngTableBody>
+        @for (row of rows(); track row.id) {
+          <tr
+            tngTableRow
+            [attr.data-testid]="'expansion-row-' + row.id"
+            [tngTableRowId]="row.id"
+          >
+            <td tngTableCell [tngTableColumnId]="'label'">
+              <div
+                tabindex="0"
+                [attr.data-testid]="'expander-' + row.id"
+                [tngTableRowExpander]="row.id"
+              >
+                Toggle
+              </div>
+            </td>
+            @for (column of visibleColumns(); track column.id) {
+              <td
+                tngTableCell
+                [attr.data-testid]="'expansion-cell-' + row.id + '-' + column.id"
+                [tngTableColumnId]="column.id"
+              >
+                {{ renderCell(row, column.id) }}
+              </td>
+            }
+          </tr>
+
+          @if (isExpanded(row.id)) {
+            <tr
+              tngTableRow
+              [attr.data-testid]="'detail-row-' + row.id"
+              [tngTableRowExpanded]="true"
+              [tngTableRowId]="row.id + '-detail'"
+            >
+              <td
+                tngTableCell
+                [attr.colspan]="visibleColumns().length + 1"
+                [attr.data-testid]="'detail-cell-' + row.id"
+              >
+                Details for {{ row.label }}
+              </td>
+            </tr>
+          }
+        }
+      </tbody>
+    </table>
+  `,
+                }]
+        }], propDecorators: { expansionRef: [{
+                type: ViewChild,
+                args: ['expansionRef', { static: true }]
+            }] } });
+export class TableInteractionHarnessComponent {
+    cellClicks = [];
+    rowClicks = [];
+    rowContextMenus = [];
+    rows = signal([
+        { id: 'alpha', label: 'Alpha' },
+        { id: 'beta', label: 'Beta' },
+    ], ...(ngDevMode ? [{ debugName: "rows" }] : []));
+    onCellClick(event) {
+        this.cellClicks.push(event);
+    }
+    onRowClick(event) {
+        this.rowClicks.push(event);
+    }
+    onRowContextMenu(event) {
+        this.rowContextMenus.push(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableInteractionHarnessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TableInteractionHarnessComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+    <table tngTable data-testid="interaction-table">
+      <thead tngTableHeader>
+        <tr tngTableRow>
+          <th tngTableHeaderCell [tngTableColumnId]="'label'">Label</th>
+          <th tngTableHeaderCell [tngTableColumnId]="'actions'">Actions</th>
+        </tr>
+      </thead>
+
+      <tbody tngTableBody>
+        @for (row of rows(); track row.id) {
+          <tr
+            tngTableRow
+            [attr.data-testid]="'interaction-row-' + row.id"
+            [tngTableRowId]="row.id"
+            (rowClick)="onRowClick($event)"
+            (rowContextMenu)="onRowContextMenu($event)"
+          >
+            <td
+              tngTableCell
+              [attr.data-testid]="'interaction-cell-' + row.id"
+              [tngTableColumnId]="'label'"
+              (cellClick)="onCellClick($event)"
+            >
+              {{ row.label }}
+            </td>
+            <td
+              tngTableCell
+              [tngTableColumnId]="'actions'"
+              (cellClick)="onCellClick($event)"
+            >
+              <button
+                type="button"
+                [attr.data-testid]="'row-action-' + row.id"
+                (click)="$event.stopPropagation()"
+              >
+                Action
+              </button>
+            </td>
+          </tr>
+        }
+      </tbody>
+    </table>
+  `, isInline: true, dependencies: [{ kind: "directive", type: TngTable, selector: "table[tngTable]", inputs: ["items", "error", "filterable", "tngTableLayout", "loading", "pageable", "rowId", "dir", "ariaLabel", "ariaLabelledby"], exportAs: ["tngTable"] }, { kind: "directive", type: TngTableBody, selector: "tbody[tngTableBody]", exportAs: ["tngTableBody"] }, { kind: "directive", type: TngTableCell, selector: "td[tngTableCell]", inputs: ["tngTableColumnId", "tngTableHeaders", "tngTableStickyColumn", "tngTableStickyOffset", "tngTableTruncate"], outputs: ["cellClick"], exportAs: ["tngTableCell"] }, { kind: "directive", type: TngTableHeader, selector: "thead[tngTableHeader]", inputs: ["tngTableHeaderSticky", "tngTableHeaderStickyOffset"], exportAs: ["tngTableHeader"] }, { kind: "directive", type: TngTableHeaderCell, selector: "th[tngTableHeaderCell]", inputs: ["tngTableColumnId", "tngTableStickyColumn", "tngTableStickyOffset", "tngTableTruncate"], exportAs: ["tngTableHeaderCell"] }, { kind: "directive", type: TngTableRow, selector: "tr[tngTableRow]", inputs: ["tngTableRowDisabled", "tngTableRowExpanded", "tngTableRowId", "tngTableRowSelected"], outputs: ["rowClick", "rowContextMenu"], exportAs: ["tngTableRow"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableInteractionHarnessComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [
+                        TngTable,
+                        TngTableBody,
+                        TngTableCell,
+                        TngTableHeader,
+                        TngTableHeaderCell,
+                        TngTableRow,
+                    ],
+                    template: `
+    <table tngTable data-testid="interaction-table">
+      <thead tngTableHeader>
+        <tr tngTableRow>
+          <th tngTableHeaderCell [tngTableColumnId]="'label'">Label</th>
+          <th tngTableHeaderCell [tngTableColumnId]="'actions'">Actions</th>
+        </tr>
+      </thead>
+
+      <tbody tngTableBody>
+        @for (row of rows(); track row.id) {
+          <tr
+            tngTableRow
+            [attr.data-testid]="'interaction-row-' + row.id"
+            [tngTableRowId]="row.id"
+            (rowClick)="onRowClick($event)"
+            (rowContextMenu)="onRowContextMenu($event)"
+          >
+            <td
+              tngTableCell
+              [attr.data-testid]="'interaction-cell-' + row.id"
+              [tngTableColumnId]="'label'"
+              (cellClick)="onCellClick($event)"
+            >
+              {{ row.label }}
+            </td>
+            <td
+              tngTableCell
+              [tngTableColumnId]="'actions'"
+              (cellClick)="onCellClick($event)"
+            >
+              <button
+                type="button"
+                [attr.data-testid]="'row-action-' + row.id"
+                (click)="$event.stopPropagation()"
+              >
+                Action
+              </button>
+            </td>
+          </tr>
+        }
+      </tbody>
+    </table>
+  `,
+                }]
+        }] });
+export class TableEmbeddedIntegrationHarnessComponent {
+    cellClicks = [];
+    rowClicks = [];
+    rows = signal([
+        { id: 'alpha', label: 'Alpha', status: 'ready' },
+    ], ...(ngDevMode ? [{ debugName: "rows" }] : []));
+    selectedIds = signal([], ...(ngDevMode ? [{ debugName: "selectedIds" }] : []));
+    onCellClick(event) {
+        this.cellClicks.push(event);
+    }
+    onRowClick(event) {
+        this.rowClicks.push(event);
+    }
+    onSelectionChange(event) {
+        this.selectedIds.set(event.selectedIds);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableEmbeddedIntegrationHarnessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TableEmbeddedIntegrationHarnessComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+    <table
+      tngTable
+      tngTableSelection
+      data-testid="integration-table"
+      [tngTableSelectedIds]="selectedIds()"
+      (selectionChange)="onSelectionChange($event)"
+    >
+      <thead tngTableHeader>
+        <tr tngTableRow>
+          <th tngTableHeaderCell [tngTableColumnId]="'label'">Label</th>
+          <th tngTableHeaderCell [tngTableColumnId]="'link'">Link</th>
+          <th tngTableHeaderCell [tngTableColumnId]="'form'">Form</th>
+          <th tngTableHeaderCell [tngTableColumnId]="'overlay'">Overlay</th>
+        </tr>
+      </thead>
+
+      <tbody tngTableBody>
+        @for (row of rows(); track row.id) {
+          <tr
+            tngTableRow
+            [attr.data-testid]="'integration-row-' + row.id"
+            [tngTableRowId]="row.id"
+            (rowClick)="onRowClick($event)"
+          >
+            <td
+              tngTableCell
+              [attr.data-testid]="'integration-cell-' + row.id + '-label'"
+              [tngTableColumnId]="'label'"
+              (cellClick)="onCellClick($event)"
+            >
+              {{ row.label }}
+            </td>
+
+            <td
+              tngTableCell
+              [attr.data-testid]="'integration-cell-' + row.id + '-link'"
+              [tngTableColumnId]="'link'"
+              (cellClick)="onCellClick($event)"
+            >
+              <a [routerLink]="['/detail', row.id]" [attr.data-testid]="'integration-link-' + row.id">
+                Open
+              </a>
+            </td>
+
+            <td
+              tngTableCell
+              [attr.data-testid]="'integration-cell-' + row.id + '-form'"
+              [tngTableColumnId]="'form'"
+              (cellClick)="onCellClick($event)"
+            >
+              <input
+                type="text"
+                [attr.data-testid]="'integration-input-' + row.id"
+                [value]="row.label"
+              />
+              <select [attr.data-testid]="'integration-select-' + row.id">
+                <option value="draft">Draft</option>
+                <option value="ready">Ready</option>
+              </select>
+            </td>
+
+            <td
+              tngTableCell
+              [attr.data-testid]="'integration-cell-' + row.id + '-overlay'"
+              [tngTableColumnId]="'overlay'"
+              (cellClick)="onCellClick($event)"
+            >
+              <section tngPopover #popover="tngPopover" [restoreFocus]="false">
+                <button
+                  type="button"
+                  [attr.data-testid]="'integration-popover-trigger-' + row.id"
+                  [tngPopoverTrigger]="popover"
+                >
+                  Actions
+                </button>
+
+                <section tngPopoverPanel [attr.data-testid]="'integration-popover-panel-' + row.id">
+                  <button type="button">Inspect</button>
+                </section>
+              </section>
+            </td>
+          </tr>
+        }
+      </tbody>
+    </table>
+  `, isInline: true, dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: TngPopover, selector: "[tngPopover]", inputs: ["open", "defaultOpen", "disabled", "closeOnEscape", "closeOnOutsidePointer", "restoreFocus", "autoFocus", "side", "align", "panelRole", "ariaHasPopup", "ariaLabel"], outputs: ["openChange", "closed"], exportAs: ["tngPopover"] }, { kind: "directive", type: TngPopoverPanel, selector: "[tngPopoverPanel], [tngPopoverContent]", exportAs: ["tngPopoverPanel"] }, { kind: "directive", type: TngPopoverTrigger, selector: "[tngPopoverTrigger]", inputs: ["tngPopoverTrigger"], exportAs: ["tngPopoverTrigger"] }, { kind: "directive", type: TngTable, selector: "table[tngTable]", inputs: ["items", "error", "filterable", "tngTableLayout", "loading", "pageable", "rowId", "dir", "ariaLabel", "ariaLabelledby"], exportAs: ["tngTable"] }, { kind: "directive", type: TngTableBody, selector: "tbody[tngTableBody]", exportAs: ["tngTableBody"] }, { kind: "directive", type: TngTableCell, selector: "td[tngTableCell]", inputs: ["tngTableColumnId", "tngTableHeaders", "tngTableStickyColumn", "tngTableStickyOffset", "tngTableTruncate"], outputs: ["cellClick"], exportAs: ["tngTableCell"] }, { kind: "directive", type: TngTableHeader, selector: "thead[tngTableHeader]", inputs: ["tngTableHeaderSticky", "tngTableHeaderStickyOffset"], exportAs: ["tngTableHeader"] }, { kind: "directive", type: TngTableHeaderCell, selector: "th[tngTableHeaderCell]", inputs: ["tngTableColumnId", "tngTableStickyColumn", "tngTableStickyOffset", "tngTableTruncate"], exportAs: ["tngTableHeaderCell"] }, { kind: "directive", type: TngTableRow, selector: "tr[tngTableRow]", inputs: ["tngTableRowDisabled", "tngTableRowExpanded", "tngTableRowId", "tngTableRowSelected"], outputs: ["rowClick", "rowContextMenu"], exportAs: ["tngTableRow"] }, { kind: "directive", type: TngTableSelection, selector: "table[tngTable][tngTableSelection]", inputs: ["tngTableSelectionMode", "tngTableSelectedIds"], outputs: ["selectionChange"], exportAs: ["tngTableSelection"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableEmbeddedIntegrationHarnessComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [
+                        RouterLink,
+                        TngPopover,
+                        TngPopoverPanel,
+                        TngPopoverTrigger,
+                        TngTable,
+                        TngTableBody,
+                        TngTableCell,
+                        TngTableHeader,
+                        TngTableHeaderCell,
+                        TngTableRow,
+                        TngTableSelection,
+                    ],
+                    template: `
+    <table
+      tngTable
+      tngTableSelection
+      data-testid="integration-table"
+      [tngTableSelectedIds]="selectedIds()"
+      (selectionChange)="onSelectionChange($event)"
+    >
+      <thead tngTableHeader>
+        <tr tngTableRow>
+          <th tngTableHeaderCell [tngTableColumnId]="'label'">Label</th>
+          <th tngTableHeaderCell [tngTableColumnId]="'link'">Link</th>
+          <th tngTableHeaderCell [tngTableColumnId]="'form'">Form</th>
+          <th tngTableHeaderCell [tngTableColumnId]="'overlay'">Overlay</th>
+        </tr>
+      </thead>
+
+      <tbody tngTableBody>
+        @for (row of rows(); track row.id) {
+          <tr
+            tngTableRow
+            [attr.data-testid]="'integration-row-' + row.id"
+            [tngTableRowId]="row.id"
+            (rowClick)="onRowClick($event)"
+          >
+            <td
+              tngTableCell
+              [attr.data-testid]="'integration-cell-' + row.id + '-label'"
+              [tngTableColumnId]="'label'"
+              (cellClick)="onCellClick($event)"
+            >
+              {{ row.label }}
+            </td>
+
+            <td
+              tngTableCell
+              [attr.data-testid]="'integration-cell-' + row.id + '-link'"
+              [tngTableColumnId]="'link'"
+              (cellClick)="onCellClick($event)"
+            >
+              <a [routerLink]="['/detail', row.id]" [attr.data-testid]="'integration-link-' + row.id">
+                Open
+              </a>
+            </td>
+
+            <td
+              tngTableCell
+              [attr.data-testid]="'integration-cell-' + row.id + '-form'"
+              [tngTableColumnId]="'form'"
+              (cellClick)="onCellClick($event)"
+            >
+              <input
+                type="text"
+                [attr.data-testid]="'integration-input-' + row.id"
+                [value]="row.label"
+              />
+              <select [attr.data-testid]="'integration-select-' + row.id">
+                <option value="draft">Draft</option>
+                <option value="ready">Ready</option>
+              </select>
+            </td>
+
+            <td
+              tngTableCell
+              [attr.data-testid]="'integration-cell-' + row.id + '-overlay'"
+              [tngTableColumnId]="'overlay'"
+              (cellClick)="onCellClick($event)"
+            >
+              <section tngPopover #popover="tngPopover" [restoreFocus]="false">
+                <button
+                  type="button"
+                  [attr.data-testid]="'integration-popover-trigger-' + row.id"
+                  [tngPopoverTrigger]="popover"
+                >
+                  Actions
+                </button>
+
+                <section tngPopoverPanel [attr.data-testid]="'integration-popover-panel-' + row.id">
+                  <button type="button">Inspect</button>
+                </section>
+              </section>
+            </td>
+          </tr>
+        }
+      </tbody>
+    </table>
+  `,
+                }]
+        }] });
+export class TableControlledIntegrationHarnessComponent {
+    activeColumnId = signal(null, ...(ngDevMode ? [{ debugName: "activeColumnId" }] : []));
+    direction = signal(null, ...(ngDevMode ? [{ debugName: "direction" }] : []));
+    pageIndex = signal(0, ...(ngDevMode ? [{ debugName: "pageIndex" }] : []));
+    pageSize = signal(2, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    query = signal('', ...(ngDevMode ? [{ debugName: "query" }] : []));
+    rows = signal([
+        { id: 'gamma', label: 'Gamma', status: 'draft' },
+        { id: 'alpha', label: 'Alpha', status: 'ready' },
+        { id: 'beta', label: 'Beta', status: 'ready' },
+        { id: 'delta', label: 'Delta', status: 'draft' },
+    ], ...(ngDevMode ? [{ debugName: "rows" }] : []));
+    sortEvents = [];
+    filteredRows = computed(() => createTngFilterController({
+        globalFilter: (item, query) => item.label.toLowerCase().includes(query.toLowerCase()),
+        query: this.query(),
+    }).apply(this.rows()), ...(ngDevMode ? [{ debugName: "filteredRows" }] : []));
+    sortedRows = computed(() => createTngSortController({
+        accessor: (item, columnId) => item[columnId],
+        activeColumnId: this.activeColumnId() === 'label' ? 'label' : null,
+        direction: this.direction(),
+    }).apply(this.filteredRows()), ...(ngDevMode ? [{ debugName: "sortedRows" }] : []));
+    visibleRows = computed(() => createTngPaginationController({
+        pageIndex: this.pageIndex(),
+        pageSize: this.pageSize(),
+    }).slice(this.sortedRows()), ...(ngDevMode ? [{ debugName: "visibleRows" }] : []));
+    sortRef;
+    nextPage() {
+        this.pageIndex.update((value) => value + 1);
+    }
+    onQueryInput(query) {
+        this.query.set(query);
+        this.pageIndex.set(0);
+    }
+    onSortChange(event) {
+        this.activeColumnId.set(event.activeColumnId);
+        this.direction.set(event.direction);
+        this.pageIndex.set(0);
+        this.sortEvents.push(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableControlledIntegrationHarnessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TableControlledIntegrationHarnessComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "sortRef", first: true, predicate: ["sortRef"], descendants: true }], ngImport: i0, template: `
+    <input
+      #filterInput
+      type="text"
+      data-testid="controlled-filter"
+      [value]="query()"
+      (input)="onQueryInput(filterInput.value)"
+    />
+    <button type="button" data-testid="controlled-page-next" (click)="nextPage()">Next page</button>
+
+    <table
+      tngTable
+      tngTableSort
+      #sortRef="tngTableSort"
+      data-testid="controlled-table"
+      [items]="visibleRows()"
+      [filterable]="true"
+      [pageable]="true"
+      [tngTableSortActive]="activeColumnId()"
+      [tngTableSortDirection]="direction()"
+      (sortChange)="onSortChange($event)"
+    >
+      <thead tngTableHeader>
+        <tr tngTableRow>
+          <th
+            tngTableHeaderCell
+            [tngSortHeader]="'label'"
+            data-testid="controlled-sort-header"
+          >
+            Label
+          </th>
+          <th tngTableHeaderCell [tngTableColumnId]="'status'">Status</th>
+        </tr>
+      </thead>
+
+      <tbody tngTableBody>
+        @for (row of visibleRows(); track row.id) {
+          <tr
+            tngTableRow
+            [attr.data-testid]="'controlled-row-' + row.id"
+            [tngTableRowId]="row.id"
+          >
+            <td tngTableCell [tngTableColumnId]="'label'">{{ row.label }}</td>
+            <td tngTableCell [tngTableColumnId]="'status'">{{ row.status }}</td>
+          </tr>
+        }
+      </tbody>
+    </table>
+  `, isInline: true, dependencies: [{ kind: "directive", type: TngSortHeader, selector: "th[tngSortHeader]", inputs: ["tngSortHeader", "tngSortHeaderDisabled"], exportAs: ["tngSortHeader"] }, { kind: "directive", type: TngTable, selector: "table[tngTable]", inputs: ["items", "error", "filterable", "tngTableLayout", "loading", "pageable", "rowId", "dir", "ariaLabel", "ariaLabelledby"], exportAs: ["tngTable"] }, { kind: "directive", type: TngTableBody, selector: "tbody[tngTableBody]", exportAs: ["tngTableBody"] }, { kind: "directive", type: TngTableCell, selector: "td[tngTableCell]", inputs: ["tngTableColumnId", "tngTableHeaders", "tngTableStickyColumn", "tngTableStickyOffset", "tngTableTruncate"], outputs: ["cellClick"], exportAs: ["tngTableCell"] }, { kind: "directive", type: TngTableHeader, selector: "thead[tngTableHeader]", inputs: ["tngTableHeaderSticky", "tngTableHeaderStickyOffset"], exportAs: ["tngTableHeader"] }, { kind: "directive", type: TngTableHeaderCell, selector: "th[tngTableHeaderCell]", inputs: ["tngTableColumnId", "tngTableStickyColumn", "tngTableStickyOffset", "tngTableTruncate"], exportAs: ["tngTableHeaderCell"] }, { kind: "directive", type: TngTableRow, selector: "tr[tngTableRow]", inputs: ["tngTableRowDisabled", "tngTableRowExpanded", "tngTableRowId", "tngTableRowSelected"], outputs: ["rowClick", "rowContextMenu"], exportAs: ["tngTableRow"] }, { kind: "directive", type: TngTableSort, selector: "[tngTableSort]", inputs: ["tngTableSortActive", "tngTableSortDirection", "tngTableSortDisableClear"], outputs: ["sortChange"], exportAs: ["tngTableSort"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableControlledIntegrationHarnessComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [
+                        TngSortHeader,
+                        TngTable,
+                        TngTableBody,
+                        TngTableCell,
+                        TngTableHeader,
+                        TngTableHeaderCell,
+                        TngTableRow,
+                        TngTableSort,
+                    ],
+                    template: `
+    <input
+      #filterInput
+      type="text"
+      data-testid="controlled-filter"
+      [value]="query()"
+      (input)="onQueryInput(filterInput.value)"
+    />
+    <button type="button" data-testid="controlled-page-next" (click)="nextPage()">Next page</button>
+
+    <table
+      tngTable
+      tngTableSort
+      #sortRef="tngTableSort"
+      data-testid="controlled-table"
+      [items]="visibleRows()"
+      [filterable]="true"
+      [pageable]="true"
+      [tngTableSortActive]="activeColumnId()"
+      [tngTableSortDirection]="direction()"
+      (sortChange)="onSortChange($event)"
+    >
+      <thead tngTableHeader>
+        <tr tngTableRow>
+          <th
+            tngTableHeaderCell
+            [tngSortHeader]="'label'"
+            data-testid="controlled-sort-header"
+          >
+            Label
+          </th>
+          <th tngTableHeaderCell [tngTableColumnId]="'status'">Status</th>
+        </tr>
+      </thead>
+
+      <tbody tngTableBody>
+        @for (row of visibleRows(); track row.id) {
+          <tr
+            tngTableRow
+            [attr.data-testid]="'controlled-row-' + row.id"
+            [tngTableRowId]="row.id"
+          >
+            <td tngTableCell [tngTableColumnId]="'label'">{{ row.label }}</td>
+            <td tngTableCell [tngTableColumnId]="'status'">{{ row.status }}</td>
+          </tr>
+        }
+      </tbody>
+    </table>
+  `,
+                }]
+        }], propDecorators: { sortRef: [{
+                type: ViewChild,
+                args: ['sortRef']
+            }] } });
+export class DynamicTableHarnessComponent {
+    ariaLabel = signal('Dynamic table', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    columns = signal([
+        { id: 'label', label: 'Label' },
+        { id: 'status', label: 'Status' },
+        { id: 'value', label: 'Value' },
+    ], ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    rows = signal([
+        { id: 'alpha', label: 'Alpha', status: 'Ready', value: 1 },
+        { id: 'beta', label: 'Beta', status: undefined, value: null },
+        { id: 'gamma', label: 'Gamma', status: 'Draft', value: true },
+    ], ...(ngDevMode ? [{ debugName: "rows" }] : []));
+    selectedIds = signal([], ...(ngDevMode ? [{ debugName: "selectedIds" }] : []));
+    visibleColumns = computed(() => this.columns().filter((column) => column.hidden !== true), ...(ngDevMode ? [{ debugName: "visibleColumns" }] : []));
+    onSelectionChange(event) {
+        this.selectedIds.set(event.selectedIds);
+    }
+    renderCell(row, columnId) {
+        return renderDynamicCell(row, columnId);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DynamicTableHarnessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DynamicTableHarnessComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+    <table
+      tngTable
+      tngTableSelection
+      data-testid="dynamic-table"
+      [ariaLabel]="ariaLabel()"
+      [tngTableSelectedIds]="selectedIds()"
+      (selectionChange)="onSelectionChange($event)"
+    >
+      <thead tngTableHeader>
+        <tr tngTableRow>
+          @for (column of visibleColumns(); track column.id) {
+            <th
+              tngTableHeaderCell
+              [attr.data-testid]="'dynamic-header-' + column.id"
+              [tngTableColumnId]="column.id"
+              scope="col"
+            >
+              {{ column.label }}
+            </th>
+          }
+        </tr>
+      </thead>
+
+      <tbody tngTableBody>
+        @for (row of rows(); track row.id) {
+          <tr
+            tngTableRow
+            [attr.data-testid]="'dynamic-row-' + row.id"
+            [tngTableRowId]="row.id"
+          >
+            @for (column of visibleColumns(); track column.id) {
+              <td
+                tngTableCell
+                [attr.data-testid]="'dynamic-cell-' + row.id + '-' + column.id"
+                [tngTableColumnId]="column.id"
+              >
+                {{ renderCell(row, column.id) }}
+              </td>
+            }
+          </tr>
+        }
+      </tbody>
+    </table>
+  `, isInline: true, dependencies: [{ kind: "directive", type: TngTable, selector: "table[tngTable]", inputs: ["items", "error", "filterable", "tngTableLayout", "loading", "pageable", "rowId", "dir", "ariaLabel", "ariaLabelledby"], exportAs: ["tngTable"] }, { kind: "directive", type: TngTableBody, selector: "tbody[tngTableBody]", exportAs: ["tngTableBody"] }, { kind: "directive", type: TngTableCell, selector: "td[tngTableCell]", inputs: ["tngTableColumnId", "tngTableHeaders", "tngTableStickyColumn", "tngTableStickyOffset", "tngTableTruncate"], outputs: ["cellClick"], exportAs: ["tngTableCell"] }, { kind: "directive", type: TngTableHeader, selector: "thead[tngTableHeader]", inputs: ["tngTableHeaderSticky", "tngTableHeaderStickyOffset"], exportAs: ["tngTableHeader"] }, { kind: "directive", type: TngTableHeaderCell, selector: "th[tngTableHeaderCell]", inputs: ["tngTableColumnId", "tngTableStickyColumn", "tngTableStickyOffset", "tngTableTruncate"], exportAs: ["tngTableHeaderCell"] }, { kind: "directive", type: TngTableRow, selector: "tr[tngTableRow]", inputs: ["tngTableRowDisabled", "tngTableRowExpanded", "tngTableRowId", "tngTableRowSelected"], outputs: ["rowClick", "rowContextMenu"], exportAs: ["tngTableRow"] }, { kind: "directive", type: TngTableSelection, selector: "table[tngTable][tngTableSelection]", inputs: ["tngTableSelectionMode", "tngTableSelectedIds"], outputs: ["selectionChange"], exportAs: ["tngTableSelection"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DynamicTableHarnessComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [
+                        TngTable,
+                        TngTableBody,
+                        TngTableCell,
+                        TngTableHeader,
+                        TngTableHeaderCell,
+                        TngTableRow,
+                        TngTableSelection,
+                    ],
+                    template: `
+    <table
+      tngTable
+      tngTableSelection
+      data-testid="dynamic-table"
+      [ariaLabel]="ariaLabel()"
+      [tngTableSelectedIds]="selectedIds()"
+      (selectionChange)="onSelectionChange($event)"
+    >
+      <thead tngTableHeader>
+        <tr tngTableRow>
+          @for (column of visibleColumns(); track column.id) {
+            <th
+              tngTableHeaderCell
+              [attr.data-testid]="'dynamic-header-' + column.id"
+              [tngTableColumnId]="column.id"
+              scope="col"
+            >
+              {{ column.label }}
+            </th>
+          }
+        </tr>
+      </thead>
+
+      <tbody tngTableBody>
+        @for (row of rows(); track row.id) {
+          <tr
+            tngTableRow
+            [attr.data-testid]="'dynamic-row-' + row.id"
+            [tngTableRowId]="row.id"
+          >
+            @for (column of visibleColumns(); track column.id) {
+              <td
+                tngTableCell
+                [attr.data-testid]="'dynamic-cell-' + row.id + '-' + column.id"
+                [tngTableColumnId]="column.id"
+              >
+                {{ renderCell(row, column.id) }}
+              </td>
+            }
+          </tr>
+        }
+      </tbody>
+    </table>
+  `,
+                }]
+        }] });
+export class TableRenderingHarnessComponent {
+    footerValue = signal(2, ...(ngDevMode ? [{ debugName: "footerValue" }] : []));
+    localizedFooterValue = signal(9876.5, ...(ngDevMode ? [{ debugName: "localizedFooterValue" }] : []));
+    localizedNumberValue = signal(12345.67, ...(ngDevMode ? [{ debugName: "localizedNumberValue" }] : []));
+    rows = signal([
+        {
+            active: true,
+            id: 'alpha',
+            label: 'Alpha',
+            markup: '<strong>Safe</strong>',
+            status: 'Active',
+            total: 42,
+            updatedAt: new Date('2026-04-24T00:00:00.000Z'),
+        },
+        {
+            active: false,
+            id: 'beta',
+            label: 'Beta',
+            markup: '<em>Draft</em>',
+            status: 'Draft',
+            total: 18,
+            updatedAt: new Date('2026-04-23T00:00:00.000Z'),
+        },
+    ], ...(ngDevMode ? [{ debugName: "rows" }] : []));
+    localizedDateFormatter = createTngTableIntlDateFormatter('en-GB', {
+        day: '2-digit',
+        month: '2-digit',
+        timeZone: 'UTC',
+        year: 'numeric',
+    });
+    localizedNumberFormatter = createTngTableIntlNumberFormatter('de-DE', {
+        maximumFractionDigits: 2,
+        minimumFractionDigits: 2,
+    });
+    statusFormatter = (value) => `formatted:${String(value).toUpperCase()}`;
+    throwingFormatter = () => {
+        throw new Error('Formatter failure');
+    };
+    errorCellOutlet;
+    footerOutlet;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableRenderingHarnessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: TableRenderingHarnessComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "errorCellOutlet", first: true, predicate: ["errorCellOutlet"], descendants: true }, { propertyName: "footerOutlet", first: true, predicate: ["footerOutlet"], descendants: true }], ngImport: i0, template: `
+    <ng-template
+      tngTableCellTpl
+      #cellTemplate="tngTableCellTpl"
+      let-columnId="columnId"
+      let-row="row"
+      let-value
+    >
+      <span data-testid="custom-cell-content">{{ row.id }}::{{ columnId }}::{{ value }}</span>
+    </ng-template>
+
+    <ng-template
+      tngTableHeaderTpl
+      #headerTemplate="tngTableHeaderTpl"
+      let-columnId="columnId"
+      let-label
+    >
+      <span data-testid="custom-header-content">{{ columnId }}::{{ label }}</span>
+    </ng-template>
+
+    <ng-template
+      tngTableFooterTpl
+      #footerTemplate="tngTableFooterTpl"
+      let-columnId="columnId"
+      let-items="items"
+      let-value
+    >
+      <span data-testid="custom-footer-content">{{ columnId }}::{{ items.length }}::{{ value }}</span>
+    </ng-template>
+
+    <ng-template tngTableCellTpl #htmlTemplate="tngTableCellTpl" let-value>
+      <span data-testid="custom-html-content" [innerHTML]="value"></span>
+    </ng-template>
+
+    <table tngTable data-testid="rendering-table">
+      <thead tngTableHeader>
+        <tr tngTableRow>
+          <th tngTableHeaderCell data-testid="default-header">
+            <tng-table-header-outlet
+              [columnId]="'label'"
+              [label]="'Name'"
+            ></tng-table-header-outlet>
+          </th>
+          <th tngTableHeaderCell data-testid="custom-header">
+            <tng-table-header-outlet
+              [columnId]="'status'"
+              [label]="'Status'"
+              [template]="headerTemplate"
+            ></tng-table-header-outlet>
+          </th>
+        </tr>
+      </thead>
+
+      <tbody tngTableBody>
+        <tr tngTableRow [tngTableRowId]="rows()[0].id">
+          <td tngTableCell data-testid="default-string-cell">
+            <tng-table-cell-outlet
+              [columnId]="'label'"
+              [row]="rows()[0]"
+              [rowId]="rows()[0].id"
+              [value]="rows()[0].label"
+            ></tng-table-cell-outlet>
+          </td>
+          <td tngTableCell data-testid="default-number-cell">
+            <tng-table-cell-outlet
+              [columnId]="'total'"
+              [row]="rows()[0]"
+              [rowId]="rows()[0].id"
+              [value]="rows()[0].total"
+            ></tng-table-cell-outlet>
+          </td>
+          <td tngTableCell data-testid="default-boolean-cell">
+            <tng-table-cell-outlet
+              [columnId]="'active'"
+              [row]="rows()[0]"
+              [rowId]="rows()[0].id"
+              [value]="rows()[0].active"
+            ></tng-table-cell-outlet>
+          </td>
+          <td tngTableCell data-testid="custom-cell">
+            <tng-table-cell-outlet
+              [columnId]="'status'"
+              [row]="rows()[0]"
+              [rowId]="rows()[0].id"
+              [template]="cellTemplate"
+              [value]="rows()[0].status"
+            ></tng-table-cell-outlet>
+          </td>
+          <td tngTableCell data-testid="formatted-cell">
+            <tng-table-cell-outlet
+              [columnId]="'status'"
+              [formatter]="statusFormatter"
+              [row]="rows()[0]"
+              [rowId]="rows()[0].id"
+              [value]="rows()[0].status"
+            ></tng-table-cell-outlet>
+          </td>
+          <td tngTableCell data-testid="formatter-error-cell">
+            <tng-table-cell-outlet
+              #errorCellOutlet="tngTableCellOutlet"
+              [columnId]="'status'"
+              [formatter]="throwingFormatter"
+              [row]="rows()[0]"
+              [rowId]="rows()[0].id"
+              [value]="rows()[0].status"
+            ></tng-table-cell-outlet>
+          </td>
+          <td tngTableCell data-testid="html-escape-cell">
+            <tng-table-cell-outlet
+              [columnId]="'markup'"
+              [row]="rows()[0]"
+              [rowId]="rows()[0].id"
+              [value]="rows()[0].markup"
+            ></tng-table-cell-outlet>
+          </td>
+          <td tngTableCell data-testid="html-optin-cell">
+            <tng-table-cell-outlet
+              [columnId]="'markup'"
+              [row]="rows()[0]"
+              [rowId]="rows()[0].id"
+              [template]="htmlTemplate"
+              [value]="rows()[0].markup"
+            ></tng-table-cell-outlet>
+          </td>
+          <td tngTableCell data-testid="localized-number-cell">
+            <tng-table-cell-outlet
+              [columnId]="'localizedTotal'"
+              [formatter]="localizedNumberFormatter"
+              [row]="rows()[0]"
+              [rowId]="rows()[0].id"
+              [value]="localizedNumberValue()"
+            ></tng-table-cell-outlet>
+          </td>
+          <td tngTableCell data-testid="localized-date-cell">
+            <tng-table-cell-outlet
+              [columnId]="'updatedAt'"
+              [formatter]="localizedDateFormatter"
+              [row]="rows()[0]"
+              [rowId]="rows()[0].id"
+              [value]="rows()[0].updatedAt"
+            ></tng-table-cell-outlet>
+          </td>
+        </tr>
+      </tbody>
+
+      <tfoot tngTableFooter>
+        <tr tngTableRow>
+          <td tngTableCell data-testid="default-footer-cell">
+            <tng-table-footer-outlet
+              [columnId]="'total'"
+              [items]="rows()"
+              [value]="footerValue()"
+            ></tng-table-footer-outlet>
+          </td>
+          <td tngTableCell data-testid="custom-footer-cell">
+            <tng-table-footer-outlet
+              #footerOutlet="tngTableFooterOutlet"
+              [columnId]="'summary'"
+              [items]="rows()"
+              [template]="footerTemplate"
+              [value]="footerValue()"
+            ></tng-table-footer-outlet>
+          </td>
+          <td tngTableCell data-testid="localized-footer-cell">
+            <tng-table-footer-outlet
+              [columnId]="'localizedTotal'"
+              [formatter]="localizedNumberFormatter"
+              [items]="rows()"
+              [value]="localizedFooterValue()"
+            ></tng-table-footer-outlet>
+          </td>
+        </tr>
+      </tfoot>
+    </table>
+  `, isInline: true, dependencies: [{ kind: "directive", type: TngTable, selector: "table[tngTable]", inputs: ["items", "error", "filterable", "tngTableLayout", "loading", "pageable", "rowId", "dir", "ariaLabel", "ariaLabelledby"], exportAs: ["tngTable"] }, { kind: "directive", type: TngTableHeader, selector: "thead[tngTableHeader]", inputs: ["tngTableHeaderSticky", "tngTableHeaderStickyOffset"], exportAs: ["tngTableHeader"] }, { kind: "directive", type: TngTableBody, selector: "tbody[tngTableBody]", exportAs: ["tngTableBody"] }, { kind: "directive", type: TngTableFooter, selector: "tfoot[tngTableFooter]", inputs: ["tngTableFooterSticky", "tngTableFooterStickyOffset"], exportAs: ["tngTableFooter"] }, { kind: "directive", type: TngTableRow, selector: "tr[tngTableRow]", inputs: ["tngTableRowDisabled", "tngTableRowExpanded", "tngTableRowId", "tngTableRowSelected"], outputs: ["rowClick", "rowContextMenu"], exportAs: ["tngTableRow"] }, { kind: "directive", type: TngTableHeaderCell, selector: "th[tngTableHeaderCell]", inputs: ["tngTableColumnId", "tngTableStickyColumn", "tngTableStickyOffset", "tngTableTruncate"], exportAs: ["tngTableHeaderCell"] }, { kind: "directive", type: TngTableCell, selector: "td[tngTableCell]", inputs: ["tngTableColumnId", "tngTableHeaders", "tngTableStickyColumn", "tngTableStickyOffset", "tngTableTruncate"], outputs: ["cellClick"], exportAs: ["tngTableCell"] }, { kind: "component", type: TngTableCellOutlet, selector: "tng-table-cell-outlet", inputs: ["columnId", "formatter", "row", "rowId", "template", "value"], exportAs: ["tngTableCellOutlet"] }, { kind: "directive", type: TngTableCellTpl, selector: "ng-template[tngTableCellTpl]", exportAs: ["tngTableCellTpl"] }, { kind: "component", type: TngTableHeaderOutlet, selector: "tng-table-header-outlet", inputs: ["columnId", "label", "template"], exportAs: ["tngTableHeaderOutlet"] }, { kind: "directive", type: TngTableHeaderTpl, selector: "ng-template[tngTableHeaderTpl]", exportAs: ["tngTableHeaderTpl"] }, { kind: "component", type: TngTableFooterOutlet, selector: "tng-table-footer-outlet", inputs: ["columnId", "formatter", "items", "template", "value"], exportAs: ["tngTableFooterOutlet"] }, { kind: "directive", type: TngTableFooterTpl, selector: "ng-template[tngTableFooterTpl]", exportAs: ["tngTableFooterTpl"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableRenderingHarnessComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [
+                        TngTable,
+                        TngTableHeader,
+                        TngTableBody,
+                        TngTableFooter,
+                        TngTableRow,
+                        TngTableHeaderCell,
+                        TngTableCell,
+                        TngTableCellOutlet,
+                        TngTableCellTpl,
+                        TngTableHeaderOutlet,
+                        TngTableHeaderTpl,
+                        TngTableFooterOutlet,
+                        TngTableFooterTpl,
+                    ],
+                    template: `
+    <ng-template
+      tngTableCellTpl
+      #cellTemplate="tngTableCellTpl"
+      let-columnId="columnId"
+      let-row="row"
+      let-value
+    >
+      <span data-testid="custom-cell-content">{{ row.id }}::{{ columnId }}::{{ value }}</span>
+    </ng-template>
+
+    <ng-template
+      tngTableHeaderTpl
+      #headerTemplate="tngTableHeaderTpl"
+      let-columnId="columnId"
+      let-label
+    >
+      <span data-testid="custom-header-content">{{ columnId }}::{{ label }}</span>
+    </ng-template>
+
+    <ng-template
+      tngTableFooterTpl
+      #footerTemplate="tngTableFooterTpl"
+      let-columnId="columnId"
+      let-items="items"
+      let-value
+    >
+      <span data-testid="custom-footer-content">{{ columnId }}::{{ items.length }}::{{ value }}</span>
+    </ng-template>
+
+    <ng-template tngTableCellTpl #htmlTemplate="tngTableCellTpl" let-value>
+      <span data-testid="custom-html-content" [innerHTML]="value"></span>
+    </ng-template>
+
+    <table tngTable data-testid="rendering-table">
+      <thead tngTableHeader>
+        <tr tngTableRow>
+          <th tngTableHeaderCell data-testid="default-header">
+            <tng-table-header-outlet
+              [columnId]="'label'"
+              [label]="'Name'"
+            ></tng-table-header-outlet>
+          </th>
+          <th tngTableHeaderCell data-testid="custom-header">
+            <tng-table-header-outlet
+              [columnId]="'status'"
+              [label]="'Status'"
+              [template]="headerTemplate"
+            ></tng-table-header-outlet>
+          </th>
+        </tr>
+      </thead>
+
+      <tbody tngTableBody>
+        <tr tngTableRow [tngTableRowId]="rows()[0].id">
+          <td tngTableCell data-testid="default-string-cell">
+            <tng-table-cell-outlet
+              [columnId]="'label'"
+              [row]="rows()[0]"
+              [rowId]="rows()[0].id"
+              [value]="rows()[0].label"
+            ></tng-table-cell-outlet>
+          </td>
+          <td tngTableCell data-testid="default-number-cell">
+            <tng-table-cell-outlet
+              [columnId]="'total'"
+              [row]="rows()[0]"
+              [rowId]="rows()[0].id"
+              [value]="rows()[0].total"
+            ></tng-table-cell-outlet>
+          </td>
+          <td tngTableCell data-testid="default-boolean-cell">
+            <tng-table-cell-outlet
+              [columnId]="'active'"
+              [row]="rows()[0]"
+              [rowId]="rows()[0].id"
+              [value]="rows()[0].active"
+            ></tng-table-cell-outlet>
+          </td>
+          <td tngTableCell data-testid="custom-cell">
+            <tng-table-cell-outlet
+              [columnId]="'status'"
+              [row]="rows()[0]"
+              [rowId]="rows()[0].id"
+              [template]="cellTemplate"
+              [value]="rows()[0].status"
+            ></tng-table-cell-outlet>
+          </td>
+          <td tngTableCell data-testid="formatted-cell">
+            <tng-table-cell-outlet
+              [columnId]="'status'"
+              [formatter]="statusFormatter"
+              [row]="rows()[0]"
+              [rowId]="rows()[0].id"
+              [value]="rows()[0].status"
+            ></tng-table-cell-outlet>
+          </td>
+          <td tngTableCell data-testid="formatter-error-cell">
+            <tng-table-cell-outlet
+              #errorCellOutlet="tngTableCellOutlet"
+              [columnId]="'status'"
+              [formatter]="throwingFormatter"
+              [row]="rows()[0]"
+              [rowId]="rows()[0].id"
+              [value]="rows()[0].status"
+            ></tng-table-cell-outlet>
+          </td>
+          <td tngTableCell data-testid="html-escape-cell">
+            <tng-table-cell-outlet
+              [columnId]="'markup'"
+              [row]="rows()[0]"
+              [rowId]="rows()[0].id"
+              [value]="rows()[0].markup"
+            ></tng-table-cell-outlet>
+          </td>
+          <td tngTableCell data-testid="html-optin-cell">
+            <tng-table-cell-outlet
+              [columnId]="'markup'"
+              [row]="rows()[0]"
+              [rowId]="rows()[0].id"
+              [template]="htmlTemplate"
+              [value]="rows()[0].markup"
+            ></tng-table-cell-outlet>
+          </td>
+          <td tngTableCell data-testid="localized-number-cell">
+            <tng-table-cell-outlet
+              [columnId]="'localizedTotal'"
+              [formatter]="localizedNumberFormatter"
+              [row]="rows()[0]"
+              [rowId]="rows()[0].id"
+              [value]="localizedNumberValue()"
+            ></tng-table-cell-outlet>
+          </td>
+          <td tngTableCell data-testid="localized-date-cell">
+            <tng-table-cell-outlet
+              [columnId]="'updatedAt'"
+              [formatter]="localizedDateFormatter"
+              [row]="rows()[0]"
+              [rowId]="rows()[0].id"
+              [value]="rows()[0].updatedAt"
+            ></tng-table-cell-outlet>
+          </td>
+        </tr>
+      </tbody>
+
+      <tfoot tngTableFooter>
+        <tr tngTableRow>
+          <td tngTableCell data-testid="default-footer-cell">
+            <tng-table-footer-outlet
+              [columnId]="'total'"
+              [items]="rows()"
+              [value]="footerValue()"
+            ></tng-table-footer-outlet>
+          </td>
+          <td tngTableCell data-testid="custom-footer-cell">
+            <tng-table-footer-outlet
+              #footerOutlet="tngTableFooterOutlet"
+              [columnId]="'summary'"
+              [items]="rows()"
+              [template]="footerTemplate"
+              [value]="footerValue()"
+            ></tng-table-footer-outlet>
+          </td>
+          <td tngTableCell data-testid="localized-footer-cell">
+            <tng-table-footer-outlet
+              [columnId]="'localizedTotal'"
+              [formatter]="localizedNumberFormatter"
+              [items]="rows()"
+              [value]="localizedFooterValue()"
+            ></tng-table-footer-outlet>
+          </td>
+        </tr>
+      </tfoot>
+    </table>
+  `,
+                }]
+        }], propDecorators: { errorCellOutlet: [{
+                type: ViewChild,
+                args: ['errorCellOutlet']
+            }], footerOutlet: [{
+                type: ViewChild,
+                args: ['footerOutlet']
+            }] } });
+export class TableLayoutHarnessComponent {
+    dir = signal('ltr', ...(ngDevMode ? [{ debugName: "dir" }] : []));
+    footerStickyOffset = signal('8px', ...(ngDevMode ? [{ debugName: "footerStickyOffset" }] : []));
+    headerStickyOffset = signal('12px', ...(ngDevMode ? [{ debugName: "headerStickyOffset" }] : []));
+    labelStickyOffset = signal(null, ...(ngDevMode ? [{ debugName: "labelStickyOffset" }] : []));
+    labelStickySide = signal(null, ...(ngDevMode ? [{ debugName: "labelStickySide" }] : []));
+    layout = signal('auto', ...(ngDevMode ? [{ debugName: "layout" }] : []));
+    scrollAxis = signal('x', ...(ngDevMode ? [{ debugName: "scrollAxis" }] : []));
+    statusStickyOffset = signal(null, ...(ngDevMode ? [{ debugName: "statusStickyOffset" }] : []));
+    statusStickySide = signal(null, ...(ngDevMode ? [{ debugName: "statusStickySide" }] : []));
+    stickyFooter = signal(false, ...(ngDevMode ? [{ debugName: "stickyFooter" }] : []));
+    stickyHeader = signal(false, ...(ngDevMode ? [{ debugName: "stickyHeader" }] : []));
+    truncate = signal(false, ...(ngDevMode ? [{ debugName: "truncate" }] : []));
+    valueStickyOffset = signal(null, ...(ngDevMode ? [{ debugName: "valueStickyOffset" }] : []));
+    valueStickySide = signal(null, ...(ngDevMode ? [{ debugName: "valueStickySide" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableLayoutHarnessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: TableLayoutHarnessComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+    <div
+      tngTableScrollContainer
+      data-testid="layout-scroll"
+      [dir]="dir()"
+      [tngTableScrollAxis]="scrollAxis()"
+    >
+      <table
+        tngTable
+        data-testid="layout-table"
+        [dir]="dir()"
+        [tngTableLayout]="layout()"
+      >
+        <thead
+          tngTableHeader
+          data-testid="layout-header"
+          [tngTableHeaderSticky]="stickyHeader()"
+          [tngTableHeaderStickyOffset]="headerStickyOffset()"
+        >
+          <tr tngTableRow>
+            <th
+              tngTableHeaderCell
+              data-testid="layout-header-label"
+              [tngTableColumnId]="'label'"
+              [tngTableStickyColumn]="labelStickySide()"
+              [tngTableStickyOffset]="labelStickyOffset()"
+              [tngTableTruncate]="truncate()"
+            >
+              Project name
+            </th>
+            <th
+              tngTableHeaderCell
+              data-testid="layout-header-status"
+              [tngTableColumnId]="'status'"
+              [tngTableStickyColumn]="statusStickySide()"
+              [tngTableStickyOffset]="statusStickyOffset()"
+            >
+              Status
+            </th>
+            <th
+              tngTableHeaderCell
+              data-testid="layout-header-value"
+              [tngTableColumnId]="'value'"
+              [tngTableStickyColumn]="valueStickySide()"
+              [tngTableStickyOffset]="valueStickyOffset()"
+            >
+              Value
+            </th>
+          </tr>
+        </thead>
+
+        <tbody tngTableBody>
+          <tr tngTableRow [tngTableRowId]="'alpha'">
+            <td
+              tngTableCell
+              data-testid="layout-cell-label"
+              [tngTableColumnId]="'label'"
+              [tngTableStickyColumn]="labelStickySide()"
+              [tngTableStickyOffset]="labelStickyOffset()"
+              [tngTableTruncate]="truncate()"
+            >
+              A very long label that should truncate in fixed layout mode
+            </td>
+            <td
+              tngTableCell
+              data-testid="layout-cell-status"
+              [tngTableColumnId]="'status'"
+              [tngTableStickyColumn]="statusStickySide()"
+              [tngTableStickyOffset]="statusStickyOffset()"
+            >
+              Ready
+            </td>
+            <td
+              tngTableCell
+              data-testid="layout-cell-value"
+              [tngTableColumnId]="'value'"
+              [tngTableStickyColumn]="valueStickySide()"
+              [tngTableStickyOffset]="valueStickyOffset()"
+            >
+              42
+            </td>
+          </tr>
+        </tbody>
+
+        <tfoot
+          tngTableFooter
+          data-testid="layout-footer"
+          [tngTableFooterSticky]="stickyFooter()"
+          [tngTableFooterStickyOffset]="footerStickyOffset()"
+        >
+          <tr tngTableRow>
+            <td
+              tngTableCell
+              data-testid="layout-footer-label"
+              [tngTableColumnId]="'label'"
+              [tngTableStickyColumn]="labelStickySide()"
+              [tngTableStickyOffset]="labelStickyOffset()"
+            >
+              Totals
+            </td>
+            <td
+              tngTableCell
+              data-testid="layout-footer-status"
+              [tngTableColumnId]="'status'"
+              [tngTableStickyColumn]="statusStickySide()"
+              [tngTableStickyOffset]="statusStickyOffset()"
+            >
+              Complete
+            </td>
+            <td
+              tngTableCell
+              data-testid="layout-footer-value"
+              [tngTableColumnId]="'value'"
+              [tngTableStickyColumn]="valueStickySide()"
+              [tngTableStickyOffset]="valueStickyOffset()"
+            >
+              42
+            </td>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: TngTable, selector: "table[tngTable]", inputs: ["items", "error", "filterable", "tngTableLayout", "loading", "pageable", "rowId", "dir", "ariaLabel", "ariaLabelledby"], exportAs: ["tngTable"] }, { kind: "directive", type: TngTableScrollContainer, selector: "[tngTableScrollContainer]", inputs: ["tngTableScrollAxis", "dir"], exportAs: ["tngTableScrollContainer"] }, { kind: "directive", type: TngTableHeader, selector: "thead[tngTableHeader]", inputs: ["tngTableHeaderSticky", "tngTableHeaderStickyOffset"], exportAs: ["tngTableHeader"] }, { kind: "directive", type: TngTableBody, selector: "tbody[tngTableBody]", exportAs: ["tngTableBody"] }, { kind: "directive", type: TngTableFooter, selector: "tfoot[tngTableFooter]", inputs: ["tngTableFooterSticky", "tngTableFooterStickyOffset"], exportAs: ["tngTableFooter"] }, { kind: "directive", type: TngTableRow, selector: "tr[tngTableRow]", inputs: ["tngTableRowDisabled", "tngTableRowExpanded", "tngTableRowId", "tngTableRowSelected"], outputs: ["rowClick", "rowContextMenu"], exportAs: ["tngTableRow"] }, { kind: "directive", type: TngTableHeaderCell, selector: "th[tngTableHeaderCell]", inputs: ["tngTableColumnId", "tngTableStickyColumn", "tngTableStickyOffset", "tngTableTruncate"], exportAs: ["tngTableHeaderCell"] }, { kind: "directive", type: TngTableCell, selector: "td[tngTableCell]", inputs: ["tngTableColumnId", "tngTableHeaders", "tngTableStickyColumn", "tngTableStickyOffset", "tngTableTruncate"], outputs: ["cellClick"], exportAs: ["tngTableCell"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableLayoutHarnessComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [
+                        TngTable,
+                        TngTableScrollContainer,
+                        TngTableHeader,
+                        TngTableBody,
+                        TngTableFooter,
+                        TngTableRow,
+                        TngTableHeaderCell,
+                        TngTableCell,
+                    ],
+                    template: `
+    <div
+      tngTableScrollContainer
+      data-testid="layout-scroll"
+      [dir]="dir()"
+      [tngTableScrollAxis]="scrollAxis()"
+    >
+      <table
+        tngTable
+        data-testid="layout-table"
+        [dir]="dir()"
+        [tngTableLayout]="layout()"
+      >
+        <thead
+          tngTableHeader
+          data-testid="layout-header"
+          [tngTableHeaderSticky]="stickyHeader()"
+          [tngTableHeaderStickyOffset]="headerStickyOffset()"
+        >
+          <tr tngTableRow>
+            <th
+              tngTableHeaderCell
+              data-testid="layout-header-label"
+              [tngTableColumnId]="'label'"
+              [tngTableStickyColumn]="labelStickySide()"
+              [tngTableStickyOffset]="labelStickyOffset()"
+              [tngTableTruncate]="truncate()"
+            >
+              Project name
+            </th>
+            <th
+              tngTableHeaderCell
+              data-testid="layout-header-status"
+              [tngTableColumnId]="'status'"
+              [tngTableStickyColumn]="statusStickySide()"
+              [tngTableStickyOffset]="statusStickyOffset()"
+            >
+              Status
+            </th>
+            <th
+              tngTableHeaderCell
+              data-testid="layout-header-value"
+              [tngTableColumnId]="'value'"
+              [tngTableStickyColumn]="valueStickySide()"
+              [tngTableStickyOffset]="valueStickyOffset()"
+            >
+              Value
+            </th>
+          </tr>
+        </thead>
+
+        <tbody tngTableBody>
+          <tr tngTableRow [tngTableRowId]="'alpha'">
+            <td
+              tngTableCell
+              data-testid="layout-cell-label"
+              [tngTableColumnId]="'label'"
+              [tngTableStickyColumn]="labelStickySide()"
+              [tngTableStickyOffset]="labelStickyOffset()"
+              [tngTableTruncate]="truncate()"
+            >
+              A very long label that should truncate in fixed layout mode
+            </td>
+            <td
+              tngTableCell
+              data-testid="layout-cell-status"
+              [tngTableColumnId]="'status'"
+              [tngTableStickyColumn]="statusStickySide()"
+              [tngTableStickyOffset]="statusStickyOffset()"
+            >
+              Ready
+            </td>
+            <td
+              tngTableCell
+              data-testid="layout-cell-value"
+              [tngTableColumnId]="'value'"
+              [tngTableStickyColumn]="valueStickySide()"
+              [tngTableStickyOffset]="valueStickyOffset()"
+            >
+              42
+            </td>
+          </tr>
+        </tbody>
+
+        <tfoot
+          tngTableFooter
+          data-testid="layout-footer"
+          [tngTableFooterSticky]="stickyFooter()"
+          [tngTableFooterStickyOffset]="footerStickyOffset()"
+        >
+          <tr tngTableRow>
+            <td
+              tngTableCell
+              data-testid="layout-footer-label"
+              [tngTableColumnId]="'label'"
+              [tngTableStickyColumn]="labelStickySide()"
+              [tngTableStickyOffset]="labelStickyOffset()"
+            >
+              Totals
+            </td>
+            <td
+              tngTableCell
+              data-testid="layout-footer-status"
+              [tngTableColumnId]="'status'"
+              [tngTableStickyColumn]="statusStickySide()"
+              [tngTableStickyOffset]="statusStickyOffset()"
+            >
+              Complete
+            </td>
+            <td
+              tngTableCell
+              data-testid="layout-footer-value"
+              [tngTableColumnId]="'value'"
+              [tngTableStickyColumn]="valueStickySide()"
+              [tngTableStickyOffset]="valueStickyOffset()"
+            >
+              42
+            </td>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
+  `,
+                }]
+        }] });
+export class TableSizingHarnessComponent {
+    dir = signal('ltr', ...(ngDevMode ? [{ debugName: "dir" }] : []));
+    widthEvents = [];
+    widths = signal(undefined, ...(ngDevMode ? [{ debugName: "widths" }] : []));
+    onWidthsChange(nextWidths) {
+        this.widths.set({ ...nextWidths });
+        this.widthEvents.push(nextWidths);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableSizingHarnessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: TableSizingHarnessComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+    <table
+      tngTable
+      tngTableColumnSizing
+      data-testid="sizing-table"
+      [dir]="dir()"
+      [tngTableColumnWidths]="widths()"
+      (columnWidthsChange)="onWidthsChange($event)"
+    >
+      <thead tngTableHeader>
+        <tr tngTableRow>
+          <th
+            tngTableHeaderCell
+            tngTableColumn
+            data-testid="sizing-header-label"
+            [tngTableColumn]="'label'"
+            [tngTableColumnWidth]="'240px'"
+          >
+            Label
+            <span [tngTableColumnResizer]="'label'" data-testid="label-resizer"></span>
+          </th>
+          <th
+            tngTableHeaderCell
+            tngTableColumn
+            data-testid="sizing-header-status"
+            [tngTableColumn]="'status'"
+            [tngTableColumnMaxWidth]="'220px'"
+            [tngTableColumnMinWidth]="'120px'"
+            [tngTableColumnWidth]="'140px'"
+          >
+            Status
+            <span [tngTableColumnResizer]="'status'" data-testid="status-resizer"></span>
+          </th>
+          <th
+            tngTableHeaderCell
+            tngTableColumn
+            data-testid="sizing-header-value"
+            [tngTableColumn]="'value'"
+            [tngTableColumnWidth]="'96px'"
+          >
+            Value
+            <span [tngTableColumnResizer]="'value'" data-testid="value-resizer"></span>
+          </th>
+        </tr>
+      </thead>
+
+      <tbody tngTableBody>
+        <tr tngTableRow [tngTableRowId]="'alpha'">
+          <td
+            tngTableCell
+            tngTableColumn
+            data-testid="sizing-cell-label"
+            [tngTableColumn]="'label'"
+            [tngTableColumnWidth]="'240px'"
+          >
+            Alpha
+          </td>
+          <td
+            tngTableCell
+            tngTableColumn
+            data-testid="sizing-cell-status"
+            [tngTableColumn]="'status'"
+            [tngTableColumnMaxWidth]="'220px'"
+            [tngTableColumnMinWidth]="'120px'"
+            [tngTableColumnWidth]="'140px'"
+          >
+            Ready
+          </td>
+          <td
+            tngTableCell
+            tngTableColumn
+            data-testid="sizing-cell-value"
+            [tngTableColumn]="'value'"
+            [tngTableColumnWidth]="'96px'"
+          >
+            42
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  `, isInline: true, dependencies: [{ kind: "directive", type: TngTable, selector: "table[tngTable]", inputs: ["items", "error", "filterable", "tngTableLayout", "loading", "pageable", "rowId", "dir", "ariaLabel", "ariaLabelledby"], exportAs: ["tngTable"] }, { kind: "directive", type: TngTableHeader, selector: "thead[tngTableHeader]", inputs: ["tngTableHeaderSticky", "tngTableHeaderStickyOffset"], exportAs: ["tngTableHeader"] }, { kind: "directive", type: TngTableBody, selector: "tbody[tngTableBody]", exportAs: ["tngTableBody"] }, { kind: "directive", type: TngTableRow, selector: "tr[tngTableRow]", inputs: ["tngTableRowDisabled", "tngTableRowExpanded", "tngTableRowId", "tngTableRowSelected"], outputs: ["rowClick", "rowContextMenu"], exportAs: ["tngTableRow"] }, { kind: "directive", type: TngTableHeaderCell, selector: "th[tngTableHeaderCell]", inputs: ["tngTableColumnId", "tngTableStickyColumn", "tngTableStickyOffset", "tngTableTruncate"], exportAs: ["tngTableHeaderCell"] }, { kind: "directive", type: TngTableCell, selector: "td[tngTableCell]", inputs: ["tngTableColumnId", "tngTableHeaders", "tngTableStickyColumn", "tngTableStickyOffset", "tngTableTruncate"], outputs: ["cellClick"], exportAs: ["tngTableCell"] }, { kind: "directive", type: TngTableColumnSizing, selector: "table[tngTable][tngTableColumnSizing]", inputs: ["tngTableColumnWidths"], outputs: ["columnWidthsChange"], exportAs: ["tngTableColumnSizing"] }, { kind: "directive", type: TngTableColumn, selector: "th[tngTableColumn],td[tngTableColumn]", inputs: ["tngTableColumn", "tngTableColumnWidth", "tngTableColumnMinWidth", "tngTableColumnMaxWidth"], exportAs: ["tngTableColumn"] }, { kind: "directive", type: TngTableColumnResizer, selector: "[tngTableColumnResizer]", inputs: ["tngTableColumnResizer", "tngTableColumnResizerDisabled"], exportAs: ["tngTableColumnResizer"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableSizingHarnessComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [
+                        TngTable,
+                        TngTableHeader,
+                        TngTableBody,
+                        TngTableRow,
+                        TngTableHeaderCell,
+                        TngTableCell,
+                        TngTableColumnSizing,
+                        TngTableColumn,
+                        TngTableColumnResizer,
+                    ],
+                    template: `
+    <table
+      tngTable
+      tngTableColumnSizing
+      data-testid="sizing-table"
+      [dir]="dir()"
+      [tngTableColumnWidths]="widths()"
+      (columnWidthsChange)="onWidthsChange($event)"
+    >
+      <thead tngTableHeader>
+        <tr tngTableRow>
+          <th
+            tngTableHeaderCell
+            tngTableColumn
+            data-testid="sizing-header-label"
+            [tngTableColumn]="'label'"
+            [tngTableColumnWidth]="'240px'"
+          >
+            Label
+            <span [tngTableColumnResizer]="'label'" data-testid="label-resizer"></span>
+          </th>
+          <th
+            tngTableHeaderCell
+            tngTableColumn
+            data-testid="sizing-header-status"
+            [tngTableColumn]="'status'"
+            [tngTableColumnMaxWidth]="'220px'"
+            [tngTableColumnMinWidth]="'120px'"
+            [tngTableColumnWidth]="'140px'"
+          >
+            Status
+            <span [tngTableColumnResizer]="'status'" data-testid="status-resizer"></span>
+          </th>
+          <th
+            tngTableHeaderCell
+            tngTableColumn
+            data-testid="sizing-header-value"
+            [tngTableColumn]="'value'"
+            [tngTableColumnWidth]="'96px'"
+          >
+            Value
+            <span [tngTableColumnResizer]="'value'" data-testid="value-resizer"></span>
+          </th>
+        </tr>
+      </thead>
+
+      <tbody tngTableBody>
+        <tr tngTableRow [tngTableRowId]="'alpha'">
+          <td
+            tngTableCell
+            tngTableColumn
+            data-testid="sizing-cell-label"
+            [tngTableColumn]="'label'"
+            [tngTableColumnWidth]="'240px'"
+          >
+            Alpha
+          </td>
+          <td
+            tngTableCell
+            tngTableColumn
+            data-testid="sizing-cell-status"
+            [tngTableColumn]="'status'"
+            [tngTableColumnMaxWidth]="'220px'"
+            [tngTableColumnMinWidth]="'120px'"
+            [tngTableColumnWidth]="'140px'"
+          >
+            Ready
+          </td>
+          <td
+            tngTableCell
+            tngTableColumn
+            data-testid="sizing-cell-value"
+            [tngTableColumn]="'value'"
+            [tngTableColumnWidth]="'96px'"
+          >
+            42
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  `,
+                }]
+        }] });
+export class TableVirtualHarnessComponent {
+    overscan = signal(0, ...(ngDevMode ? [{ debugName: "overscan" }] : []));
+    rangeChanges = signal([], ...(ngDevMode ? [{ debugName: "rangeChanges" }] : []));
+    rowHeight = signal(40, ...(ngDevMode ? [{ debugName: "rowHeight" }] : []));
+    rows = signal(Array.from({ length: 20 }, (_, index) => ({
+        id: `row-${index}`,
+        label: `Row ${index}`,
+        status: index % 2 === 0 ? 'Ready' : 'Draft',
+        value: index,
+    })), ...(ngDevMode ? [{ debugName: "rows" }] : []));
+    selectedIds = signal([], ...(ngDevMode ? [{ debugName: "selectedIds" }] : []));
+    stickyHeader = signal(false, ...(ngDevMode ? [{ debugName: "stickyHeader" }] : []));
+    viewportHeight = signal(120, ...(ngDevMode ? [{ debugName: "viewportHeight" }] : []));
+    selectionRef;
+    virtualRef;
+    onSelectionChange(event) {
+        this.selectedIds.set(event.selectedIds);
+    }
+    onRangeChange(event) {
+        this.rangeChanges.set([...this.rangeChanges(), event]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableVirtualHarnessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TableVirtualHarnessComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "selectionRef", first: true, predicate: ["selectionRef"], descendants: true }, { propertyName: "virtualRef", first: true, predicate: ["virtualRef"], descendants: true, static: true }], ngImport: i0, template: `
+    <div
+      tngTableScrollContainer
+      tngTableVirtual
+      #virtualRef="tngTableVirtual"
+      data-testid="virtual-scroll"
+      [tngTableScrollAxis]="'both'"
+      [tngTableVirtualItemCount]="rows().length"
+      [tngTableVirtualItemSize]="rowHeight()"
+      [tngTableVirtualOverscan]="overscan()"
+      [tngTableVirtualViewportHeight]="viewportHeight()"
+      (rangeChange)="onRangeChange($event)"
+    >
+      <table
+        tngTable
+        tngTableSelection
+        #selectionRef="tngTableSelection"
+        data-testid="virtual-table"
+        [tngTableSelectedIds]="selectedIds()"
+        (selectionChange)="onSelectionChange($event)"
+      >
+        <thead
+          tngTableHeader
+          data-testid="virtual-header"
+          [tngTableHeaderSticky]="stickyHeader()"
+        >
+          <tr tngTableRow>
+            <th tngTableHeaderCell [tngTableColumnId]="'label'">Label</th>
+            <th tngTableHeaderCell [tngTableColumnId]="'status'">Status</th>
+            <th tngTableHeaderCell [tngTableColumnId]="'value'">Value</th>
+          </tr>
+        </thead>
+
+        <tbody tngTableBody>
+          @if (virtualRef.beforeSize() > 0) {
+            <tr
+              tngTableVirtualSpacer
+              data-testid="virtual-top-spacer"
+              [tngTableVirtualSpacerColspan]="3"
+              [tngTableVirtualSpacerSize]="virtualRef.beforeSize()"
+            ></tr>
+          }
+
+          @for (row of virtualRef.slice(rows()); track row.id) {
+            <tr
+              tngTableRow
+              [attr.data-testid]="'virtual-row-' + row.id"
+              [tngTableRowId]="row.id"
+            >
+              <td tngTableCell [tngTableColumnId]="'label'">{{ row.label }}</td>
+              <td tngTableCell [tngTableColumnId]="'status'">{{ row.status }}</td>
+              <td tngTableCell [tngTableColumnId]="'value'">{{ row.value }}</td>
+            </tr>
+          }
+
+          @if (virtualRef.afterSize() > 0) {
+            <tr
+              tngTableVirtualSpacer
+              data-testid="virtual-bottom-spacer"
+              [tngTableVirtualSpacerColspan]="3"
+              [tngTableVirtualSpacerSize]="virtualRef.afterSize()"
+            ></tr>
+          }
+        </tbody>
+      </table>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: TngTable, selector: "table[tngTable]", inputs: ["items", "error", "filterable", "tngTableLayout", "loading", "pageable", "rowId", "dir", "ariaLabel", "ariaLabelledby"], exportAs: ["tngTable"] }, { kind: "directive", type: TngTableBody, selector: "tbody[tngTableBody]", exportAs: ["tngTableBody"] }, { kind: "directive", type: TngTableCell, selector: "td[tngTableCell]", inputs: ["tngTableColumnId", "tngTableHeaders", "tngTableStickyColumn", "tngTableStickyOffset", "tngTableTruncate"], outputs: ["cellClick"], exportAs: ["tngTableCell"] }, { kind: "directive", type: TngTableHeader, selector: "thead[tngTableHeader]", inputs: ["tngTableHeaderSticky", "tngTableHeaderStickyOffset"], exportAs: ["tngTableHeader"] }, { kind: "directive", type: TngTableHeaderCell, selector: "th[tngTableHeaderCell]", inputs: ["tngTableColumnId", "tngTableStickyColumn", "tngTableStickyOffset", "tngTableTruncate"], exportAs: ["tngTableHeaderCell"] }, { kind: "directive", type: TngTableRow, selector: "tr[tngTableRow]", inputs: ["tngTableRowDisabled", "tngTableRowExpanded", "tngTableRowId", "tngTableRowSelected"], outputs: ["rowClick", "rowContextMenu"], exportAs: ["tngTableRow"] }, { kind: "directive", type: TngTableScrollContainer, selector: "[tngTableScrollContainer]", inputs: ["tngTableScrollAxis", "dir"], exportAs: ["tngTableScrollContainer"] }, { kind: "directive", type: TngTableSelection, selector: "table[tngTable][tngTableSelection]", inputs: ["tngTableSelectionMode", "tngTableSelectedIds"], outputs: ["selectionChange"], exportAs: ["tngTableSelection"] }, { kind: "directive", type: TngTableVirtual, selector: "[tngTableVirtual]", inputs: ["tngTableVirtualItemCount", "tngTableVirtualItemSize", "tngTableVirtualOverscan", "tngTableVirtualViewportHeight"], outputs: ["rangeChange"], exportAs: ["tngTableVirtual"] }, { kind: "component", type: TngTableVirtualSpacer, selector: "tr[tngTableVirtualSpacer]", inputs: ["tngTableVirtualSpacerSize", "tngTableVirtualSpacerColspan"], exportAs: ["tngTableVirtualSpacer"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableVirtualHarnessComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [
+                        TngTable,
+                        TngTableBody,
+                        TngTableCell,
+                        TngTableHeader,
+                        TngTableHeaderCell,
+                        TngTableRow,
+                        TngTableScrollContainer,
+                        TngTableSelection,
+                        TngTableVirtual,
+                        TngTableVirtualSpacer,
+                    ],
+                    template: `
+    <div
+      tngTableScrollContainer
+      tngTableVirtual
+      #virtualRef="tngTableVirtual"
+      data-testid="virtual-scroll"
+      [tngTableScrollAxis]="'both'"
+      [tngTableVirtualItemCount]="rows().length"
+      [tngTableVirtualItemSize]="rowHeight()"
+      [tngTableVirtualOverscan]="overscan()"
+      [tngTableVirtualViewportHeight]="viewportHeight()"
+      (rangeChange)="onRangeChange($event)"
+    >
+      <table
+        tngTable
+        tngTableSelection
+        #selectionRef="tngTableSelection"
+        data-testid="virtual-table"
+        [tngTableSelectedIds]="selectedIds()"
+        (selectionChange)="onSelectionChange($event)"
+      >
+        <thead
+          tngTableHeader
+          data-testid="virtual-header"
+          [tngTableHeaderSticky]="stickyHeader()"
+        >
+          <tr tngTableRow>
+            <th tngTableHeaderCell [tngTableColumnId]="'label'">Label</th>
+            <th tngTableHeaderCell [tngTableColumnId]="'status'">Status</th>
+            <th tngTableHeaderCell [tngTableColumnId]="'value'">Value</th>
+          </tr>
+        </thead>
+
+        <tbody tngTableBody>
+          @if (virtualRef.beforeSize() > 0) {
+            <tr
+              tngTableVirtualSpacer
+              data-testid="virtual-top-spacer"
+              [tngTableVirtualSpacerColspan]="3"
+              [tngTableVirtualSpacerSize]="virtualRef.beforeSize()"
+            ></tr>
+          }
+
+          @for (row of virtualRef.slice(rows()); track row.id) {
+            <tr
+              tngTableRow
+              [attr.data-testid]="'virtual-row-' + row.id"
+              [tngTableRowId]="row.id"
+            >
+              <td tngTableCell [tngTableColumnId]="'label'">{{ row.label }}</td>
+              <td tngTableCell [tngTableColumnId]="'status'">{{ row.status }}</td>
+              <td tngTableCell [tngTableColumnId]="'value'">{{ row.value }}</td>
+            </tr>
+          }
+
+          @if (virtualRef.afterSize() > 0) {
+            <tr
+              tngTableVirtualSpacer
+              data-testid="virtual-bottom-spacer"
+              [tngTableVirtualSpacerColspan]="3"
+              [tngTableVirtualSpacerSize]="virtualRef.afterSize()"
+            ></tr>
+          }
+        </tbody>
+      </table>
+    </div>
+  `,
+                }]
+        }], propDecorators: { selectionRef: [{
+                type: ViewChild,
+                args: ['selectionRef']
+            }], virtualRef: [{
+                type: ViewChild,
+                args: ['virtualRef', { static: true }]
+            }] } });
+export class TableKeyboardHarnessComponent {
+    rows = signal([
+        { id: 'alpha', label: 'Alpha', status: 'Ready', value: 1 },
+        { disabled: true, id: 'beta', label: 'Beta', status: 'Blocked', value: 2 },
+        { id: 'gamma', label: 'Gamma', status: 'Draft', value: 3 },
+    ], ...(ngDevMode ? [{ debugName: "rows" }] : []));
+    showTable = signal(true, ...(ngDevMode ? [{ debugName: "showTable" }] : []));
+    tableRef;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableKeyboardHarnessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TableKeyboardHarnessComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "tableRef", first: true, predicate: TngTable, descendants: true }], ngImport: i0, template: `
+    <button type="button" data-testid="before">Before</button>
+
+    @if (showTable()) {
+      <table tngTable data-testid="keyboard-table">
+        <thead tngTableHeader>
+          <tr tngTableRow>
+            <th
+              tngTableHeaderCell
+              [tngTableColumnId]="'label'"
+              data-testid="keyboard-cell-header-label"
+            >
+              Label
+            </th>
+            <th
+              tngTableHeaderCell
+              [tngTableColumnId]="'status'"
+              data-testid="keyboard-cell-header-status"
+            >
+              Status
+            </th>
+            <th
+              tngTableHeaderCell
+              [tngTableColumnId]="'value'"
+              data-testid="keyboard-cell-header-value"
+            >
+              Value
+            </th>
+          </tr>
+        </thead>
+
+        <tbody tngTableBody>
+          @for (row of rows(); track row.id) {
+            <tr
+              tngTableRow
+              [tngTableRowDisabled]="row.disabled ?? false"
+              [tngTableRowId]="row.id"
+            >
+              <td
+                tngTableCell
+                [attr.data-testid]="'keyboard-cell-' + row.id + '-label'"
+                [tngTableColumnId]="'label'"
+              >
+                {{ row.label }}
+              </td>
+              <td
+                tngTableCell
+                [attr.data-testid]="'keyboard-cell-' + row.id + '-status'"
+                [tngTableColumnId]="'status'"
+              >
+                {{ row.status }}
+              </td>
+              <td
+                tngTableCell
+                [attr.data-testid]="'keyboard-cell-' + row.id + '-value'"
+                [tngTableColumnId]="'value'"
+              >
+                {{ row.value }}
+              </td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    }
+
+    <button type="button" data-testid="after">After</button>
+  `, isInline: true, dependencies: [{ kind: "directive", type: TngTable, selector: "table[tngTable]", inputs: ["items", "error", "filterable", "tngTableLayout", "loading", "pageable", "rowId", "dir", "ariaLabel", "ariaLabelledby"], exportAs: ["tngTable"] }, { kind: "directive", type: TngTableHeader, selector: "thead[tngTableHeader]", inputs: ["tngTableHeaderSticky", "tngTableHeaderStickyOffset"], exportAs: ["tngTableHeader"] }, { kind: "directive", type: TngTableBody, selector: "tbody[tngTableBody]", exportAs: ["tngTableBody"] }, { kind: "directive", type: TngTableRow, selector: "tr[tngTableRow]", inputs: ["tngTableRowDisabled", "tngTableRowExpanded", "tngTableRowId", "tngTableRowSelected"], outputs: ["rowClick", "rowContextMenu"], exportAs: ["tngTableRow"] }, { kind: "directive", type: TngTableHeaderCell, selector: "th[tngTableHeaderCell]", inputs: ["tngTableColumnId", "tngTableStickyColumn", "tngTableStickyOffset", "tngTableTruncate"], exportAs: ["tngTableHeaderCell"] }, { kind: "directive", type: TngTableCell, selector: "td[tngTableCell]", inputs: ["tngTableColumnId", "tngTableHeaders", "tngTableStickyColumn", "tngTableStickyOffset", "tngTableTruncate"], outputs: ["cellClick"], exportAs: ["tngTableCell"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableKeyboardHarnessComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [
+                        TngTable,
+                        TngTableHeader,
+                        TngTableBody,
+                        TngTableRow,
+                        TngTableHeaderCell,
+                        TngTableCell,
+                    ],
+                    template: `
+    <button type="button" data-testid="before">Before</button>
+
+    @if (showTable()) {
+      <table tngTable data-testid="keyboard-table">
+        <thead tngTableHeader>
+          <tr tngTableRow>
+            <th
+              tngTableHeaderCell
+              [tngTableColumnId]="'label'"
+              data-testid="keyboard-cell-header-label"
+            >
+              Label
+            </th>
+            <th
+              tngTableHeaderCell
+              [tngTableColumnId]="'status'"
+              data-testid="keyboard-cell-header-status"
+            >
+              Status
+            </th>
+            <th
+              tngTableHeaderCell
+              [tngTableColumnId]="'value'"
+              data-testid="keyboard-cell-header-value"
+            >
+              Value
+            </th>
+          </tr>
+        </thead>
+
+        <tbody tngTableBody>
+          @for (row of rows(); track row.id) {
+            <tr
+              tngTableRow
+              [tngTableRowDisabled]="row.disabled ?? false"
+              [tngTableRowId]="row.id"
+            >
+              <td
+                tngTableCell
+                [attr.data-testid]="'keyboard-cell-' + row.id + '-label'"
+                [tngTableColumnId]="'label'"
+              >
+                {{ row.label }}
+              </td>
+              <td
+                tngTableCell
+                [attr.data-testid]="'keyboard-cell-' + row.id + '-status'"
+                [tngTableColumnId]="'status'"
+              >
+                {{ row.status }}
+              </td>
+              <td
+                tngTableCell
+                [attr.data-testid]="'keyboard-cell-' + row.id + '-value'"
+                [tngTableColumnId]="'value'"
+              >
+                {{ row.value }}
+              </td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    }
+
+    <button type="button" data-testid="after">After</button>
+  `,
+                }]
+        }], propDecorators: { tableRef: [{
+                type: ViewChild,
+                args: [TngTable]
+            }] } });
+//# sourceMappingURL=tng-table.test-harness.js.map