Blocks

Filters Panel

A card with the filter fields above a table or a list. Users pick which filters are shown and drag them into their own order; the choice is saved per panel. Below 1024px the fields fold into a "Filters" button with the number of active filters.

A block from @tectra-ng/blocks — it comes with tectra-ng, or alone: npm install @tectra-ng/blocks.

Features7

API

Theming

Basic

Wrap every field in an element with txFilterField and a filterLabel. The fields share a grid that wraps on its own; the reset button marked txFiltersActions sits at the end.

5 of 5 orders

51 lines

<tx-filters-panel ariaLabel="Order filters">  <div txFilterField="search" filterLabel="Search" [filterActive]="search() | hasFilterValue">    <tx-label subtle for="basic-search">Search</tx-label>    <tx-icon-field>      <tx-input-icon icon="search" />      <input        txInput        id="basic-search"        type="search"        placeholder="Customer"        [(ngModel)]="search"      />      <tx-input-clear />    </tx-icon-field>  </div>  <div txFilterField="status" filterLabel="Status" [filterActive]="status() | hasFilterValue">    <tx-label subtle for="basic-status">Status</tx-label>    <tx-select      inputId="basic-status"      placeholder="Any status"      showClear      [options]="statuses"      [(ngModel)]="status"    />  </div>  <div    txFilterField="channel"    filterLabel="Channel"    [filterActive]="channel() | hasFilterValue"  >    <tx-label subtle for="basic-channel">Channel</tx-label>    <tx-select      inputId="basic-channel"      placeholder="Any channel"      showClear      [options]="channels"      [(ngModel)]="channel"    />  </div>  <button    txButton    txFiltersActions    txFiltersReset    icon="filter-slash"    severity="warn"    aria-label="Clear filters"    txTooltip="Clear filters"    (click)="clear()"  ></button></tx-filters-panel><p class="note">{{ found().length }} of {{ orders.length }} orders</p>

Customizable

With a stateKey the panel gets the "Show filters" menu: tick the fields to show and drag them by the handle (or Alt + arrows) into your order. The layout is saved under that key and comes back after a reload. A field with a value (filterActive) is always shown; defaultVisible sets how many fields are shown at first.

Saved: default

71 lines

<tx-filters-panel  #panel  ariaLabel="Ticket filters"  stateKey="docs-filters-panel-tickets"  [defaultVisible]="3"  (layoutChange)="layout.set($event)">  <div txFilterField="search" filterLabel="Search" [filterActive]="search() | hasFilterValue">    <tx-label subtle for="custom-search">Search</tx-label>    <input txInput id="custom-search" placeholder="Subject" [(ngModel)]="search" />  </div>  <div txFilterField="status" filterLabel="Status" [filterActive]="status() | hasFilterValue">    <tx-label subtle for="custom-status">Status</tx-label>    <tx-multiselect      inputId="custom-status"      placeholder="Any status"      [options]="statuses"      [(ngModel)]="status"    />  </div>  <div    txFilterField="priority"    filterLabel="Priority"    [filterActive]="priority() | hasFilterValue"  >    <tx-label subtle for="custom-priority">Priority</tx-label>    <tx-select      inputId="custom-priority"      placeholder="Any priority"      showClear      [options]="priorities"      [(ngModel)]="priority"    />  </div>  <div    txFilterField="assignee"    filterLabel="Assignee"    [filterActive]="assignee() | hasFilterValue"  >    <tx-label subtle for="custom-assignee">Assignee</tx-label>    <tx-select      inputId="custom-assignee"      placeholder="Anyone"      showClear      [options]="people"      [(ngModel)]="assignee"    />  </div>  <div txFilterField="team" filterLabel="Team" [filterActive]="team() | hasFilterValue">    <tx-label subtle for="custom-team">Team</tx-label>    <tx-select      inputId="custom-team"      placeholder="Any team"      showClear      [options]="teams"      [(ngModel)]="team"    />  </div>  <div txFilterField="tag" filterLabel="Tag" [filterActive]="tag() | hasFilterValue">    <tx-label subtle for="custom-tag">Tag</tx-label>    <input txInput id="custom-tag" placeholder="billing, login…" [(ngModel)]="tag" />  </div></tx-filters-panel><div class="row">  <button txButton severity="secondary" outlined size="small" (click)="panel.reset()">    Reset layout  </button>  <span class="note"    >Saved: {{ layout() ? (layout()!.visible ?? []).join(', ') : 'default' }}</span  ></div>

