@taiga-ui/addon-table
Version:
A library to display tabled data with filters, search, group actions, etc.
40 lines • 12.6 kB
JavaScript
import { AsyncPipe, NgForOf, NgIf, NgTemplateOutlet } from '@angular/common';
import { ChangeDetectionStrategy, Component, ContentChildren, forwardRef, inject, } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { ResizeObserverService } from '@ng-web-apis/resize-observer';
import { EMPTY_QUERY } from '@taiga-ui/cdk/constants';
import { tuiQueryListChanges, tuiZoneOptimized } from '@taiga-ui/cdk/observables';
import { distinctUntilChanged, map, ReplaySubject, switchMap } from 'rxjs';
import { TuiTableCell } from '../directives/cell.directive';
import { TuiTableDirective } from '../directives/table.directive';
import { TUI_TABLE_PROVIDER } from '../providers/table.provider';
import { TuiTableTbody } from '../tbody/tbody.component';
import { TuiTableTd } from '../td/td.component';
import * as i0 from "@angular/core";
class TuiTableTr {
constructor() {
this.cells = EMPTY_QUERY;
this.body = inject(forwardRef(() => TuiTableTbody));
this.contentReady$ = new ReplaySubject(1);
this.table = inject(forwardRef(() => TuiTableDirective));
this.height = toSignal(inject(ResizeObserverService, { self: true }).pipe(map(([entry]) => entry?.contentRect.height ?? 0), distinctUntilChanged(), tuiZoneOptimized()), { initialValue: 0 });
this.cells$ = this.contentReady$.pipe(switchMap(() => tuiQueryListChanges(this.cells)), map((cells) => cells.reduce((record, item) => ({ ...record, [item.tuiCell]: item }), {})));
this.item$ = this.contentReady$.pipe(switchMap(() => tuiQueryListChanges(this.body.rows)), map((rows) => this.body.data[rows.findIndex((row) => row === this)]));
}
ngAfterContentInit() {
Promise.resolve().then(() => this.contentReady$.next(true));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiTableTr, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiTableTr, isStandalone: true, selector: "tr[tuiTr]", host: { properties: { "style.--t-row-height.px": "height()" } }, providers: [TUI_TABLE_PROVIDER, ResizeObserverService], queries: [{ propertyName: "cells", predicate: i0.forwardRef(function () { return TuiTableCell; }) }], ngImport: i0, template: "<ng-container *ngIf=\"cells$ | async as items; else dummy\">\n <ng-container\n *ngFor=\"let key of table.columns\"\n [ngTemplateOutlet]=\"(items[key] && items[key].template) || plain\"\n >\n <ng-template #plain>\n <td\n *ngIf=\"item$ | async as item\"\n tuiTd\n >\n {{ item[key] }}\n </td>\n </ng-template>\n </ng-container>\n</ng-container>\n<ng-template #dummy>\n <td></td>\n</ng-template>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TuiTableTd, selector: "th[tuiTd], td[tuiTd]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
export { TuiTableTr };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiTableTr, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'tr[tuiTr]', imports: [AsyncPipe, NgForOf, NgIf, NgTemplateOutlet, TuiTableTd], changeDetection: ChangeDetectionStrategy.OnPush, providers: [TUI_TABLE_PROVIDER, ResizeObserverService], host: {
'[style.--t-row-height.px]': 'height()',
}, template: "<ng-container *ngIf=\"cells$ | async as items; else dummy\">\n <ng-container\n *ngFor=\"let key of table.columns\"\n [ngTemplateOutlet]=\"(items[key] && items[key].template) || plain\"\n >\n <ng-template #plain>\n <td\n *ngIf=\"item$ | async as item\"\n tuiTd\n >\n {{ item[key] }}\n </td>\n </ng-template>\n </ng-container>\n</ng-container>\n<ng-template #dummy>\n <td></td>\n</ng-template>\n" }]
}], propDecorators: { cells: [{
type: ContentChildren,
args: [forwardRef(() => TuiTableCell)]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYWRkb24tdGFibGUvY29tcG9uZW50cy90YWJsZS90ci90ci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hZGRvbi10YWJsZS9jb21wb25lbnRzL3RhYmxlL3RyL3RyLnRlbXBsYXRlLmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBRSxPQUFPLEVBQUUsSUFBSSxFQUFFLGdCQUFnQixFQUFDLE1BQU0saUJBQWlCLENBQUM7QUFFM0UsT0FBTyxFQUNILHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsZUFBZSxFQUNmLFVBQVUsRUFDVixNQUFNLEdBQ1QsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLDRCQUE0QixDQUFDO0FBQ3BELE9BQU8sRUFBQyxxQkFBcUIsRUFBQyxNQUFNLDhCQUE4QixDQUFDO0FBQ25FLE9BQU8sRUFBQyxXQUFXLEVBQUMsTUFBTSx5QkFBeUIsQ0FBQztBQUNwRCxPQUFPLEVBQUMsbUJBQW1CLEVBQUUsZ0JBQWdCLEVBQUMsTUFBTSwyQkFBMkIsQ0FBQztBQUNoRixPQUFPLEVBQUMsb0JBQW9CLEVBQUUsR0FBRyxFQUFFLGFBQWEsRUFBRSxTQUFTLEVBQUMsTUFBTSxNQUFNLENBQUM7QUFFekUsT0FBTyxFQUFDLFlBQVksRUFBQyxNQUFNLDhCQUE4QixDQUFDO0FBQzFELE9BQU8sRUFBQyxpQkFBaUIsRUFBQyxNQUFNLCtCQUErQixDQUFDO0FBQ2hFLE9BQU8sRUFBQyxrQkFBa0IsRUFBQyxNQUFNLDZCQUE2QixDQUFDO0FBQy9ELE9BQU8sRUFBQyxhQUFhLEVBQUMsTUFBTSwwQkFBMEIsQ0FBQztBQUN2RCxPQUFPLEVBQUMsVUFBVSxFQUFDLE1BQU0sb0JBQW9CLENBQUM7O0FBRTlDLE1BV2EsVUFBVTtJQVh2QjtRQWVxQixVQUFLLEdBQTRCLFdBQVcsQ0FBQztRQUU3QyxTQUFJLEdBQUcsTUFBTSxDQUFtQixVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsYUFBYSxDQUFDLENBQUMsQ0FBQztRQUVqRSxrQkFBYSxHQUFHLElBQUksYUFBYSxDQUFVLENBQUMsQ0FBQyxDQUFDO1FBRTVDLFVBQUssR0FBRyxNQUFNLENBQzdCLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxpQkFBaUIsQ0FBQyxDQUN0QyxDQUFDO1FBRWlCLFdBQU0sR0FBRyxRQUFRLENBQ2hDLE1BQU0sQ0FBQyxxQkFBcUIsRUFBRSxFQUFDLElBQUksRUFBRSxJQUFJLEVBQUMsQ0FBQyxDQUFDLElBQUksQ0FDNUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsRUFBRSxFQUFFLENBQUMsS0FBSyxFQUFFLFdBQVcsQ0FBQyxNQUFNLElBQUksQ0FBQyxDQUFDLEVBQ2hELG9CQUFvQixFQUFFLEVBQ3RCLGdCQUFnQixFQUFFLENBQ3JCLEVBQ0QsRUFBQyxZQUFZLEVBQUUsQ0FBQyxFQUFDLENBQ3BCLENBQUM7UUFFaUIsV0FBTSxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUMvQyxTQUFTLENBQUMsR0FBRyxFQUFFLENBQUMsbUJBQW1CLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLEVBQ2hELEdBQUcsQ0FBQyxDQUFDLEtBQUssRUFBRSxFQUFFLENBQ1YsS0FBSyxDQUFDLE1BQU0sQ0FDUixDQUFDLE1BQU0sRUFBRSxJQUFJLEVBQUUsRUFBRSxDQUFDLENBQUMsRUFBQyxHQUFHLE1BQU0sRUFBRSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsRUFBRSxJQUFJLEVBQUMsQ0FBQyxFQUNyRCxFQUE0QyxDQUMvQyxDQUNKLENBQ0osQ0FBQztRQUVpQixVQUFLLEdBQUcsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQzlDLFNBQVMsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxtQkFBbUIsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLEVBQ3BELEdBQUcsQ0FDQyxDQUFDLElBQUksRUFBRSxFQUFFLENBQ0wsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDLEdBQUcsRUFBRSxFQUFFLENBQUMsR0FBRyxLQUFLLElBQUksQ0FBQyxDQUduRCxDQUNSLENBQ0osQ0FBQztLQUtMO0lBSFUsa0JBQWtCO1FBQ3JCLE9BQU8sQ0FBQyxPQUFPLEVBQUUsQ0FBQyxJQUFJLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQztJQUNoRSxDQUFDOytHQTlDUSxVQUFVO21HQUFWLFVBQVUseUhBTFIsQ0FBQyxrQkFBa0IsRUFBRSxxQkFBcUIsQ0FBQyxtRkFRcEIsWUFBWSxpQ0NuQ2xELGlnQkFrQkEsdUNETWMsU0FBUyw4Q0FBRSxPQUFPLG1IQUFFLElBQUksNkZBQUUsZ0JBQWdCLG9KQUFFLFVBQVU7O1NBUXZELFVBQVU7NEZBQVYsVUFBVTtrQkFYdEIsU0FBUztpQ0FDTSxJQUFJLFlBQ04sV0FBVyxXQUNaLENBQUMsU0FBUyxFQUFFLE9BQU8sRUFBRSxJQUFJLEVBQUUsZ0JBQWdCLEVBQUUsVUFBVSxDQUFDLG1CQUVoRCx1QkFBdUIsQ0FBQyxNQUFNLGFBQ3BDLENBQUMsa0JBQWtCLEVBQUUscUJBQXFCLENBQUMsUUFDaEQ7d0JBQ0YsMkJBQTJCLEVBQUUsVUFBVTtxQkFDMUM7OEJBTWdCLEtBQUs7c0JBRHJCLGVBQWU7dUJBQUMsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLFlBQVksQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7QXN5bmNQaXBlLCBOZ0Zvck9mLCBOZ0lmLCBOZ1RlbXBsYXRlT3V0bGV0fSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHR5cGUge0FmdGVyQ29udGVudEluaXQsIFF1ZXJ5TGlzdH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge1xuICAgIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICAgIENvbXBvbmVudCxcbiAgICBDb250ZW50Q2hpbGRyZW4sXG4gICAgZm9yd2FyZFJlZixcbiAgICBpbmplY3QsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHt0b1NpZ25hbH0gZnJvbSAnQGFuZ3VsYXIvY29yZS9yeGpzLWludGVyb3AnO1xuaW1wb3J0IHtSZXNpemVPYnNlcnZlclNlcnZpY2V9IGZyb20gJ0BuZy13ZWItYXBpcy9yZXNpemUtb2JzZXJ2ZXInO1xuaW1wb3J0IHtFTVBUWV9RVUVSWX0gZnJvbSAnQHRhaWdhLXVpL2Nkay9jb25zdGFudHMnO1xuaW1wb3J0IHt0dWlRdWVyeUxpc3RDaGFuZ2VzLCB0dWlab25lT3B0aW1pemVkfSBmcm9tICdAdGFpZ2EtdWkvY2RrL29ic2VydmFibGVzJztcbmltcG9ydCB7ZGlzdGluY3RVbnRpbENoYW5nZWQsIG1hcCwgUmVwbGF5U3ViamVjdCwgc3dpdGNoTWFwfSBmcm9tICdyeGpzJztcblxuaW1wb3J0IHtUdWlUYWJsZUNlbGx9IGZyb20gJy4uL2RpcmVjdGl2ZXMvY2VsbC5kaXJlY3RpdmUnO1xuaW1wb3J0IHtUdWlUYWJsZURpcmVjdGl2ZX0gZnJvbSAnLi4vZGlyZWN0aXZlcy90YWJsZS5kaXJlY3RpdmUnO1xuaW1wb3J0IHtUVUlfVEFCTEVfUFJPVklERVJ9IGZyb20gJy4uL3Byb3ZpZGVycy90YWJsZS5wcm92aWRlcic7XG5pbXBvcnQge1R1aVRhYmxlVGJvZHl9IGZyb20gJy4uL3Rib2R5L3Rib2R5LmNvbXBvbmVudCc7XG5pbXBvcnQge1R1aVRhYmxlVGR9IGZyb20gJy4uL3RkL3RkLmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgc2VsZWN0b3I6ICd0clt0dWlUcl0nLFxuICAgIGltcG9ydHM6IFtBc3luY1BpcGUsIE5nRm9yT2YsIE5nSWYsIE5nVGVtcGxhdGVPdXRsZXQsIFR1aVRhYmxlVGRdLFxuICAgIHRlbXBsYXRlVXJsOiAnLi90ci50ZW1wbGF0ZS5odG1sJyxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBwcm92aWRlcnM6IFtUVUlfVEFCTEVfUFJPVklERVIsIFJlc2l6ZU9ic2VydmVyU2VydmljZV0sXG4gICAgaG9zdDoge1xuICAgICAgICAnW3N0eWxlLi0tdC1yb3ctaGVpZ2h0LnB4XSc6ICdoZWlnaHQoKScsXG4gICAgfSxcbn0pXG5leHBvcnQgY2xhc3MgVHVpVGFibGVUcjxUIGV4dGVuZHMgUGFydGlhbDxSZWNvcmQ8a2V5b2YgVCwgYW55Pj4+XG4gICAgaW1wbGVtZW50cyBBZnRlckNvbnRlbnRJbml0XG57XG4gICAgQENvbnRlbnRDaGlsZHJlbihmb3J3YXJkUmVmKCgpID0+IFR1aVRhYmxlQ2VsbCkpXG4gICAgcHJpdmF0ZSByZWFkb25seSBjZWxsczogUXVlcnlMaXN0PFR1aVRhYmxlQ2VsbD4gPSBFTVBUWV9RVUVSWTtcblxuICAgIHByaXZhdGUgcmVhZG9ubHkgYm9keSA9IGluamVjdDxUdWlUYWJsZVRib2R5PFQ+Pihmb3J3YXJkUmVmKCgpID0+IFR1aVRhYmxlVGJvZHkpKTtcblxuICAgIHByaXZhdGUgcmVhZG9ubHkgY29udGVudFJlYWR5JCA9IG5ldyBSZXBsYXlTdWJqZWN0PGJvb2xlYW4+KDEpO1xuXG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IHRhYmxlID0gaW5qZWN0PFR1aVRhYmxlRGlyZWN0aXZlPFQ+PihcbiAgICAgICAgZm9yd2FyZFJlZigoKSA9PiBUdWlUYWJsZURpcmVjdGl2ZSksXG4gICAgKTtcblxuICAgIHByb3RlY3RlZCByZWFkb25seSBoZWlnaHQgPSB0b1NpZ25hbChcbiAgICAgICAgaW5qZWN0KFJlc2l6ZU9ic2VydmVyU2VydmljZSwge3NlbGY6IHRydWV9KS5waXBlKFxuICAgICAgICAgICAgbWFwKChbZW50cnldKSA9PiBlbnRyeT8uY29udGVudFJlY3QuaGVpZ2h0ID8/IDApLFxuICAgICAgICAgICAgZGlzdGluY3RVbnRpbENoYW5nZWQoKSxcbiAgICAgICAgICAgIHR1aVpvbmVPcHRpbWl6ZWQoKSxcbiAgICAgICAgKSxcbiAgICAgICAge2luaXRpYWxWYWx1ZTogMH0sXG4gICAgKTtcblxuICAgIHByb3RlY3RlZCByZWFkb25seSBjZWxscyQgPSB0aGlzLmNvbnRlbnRSZWFkeSQucGlwZShcbiAgICAgICAgc3dpdGNoTWFwKCgpID0+IHR1aVF1ZXJ5TGlzdENoYW5nZXModGhpcy5jZWxscykpLFxuICAgICAgICBtYXAoKGNlbGxzKSA9PlxuICAgICAgICAgICAgY2VsbHMucmVkdWNlKFxuICAgICAgICAgICAgICAgIChyZWNvcmQsIGl0ZW0pID0+ICh7Li4ucmVjb3JkLCBbaXRlbS50dWlDZWxsXTogaXRlbX0pLFxuICAgICAgICAgICAgICAgIHt9IGFzIFJlY29yZDxzdHJpbmcgfCBrZXlvZiBULCBUdWlUYWJsZUNlbGw+LFxuICAgICAgICAgICAgKSxcbiAgICAgICAgKSxcbiAgICApO1xuXG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IGl0ZW0kID0gdGhpcy5jb250ZW50UmVhZHkkLnBpcGUoXG4gICAgICAgIHN3aXRjaE1hcCgoKSA9PiB0dWlRdWVyeUxpc3RDaGFuZ2VzKHRoaXMuYm9keS5yb3dzKSksXG4gICAgICAgIG1hcChcbiAgICAgICAgICAgIChyb3dzKSA9PlxuICAgICAgICAgICAgICAgIHRoaXMuYm9keS5kYXRhW3Jvd3MuZmluZEluZGV4KChyb3cpID0+IHJvdyA9PT0gdGhpcyldIGFzIFJlY29yZDxcbiAgICAgICAgICAgICAgICAgICAgc3RyaW5nIHwga2V5b2YgVCxcbiAgICAgICAgICAgICAgICAgICAgYW55XG4gICAgICAgICAgICAgICAgPixcbiAgICAgICAgKSxcbiAgICApO1xuXG4gICAgcHVibGljIG5nQWZ0ZXJDb250ZW50SW5pdCgpOiB2b2lkIHtcbiAgICAgICAgUHJvbWlzZS5yZXNvbHZlKCkudGhlbigoKSA9PiB0aGlzLmNvbnRlbnRSZWFkeSQubmV4dCh0cnVlKSk7XG4gICAgfVxufVxuIiwiPG5nLWNvbnRhaW5lciAqbmdJZj1cImNlbGxzJCB8IGFzeW5jIGFzIGl0ZW1zOyBlbHNlIGR1bW15XCI+XG4gICAgPG5nLWNvbnRhaW5lclxuICAgICAgICAqbmdGb3I9XCJsZXQga2V5IG9mIHRhYmxlLmNvbHVtbnNcIlxuICAgICAgICBbbmdUZW1wbGF0ZU91dGxldF09XCIoaXRlbXNba2V5XSAmJiBpdGVtc1trZXldLnRlbXBsYXRlKSB8fCBwbGFpblwiXG4gICAgPlxuICAgICAgICA8bmctdGVtcGxhdGUgI3BsYWluPlxuICAgICAgICAgICAgPHRkXG4gICAgICAgICAgICAgICAgKm5nSWY9XCJpdGVtJCB8IGFzeW5jIGFzIGl0ZW1cIlxuICAgICAgICAgICAgICAgIHR1aVRkXG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAge3sgaXRlbVtrZXldIH19XG4gICAgICAgICAgICA8L3RkPlxuICAgICAgICA8L25nLXRlbXBsYXRlPlxuICAgIDwvbmctY29udGFpbmVyPlxuPC9uZy1jb250YWluZXI+XG48bmctdGVtcGxhdGUgI2R1bW15PlxuICAgIDx0ZD48L3RkPlxuPC9uZy10ZW1wbGF0ZT5cbiJdfQ==