Data Table
Powerful table and datagrids powered by TanStack Table and spartan/ui table directives.
Default
A basic data table with client-side filtering and column visibility toggle.
0 of 5 row(s) selected
data-table-example-default.ts
Advanced Styling & Global Filter
This example demonstrates custom cell rendering with badges, colored amounts, and a global search filter across all columns.
0 of 5 row(s) selected
Page 1 of 1
data-table-example-advanced.ts
API Reference
The Data Table is a combination of TanStack Table for logic and spartan/ui Table directives for styling.
TanStack Table
The core logic is provided by @tanstack/angular-table.
| Function | Description |
|---|---|
| createAngularTable | Factory function to create the table instance with reactive state. |
| flexRenderComponent | Helper to render Angular components within table cells or headers. |
Table Directives (Helm)
Use these directives to apply spartan/ui styling to your table elements.
| Directive | Selector | Description |
|---|---|---|
| HlmTableDirective | [hlmTable] | Styles the table element. |
| HlmTHeadDirective | [hlmTHead] | Styles the table header group. |
| HlmTBodyDirective | [hlmTBody] | Styles the table body group. |
| HlmTrDirective | [hlmTr] | Styles the table row. |
| HlmThDirective | [hlmTh] | Styles the table header cell. |
| HlmTdDirective | [hlmTd] | Styles the table data cell. |