Actions

Put any buttons into the end of the panel with txFiltersActions. Below 1024px a panel with two or more fields folds into a "Filters" button with the number of active filters; the fields open in a panel under it. The action marked txFiltersReset leaves the bar there and a "Clear filters" button in the panel runs it. Make the window narrower to try it.

Drafts created: 0 · panel closed

40 lines

<tx-filters-panel ariaLabel="Invoice filters" (expandedChange)="expanded.set($event)">  <div txFilterField="number" filterLabel="Number" [filterActive]="number() | hasFilterValue">    <tx-label subtle for="actions-number">Number</tx-label>    <input txInput id="actions-number" placeholder="INV-" [(ngModel)]="number" />  </div>  <div txFilterField="state" filterLabel="State" [filterActive]="state() | hasFilterValue">    <tx-label subtle for="actions-state">State</tx-label>    <tx-select      inputId="actions-state"      placeholder="Any state"      showClear      [options]="states"      [(ngModel)]="state"    />  </div>  <div txFilterField="issued" filterLabel="Issued" [filterActive]="issued() | hasFilterValue">    <tx-label subtle for="actions-issued">Issued</tx-label>    <tx-datepicker      inputId="actions-issued"      selectionMode="range"      placeholder="Any date"      showClear      [(ngModel)]="issued"    />  </div>  <button    txButton    txFiltersActions    txFiltersReset    icon="filter-slash"    severity="warn"    aria-label="Clear filters"    txTooltip="Clear filters"    (click)="clear()"  ></button>  <button txButton txFiltersActions icon="plus" (click)="created.set(created() + 1)">    New invoice  </button></tx-filters-panel><p class="note">Drafts created: {{ created() }} · panel {{ expanded() ? 'open' : 'closed' }}</p>

Mobile

On a phone the fields fold behind a "Filters" button that counts the active filters; they open in a panel under the bar, scroll inside it and close on a click outside or Escape. The reset action moves into the panel as "Clear filters". collapse="always" shows this look at any width (here in a phone-wide frame); never keeps the fields open.

58 lines

<div class="phone">  <tx-filters-panel collapse="always" ariaLabel="Task filters">    <div txFilterField="search" filterLabel="Search" [filterActive]="search() | hasFilterValue">      <tx-label subtle for="mobile-search">Search</tx-label>      <input txInput id="mobile-search" placeholder="Task name" [(ngModel)]="search" />    </div>    <div txFilterField="status" filterLabel="Status" [filterActive]="status() | hasFilterValue">      <tx-label subtle for="mobile-status">Status</tx-label>      <tx-multiselect        inputId="mobile-status"        placeholder="Any status"        [options]="statuses"        [(ngModel)]="status"      />    </div>    <div txFilterField="owner" filterLabel="Owner" [filterActive]="owner() | hasFilterValue">      <tx-label subtle for="mobile-owner">Owner</tx-label>      <tx-select        inputId="mobile-owner"        placeholder="Anyone"        showClear        [options]="people"        [(ngModel)]="owner"      />    </div>    <div      txFilterField="project"      filterLabel="Project"      [filterActive]="project() | hasFilterValue"    >      <tx-label subtle for="mobile-project">Project</tx-label>      <tx-select        inputId="mobile-project"        placeholder="Any project"        showClear        [options]="projects"        [(ngModel)]="project"      />    </div>    <button      txButton      txFiltersActions      txFiltersReset      icon="filter-slash"      severity="warn"      aria-label="Clear filters"      txTooltip="Clear filters"      (click)="clear()"    ></button>    <button      txButton      txFiltersActions      icon="plus"      aria-label="New task"      txTooltip="New task"    ></button>  </tx-filters-panel></div>

