ng tailng

Overview

A sort header makes a table column sortable. Use tngHeader to define custom header content and place tngSortHeader on a clickable element (e.g. button). Pass [colId] so the table can track sort state. Optionally add tng-sort-icon inside the button to show ▲ / ▼ / ↕. The table sorts in client mode by default; use sortMode="server" and (sortChange) for server-side sorting.

Quick example

Sortable columns with icon
HTMLTSCSS

<tng-col id="date" header="Date" [value]="dateValue">
  <ng-template tngHeader let-colId="colId" let-header="header">
    <button type="button" class="inline-flex items-center gap-1" tngSortHeader [colId]="colId">
      <span>{{ header }}</span>
      <tng-sort-icon />
    </button>
  </ng-template>
</tng-col>
Description
Status
2026-01-08 UPI • Amazon Pay -1299 Success
2026-01-08 NEFT • Salary 65000 Success
2026-01-09 Card • Fuel -1200 Pending
2026-01-09 IMPS • Rent -15000 Failed

Building blocks

  • tng-col with [value] — column and value accessor (used for client sort).
  • ng-template tngHeader — custom header; use let-colId and let-header.
  • tngSortHeader — put on a clickable element (e.g. button); pass [colId]. Toggles sort on click (asc → desc → none).
  • tng-sort-icon — optional; place inside the sort header to show direction (▲ ▼ ↕).

The table exposes (sortChange) and sortMode ('client' | 'server').