ng tailng

Overview

tng-filter-panel is an overlay panel used with tngFilterTrigger to filter table columns. Add tng-filter-panel as a child of tng-table and place tngFilterTrigger on clickable elements (e.g. icons) in column headers. Requires TNG_TABLE token (provided by tng-table).

Quick example

Table with filter panel
HTMLTSCSS

<tng-table [rows]="rows()" rowKey="id">
  <tng-col id="customer" header="Customer" [value]="customerValue" [filter]="filterText('Search…')">
    <ng-template tngHeader let-colId="colId" let-header="header">
      <div class="flex items-center justify-between gap-2">
        <button tngSortHeader [colId]="colId">{{ header }}</button>
        <tng-icon name="bootstrapFunnel" tngFilterTrigger [colId]="colId"
          [slot]="{ panel: 'p-1 min-w-48' }"></tng-icon>
      </div>
    </ng-template>
  </tng-col>
  <!-- more columns with [filter] + tngFilterTrigger -->
  <tng-filter-panel />
</tng-table>
Asha Traders 1200paid
Blue Mart 5600pending
Coconut Co 3400overdue
Dawn Stores 950paid
Evergreen 7800pending

Filter types

Define filter behavior per column via [filter] on tng-col. Supported types:

text

Free-text search: { type: 'text', placeholder?: string }

number

Min/max range: { type: 'number' }

date

From/to range (yyyy-mm-dd): { type: 'date' }

enum

Multi-select options: { type: 'enum', options: [{ value, label }, ...] }