Overview
tng-table renders tabular data from a rows array. Define columns with tng-col: id, header, [value] (row accessor), optional width and align. Use ng-template tngCell and ng-template tngHeader for custom cell/header content. Supports client-side sorting and slot styling.
Quick example
Basic
<tng-table [rows]="rows()" rowKey="id" emptyText="No data">
<tng-col id="name" header="Name" [value]="nameValue"></tng-col>
<tng-col id="score" header="Score" align="right" [value]="scoreValue"></tng-col>
</tng-table>
import { TngTable, TngCol } from '@tailng-ui/ui/table';
rows = signal([{ id: '1', name: 'Alice', score: 92 }, ...]);
nameValue = (r: Row) => r.name;
scoreValue = (r: Row) => r.score;| Name | Score |
|---|---|
| Alice | 92 |
| Bob | 87 |
Features
Columns
tng-col: id, header, value (function or property key), width, align (left | right | center), and optional slot (header, cell) for th/td styling. Optional tngCell / tngHeader templates.
Sorting
Client-side sort via sortMode="client" and tng-sort-header; (sortChange) for server or client. rowKey for stable row tracking.
Styling
Slot styling: table, thead, th, td, tbody. emptyText when rows are empty.