Plain

variant="plain" drops the frame, for filters inside another card, a drawer or a dialog.

Team members

People with access to the workspace

18 lines

<tx-card title="Team members" subtitle="People with access to the workspace">  <tx-filters-panel variant="plain" ariaLabel="Member filters">    <div txFilterField="name" filterLabel="Name" [filterActive]="name() | hasFilterValue">      <tx-label subtle for="plain-name">Name</tx-label>      <input txInput id="plain-name" placeholder="Name or email" [(ngModel)]="name" />    </div>    <div txFilterField="role" filterLabel="Role" [filterActive]="role() | hasFilterValue">      <tx-label subtle for="plain-role">Role</tx-label>      <tx-select        inputId="plain-role"        placeholder="Any role"        showClear        [options]="roles"        [(ngModel)]="role"      />    </div>  </tx-filters-panel></tx-card>

Busy

busy turns every field into a skeleton of its label and control while the list loads — same size, the values stay. Pass the loading state of the list; here Reload starts a short load.

19 lines

<tx-filters-panel ariaLabel="Domain filters" [busy]="loading()">  <div txFilterField="domain" filterLabel="Domain" [filterActive]="domain() | hasFilterValue">    <tx-label subtle for="busy-domain">Domain</tx-label>    <input txInput id="busy-domain" placeholder="example.com" [(ngModel)]="domain" />  </div>  <div txFilterField="zone" filterLabel="Zone" [filterActive]="zone() | hasFilterValue">    <tx-label subtle for="busy-zone">Zone</tx-label>    <tx-select      inputId="busy-zone"      placeholder="Any zone"      showClear      [options]="zones"      [(ngModel)]="zone"    />  </div>  <button txButton txFiltersActions icon="refresh" [loading]="loading()" (click)="reload()">    Reload  </button></tx-filters-panel>

Design tokens

dt changes the tokens of one panel: here a softer frame and tighter spacing. The tokens of the "Show filters" menu reach it too.

48 lines

<tx-filters-panel  ariaLabel="Article filters"  stateKey="docs-filters-panel-tokens"  [dt]="{    root: {      background: 'var(--tx-surface-ground)',      borderColor: 'transparent',      padding: '12px',    },    fields: { rowGap: '10px' },    menu: { width: '260px', rowHoverBackground: 'var(--tx-surface-hover)' },  }">  <div txFilterField="title" filterLabel="Title" [filterActive]="title() | hasFilterValue">    <tx-label subtle for="tokens-title">Title</tx-label>    <input txInput id="tokens-title" placeholder="Search titles" [(ngModel)]="title" />  </div>  <div txFilterField="author" filterLabel="Author" [filterActive]="author() | hasFilterValue">    <tx-label subtle for="tokens-author">Author</tx-label>    <tx-select      inputId="tokens-author"      placeholder="Anyone"      showClear      [options]="authors"      [(ngModel)]="author"    />  </div>  <div txFilterField="topic" filterLabel="Topic" [filterActive]="topic() | hasFilterValue">    <tx-label subtle for="tokens-topic">Topic</tx-label>    <tx-select      inputId="tokens-topic"      placeholder="Any topic"      showClear      [options]="topics"      [(ngModel)]="topic"    />  </div>  <div txFilterField="state" filterLabel="State" [filterActive]="state() | hasFilterValue">    <tx-label subtle for="tokens-state">State</tx-label>    <tx-select      inputId="tokens-state"      placeholder="Any state"      showClear      [options]="states"      [(ngModel)]="state"    />  </div></tx-filters-panel>