Utilities

Filter State

Filters of a list page that survive a reload and can be shared as a link — saved in local storage and, when asked, in the query string. Back and forward restore them.

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

Features2

API

Theming

Basic

Change the filters and reload the page: they come back from local storage. The badge counts the changed keys, Reset clears them.


Login page is slow	Open	Platform
Export misses a column	In progress	Data
Typo in the invoice email	Done	Support
Dark mode flicker	Open	Design
Webhook retries twice	In progress	Platform

27 lines

<div class="layout">  <div class="toolbar">    <input      txInput      placeholder="Search tickets"      aria-label="Search tickets"      [ngModel]="filters.value().search"      (ngModelChange)="filters.patch({ search: $event })"    />    <tx-multiselect      ariaLabel="Status"      placeholder="Status"      [options]="statuses"      [ngModel]="filters.value().status"      (ngModelChange)="filters.patch({ status: $event })"    />    <button      txButton      label="Reset"      severity="secondary"      [badge]="filters.changed().length || undefined"      [disabled]="filters.isInitial()"      (click)="filters.reset()"    ></button>  </div>  <tx-table ariaLabel="Tickets" dataKey="id" [value]="tickets()" [columns]="columns" /></div>

Url

With url: true the changed values also go to the address bar of this page — copy the link, or press Back to step through the earlier filters.

no query params — the initial filters

16 lines

<div class="stack">  <tx-select    class="sort"    ariaLabel="Sort"    [options]="sorts"    [ngModel]="filters.value().sort"    (ngModelChange)="filters.patch({ sort: $event, page: 1 })"  />  <tx-paginator    [totalRecords]="240"    [rows]="20"    [first]="(filters.value().page - 1) * 20"    (pageChange)="filters.patch({ page: $event.page + 1 })"  />  <code class="hint">{{ query() }}</code></div>