Utilities

Filter

Search and filters for any list with the rules of the table filters: no case, no accents, nested fields by a path, the same match modes.

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

Features2

API

Theming

Search

txSearch looks through several fields, nested ones too. Try "zoe" or "design" — accents and case do not matter.


Zoë Novák	zoe@example.com	Design
Ann Lee	ann@example.com	Platform
Mark Ivanenko	mark@example.com	Sales
Olena Kovalenko	olena@example.com	Design

12 lines

<div class="layout">  <tx-icon-field class="search">    <tx-input-icon icon="search" />    <input txInput placeholder="Search people" aria-label="Search people" [(ngModel)]="query" />  </tx-icon-field>  <tx-table    ariaLabel="People"    dataKey="id"    [value]="people | txSearch: query() : ['name', 'email', 'team.name']"    [columns]="columns"  /></div>

Match modes

filterBy with a match mode of the table filters — pick one and a value.


SO-1	120
SO-2	480
SO-4	960

7 lines

<div class="layout">  <div class="toolbar">    <tx-select ariaLabel="Match mode" [options]="modes" [(ngModel)]="mode" />    <tx-input-number ariaLabel="Total" [(ngModel)]="value" />  </div>  <tx-table ariaLabel="Orders" dataKey="id" [value]="orders()" [columns]="columns" /></div>