angular/angular-rendering-directives

What problem does it solve?

It solves the confusion of how to render TanStack Table v9 column content in Angular without falling back to incorrect React/Vue-style flexRender function calls, ensuring correct context wiring and dependency injection.

Core Features & Use Cases

• Structural-directive rendering: Use *flexRender, *flexRenderCell, *flexRenderHeader, and *flexRenderFooter to render primitives, TemplateRef, component types, and flexRenderComponent wrappers.
• DI context tokens without prop drilling: Automatically provide TanStackTableToken, TanStackTableHeaderToken, and TanStackTableCellToken, plus injectTableContext(), injectTableHeaderContext(), and injectTableCellContext() helpers.
• Correct Angular patterns for grouped headers/footers: Use placeholder-safe rendering (e.g., @if (!header.isPlaceholder)) so grouped header rows render correctly.

Use it when building Angular datagrids where you want full control over markup while still getting TanStack Table’s rendering context, selection state, sorting state, and reusable cell/header components.

Quick Start

Use the shorthand directive *flexRenderCell="cell; let value" inside your <td> to render columnDef.cell values from a TanStack Angular table.