Utilities

Selection

Checked rows by key in a signal: one, a filtered part or all, with the state of a header checkbox. Keys survive paging and filtering.

Part of @tectra-ng/utils (npm install @tectra-ng/utils, also included in tectra-ng).

Features1

API

Theming

Basic

A header checkbox with the partial state, "Select paid" with a predicate, and a counter from the count signal.

0 of 4 selected


INV-1042	Northwind Studio	Paid
INV-1043	Blue Harbor	Pending
INV-1044	Oakline Partners	Paid
INV-1045	Silverleaf	Pending

39 lines

<div class="layout">  <div class="flex">    <button      txButton      label="Select paid"      size="small"      severity="secondary"      (click)="selection.select(isPaid, invoices, true)"    ></button>    <button      txButton      label="Clear"      size="small"      severity="secondary"      [disabled]="!selection.count()"      (click)="selection.clear()"    ></button>    <span class="hint">{{ selection.count() }} of {{ invoices.length }} selected</span>  </div>  <tx-table ariaLabel="Invoices" dataKey="id" [value]="invoices" [columns]="columns">    <ng-template txTableHeaderCell="pick">      <tx-checkbox        ariaLabel="Select all"        [binary]="true"        [ngModel]="selection.areAllSelected(invoices)"        [indeterminate]="selection.isPartial(invoices)"        (ngModelChange)="selection.toggleAll(invoices, $event)"      />    </ng-template>    <ng-template txTableCell="pick" let-row>      <tx-checkbox        [ariaLabel]="'Select ' + row.id"        [binary]="true"        [ngModel]="selection.isSelected(row)"        (ngModelChange)="selection.toggleOne(row, $event)"      />    </ng-template>  </tx-table></div>