ng tailng

Overview

A filter header is a table column header that includes a filter control. Use tngHeader to define custom header content, and place tngFilterTrigger on a clickable element (e.g. icon or button). Add [filter] on tng-col to supply filter meta (text, number, date, enum). Optionally combine with tngSortHeader for sortable filter headers. The overlay panel is provided by tng-filter-panel (see Filter Panel docs).

Quick example

Sort + filter in header
HTMLTSCSS

<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] + tngHeader + tngFilterTrigger -->
<tng-filter-panel />
Asha Traders 1200 paid
Blue Mart 5600 pending
Coconut Co 3400 overdue
Dawn Stores 950 paid
Evergreen 7800 pending

Building blocks

To build a filter header you need:

  • tng-col with [filter] — defines column and filter type (text, number, date, enum).
  • ng-template tngHeader — custom header template; use let-colId and let-header.
  • tngFilterTrigger — put on the element that opens the filter (e.g. icon); pass [colId] and optionally [slot] for panel styling.
  • tng-filter-panel — one per table; renders the overlay. See Filter Panel for API and styling.
  • Optional: tngSortHeader on a button for sortable column headers.